Deck GL layer

MANESK · ‎04-25-2022

<html>
  <head>
    <title>Get Started with deck.gl and ArcGIS</title>
    <script src="https://unpkg.com/deck.gl@^8.1.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/arcgis@^8.1.0/dist.min.js"></script>
    <script src="https://js.arcgis.com/4.14/"></script>
    <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css"/>
  </head>

  <body style="margin:0;">
    <div id="container" style="width: 100vw; height: 100vh;"></div>
  </body>

  <script type="text/javascript">

const {loadArcGISModules, LineLayer, TripsLayer} = deck;

loadArcGISModules(['esri/Map', 'esri/views/MapView']).then(({DeckLayer, modules}) => {
  const [ArcGISMap, MapView] = modules;
  const layer = new DeckLayer({
    'deck.layers': [
	  new LineLayer({
	  data : [
      {
        from: {
          coordinates: [20.73538695099026, -28.77379854455738]
        },
        to: {
          coordinates: [20.95355739840002, -28.72483213551782]
      },
		color : [255, 0, 0]
      }
    ],
		getWidth: 10,
		getSourcePosition: (d) => d.from.coordinates,
		getTargetPosition: (d) => d.to.coordinates,
		getColor: (d) => d.color
	}),
	//setInterval(() => {
	new TripsLayer({
                data: [
				
				 {
    "vendor": 1,
    "path": [
			 [
                        20.96003363140634,
                        -28.72707669607578
                    ],
                    [
                        20.96989483139986,
                        -28.7291125310373
                    ],
                    [
                        20.98540108166015,
                        -28.73186726973713
                    ],
                    [
                        20.99892691118618,
                        -28.72838056397172
                    ],
                    [
                        21.02175809047586,
                        -28.72009019978077
                    ],
                    [
                        21.05557748582157,
                        -28.69461277912606
                    ],
                    [
                        21.06303260197974,
                        -28.67736809651364
                    ],
                    [
                        21.07917116658651,
                        -28.65096426366177
                    ],
                    [
                        21.08864399364116,
                        -28.63809531672628
                    ],
                    [
                        21.09955496710639,
                        -28.62400854128327
                    ],
                    [
                        21.11456795389249,
                        -28.61619338796074
                    ]],
    "timestamps": [45,	75,	105,	135,	165,	195]
  }
  ],
                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() % 5000) / 10,
                currentTime:100,
                shadowEnabled: false
              })
//			            }, 50)
    ]
  });

  const mapView = new MapView({
    container: 'container',
    map: new ArcGISMap({
      basemap: 'gray-vector',
      layers: [layer]
    }),
    center: [20.814, -28.653],
    zoom: 11
  });
});
  </script>
</html>

I'm trying to animate using Deck GL based on the samples provided in the forum. I 've tried to integrate the trips layer and the line layer. I'm able to visualize the line layer and trips layer based on the data . But my requirement is to animate the Trips layer by setting the Set interval . But if i try to use its throwing error.. I ve provided the code and request to fix it to overcome this error.

Geodario · ‎04-25-2022

Hello Manesk! Thank you for your interest in @deck.gl/arcgis!

I forked your pen and made some changes: https://codepen.io/dawken/pen/LYeKWyG?editors=1000

In order to animate deck.gl layers, it is recommended that you create an empty DeckLayer:

const layer = new DeckLayer();

And then start scheduling intervals; each time that the callback fires, you set the new deck.gl layers from scratch, and change the properties of those that you want to animate:

setInterval(() => {
layer.deck.layers = [
new LineLayer({ ... }),

new TripsLayer({ ..., currentTime: (performance.now() % 5000) / 10, ... })

];

}, 50);

Your original code was not working because you were calling setInterval() and assigning its result (a number, because setInterval() returns a number) as a layer in the layers array. Then Deck.GL was trying to treat that number as a layer, by setting the property "context" on it, and for some reason that resulted in the console error.

The animation technique that I just described is actually covered in detail in the official ArcGIS JS API SDK deck.gl sample. Refer to https://developers.arcgis.com/javascript/latest/sample-code/custom-lv-deckgl/ for more info.

I hope this helps! Let me know if I can do something else!

View solution in original post

Geodario · ‎04-25-2022