AN INTRODUCTION TO MAPBOX TOOLS AND SOFTWARE Matt Gregory 24 July 2013
BACKGROUND AND MOTIVATION Research involves regionalscale vegetation modeling (mapping) where every pixel is associated with a treelist From the treelist, any standlevel attribute can be calculated and mapped For technology transfer: Simple download mechanism Display attribute richness Give accuracy indications ID VEGCLASS QMD OGSI 1 6 34.23 36.23 2 10 67.72 76.23 3 8 10.34 15.23
BACKGROUND AND MOTIVATION 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...)
HISTORY OF MAPBOX (MY VERSION) Relatively young company with core of very talented developers - most projects are less than three years old Intertwined with Development Seed to provide forwardthinking 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
PRODUCTS AND SOFTWARE 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
SOFTWARE STACK AND COMPONENTS
SPECIFICATIONS - CARTOCSS 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 #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; }
SPECIFICATIONS - MBTILES 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 tiles (e.g. ocean) Easy to use in offline mode for mobile devices Format for all tilesets on MapBox hosting Restricted to Web Mercator for now
SPECIFICATIONS - UTFGRID 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 example UTFGrid tile
TILEMILL Cartographic design software using CartoCSS Many different input spatial data formats including PostGIS Export tiles to MapBox hosting, PNG, MBTiles Export CartoCSS to Mapnik XML How is it to really use?
MAPBOX CARTOGRAPHY PRODUCTS Mapbox Streets Mapbox Terrain Mapbox Satellite*
OPENSTREETMAP (OSM) id EDITOR 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
LEAFLET AND MAPBOX.JS 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
VECTOR TILES MapBox just announced a new open source vector tile format Geometries and feature attributes are packed into individual vector tiles, at which point they are no longer needed Vector tiles can then be rendered as images, GeoJSON, etc. Opens up many possibilities for rendering directly on the browser TileMill will relaunch with vector tiles at its core
OUR EARLY PROTOTYPES Two early prototypes for testing feasibility 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).
OTHER PROJECTS TO WATCH 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
RESOURCES 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)