fast map interaction without flash
DESCRIPTION
Workshop given by Tom MacWright at Where 2.0 2011 on open source tools that let you create fast, interactive maps without using old technology like Flash or proprietary solutions like Google.TRANSCRIPT
![Page 1: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/1.jpg)
Fast Map Interaction Without Flash
Tom MacWright @tmcw from MapBox @mapbox
Wednesday, April 20, 2011
![Page 2: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/2.jpg)
Solutions That Aren’t
Wednesday, April 20, 2011
![Page 3: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/3.jpg)
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
![Page 4: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/4.jpg)
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
![Page 5: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/5.jpg)
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
![Page 6: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/6.jpg)
Wednesday, April 20, 2011
![Page 7: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/7.jpg)
Wednesday, April 20, 2011
![Page 8: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/8.jpg)
WMS GetFeatureInfo
Wednesday, April 20, 2011
![Page 9: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/9.jpg)
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
![Page 10: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/10.jpg)
“Designing Around It”
• Zooming out makes points disappear?
• Clustering for performance reasons?
• Restricting panning?
Wednesday, April 20, 2011
![Page 11: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/11.jpg)
Inspiration: Google
Wednesday, April 20, 2011
![Page 12: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/12.jpg)
Wednesday, April 20, 2011
![Page 13: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/13.jpg)
Wednesday, April 20, 2011
![Page 14: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/14.jpg)
Wednesday, April 20, 2011
![Page 15: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/15.jpg)
• Awesome idea!
• Undocumented
• Only supports points
• A single type of data
Wednesday, April 20, 2011
![Page 17: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/17.jpg)
Wednesday, April 20, 2011
![Page 18: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/18.jpg)
Rasterized Tiles+
Pixel-Driven Interaction
Wednesday, April 20, 2011
![Page 19: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/19.jpg)
Wednesday, April 20, 2011
![Page 20: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/20.jpg)
Wednesday, April 20, 2011
![Page 21: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/21.jpg)
Wednesday, April 20, 2011
![Page 22: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/22.jpg)
JSON, in the nick of time!
Wednesday, April 20, 2011
![Page 23: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/23.jpg)
where am I, in this tile?
Wednesday, April 20, 2011
![Page 24: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/24.jpg)
Wednesday, April 20, 2011
![Page 25: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/25.jpg)
Wednesday, April 20, 2011
![Page 26: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/26.jpg)
letters are numbers after all
Wednesday, April 20, 2011
![Page 27: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/27.jpg)
Wednesday, April 20, 2011
![Page 28: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/28.jpg)
application-specific formatting
Wednesday, April 20, 2011
![Page 29: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/29.jpg)
Hooray!
Wednesday, April 20, 2011
![Page 30: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/30.jpg)
• One UTF-8 character per feature
• 256px / 256px tiles
• 2x2 pixel grid (users aren’t pixel-precise)
• gzip
Size Optimizations
Wednesday, April 20, 2011
![Page 31: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/31.jpg)
Upper bound
Lower bound
(256
2)2 ∗ 1kb
1024b∗ 2 = 32kb
(256
2)2 ∗ 1kb
1024b= 16kb
Wednesday, April 20, 2011
![Page 32: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/32.jpg)
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
![Page 33: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/33.jpg)
Wednesday, April 20, 2011
![Page 34: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/34.jpg)
• 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
![Page 35: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/35.jpg)
13k points
Wednesday, April 20, 2011
![Page 36: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/36.jpg)
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
![Page 37: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/37.jpg)
... 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
![Page 38: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/38.jpg)
// Bring your own JavaScriptfunction (options, data) { ... return formatted_output;}
Wednesday, April 20, 2011
![Page 39: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/39.jpg)
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
![Page 40: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/40.jpg)
“The Implementation”
Wednesday, April 20, 2011
![Page 41: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/41.jpg)
• 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
![Page 42: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/42.jpg)
Parsing: APIs
•Google Maps API v3
•OpenLayers
•Modest Maps
http://github.com/mapbox/wax
Wednesday, April 20, 2011
![Page 43: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/43.jpg)
• (let’s do it!)
Wednesday, April 20, 2011
![Page 44: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/44.jpg)
(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
![Page 45: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/45.jpg)
Making Grids:TileMill
http://tilemill.com/
Wednesday, April 20, 2011
![Page 46: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/46.jpg)
Wednesday, April 20, 2011
![Page 47: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/47.jpg)
Wednesday, April 20, 2011
![Page 48: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/48.jpg)
Using GridsTileStream, iPad, & Wax
Wednesday, April 20, 2011
![Page 49: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/49.jpg)
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
![Page 50: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/50.jpg)
• No seriously, it’s open source.
Wednesday, April 20, 2011
![Page 51: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/51.jpg)
URLS!
• http://mbtiles.org/ (read the full spec)
• http://tilemill.com/
• http://github.com/mapbox/
Wednesday, April 20, 2011
![Page 52: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/52.jpg)
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
![Page 53: Fast Map Interaction without Flash](https://reader036.vdocuments.us/reader036/viewer/2022062418/554bba56b4c9053a298b4c5e/html5/thumbnails/53.jpg)
Thanks!
@mapbox
@tmcw Tom MacWright
Wednesday, April 20, 2011