fast map interaction without flash
Post on 08-May-2015
3.656 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
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
• One UTF-8 character per feature
• 256px / 256px tiles
• 2x2 pixel grid (users aren’t pixel-precise)
• gzip
Size Optimizations
Wednesday, April 20, 2011
Upper bound
Lower bound
(256
2)2 ∗ 1kb
1024b∗ 2 = 32kb
(256
2)2 ∗ 1kb
1024b= 16kb
Wednesday, April 20, 2011
0
0.75
1.5
2.25
3
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
non-scientific survey of observed file size(aka, thanks, gzip)
in kb
#req
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 JavaScriptfunction (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
• 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.
Generating: Mapnikhttp://mapnik.org/
Wednesday, April 20, 2011
Parsing: APIs
•Google Maps API v3
•OpenLayers
•Modest Maps
http://github.com/mapbox/wax
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 GridsTileStream, 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
top related