Webvisions: When Google Maps gives you Lemons, Make Lemonade

  • 8,367 views
Uploaded on

Talk at WebVisions 2012. Alternatives to Google Maps. Related article at http://www.netmagazine.com/features/top-seven-alternatives-google-maps-api

Talk at WebVisions 2012. Alternatives to Google Maps. Related article at http://www.netmagazine.com/features/top-seven-alternatives-google-maps-api

More in: Technology , Business
  • 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
8,367
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
5

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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 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. http://mt0.google.com/ http://mt1.google.com/ http://mt2.google.com/ http://mt3.google.com/
  • 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• http://open.mapquest.com/• 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 URLshttp://mt1.google.com/vt/lyrs=m@174227760&hl=en& src=app&x=81&y=183&z=9&s=Ga subdomain column row zoomnew L.TileLayer(http://mt{s}.google.com/vt/lyrs=m@174227760&hl=en& 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>.domain.com/.../<zoom>/<x>/<y>.pnghttp://otile1.mqcdn.com/tiles/1.0.0/osm/4/63/99.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 - http://openlayers.org/ • Leaflet - http://leaflet.cloudmade.com/ • Modest Maps - http://modestmaps.com/ • Polymaps - http://polymaps.org/ (SVG)
  • 23. Google Maps<html style="height:100%"><head><title>Google Maps Example</title><script src="http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false"></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="http://openlayers.org/api/OpenLayers.js"></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="leaflet.ie.css" /><![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}.google.com/vt/v=w2.106&x={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!) - http://mapbox.com/hosting/embedding/
  • 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. http://rtp.trimet.org/• 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
  • 31. http://zat.com/talks/webvisions http://flightstats.com http://flightstats-inc.com