See How UTFGrid Works with Visible Map


2 min read

Visible map is a toy that lets you see all of the magic at work behind our maps and the way that we do interaction with UTFGrid. It works by spying on the workings of Wax and Modest Maps while they do the dirty work of building maps, downloading grids, and producing pretty tooltips. It’s stuff that we work hard to make invisible, but this is all of that turned inside out so that you can can see how it works.

2c98a9d20928  0l1CzpF4tA7lhYtjn

For the tech-curious, you can see how this site works from its eavesdropping on Wax functions to updating the page. It’s using Wax with no modifications, but the power of underscore.js to override some of its functionality.

We’ve talked about the UTFGrid spec at conferences like Where 2.0, while it’s made its way into all of our tools, including TileMill, TileStream, and Wax. It’s running in browsers, on iPads, and we’re even experimenting with using it for reverse-geocoding. And it’s supported in Modest Maps, Leaflet, OpenLayers, and Google Maps — in all modern browsers and Internet Explorer via Wax.

UTFGrid is cool because you can throw lots of data on a map and it will still be fast in your browser. The common approach of web maps is to simply limit the amount of data on the map, like limiting each view to 100 points or simplifying shapes so that they aren’t huge. We didn’t like making these concessions and didn’t want to ask everyone who used TileMill to make them as well. You can throw arbitrarily huge data sets at the UTFGrid spec, and while they may take a very long time to process in TileMill, the number of features that we serve in each tile of data is limited by pixel resolution. You’ll never get more than 4,096 features back, and once they’re downloaded, it’s all as fast as if there were only one feature.

But this way of making things fast — rasterization — means that Wax is doing quite a bit of magic. You aren’t hovering over things like you’re used to — there are no DOM elements for features, no polygons. It’s an elegant dupe. But, not too hard to unravel. Tinker around with visible map to see for yourself.

What we're doing.