Build a custom layer view using deck.gl

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.20/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.20/"></script>

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
        ...

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]
      }),
      ...
    });

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);