An Introduction to MapBox

March 2012 Matt Yeh

What is MapBox?

• A company• A cloud-based map

hosting service• A set of tools for

design and deployment of map tiles

MapBox & the Modern Web

MapBox & the Modern Web

• Speaks the language of modern web development– Stylesheets ( CSS-like )– Scripting ( JavaScript )– Well-defined specifications

MapBox & the Modern Web

• Shares the same goals of modern web development– Separation of concerns– Service-oriented (RESTful services)– Platform agnostic– Offline support– Well-defined specifications (JSON)– Open source

The MapBox Stack

• TileMill– Carto– MBTiles

• TileStream– TileJSON

• Wax

Carto

• Defines map tile & label styles

• easy to comprehend• Interchangeable• shareable

@water:#b2cfe2;

@forest:#cea;

@land:#fff;

Map {

background-color:@land;

}

.natural[TYPE='water'],

.water {

polygon-fill:@water;

}

.natural[TYPE='forest'] {

polygon-fill:@forest;

}

/* These are not used, but if customizing this style you may

wish to use OSM's land shapefiles. See the wiki for info:

<http://wiki.openstreetmap.org/wiki/Mapnik#World_boundaries> */

#shoreline_300[zoom<11],

#processed_p[zoom>=11] {

polygon-fill: @land;

}

MBTiles

• a well-defined specification for storing tiled map data in SQLite for immediate usage & transfer

• defines metadata & tiles

TileStream

• Asynchronous• Event-driven• Efficient memory usage• Server-side JavaScript

Serves up MBTiles

TileJSON

• a well-defined open standard for representing map metadata

• map tile REST resource locations

• interaction templates

http://localhost:8888/v2/FEMA_FloodMaps/{z}/{x}/{y}.png

Wax

• connector library for numerous JavaScript mapping services