topic Re: Deck GL layer in ArcGIS JavaScript Maps SDK Questions

Deck GL layer

MANESK — Mon, 25 Apr 2022 08:30:47 GMT

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

Re: Deck GL layer

Geodario — Tue, 26 Apr 2022 06:51:54 GMT

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!

Re: Deck GL layer

MANESK — Tue, 26 Apr 2022 07:26:26 GMT

Thanks a Geodario... You have saved me for which i have been digging for a long time... Thanks a lot.