Build a custom layer view using deck.gl

Important notes:

  • This sample shows experimental functionality, please read the documentation carefully before using it in a product.

This sample demonstrates how to use deck.gl to render on top of an Esri basemap. Using the techniques described in this sample, a developer can bring any existing 2D deck.gl-based visualization into an application.

This sample assumes familiarity with WebGL, custom WebGL layer views, and the deck.gl visualization library.

Using deck.gl and the ArcGIS Maps SDK for JavaScript together

The is loaded from the js.arcgis.com CDN by using <script> tags; deck.gl is primarily distributed through npm but CDN bundles are also available through unpkg.com. For this sample, we need the main "deck.gl" bundle and the two extensions "@deck.gl/geo-layers" and "@deck.gl/arcgis". The first release of deck.gl that ships with support for ArcGIS is 8.1.0.

1
2
3
4
5
    <script src="https://unpkg.com/deck.gl@8.1.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/geo-layers@8.1.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/arcgis@8.1.0/dist.min.js"></script>
    <link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.31/"></script>

We then use require() to load any needed "esri/*" module; most deck.gl functionality is available on the global deck object. The extra bits required to interface deck.gl with the are found in a module that must be loaded asynchronously using the methoddeck.loadArcGISModules().

1
2
3
4
5
6
7
8
9
10
11
    // We use require to load "esri/*" modules
    require([
      "esri/Map",
      "esri/views/MapView"
    ], (Map, MapView) => {
      // Most deck.gl features are available on the global "deck" object
      // The ArcGIS/deck.gl interface code is located in a separate module
      // that must be loaded asynchronously
      deck.loadArcGISModules().then((arcGIS) => {
        // Now we can use the arcGIS module
        ...

Using the deck.gl layer for MapView

The loaded arcGIS module exposes the arcGIS.DeckLayer class; this is an ArcGIS layer-like class that can be configured with a list of deck.gl layers and added to a MapView, for example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    const layer = new DeckLayer({
      "deck.layers": [
        new deck.GeoJsonLayer({
          ...
        }),
        new deck.ArcLayer({
          ...
        })
      ]
    });

    const mapView = new MapView({
      container: "viewDiv",
      map: new Map({
        basemap: "dark-gray-vector",
        layers: [layer]
      }),
      ...
    });

In this sample we use a single instance of TripsLayer, an animated polyline layer. It is exported by the "@deck.gl/geo-layers" module, in contrast with the majority of the other layers which are found in "@deck.gl/layers". To animate the TripsLayer we create a new instance every 50 milliseconds and set it on the DeckLayer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    const layer = new arcGIS.DeckLayer();

    setInterval(() => {
      layer.deck.layers = [
        new deck.TripsLayer({
          id: "trips",
          data: "https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/trips/trips-v7.json",
          getPath: (d) => { return d.path; },
          getTimestamps: (d) => { return d.timestamps; },
          getColor: (d) => { return (d.vendor === 0 ? [253, 128, 93] : [23, 184, 190]); },
          opacity: 1.0,
          widthMinPixels: 4,
          rounded: true,
          trailLength: 180,
          currentTime: (performance.now() % 20000) / 10,
          shadowEnabled: false
        })
      ];
    }, 50);

Known Limitations

  • The spatial reference of the MapView must be WebMercator;
  • 3D deck.gl visualizations may not render properly due to depth information not being currently handled;

Additional visualization samples and resources

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close