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

Directions

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

Geocoding

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

Maps

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

Analysis

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

Infrastructure
 

 

 

 

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>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'>
</div>
<script>
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
    // https://gist.github.com/ryanbaumann/a7d970386ce59d11c16278b90dde094d
    map.addSource("museumData", {
        'type': 'geojson',
        'data': 'https://www.mapbox.com/mapbox-gl-js/assets/data/indoor-3d-map.geojson'
    });

    map.addLayer({
        'id': 'room-extrusion',
        'type': 'fill-extrusion',
        'source': 'museumData',
        'paint': {
            // See the Mapbox Style Spec for details on property functions
            // https://www.mapbox.com/mapbox-gl-style-spec/#types-function
            '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
        }
    });
});
</script>

</body>
</html>

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

USGS API

JSON

VT

MB Style JSON

GL Map Canvas

WebGL

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

JSON

SimpleStats.js Turf.js

JSON

MB Style JSON

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

Intro to Mapbox

By Max Sirenko

Intro to Mapbox

  • 914
Loading comments...

More from Max Sirenko