Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Webvisions: When Google Maps gives you Lemons, Make Lemonade


Published on

Talk at WebVisions 2012. Alternatives to Google Maps. Related article at

Published in: Technology, Business
  • Be the first to comment

Webvisions: When Google Maps gives you Lemons, Make Lemonade

  1. When Google MapsGives You Lemons, Make Lemonade Wm Leler Flightstats Inc.
  2. Google Maps (the good)• 7 years old, used by 350,000 websites• Free (until recently)• Far better than what was available before• Continuously improved: • Street view, 3D buildings, traffic, routing ...• Brought map-based apps to the Internet • Enabled explosion of map mashups
  3. Google Maps (the bad)• Closed, proprietary system • no source • difficult to fix bugs or add features • Poor separation of maps from API• Generic, one-size-fits-all • Three basemaps: street, satellite, terrain • Automobile centric
  4. Google Maps (the evil)• The first one is free • Now charging heavy users • Advertising• Suppressed development of alternatives• Google owns you and controls you • V2 to V3 API bungle
  5. Maps in 3 Parts Imagery Geography Maps & Info & Routes DataServer Map Tiles, Geom, etc. • User controls Client JavaScript Map API • Loads Map TilesBrowser • Markers and annotations
  6. Sources of Map Data• Not free: Navteq, Navinfo, DigitalGlobe, SRTM, Planetary Visions, Google• OpenStreetMap, US Census TIGER• NASA/JPL, US Dept. of Agriculture• Natural Earth, CGIAR-CSI• any geographic source
  7. Rendering Map DataMap Data: roads, boundaries, names, ... Styles: colors,Zoom Render line widths,levels fonts, Tile hill shading, visibility, detail, ... Map Tiles to Serve
  8. Map Tiles• Slice up large maps into square pieces• Don’t have to download entire map into the browser• Enables interactivity, smooth scrolling • use AJAX calls to download tiles • lowers resource needs for browser and server, lowers bandwidth demands
  9. The Tao of Tiles• 256 x 256 pixels• Zoom level 0 has one tile for entire world• Longitude (x) goes from -180º to 180º• Latitude (y) goes from 85.051º to -85.051º (arctan sinh π)
  10. Zoom level 1 has 4 tiles number of tiles zoom = 4 1 4 =4
  11. Tile Explosion• City level (11) = 4,194,304 tiles• Street level (16) = 4,294,967,296 tiles• Google maps goes to level 22 = > 17 trillion tiles
  12. Subdomains• Browsers used to be limited to 2 network connections per domain. (Recent browsers raised limit as high as 6.)• To get around this limitation, map servers generally point multiple (3 or 4) subdomains at a single tile server.
  13. Map Tile Servers1. Use a public map server: • Open MapQuest, CloudMade, MapBox2. Use someone else’s map server3. Your own server • or cloud storage
  14. Open Mapquest•• OpenStreetMap, aerial, and overlay tiles• Free!• Supports high bandwidth on request • reliability is not guaranteed• Satellite imagery is seasonal!
  15. CloudMade• Has a large number of maps, or• Map Studio allows you to create your own map styles• Based on OSM data• CloudMade will host your map tiles ($) • or you can download and host yourself
  16. MapBox• TileMill allows you to create maps, using any data • not just styles• MapBox will host your tiles ($) • or you can download and host yourself• They have created a large number of maps• Can dynamically modify tiles
  17. Someone Else’s Server• Almost all map tile servers are unsecured• You are identified by the referrer header• OK for low volume use• No reliability guarantees• Just need to determine server URL • (except for Microsoft Bing maps)
  18. Map Server URLsEasy to determine URL using browser debugger Google Maps Safari Browser debugger
  19. Constructing Tile URLs src=app&x=81&y=183&z=9&s=Ga subdomain column row zoomnew L.TileLayer(http://mt{s} src=app&x={x}&y={y}&z={z}&s=Ga,{ subdomains:0123, attribution:© Google })• Leaflet plugs in the values for you
  20. Slippy Maps• “slippy” naming convention for map tiles:http://<sub><zoom>/<x>/<y>.png• Tiles can be served as normal files No need for a special tile server
  21. MapsGL (side note)• Google has introduced MapsGL, which uses WebGL to draw streets, buildings, and other features directly in a canvas• Does not use image-based map tiles• Won’t work for satellite or other imagery• Currently works only on a few browsers• (alternatively, can use GeoJSON)
  22. JavaScript Map APIs• Proprietary: • Google Maps API • Mapquest, Microsoft Bing, Nokia OVI, ...• Open: • OpenLayers - • Leaflet - • Modest Maps - • Polymaps - (SVG)
  23. Google Maps<html style="height:100%"><head><title>Google Maps Example</title><script src=""></script></head><body style="height:100%;margin:0;padding:0"> <div id="map" style="width:100%; height:100%"></div><script type="text/javascript"> var pdx = new google.maps.LatLng(45.53, -122.67); var map = new google.maps.Map( document.getElementById(map), { center: pdx, zoom: 14, mapTypeID: google.maps.MapTypeId.ROADMAP) } );</script></body></html>
  24. OpenLayers<html style="height:100%"><head><title>OpenLayers Example</title><script src=""></script></head><body style="height:100%;margin:0;padding:0"> <div id="map" style="width:100%; height:100%"></div><script type="text/javascript"> var map = new OpenLayers.Map(map); var mapnik = new OpenLayers.Layer.OSM(); map.addLayer(mapnik); var pdx = new OpenLayers.LonLat(-122.67, 45.53). transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); map.setCenter(pdx, 14);</script></body></html>
  25. Leaflet<html style="height:100%"><head> <title>Leaflet Example</title> <link rel="stylesheet" href="leaflet.css" /> <!--[if lte IE 8]><link rel="stylesheet"href="" /><![endif]--> <script type="text/javascript" src="leaflet.js"></script></head><body style="height:100%;margin:0;padding:0"><div id="map" style="height: 100%;width:100%"></div><script type="text/javascript"> var map = new L.Map(map); var tiles = new L.TileLayer(http://mt{s}{x}&y={y}&z={z}&s=,{ subdomains:0123, attribution:&copy; Google 2011 }); var pdx = new L.LatLng(45.58961, -122.592121); map.addLayer(tiles).setView(pdx, 14);</script></body></html>
  26. What should you do?• Just want to put a simple map on a web page or blog post? • Keep using Google Maps (or Bing, OVI, MapQuest, etc.), especially if you need traffic data • Use a static image of a map • Mapbox Embed (no JavaScript!) -
  27. If you want more• More Flexibility • Leaflet with Open MapQuest • CloudMade or MapBox• More volume • your hosting on cloud • open (CC) maps (or your own)
  28.• Multi-modal regional trip planner • car, bus, light rail, streetcar, trolley, commuter train, aerial tram, bicycle, walk • Open data allows customization• OpenLayers software on the browser• Open Mapquest servers, OpenStreetMap• Developing their own map
  29. Foursquare• Leaflet on the browser• Mapbox servers (paid)• Mapbox “Streets” map (based on OSM data)
  30. Flightstats• Leaflet• Amazon S3 and CloudFront servers• various open maps: • Stamen Design Terrain map • University of Heidelberg Open Map Surfer • NASA Blue Marble • our own maps