Matt Gregory 24 July 2013

AN INTRODUCTION TO MAPBOX TOOLS AND

SOFTWARE

Research involves regional-scale vegetation modeling (mapping) where every pixel is associated with a “treelist”

From the treelist, any stand-level attribute can be calculated and mapped

For technology transfer: Simple download mechanism Display attribute richness Give accuracy indications

BACKGROUND AND MOTIVATION

ID VEGCLASS QMD OGSI

1 6 34.23 36.23

2 10 67.72 76.23

3 8 10.34 15.23

Required High performing web mapping Javascript library Ability to be integrated with other libraries for download tools,

dynamic graphing, etc. Straightforward workflow from raster GIS data to web tiles Ability to be self-hosted

Desired Mechanism for displaying attribute information from maps Automated cartography for multiple map attributes and years Layer merging of vegetation models and geographic reference

information (roads, streams, political boundaries, etc.) Simple layer switching between different mapped attributes or years Open source (for tinkering ...)

BACKGROUND AND MOTIVATION

Relatively young company with core of very talented developers - most projects are less than three years old

Intertwined with Development Seed – “to provide forward-thinking technology solutions to world-changing organizations”

Funding mechanism: MapBox hosting began in April 2011, different plan levels from $5/month to $500/month

Relies exclusively on OpenStreetMap (OSM) for all vector data Technology Everything(?) is open-source and available on Github Most code is written in Javascript (relying heavily on node.js) Leader in developing specifications that are being used widely

HISTORY OF MAPBOX (MY VERSION)

Specifications TileJSON MBTiles UTFGrid CartoCSS

Desktop software TileMill TileMill2 (coming …)

Cartography products MapBox Streets MapBox Terrain MapBox Satellite

Web mapbox.js (Leaflet plugin) iD editor for OSM

iOS Mapbox app Mapbox Earth app

Server technologies tilelive tilestream

PRODUCTS AND SOFTWARE

SOFTWARE STACK AND COMPONENTS

CSS-like language for separating map styling from map content (analog of HTML/CSS)

Evolution of Mapnik XML to Cascadenik stylesheets to CartoCSS stylesheets

Syntax for both vector and raster symbolizers

Allows for multiple symbolizations to be applied to same map element through “attachments”

CartoCSS editor available in TileMill and updates are shown on refresh

SPECIFICATIONS - CARTOCSS

#world { polygon-fill: #FFF; line-color:#F00; } #world[NAME='United States'] { polygon-fill:#CCC; [zoom > 5] { polygon-fill:#666; } [zoom > 6] { polygon-fill:#DDD; } } #world[NAME='Canada'], #countries { polygon-fill: #eee; line-color: #ccc; line-width: 1; .new[zoom > 5] { line-width:0.5; [NAME='United States'] { polygon-fill:#AFC; } } }

Created to solve problems with file-based storage of many tiles

Image tiles (and UTFGrids) are stored as BLOB data in SQLite database

Reduces redundancy by using views for identical ti les (e.g. ocean)

Easy to use in offline mode for mobile devices

Format for all t i lesets on MapBox hosting

Restricted to Web Mercator for now

SPECIFICATIONS - MBTILES

New way of embedding map interactivity

Geographic entities (e.g. points, polygons) are saved as per-tile unique UTF characters, which in turn relate to stored JSON data for each feature

User interaction events (hover, click, tap) trigger an x,y lookup into the UTFGrid tile, eventually returning the JSON attribute information that can be styled by mustache into HTML

Only works with vector data Visible map demo

SPECIFICATIONS - UTFGRID

example UTFGrid tile

Cartographic design software using CartoCSS

Many different input spatial data formats including PostGIS

Export t i les to MapBox hosting, PNG, MBTiles

Export CartoCSS to Mapnik XML

How is it to really use?

TILEMILL

MAPBOX CARTOGRAPHY PRODUCTS

Mapbox Streets Mapbox Terrain Mapbox Satellite*

Web-based editor for OSM

Just released as “default” editor for OSM on May 7

Funded by grant from Knight Foundation

Updates to OSM get picked up every five minutes by MapBox

Demo

OPENSTREETMAP (OSM) iD EDITOR

As of April 18, Mapbox.js became a plugin to Leaflet

Features include: GeoJSON support

for creating vector data and markers Continued support

for UTFGrid interactivity Ability to use other

Leaflet plugins Good set of

examples (although a bit buggy)

Demo with OKC tornado

LEAFLET AND MAPBOX.JS

MapBox just announced a new open source vector t i le format

Geometries and feature attributes are packed into individual vector t i les, at which point they are no longer needed

Vector t i les can then be rendered as images, GeoJSON, etc.

Opens up many possibil it ies for rendering directly on the browser

Ti leMil l wi l l relaunch with vector t i les at its core

VECTOR TILES

Two early prototypes for testing feasibil ity of using MapBox tools with our project’s data. Composting MapBox Streets (minus the polygons) with GNN

vegetation class data (demo) Testing whether UTFGrid support can translate to raster data and how

to embed smartly within MBTiles format (demo and demo)

Presumably, we’ll be “data-heavy” and “view-light”, so we’re looking into hosting our own tiles through local installation of tilestream (currently on Ubuntu).

OUR EARLY PROTOTYPES

d3.js (Data Driven Documents) Widely used JS library for many kinds of visualization Can be paired with MapBox mapping tools (ie. symbolizing UTFGrid

JSON information) d3.geo provides projection support – not constrained to Web

Mercator Neat visualizations – here and here

CartoDB Major emphasis on dynamic map views Strongly tied to PostgreSQL/PostGIS databases Sample visualization – here

OTHER PROJECTS TO WATCH

MapBox Washington Post blurb on “The New Cartographers” Blog Developers API Github repositories Mapbox.js samples REST API overview Website templates

Other blogs Mike Bostock (d3) Tom MacWright (MapBox) CartoDB Michal Migurski (was Stamen, now Code for America)

RESOURCES