Fast Map Interaction without Flash

  • 3,532 views
Uploaded 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.

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,532
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
21
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Fast Map Interaction Without Flash Tom MacWright @tmcw from MapBox @mapboxWednesday, April 20, 2011
  • 2. Solutions That Aren’tWednesday, April 20, 2011
  • 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. 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. 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. Wednesday, April 20, 2011
  • 7. Wednesday, April 20, 2011
  • 8. WMS GetFeatureInfoWednesday, April 20, 2011
  • 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. “Designing Around It” • Zooming out makes points disappear? • Clustering for performance reasons? • Restricting panning?Wednesday, April 20, 2011
  • 11. Inspiration: GoogleWednesday, April 20, 2011
  • 12. Wednesday, April 20, 2011
  • 13. Wednesday, April 20, 2011
  • 14. Wednesday, April 20, 2011
  • 15. • Awesome idea! • Undocumented • Only supports points • A single type of dataWednesday, April 20, 2011
  • 16. http://bit.ly/utfgrid UTFGridWednesday, April 20, 2011
  • 17. Wednesday, April 20, 2011
  • 18. Rasterized Tiles + Pixel-Driven InteractionWednesday, April 20, 2011
  • 19. Wednesday, April 20, 2011
  • 20. Wednesday, April 20, 2011
  • 21. Wednesday, April 20, 2011
  • 22. JSON, in the nick of time!Wednesday, April 20, 2011
  • 23. where am I, in this tile?Wednesday, April 20, 2011
  • 24. Wednesday, April 20, 2011
  • 25. Wednesday, April 20, 2011
  • 26. letters are numbers after allWednesday, April 20, 2011
  • 27. Wednesday, April 20, 2011
  • 28. application-specific formattingWednesday, April 20, 2011
  • 29. Hooray!Wednesday, April 20, 2011
  • 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. Lower bound 256 2 1kb ( ) ∗ = 16kb 2 1024b Upper bound 256 2 1kb ( ) ∗ ∗ 2 = 32kb 2 1024bWednesday, April 20, 2011
  • 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. Wednesday, April 20, 2011
  • 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. 13k pointsWednesday, April 20, 2011
  • 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. ... 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. // Bring your own JavaScript function (options, data) { ... return formatted_output; }Wednesday, April 20, 2011
  • 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. “The Implementation”Wednesday, April 20, 2011
  • 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. Parsing: APIs http://github.com/mapbox/wax • Google Maps API v3 • OpenLayers • Modest MapsWednesday, April 20, 2011
  • 43. • (let’s do it!)Wednesday, April 20, 2011
  • 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. Making Grids: TileMill http://tilemill.com/Wednesday, April 20, 2011
  • 46. Wednesday, April 20, 2011
  • 47. Wednesday, April 20, 2011
  • 48. Using Grids TileStream, iPad, & WaxWednesday, April 20, 2011
  • 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. • No seriously, it’s open source.Wednesday, April 20, 2011
  • 51. URLS! • http://mbtiles.org/ (read the full spec) • http://tilemill.com/ • http://github.com/mapbox/Wednesday, April 20, 2011
  • 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. Thanks! @mapbox @tmcw Tom MacWrightWednesday, April 20, 2011