deck.gl + Mapbox: Get Started

map.js

import {ScatterplotLayer} from '@deck.gl/layers';
import {MapboxLayer} from '@deck.gl/mapbox';
import mapboxgl from 'mapbox-gl';

// Get a mapbox API access token
mapboxgl.accessToken = '<your access token here>';

// Initialize mapbox map
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v9',
  center: [-74.50, 40],
  zoom: 9
});

// Create a mapbox-compatible deck.gl layer
const myDeckLayer = new MapboxLayer({
  id: 'my-scatterplot',
  type: ScatterplotLayer,
  data: [
    {position: [-74.5, 40], size: 10000}
  ],
  getPosition: d => d.position,
  getRadius: d => d.size,
  getColor: [255, 0, 0]
});

// Insert the layer before mapbox labels 
map.on('load', () => {
  map.addLayer(myDeckLayer, 'waterway-label');
});