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

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

 

Appendix

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

Games, VR, and beyond

The Mapbox Unity SDK launches in Q1 2017

@mapbox  @ryanbaumann

ryan.baumann@mapbox.com

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 https://www.meetup.com/EnterpriseGPU/events/235658974/?a=socialmedia

  • 1,022
Loading comments...

More from Max Sirenko