OpenSourceBridge2012: When Google Maps Gives You Lemons, Make Lemonade

When Google Maps
Gives You Lemons,
Make Lemonade
Wm Leler
Flightstats
http://www.slideshare.net/
wmleler/opensourcebridge2012

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 trafﬁc info (or street view, ...)
you’re likely stuck with Google Maps
(or MapQuest, Bing, Nokia, etc.)

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

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

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

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

1. JavaScript Map APIs
• Proprietary:
• Google Maps API
• Mapquest, Microsoft Bing, Nokia, ...
• Open:
• OpenLayers - http://openlayers.org/
• Leaﬂet - http://leaﬂet.cloudmade.com/
• Modest Maps - http://modestmaps.com/
• Polymaps - http://polymaps.org/

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>

OpenLayers
<title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js">
</script>
<div id="map" style="width:100%; height:100%"></div>
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>

Leaﬂet
<title>Leaflet Example</title>
<link rel="stylesheet" href="leaflet.css" />

<script type="text/javascript" src="leaflet.js"></script>
<div id="map" style="height: 100%;width:100%"></div>
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:'© Google 2011' });
var pdx = new L.LatLng(45.58961, -122.592121);
map.addLayer(tiles).setView(pdx, 14);
</script>
</body></html>

Comparison
• OpenLayers is mature, very powerful,
somewhat complicated and large
• Leaﬂet 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)

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

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

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

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

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/

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

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

MapQuest Open
• http://developer.mapquest.com/web/
products/open/map
• OpenStreetMap, aerial, and overlay tiles
• Free!
• Supports high bandwidth on request
• Reliability is not guaranteed

Mapquest Open Tiles
• Leaﬂet templates (subdomains: 1 2 3 4):
http://otile{s}.mqcdn.com/tiles/
1.0.0/osm/{z}/{x}/{y}.jpg

http://oatile{s}.mqcdn.com/tiles/
1.0.0/sat/{z}/{x}/{y}.jpg

http://otile{s}.mqcdn.com/tiles/
1.0.0/hyb/{z}/{x}/{y}.png

Someone Else’s Server
• Almost all map tile servers are unsecured
• You are identiﬁed by the referrer header
• OK for low volume use
• No reliability guarantees
• Just need to determine server URL
• (except for Microsoft Bing maps)

Map Server URLs
Easy to determine URL using browser debugger

Google Maps

Safari Browser
debugger

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' })

• Leaﬂet plugs in the values for you

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 ﬁles
No need for a special tile server

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

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 Leaﬂet API

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

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

Hosting Your Own Tiles

• Can host as ﬁles, using Slippy map format
• Or as database, using MBTiles (SQLite)
• Host in cloud
• Or use caching proxy
• Open (CC) maps, or your own maps

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

Foursquare
• Leaﬂet on the browser
• Mapbox servers (paid)
• Mapbox “Streets” map
(based on OSM data)

Flightstats
• Leaﬂet
• Amazon S3 and CloudFront servers
• various open maps:
• Stamen Design Terrain map
• University of Heidelberg Open Map Surfer
• NASA Blue Marble
• our own maps

http://www.slideshare.net/wmleler/
opensourcebridge2012

http://ﬂightstats.com
http://ﬂightstats-inc.com

OpenSourceBridge2012: When Google Maps Gives You Lemons, Make Lemonade

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (9)

Recently uploaded

Recently uploaded (20)

OpenSourceBridge2012: When Google Maps Gives You Lemons, Make Lemonade

Editor's Notes