How to display a Deck.gl layers in MapTiler SDK JS

This example shows how to use Deck.gl layers within a MapTiler SDK JS map. The purpose of this demonstration is to exhibit the inclusion of a Deck.gl GeoJSON layer and a Deck.gl arc layer on top of your MapTiler maps. Simply use the code below the map.

In this case, Deck.gl renders within the WebGL context of the underlying base map. This advantageous approach enables occlusion between the Deck.gl layers and the labels and/or 3D features of the base map.


npm install --save @maptiler/sdk deck.gl

main.js

import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { MapboxOverlay } from '@deck.gl/mapbox';
import { ScatterplotLayer, ArcLayer } from '@deck.gl/layers';

config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';

const map = new Map({
  container: 'map', // container id
  style: MapStyle.STREETS, // style URL
  center: [-122.4, 37.79], // starting position [lng, lat]
  zoom: 15, // starting zoom
  pitch: 60
});

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

  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.403068, 37.7930503] }
        ],
        getSourcePosition: d => d.source,
        getTargetPosition: d => d.target,
        getSourceColor: [255, 0, 128],
        getTargetColor: [0, 200, 255],
        getWidth: 8
      })
    ]
  });

  map.addControl(deckOverlay);

});

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="robots" content="noindex" />
    <title>How to display a Deck.gl layers in MapTiler SDK JS | NPM example</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div id="map"></div>
    <script type="module" src="./main.js"></script>
  </body>
</html>

style.css

body {
  margin: 0;
  padding: 0;
}

#map {
  height: 100vh;
  width: 100vw;
}

<html>

<head>
  <script src="https://unpkg.com/deck.gl@9.2.5/dist.min.js"></script>

  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      height: 100vh;
      width: 100vw;
    }
  </style>
</head>

<body>
  <div id="map"></div>
</body>

<script type="text/javascript">
  maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';

  const map = new maptilersdk.Map({
    container: 'map', // container id
    style: maptilersdk.MapStyle.STREETS, // style URL
    center: [-122.4, 37.79], // starting position [lng, lat]
    zoom: 15, // starting zoom
    pitch: 60
  });

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

    const deckOverlay = new deck.MapboxOverlay({
      interleaved: true,
      layers: [
        new deck.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 deck.ArcLayer({
          id: 'deckgl-arc',
          data: [
            { source: [-122.3998664, 37.7883697], target: [-122.403068, 37.7930503] }
          ],
          getSourcePosition: d => d.source,
          getTargetPosition: d => d.target,
          getSourceColor: [255, 0, 128],
          getTargetColor: [0, 200, 255],
          getWidth: 8
        })
      ]
    });

    map.addControl(deckOverlay);

  });   
</script>

</html>

Replace YOUR_MAPTILER_API_KEY_HERE with your own API key. Make sure to secure the key before you publish it.

Learn more

Check out the Deck.gl documentation Base Maps Renderers to learn about the two types of integration between Deck.gl and a base map renderer.

How to display a Deck.gl layers in MapTiler SDK JS

main.js

index.html

style.css

Learn more

GeoJSON in Deck.gl

Buildings Deck.gl MVT layer

POIs info Deck.gl MVT layer

3D Terrain

How to display a Deck.gl layers in MapTiler SDK JS

NPM module setup

main.js

index.html

style.css

Basic JavaScript setup

Learn more

Related examples

GeoJSON in Deck.gl

Buildings Deck.gl MVT layer

POIs info Deck.gl MVT layer

3D Terrain