An Open Web Mapping Toolbox
Dave Cole & Tom MacWright
from MapBox
What kind of web maps can you make?
A base map
Or tiled overlays
Or tiled overlays
With client features
Process:
1. Sourcing data
Where do you find reliable open data?
2. Processing data
Adding geo data, projections, summarization

3. Design
visualizing the data; telling a story
4. Map distribution
rendering → serving tiles → interfaces on web & mobile
Where to find open data:
OpenStreetMap
openstreetmap.org
US Census
census.gov/
geo/www/tiger
Local government open data

Natural Earth
naturalearthdata.com
Data you create
Like a spreadsheet or list of addresses
Processing data:
Tools
QGIS, ORG / GDAL, PostGIS (CartoDB), scripting (Python)
Formats
shp, geojson, kml, geotiff, csv
Adding geographic data
Geocoding
55 4th Street, San Francisco, CA 94103 →
{
lng: -122.404883,
lat: 37.785034
}
Geocoding
nominatim.
openstreetmap.org
geocoder.us
geonames.org
Joining geo data
Projections

Projections
Converting a 3d globe to a flat map
Spherical mercator

Albers equal area

Summarization
Viewing data in aggregate
Pivot tables
Aggregate records of data on an attribute
Pivot tables

Pivot tables

Points in areas

Nearest neighbors

Gridding

Designing the map
TileMill + Carto

Color variables
/* ---- PALETTE ---- */
@motorway: #90BFE0; /* #90BFE0 */
@trunk: #FFFABB;
@primary: @trunk;
@secondary: @trunk;
@road: #bbb;
@track: @road;
Conditionals, attachments, functions, zoom levels
/* ---- ROAD COLORS ---- */
.highway[TYPE='motorway'] {
.line[zoom>=0] {
line-color:
spin(darken(@motorway,36),-10);
line-cap:round;
line-join:round;
}
.fill[zoom>=10] {
line-color:@motorway;
line-cap:round;
line-join:round;
}
}
Tiled overlays
When design and scale matter
Show millions of points precisely without sacrificing speed
Interactivity

MBTiles

MBTiles

The Client Side
putting web maps on web pages
generally Javascript libraries that deal in images
lots of options:
OpenLayers
established, monolithic, 'hefty'
920KB
= 9.5 jQueries
= every deprecated 90s protocol
So it's overkill for most humans, but 2.12 will be sweet
Leaflet
OpenLayers post-web renassiance & workout time
Modest Maps
nothing but tiles: wafer thin & light
'Theme'
open source libraries > their © equivalents
// The world-famous
// Google Maps API
new google.maps.Map($('map')[0], {
zoom: 8,
center: new google.maps.LatLng(
-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Leaflet with MapBox Streets
var mylayer = 'http://a.tiles.mapbox.com/v3/tmcw.map-rnesfyru';
var map = new L.Map('map', {
center: new L.LatLng(-34.397, 150.644),
zoom: 8,
layers: [new L.TileLayer(mylayer + '/{z}/{x}/{y}.png')]
});

'red dot fever'
// Making a marker in Google Maps
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-34.397, 150.644),
map: map
});
// Making a marker in Leaflet
map.addLayer(new L.Marker(new L.LatLng(-34.397, 150.644)));
Performance
Multiple kinds.
Client-side

Client-side
Minimize page weight via magic.
Client-side
page weight = #/elements + kb/data + ms/javascript
Client-side
magic = MapBox's UTFGrid, Canvas
Server-side

Server-side
Maximize clients × (maps/sec)
Server-side
Cache, optimize, distribute
Server-side
TileMill renders maps - then 'just' distribute tiles
Server-side
Never WMS again; tiles are cacheable and distributable
The future

The future
vectors - first on mobile
The future
vectors - first on mobile & driven by data improvements
The future
mix & match components
The future
mix & match components → you don't need Google