Animated vector map | Hacker News Reader

Animated vector map

tangrams.github.io

112 points_wp3r31 comments

Cool! I'm curious about the traffic patterns -- for example I see them slow down towards areas of complexity and speed up on straights.

Is this just an emergent property of the number of control points on your traffic curves, or was it intentional?

It would be cool if some kind of max-flow algorithm were applied to generate realistic traffic flow speeds; a kind of baseline throughout measurement for the road system geometry without further detail.

Black screen for me. console is full of

> main thread tile load error for 19299/24641/16: Error: There was a network error[object XMLHttpRequestProgressEvent]

I think your first instinct should be to provide your browser with version# and system.

It works for me on my iPhone.

Chrome and Firefox on Windows 7

They have a HTTPS part load HTTP content, probably your browser (rightfully) blocks that.

Yep. that was it. thanks.

Tangentially, I noticed my bank doing this the other day...

Same here, Firefox 36 / Ubuntu 14.04. The error is because the page is HTTPS and it is requesting assets from an HTTP page (http://vector.mapzen.com/...) "Blocked loading mixed active content".

I'd love to see the demo the rest of you are seeing but not enough to disable this security setting. I'm also using the NoScript add-on but temporarily allowed mapzen.com which had no effect).

I'm always happy to see a site using HTTPS but people need to understand that means no more HTTP assets - this is really basic and cannot be overlooked. If you want HTTP great, stick with it and quit dabbling with HTTPS.

>I'm always happy to see a site using HTTPS but people need to understand that means no more HTTP assets - this is really basic and cannot be overlooked. If you want HTTP great, stick with it and quit dabbling with HTTPS.

It's probably a plugin of yours causing the mixed-content issues, since this post links to the HTTP version.

HTTPS Everywhere enabled? When you visit the https site, chrome refuses to load non https resources.

Yes, I'm using HTTPS Everywhere as well. That means the demo uses hard-coded http://domain.tld links instead of protocol relative //domain.tld links. Also, https://vector.mapzen.com/ works perfectly so HTTPS support is available but cannot be used due to the hard-coded HTTP links. Fortunately it's an easy fix.

At first I thought this was using real-time traffic data and I got overexcited. It still looks pretty neat nonetheless!

Running smoothly on latest Chrome on Ubuntu 14.04.

While the Tron styling is cute, I think there's some real map usability improvements here. The high contrast between buildings and roads, and seeing flows of connections between roads (albeit backwards from the actual flow direction), makes these maps really easy to interpret in a dense city environment, compared to, for example, Google maps' low contrast white and pale gray blocks (they're designed to enable typography to be more visible). I find with this visualization, I'm able to orient myself very easily in a city I know, and identify landmarks far more readily than I am on Google's busy view.

If this distinguished between footpaths, train tracks and roads, and correctly interpreted traffic flow directions, it would actually be the beginning of something pretty useful.

There's more stuff here: https://mapzen.com/tangram https://github.com/tangrams/

Cool. One minor criticism: this is in NYC, but the direction of movement looks like cars driving on the left side.

To me all the 'cars' are traveling down the middle of the streets.

It's everywhere else, too!

SF: http://tangrams.github.io/tangram-docs-assets/?procedural/tr...

London: http://tangrams.github.io/tangram-docs-assets/?procedural/tr...

For me, the traffic-pulses on two-way streets everywhere look like they're on the right side… but I think I see a few one-ways where the pulses are going the locally-correct direction.

Most of these streets are one-way.

Yes, I can see that too. I don't think the direction of the traffic is right anyway. Circulation in my street is the other way around. Either real life circulation direction is not used or base on wrong data. Great work anyway :)

This is an awesome example of a procedural city generator. Care to share the algorithm?

A little too awesome unfortunately. (It's NYC) https://goo.gl/maps/p4UKe

Sad. I was confused by "procedural" in the URL.

How interesting! I'm based in the UK and have never even been to New York, but I rather assumed that the outline of Manhattan was one of those more-or-less instantly recognisable things.

Finally found Helsinki: http://tangrams.github.io/tangram-docs-assets/?procedural/tr...

All nerdporn aside, I have to say I find this map easier to read than a standard map for seeing transport routes.

Rail is shown the same way as roads, I'm not sure if this was intended:

http://tangrams.github.io/tangram-docs-assets/?procedural/tr...

Wow this looked beautiful on my iPad for a few minutes then it got so hot I had to take the tablet off of my leg. If I left it on longer I reckon it would damage the iPad.

This worked great for me. Nice work. I like the presentation and UX dynamics a lot. Feels solid, almost no lag.

Pinch zoom would be cool, but I'm not complaining. :)

aaaaand I just lost another tab in Google Chrome. Hooray for installing Firefox Nightly.

I wonder if something like this could be made fairly easily in SVG. 3D-ish buildings would be hard, but I suppose the roads could be animated paths.

WebGL, and more generally, browser as 3d engine, fucking rules. It's going to replace your desktop, your OS, your HTML and all that other garbage you've been working with for the last 20 years. Mark my words.

Especially as now all modern browsers support WebGL.

Interesting stats: http://webglstats.com/

So websites that already have an interest in WebGL and probably therefore have an audience interested in WebGL are used to measure of WebGL adoption?

Slightly skewed sample methinks.

As all modern browsers support WebGL (now also IE with v11 and iOS with v8), the stats show which browser version on which platform supports which WebGL features/extensions.

(I am not related to that website. Afaik Google used to contribute too.)

Reply on news.ycombinator.com