Fast Map Interaction without Flash

Fast Map Interaction
Without Flash
Tom MacWright @tmcw from MapBox @mapbox

Wednesday, April 20, 2011

Solutions That Aren’t


Flash is a dead end

• Hopefully this goes without saying
• Maps are especially mobile
• We don’t tolerate closed-source
components


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?


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


WMS GetFeatureInfo


WMS GetFeatureInfo

• Not cacheable: requires a running web
server
• Hover interaction near-impossible
• Just as friendly and great as WMS itself


“Designing Around It”

• Zooming out makes points disappear?
• Clustering for performance reasons?
• Restricting panning?


Inspiration: Google


• Awesome idea!
• Undocumented
• Only supports points
• A single type of data


http://bit.ly/utfgrid

UTFGrid

Rasterized Tiles
+
Pixel-Driven Interaction


JSON, in the nick of time!


where am I, in this tile?


letters are numbers after all


application-speciﬁc formatting


Hooray!


Size Optimizations

• One UTF-8 character per feature
• 256px / 256px tiles
• 2x2 pixel grid (users aren’t pixel-precise)
• gzip


Lower bound

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

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


non-scientiﬁc survey of observed ﬁle size
(aka, thanks, gzip)

3

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

• 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


13k points


Speed
• Once you have the grid, the mouse
coordinate, and the tile coordinate, there
are no loops required to ﬁnd 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 ﬁle sitting on S3.


... about that ‘application speciﬁc formatting’

• Designed to be usable outside of a browser
• And much more than just tooltips
• You get ‘just data’ from the server, not
HTML


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


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


“The Implementation”


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.


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

• Google Maps API v3
• OpenLayers
• Modest Maps


• (let’s do it!)


(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.


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


Using Grids
TileStream, iPad, & Wax


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)


• No seriously, it’s open source.


URLS!

• http://mbtiles.org/ (read the full spec)
• http://tilemill.com/
• http://github.com/mapbox/


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!


Thanks!
@mapbox

@tmcw Tom MacWright


Fast Map Interaction without Flash

More Related Content

Similar to Fast Map Interaction without Flash (20)

More from Development Seed (17)

Recently uploaded (20)

Fast Map Interaction without Flash