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

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

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

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

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'

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

Minimize page weight via magic.

Client-side

page weight = #/elements + kb/data + ms/javascript

Client-side

magic = MapBox's UTFGrid, Canvas

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

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

Thanks!

MapBox @mapbox @dhcole @tmcw