Ndtyjky

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

});