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

Copy of Intro to Mapbox

By Max Sirenko

Copy of Intro to Mapbox

  • 627
Loading comments...

More from Max Sirenko