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

1. When Google Maps
Gives 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

6. Maps in 3 Parts
Imagery Geography
Maps & Info & Routes
Data
Server Map Tiles, Geom, etc.
• User controls
Client
JavaScript Map API
• Loads Map Tiles
Browser • Markers and
annotations

7. 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

8. Rendering Map Data
Map Data: roads, boundaries, names, ...
Styles:
colors,
Zoom
Render line widths,
levels
fonts,
Tile hill shading,
visibility,
detail, ...
Map Tiles to Serve

9. 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

10. 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 π)

11. Zoom level 1 has 4 tiles
number of tiles
zoom
= 4
1
4 =4

12. 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

13. 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/

14. Map Tile Servers
1. Use a public map server:
• Open MapQuest, CloudMade, MapBox
2. Use someone else’s map server
3. Your own server
• or cloud storage

15. 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!

17. 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

19. 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

20. 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)

21. Map Server URLs
Easy to determine URL using browser debugger
Google Maps
Safari Browser
debugger

22. Constructing
Tile URLs
http://mt1.google.com/vt/lyrs=m@174227760&hl=en&
src=app&x=81&y=183&z=9&s=Ga
subdomain
column row zoom
new 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

23. Slippy Maps
• “slippy” naming convention for map tiles:
http://<sub>.domain.com/.../<zoom>/<x>/<y>.png
http://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

24. 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)

25. 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)

26. 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>

28. 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>

30. 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>

32. 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/

33. 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)

34. 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

36. Foursquare
• Leaflet on the browser
• Mapbox servers (paid)
• Mapbox “Streets” map
(based on OSM data)

37. 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

38. http://zat.com/talks/webvisions
http://flightstats.com
http://flightstats-inc.com