Fast Map Interaction

Without Flash
Tom MacWright @tmcw from MapBox @mapbox

Wednesday, April 20, 2011

 Solutions That Aren’t

Wednesday, April 20, 2011

 Flash is a dead end

• Hopefully this goes without saying

• Maps are especially mobile
• We don’t tolerate closed-source
components

Wednesday, April 20, 2011

 Vectors aren’t there yet
• Internet Explorer still owns 45% of the
market
• Polymaps is working on IE9
• Even bleeding-edge browsers are still in
early stages of optimization
• Passable for points, but rendering
OpenStreetMap in-browser?

Wednesday, April 20, 2011

 Polygons in-Browser
• GeoJSON is nifty but bandwidth-inefficient
• Browser APIs are weak (VML?)
• Calculating polygon collisions is code-heavy
and slow
• Simplifying polygons to speed up browsers
doesn’t cut it

Wednesday, April 20, 2011

Wednesday, April 20, 2011
Wednesday, April 20, 2011
 WMS GetFeatureInfo

Wednesday, April 20, 2011

 WMS GetFeatureInfo

• Not cacheable: requires a running web

server
• Hover interaction near-impossible
• Just as friendly and great as WMS itself

Wednesday, April 20, 2011

 “Designing Around It”

• Zooming out makes points disappear?

• Clustering for performance reasons?
• Restricting panning?

Wednesday, April 20, 2011

 Inspiration: Google

Wednesday, April 20, 2011

Wednesday, April 20, 2011
Wednesday, April 20, 2011
Wednesday, April 20, 2011
 • Awesome idea!
• Undocumented
• Only supports points
• A single type of data

Wednesday, April 20, 2011

 http://bit.ly/utfgrid

UTFGrid
Wednesday, April 20, 2011
Wednesday, April 20, 2011
 Rasterized Tiles
+
Pixel-Driven Interaction

Wednesday, April 20, 2011

Wednesday, April 20, 2011
Wednesday, April 20, 2011
Wednesday, April 20, 2011
 JSON, in the nick of time!

Wednesday, April 20, 2011

 where am I, in this tile?

Wednesday, April 20, 2011

Wednesday, April 20, 2011
Wednesday, April 20, 2011
 letters are numbers after all

Wednesday, April 20, 2011

Wednesday, April 20, 2011
 application-specific formatting

Wednesday, April 20, 2011

 Hooray!

Wednesday, April 20, 2011

 Size Optimizations

• One UTF-8 character per feature

• 256px / 256px tiles
• 2x2 pixel grid (users aren’t pixel-precise)
• gzip

Wednesday, April 20, 2011

 Lower bound

256 2 1kb
( ) ∗ = 16kb
2 1024b
Upper bound

256 2 1kb
( ) ∗ ∗ 2 = 32kb
2 1024b

Wednesday, April 20, 2011

 non-scientific survey of observed file size
(aka, thanks, gzip)

2.25

#req 1.5

0.75

0
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

in kb
Wednesday, April 20, 2011
Wednesday, April 20, 2011
 • Grid size is limited by the number of pixel
blocks, so zooming out to the US actually
can work

• The grid also works for points, and

lines too

Wednesday, April 20, 2011

 13k points

Wednesday, April 20, 2011

 Speed
• Once you have the grid, the mouse
coordinate, and the tile coordinate, there
are no loops required to find the grid
feature, if any.
• Grid computations are typically outweighed
by the time taken to display tooltips
• Once a grid is generated, it doesn’t need to
change. It could be a file sitting on S3.

Wednesday, April 20, 2011

 ... about that ‘application specific formatting’

• Designed to be usable outside of a browser

• And much more than just tooltips
• You get ‘just data’ from the server, not
HTML

Wednesday, April 20, 2011

 // Bring your own JavaScript
function (options, data) {
...
return formatted_output;
}

Wednesday, April 20, 2011

 function (options, data) {
if (options.format == 'teaser') {
return '<h1>' + data.NAME + '</h1>';
} else if (options.format == 'full') {
return '<h1>' + data.NAME + '</h1>' + data.AREA;
}
}

Wednesday, April 20, 2011

 “The Implementation”

Wednesday, April 20, 2011

 Generating: Mapnik
http://mapnik.org/

• Mapnik is everyone’s favorite world-beating

open source map renderer
• Initially we rendered the map, and then
queried a 642 grid. It was slow.
• Dane Springmeyer has been writing a grid
renderer deep in AGG which is way faster.

Wednesday, April 20, 2011

 Parsing: APIs
http://github.com/mapbox/wax

• Google Maps API v3

• OpenLayers
• Modest Maps

Wednesday, April 20, 2011

 • (let’s do it!)

Wednesday, April 20, 2011

 (sidenote: APIs)

• Grids reduce the role of mapping APIs:

their parsing task is reduced to <200 lines
• Do one thing, and do it well: provide a tiling
interface
• Thus, for our usage,
Modest Maps > OpenLayers.

Wednesday, April 20, 2011

 Making Grids:
TileMill
http://tilemill.com/

Wednesday, April 20, 2011

Wednesday, April 20, 2011
Wednesday, April 20, 2011
 Using Grids
TileStream, iPad, & Wax

Wednesday, April 20, 2011

 Or, make your own?

• Grid implementation in Mapnik core - with

bindings to nodejs and Python (LGPL &
BSD licensed)
• Grid reader implementations in Wax,
supporting Google Maps, OpenLayers, and
Modest Maps (BSD licensed)

Wednesday, April 20, 2011

 • No seriously, it’s open source.

Wednesday, April 20, 2011

 URLS!

• http://mbtiles.org/ (read the full spec)

• http://tilemill.com/
• http://github.com/mapbox/

Wednesday, April 20, 2011

 Rough Edges!

• Can’t highlight features yet

• More APIs! (except Bing, because of TOS)
• Formatter spec needs security spec -
currently relies on trust
• Contributions welcome!

Wednesday, April 20, 2011

 Thanks!
@mapbox

@tmcw Tom MacWright

Wednesday, April 20, 2011