Your SlideShare is downloading. ×
0
Fast Map Interaction                               Without Flash                        Tom MacWright @tmcw from MapBox @m...
Solutions That Aren’tWednesday, April 20, 2011
Flash is a dead end                    • Hopefully this goes without saying                    • Maps are especially mobil...
Vectors aren’t there yet                    • Internet Explorer still owns 45% of the                            market   ...
Polygons in-Browser                    • GeoJSON is nifty but bandwidth-inefficient                    • Browser APIs are w...
Wednesday, April 20, 2011
Wednesday, April 20, 2011
WMS GetFeatureInfoWednesday, April 20, 2011
WMS GetFeatureInfo                    • Not cacheable: requires a running web                            server           ...
“Designing Around It”                    • Zooming out makes points disappear?                    • Clustering for perform...
Inspiration: GoogleWednesday, April 20, 2011
Wednesday, April 20, 2011
Wednesday, April 20, 2011
Wednesday, April 20, 2011
• Awesome idea!                    • Undocumented                    • Only supports points                    • A single ...
http://bit.ly/utfgrid                            UTFGridWednesday, April 20, 2011
Wednesday, April 20, 2011
Rasterized Tiles                           +                Pixel-Driven InteractionWednesday, 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 allWednesday, April 20, 2011
Wednesday, April 20, 2011
application-specific formattingWednesday, April 20, 2011
Hooray!Wednesday, April 20, 2011
Size Optimizations                    • One UTF-8 character per feature                    • 256px / 256px tiles          ...
Lower bound                               256 2   1kb                             (    ) ∗       = 16kb                   ...
non-scientific survey of observed file size                                        (aka, thanks, gzip)                      ...
Wednesday, April 20, 2011
• Grid size is limited by the number of pixel                            blocks, so zooming out to the US actually        ...
13k pointsWednesday, April 20, 2011
Speed                    • Once you have the grid, the mouse                            coordinate, and the tile coordinat...
... about that ‘application specific formatting’                    • Designed to be usable outside of a browser           ...
// Bring your own JavaScript                            function (options, data) {                                ...     ...
function (options, data) {                if (options.format == teaser) {                    return <h1> + data.NAME + </h...
“The Implementation”Wednesday, April 20, 2011
Generating: Mapnik                                      http://mapnik.org/                    • Mapnik is everyone’s favor...
Parsing: APIs                              http://github.com/mapbox/wax                    •       Google Maps API v3     ...
• (let’s do it!)Wednesday, April 20, 2011
(sidenote: APIs)                    • Grids reduce the role of mapping APIs:                            their parsing task...
Making Grids:                                  TileMill                            http://tilemill.com/Wednesday, April 20...
Wednesday, April 20, 2011
Wednesday, April 20, 2011
Using Grids                 TileStream, iPad, & WaxWednesday, April 20, 2011
Or, make your own?                    • Grid implementation in Mapnik core - with                            bindings to n...
• No seriously, it’s open source.Wednesday, April 20, 2011
URLS!                    • http://mbtiles.org/ (read the full spec)                    • http://tilemill.com/             ...
Rough Edges!                    • Can’t highlight features yet                    • More APIs! (except Bing, because of TO...
Thanks!                                 @mapbox                            @tmcw Tom MacWrightWednesday, April 20, 2011
Upcoming SlideShare
Loading in...5
×

Fast Map Interaction without Flash

3,676

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,676
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
30
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Fast Map Interaction without Flash"

  1. 1. Fast Map Interaction Without Flash Tom MacWright @tmcw from MapBox @mapboxWednesday, April 20, 2011
  2. 2. Solutions That Aren’tWednesday, April 20, 2011
  3. 3. Flash is a dead end • Hopefully this goes without saying • Maps are especially mobile • We don’t tolerate closed-source componentsWednesday, April 20, 2011
  4. 4. 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
  5. 5. 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 itWednesday, April 20, 2011
  6. 6. Wednesday, April 20, 2011
  7. 7. Wednesday, April 20, 2011
  8. 8. WMS GetFeatureInfoWednesday, April 20, 2011
  9. 9. WMS GetFeatureInfo • Not cacheable: requires a running web server • Hover interaction near-impossible • Just as friendly and great as WMS itselfWednesday, April 20, 2011
  10. 10. “Designing Around It” • Zooming out makes points disappear? • Clustering for performance reasons? • Restricting panning?Wednesday, April 20, 2011
  11. 11. Inspiration: GoogleWednesday, April 20, 2011
  12. 12. Wednesday, April 20, 2011
  13. 13. Wednesday, April 20, 2011
  14. 14. Wednesday, April 20, 2011
  15. 15. • Awesome idea! • Undocumented • Only supports points • A single type of dataWednesday, April 20, 2011
  16. 16. http://bit.ly/utfgrid UTFGridWednesday, April 20, 2011
  17. 17. Wednesday, April 20, 2011
  18. 18. Rasterized Tiles + Pixel-Driven InteractionWednesday, April 20, 2011
  19. 19. Wednesday, April 20, 2011
  20. 20. Wednesday, April 20, 2011
  21. 21. Wednesday, April 20, 2011
  22. 22. JSON, in the nick of time!Wednesday, April 20, 2011
  23. 23. where am I, in this tile?Wednesday, April 20, 2011
  24. 24. Wednesday, April 20, 2011
  25. 25. Wednesday, April 20, 2011
  26. 26. letters are numbers after allWednesday, April 20, 2011
  27. 27. Wednesday, April 20, 2011
  28. 28. application-specific formattingWednesday, April 20, 2011
  29. 29. Hooray!Wednesday, April 20, 2011
  30. 30. Size Optimizations • One UTF-8 character per feature • 256px / 256px tiles • 2x2 pixel grid (users aren’t pixel-precise) • gzipWednesday, April 20, 2011
  31. 31. Lower bound 256 2 1kb ( ) ∗ = 16kb 2 1024b Upper bound 256 2 1kb ( ) ∗ ∗ 2 = 32kb 2 1024bWednesday, April 20, 2011
  32. 32. non-scientific survey of observed file 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 kbWednesday, April 20, 2011
  33. 33. Wednesday, April 20, 2011
  34. 34. • 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 tooWednesday, April 20, 2011
  35. 35. 13k pointsWednesday, April 20, 2011
  36. 36. 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
  37. 37. ... 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 HTMLWednesday, April 20, 2011
  38. 38. // Bring your own JavaScript function (options, data) { ... return formatted_output; }Wednesday, April 20, 2011
  39. 39. 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
  40. 40. “The Implementation”Wednesday, April 20, 2011
  41. 41. 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
  42. 42. Parsing: APIs http://github.com/mapbox/wax • Google Maps API v3 • OpenLayers • Modest MapsWednesday, April 20, 2011
  43. 43. • (let’s do it!)Wednesday, April 20, 2011
  44. 44. (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
  45. 45. Making Grids: TileMill http://tilemill.com/Wednesday, April 20, 2011
  46. 46. Wednesday, April 20, 2011
  47. 47. Wednesday, April 20, 2011
  48. 48. Using Grids TileStream, iPad, & WaxWednesday, April 20, 2011
  49. 49. 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
  50. 50. • No seriously, it’s open source.Wednesday, April 20, 2011
  51. 51. URLS! • http://mbtiles.org/ (read the full spec) • http://tilemill.com/ • http://github.com/mapbox/Wednesday, April 20, 2011
  52. 52. 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
  53. 53. Thanks! @mapbox @tmcw Tom MacWrightWednesday, April 20, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×