Interleaving deck.gl with Mapbox Layers using MapboxOverlay

Demo

Source

<html>
  <head>
    <title>Interleaving deck.gl with Mapbox Layers using MapboxOverlay</title>
    
    <script src="https://unpkg.com/deck.gl@^9.0.0-beta/dist.min.js"></script>
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet" />
  </head>

  <body style="margin:0"></body>

  <script type="text/javascript">

    const {MapboxOverlay, ScatterplotLayer, ArcLayer} = deck;

    mapboxgl.accessToken = '<mapbox-access-token>';

    const map = new mapboxgl.Map({
      container: document.body,
      style: 'mapbox://styles/mapbox/light-v9',
      center: [-122.4, 37.79],
      zoom: 15,
      pitch: 60,
      antialias: true
    });

    map.on('load', () => {
      const firstLabelLayerId = map.getStyle().layers.find(layer => layer.type === 'symbol').id;

      map.addLayer({
        'id': '3d-buildings',
        'source': 'composite',
        'source-layer': 'building',
        'filter': ['==', 'extrude', 'true'],
        'type': 'fill-extrusion',
        'minzoom': 15,
        'paint': {
            'fill-extrusion-color': '#aaa',

            // use an 'interpolate' expression to add a smooth transition effect to the
            // buildings as the user zooms in
            'fill-extrusion-height': [
                "interpolate", ["linear"], ["zoom"],
                15, 0,
                15.05, ["get", "height"]
            ],
            'fill-extrusion-base': [
                "interpolate", ["linear"], ["zoom"],
                15, 0,
                15.05, ["get", "min_height"]
            ],
            'fill-extrusion-opacity': .6
        }
      }, firstLabelLayerId);

      const deckOverlay = new MapboxOverlay({
        interleaved: true,
        layers: [
          new ScatterplotLayer({
            id: 'deckgl-circle',
            data: [
              {position: [-122.402, 37.79], color: [255, 0, 0], radius: 1000}
            ],
            getPosition: d => d.position,
            getFillColor: d => d.color,
            getRadius: d => d.radius,
            opacity: 0.3,
            beforeId: firstLabelLayerId
          }),
          new ArcLayer({
            id: 'deckgl-arc',
            data: [
              {source: [-122.3998664, 37.7883697], target: [-122.400068, 37.7900503]}
            ],
            getSourcePosition: d => d.source,
            getTargetPosition: d => d.target,
            getSourceColor: [255, 208, 0],
            getTargetColor: [0, 128, 255],
            getWidth: 8
          })
        ]
      });

      map.addControl(deckOverlay);
    });


  </script>
</html>