Talk at Open Source Bridge 2012. When Google Maps Gives You Lemons, Make Lemonade. Open Source alternatives to Google Maps. Related article at http://www.netmagazine.com/features/top-seven-alternatives-google-maps-api
Boost Fertility New Invention Ups Success Rates.pdf
OpenSourceBridge2012: When Google Maps Gives You Lemons, Make Lemonade
1. When Google Maps
Gives You Lemons,
Make Lemonade
Wm Leler
Flightstats
http://www.slideshare.net/
wmleler/opensourcebridge2012
2. Audience
• This talk is about JavaScript map APIs
• Do you just want to put a simple map on a
web page or blog post?
• Use a static image of a map
• Mapbox Embed (no JavaScript!)
http://mapbox.com/hosting/embedding/
• If you need traffic info (or street view, ...)
you’re likely stuck with Google Maps
(or MapQuest, Bing, Nokia, etc.)
3. Google Maps API
• 7 years old, used by 350,000 websites
• Was free until recently
• Now charging heavy users (price drop!)
• Google will be adding advertising
• Suppressed development of alternatives
• Google owns you and controls you
• V2 to V3 API bungle
4.
5. Problems with
Google Maps API
• Closed, proprietary system - no source
• Difficult to fix bugs or add features
• Clumsy object model
• Poor separation of maps from API
• Generic, one-size-fits-all
• Three basemaps: street, satellite, terrain
• Largely automobile centric
6. Maps in 3 Movements
Map 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. What You Need
1. A JavaScript map API
2. A server to serve map tiles and geometry
• your own or other (paid or free)
3. One or more base maps (lots of choices)
• comes with server, or custom
15. Comparison
• OpenLayers is mature, very powerful,
somewhat complicated and large
• Leaflet is new but lots of committers,
excellent object model, easily extensible,
modern design, good for mobile
• Modest maps is compact, minimal
• Polymaps uses SVG, renders geometry
directly on client (no tiles)
16. Map Tiles
• Instead of downloading entire map into
the browser, slice up into square pieces
• Enables interactivity, smooth scrolling
• uses AJAX calls to download tiles
• lowers resource needs for browser and
server, lowers bandwidth demands
17. The Tao of Tiles
• Longitude (x) goes
from -180º to 180º
• Latitude (y) goes from
85.051º to -85.051º
(arctan sinh π), not 90º
• Tile is 256 x 256 pixels
• Zoom level 0 has one
tile for entire world
18. Zoom level 1 has 4 tiles
number of tiles
zoom
= 4
1
4 =4
19. 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
20. 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/
21. Tile Alternatives
(side note)
• Google’s experimental MapsGL uses
WebGL to draw streets, buildings, and
other features directly in a canvas
• Polymaps uses SVG
• GeoJSON draws geography
• Renders in browser instead of using tiles
• Bad for satellite or other imagery
• Doesn’t work on all browsers
22. 2. Map Servers
• Use a free public map server:
• MapQuest Open (Open Street Map)
• Use someone else’s map server
• Use a commercial map server
• CloudMade, MapBox
• Your own server
• or cloud storage
25. 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)
26. Map Server URLs
Easy to determine URL using browser debugger
Google Maps
Safari Browser
debugger
28. Slippy Maps
• “slippy” naming convention for map tiles:
http://otile1.mqcdn.com/tiles/1.0.0/osm/4/63/99.png
http://<sub>.domain.com/.../<zoom>/<x>/<y>.png
• Tiles can be served as normal files
No need for a special tile server
29. 3. 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
30. 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
• CloudMade also created Leaflet API
31.
32. MapBox
• TileMill allows you to create maps, using
any data (not just styles)
• Uses Mapnik, Carto, other open tools
• MapBox will host your tiles ($)
• or you can download and host yourself
• They have created a large number of maps
• Can dynamically modify tiles
33. 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
• anyone with a GPS unit
34. Hosting Your Own Tiles
• Can host as files, using Slippy map format
• Or as database, using MBTiles (SQLite)
• Host in cloud
• Or use caching proxy
• Open (CC) maps, or your own maps
35. 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 on the browser
• Open Mapquest servers, OpenStreetMap
• Developing their own map
36.
37. Foursquare
• Leaflet on the browser
• Mapbox servers (paid)
• Mapbox “Streets” map
(based on OSM data)
38. 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