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 ArcGIS API for JavaScript application.
This sample assumes familiarity with WebGL, custom WebGL layer views, and the deck.gl visualization library.
Using deck.gl and the ArcGIS API for JavaScript together
The ArcGIS API for JavaScript is loaded from the js.arcgis.com
CDN by using <script>
tags; deck.gl is primarily distributed throughNPM 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.
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 ArcGIS API for JavaScript are found in a module that must be loaded asynchronously using the methoddeck.loadArcGISModules()
.
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
.
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
.
::: esri-md class="panel trailer-1"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;