You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.
Skip To ContentArcGIS for DevelopersSign In Dashboard

Unsupported browser

You are using a browser that is not supported. JavaScript API works on the latest versions of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. Use one of these browsers and provide your feedback through GeoNet, the Esri Community.

  • {}
  • Firefox
  • Safari
  • undefined

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

Important notes:

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

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

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

Using and the ArcGIS API for JavaScript together

The ArcGIS API for JavaScript is loaded from the CDN by using <script> tags; is primarily distributed through NPM but CDN bundles are also available through For this sample, we need the main "" bundle and the two extensions "" and "". The first release of that ships with support for ArcGIS is 8.1.0.

    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <link rel="stylesheet" href="" />
    <script src=""></script>

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

    // We use require to load "esri/*" modules
    ], function(Map, MapView) {
      // Most features are available on the global "deck" object
      const GeoJsonLayer = deck.GeoJsonLayer;
      const ArcLayer = deck.ArcLayer;
      const TripsLayer = deck.TripsLayer;

      // The ArcGIS/ interface code is located in a separate module
      // that must be loaded asynchronously
      deck.loadArcGISModules().then(function(arcGIS) {
        // Now we can use the arcGIS module

Using the 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 layers and added to a MapView.

    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 "" module, in contrast with the majority of the other layers which are found in "". To animate the TripsLayer we create a new instance every 50 milliseconds and set it on the DeckLayer.

    const layer = new arcGIS.DeckLayer();

    setInterval(function () {
      layer.deck.layers = [
        new deck.TripsLayer({
          id: "trips",
          data: "",
          getPath: function (d) { return d.path; },
          getTimestamps: function (d) { return d.timestamps; },
          getColor: function (d) { return (d.vendor === 0 ? [253, 128, 93] : [23, 184, 190]); },
          opacity: 1.0,
          widthMinPixels: 4,
          rounded: true,
          trailLength: 180,
          currentTime: ( % 20000) / 10,
          shadowEnabled: false
    }, 50);

Known Limitations

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

Additional visualization samples and resources

Sample search results