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
![](design_bg.png)
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
![](img/dc-geodata.png)
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
![](img/projection_tween.gif)
Projections
Converting a 3d globe to a flat map
Spherical mercator
![](img/mercator.png)
Albers equal area
![](img/albers.png)
Summarization
Viewing data in aggregate
Pivot tables
Aggregate records of data on an attribute
Pivot tables
![](img/unsummed.png)
Pivot tables
![](img/summed.png)
Points in areas
![](img/points-in-poly.png)
Nearest neighbors
![](img/nearest.png)
Gridding
![](img/gridded.png)
Designing the map
TileMill + Carto
![](img/carto.png)
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
![](img/debt.png)
MBTiles
![](img/mbtiles.png)
MBTiles
![](img/inside-mbtiles.png)
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')]
});
![](img/dotties.gif)
'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
![](img/netbook.png)
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
![](img/gaming_rig.png)
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
![](img/future.png)
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