Mapbox 101 - Enterprise Kickoff

May 22, 2017

Mapbox = maps, data, and analysis

We handle the geo stuff

so you can build your app

What Mapbox looks like

Geospatial building blocks

Our APIs and libraries integrate location into any mobile or web app


Worldwide driving, walking, and cycling routes, with turn-by-turn directions

Developer Tools

Use Mobile SDKs and JavaScript APIs to bring your map and data online


Convert between addresses and geographic coordinates, with type-ahead search


Choose a map style, or completely customize your own map and data


Lightning fast geospatial analysis on the map with Turf.js

Curated Data

Carefully curated streets, places, terrain, and satellite imagery, updated live

Enterprise scale & security











Fast, stable, and highly-available

Continents Countries Isolated Regions Edge Servers
5 11 9 60+
  • Half a billion monthly users
  • 100 million miles of telem per day 
  • 10 AWS Regions
  • 5 Continents 
  • Encryption
  • Two-factor auth
  • DDOS mitigation
  • Bug bounty program

Why use gpu's for maps?

Yesterday's Maps

Continents Countries Isolated Regions Edge Servers
5 11 9 60+
  • Raster data (png tiles)
  • Fixed style (carto CSS or similar)
  • Pre-render on server
  • Data are overlays on top of images 

Today's Maps

  • Vector Data (vector tiles)
  • Flexible style (style JSON)
  • Client-rendered (Open/Web GL)
  • Data are layers rendered in the map 

Vector tiles == Fast maps

Mapbox + Microstrategy


Current 3 year, 3 month term through 8/31/20:

  • Commercial application license - map views
  • Temporary geocoding
  • Enterprise Customer success
  • Global administrative polygons


Looking forward:

  • Permanent geocoding
  • Mobile SDKs



Mapbox Vector Tile Spec

An open standard to encode data for maps on the web.

What Vector Tiles mean:

    1. Your map is your data.

    2. Clients style vector data on-the-fly.

    3. 60FPS rendering with WebGL and OpenGL.

Creating Vector Tiles

Tons of open tools to help you create VT's

Client map SDK's

Drawing with GL - without writing shaders with Mapbox GL JS.

<!DOCTYPE html>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src=''></script>
    <link href='' rel='stylesheet' />
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }

<div id='map'>
mapboxgl.accessToken = 'pk.eyJ1IjoicnNiYXVtYW5uIiwiYSI6IjdiOWEzZGIyMGNkOGY3NWQ4ZTBhN2Y5ZGU2Mzg2NDY2In0.jycgv7qwF8MMIWt4cT0RaQ';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-87.61694, 41.86625],
    zoom: 15.99,
    pitch: 40,
    bearing: 20

map.on('load', function() {

    // Geojson Data source used in vector tiles, documented at
    map.addSource("museumData", {
        'type': 'geojson',
        'data': ''

        'id': 'room-extrusion',
        'type': 'fill-extrusion',
        'source': 'museumData',
        'paint': {
            // See the Mapbox Style Spec for details on property functions
            'fill-extrusion-color': {
                // Get the fill-extrusion-color from the source 'color' property.
                'property': 'color',
                'type': 'identity'
            'fill-extrusion-height': {
                // Get fill-extrusion-height from the source 'height' property.
                'property': 'height',
                'type': 'identity'
            'fill-extrusion-base': {
                // Get fill-extrusion-base from the source 'base_height' property.
                'property': 'base_height',
                'type': 'identity'
            // Make extrusions slightly opaque for see through indoor walls.
            'fill-extrusion-opacity': 0.5


Your data controls your map

Client side WebGL rendering with GL Data-Driven Styles

'fill-extrusion-height' : {
   "type": "exponential",  //Interpolate between stops
   "property" : "pop_density",  //use `pop_density` data to style extrusion heights
   "stops" : [[0, 0], [10000, 100]]  //scale height from 0->100 for pop_density 0->10,000

Create and Render on the fly





GL Map Canvas


Your map is your query

var Features = map.querySourceFeatures('nyc-complaints', {
            sourceLayer: 'points',
            filter: ['all', ['in', 'type', ['Noise','Food Establishment']],
                            ['>=', 'count', 1]]

Client-side geospatial analytics

Query Source Features


SimpleStats.js Turf.js



Web GL

GL Canvas Heatmap

60FPS animation

myRunInterval = {geojson}  //A geojson source to annimate

function annimate() { map.getSource('my-run').setData(myRunInterval); }

window.setInterval(annimate, 50); //Annimate every 50ms

Scale to billions of points

Vector Tiles for data,  GL for rendering, tile-reduce for analytics

Vector tiles + analytics

Games, VR, and beyond

The Mapbox Unity SDK launches in Q1 2017

@mapbox  @ryanbaumann

Show us what you build!

Server gpu

Client gpu

Mapbox / Microstrategy kickoff 5/22/2017

By Max Sirenko

Mapbox / Microstrategy kickoff 5/22/2017

MapD & Mapbox "GPU for geo data" meetup on December 8, 2016

  • 1,022
Loading comments...

More from Max Sirenko