CodePen Embed - TripsLayer in MapView

Live
​x
 
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the custom-lv-deckgl sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/sample-code/custom-lv-deckgl/index.html
  -->
<title>Render a deck.gl layer with a custom layer view (2D) - 4.15</title>
​
    <script src="https://unpkg.com/deck.gl@8.1.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/layers@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.15/esri/themes/light/main.css"/>
    <script src="https://js.arcgis.com/4.15/"></script>
​
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
​
    <script>
      // We use the module we just defined, together with the other "standard" ArcGIS modules
      require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
        const TripsLayer = deck.TripsLayer;
​
        deck.loadArcGISModules().then(function({ DeckLayer }) {
          const layer = new DeckLayer({
            "deck.layers": []
          });
          
          setInterval(() => {
            layer.deck.layers = [
              new TripsLayer({
                id: 'trips',
                data: "https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/trips/trips-v7.json",
                getPath: d => d.path,
                getTimestamps: d => d.timestamps,
                getColor: d => (d.vendor === 0 ? [253, 128, 93] : [23, 184, 190]),
                opacity: 1.0,
                widthMinPixels: 4,
                rounded: true,
                trailLength: 180,
                currentTime: (performance.now() % 10000) / 10,
                shadowEnabled: false
              })
            ];
          }, 50);
​
          // In the ArcGIS API for JavaScript the MapView is responsible
          // for displaying a Map, which usually contains at least a basemap.
          const mapView = new MapView({
            container: "viewDiv",
            map: new Map({
              basemap: "dark-gray-vector",
              layers: [layer]
            }),
            center: [-74, 40.72],
            zoom: 14
          });
        });
      });
    </script>
  </head>
​
  <body>
    <div id="viewDiv"></div>
  </body>
</html>
​
This Pen is owned by Envato Tuts+ on CodePen. It is a fork of this Pen.
See more by @tutsplus on CodePen
External CSS

This Pen doesn't use any external CSS resources.
External JavaScript

This Pen doesn't use any external JavaScript resources.