Pfthb

How can I enable animation of TripsLayer without react? TripsLayer example uses React and I really don't know, how to convert it to pure js. Please look at "animate" function in the code below. I tried to update state of layer but it doesn't work (there is no animation of TripsLayer). I don't know, where should I assign "time" variable.

Demo of TripsLayer: https://deck.gl/#/examples/custom-layers/trip-routes

React version my code: https://github.com/uber/deck.gl/blob/master/examples/website/trips/app.js

Docs for TripsLayer: https://github.com/uber/deck.gl/tree/master/modules/experimental-layers/src/trips-layer

My code:

import MapboxLayer from '@deck.gl/mapbox';
import TripsLayer from '@deck.gl/experimental-layers';
import mapboxgl from 'mapbox-gl';

class App

 constructor()
 
 this.stateInfo = time: 600 ;
 

 get state()
 
 return this.stateInfo;
 

 animate() 
 var loopLength = 18000; // unit corresponds to the timestamp in source data
 var animationSpeed = 30; // unit time per second

 const timestamp = Date.now() / 1000;
 const loopTime = loopLength / animationSpeed;

 var time = Math.round(((timestamp % loopTime) / loopTime) * loopLength);

 // HOW SHOULD I USE time VARIABLE???

 window.requestAnimationFrame(this.animate.bind(this)); 
 


var obido = new App();

var tripsLayerObido = new TripsLayer(
 id: 'trips',
 data: 'trips/tripsKR.json',
 getPath: d => d.segments,
 getColor: d => (d.vendor === 0 ? [253, 128, 93] : [23, 184, 190]),
 opacity: 0.6,
 strokeWidth: 30,
 trailLength: 180,
 currentTime: obido.state.time
);

const LIGHT_SETTINGS = 
 lightsPosition: [-74.05, 40.7, 8000, -73.5, 41, 5000],
 ambientRatio: 0.05,
 diffuseRatio: 0.6,
 specularRatio: 0.8,
 lightsStrength: [2.0, 0.0, 0.0, 0.0],
 numberOfLights: 2
;

export const INITIAL_VIEW_STATE = 
 longitude: 19.93,
 latitude: 50.03,
 zoom: 12.8,
 maxZoom: 19,
 pitch: 60,
 bearing: 0
;


mapboxgl.accessToken = "XXX";
const map = new mapboxgl.Map(
 container: 'app',
 style: 'mapbox://styles/elninopl/cjnlge6rl094w2so70l1cf8y5',
 center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
 zoom: INITIAL_VIEW_STATE.zoom,
 pitch: INITIAL_VIEW_STATE.pitch,
 layers: [tripsLayerObido]
);

map.on('load', () => 
 obido.animate(0);
);