I am trying to render a specific path on deck gl map, but every time, I fail to set the loop correctly.
Either loop is short and the trip stops in the middle of the road, or the loop is too long and the trip makes ugly straight line from the last coordinate to the first and starts the drawing again.
I need the trip to stop at the last coordinate and smoothly start again.
const [animation] = useState({});
const [time, setTime] = useState(0);
const [loopLength, setLoopLength] = useState(0);
const [startTime, setStartTime] = useState(Date.now());
// update loop length and render layers when routes change (when api returns a response)
useEffect(() => {
reset();
if (routes.length) {
const maxRoute = max(routes, ({ timestamps }) => max(timestamps));
setLoopLength(maxRoute);
// setLoopLength(10000);
setTime(0);
setStartTime(Date.now());
}
}, [routes]);
//
useEffect(() => {
if (routes.length) {
animate();
}
}, [startTime]);
// start animation
const animate = () => {
window.cancelAnimationFrame(animation.id);
const timestamp = (Date.now() - startTime) / 1000;
const loopTime = loopLength / SPEED; // how many units is whole loop
const time = ((timestamp % loopTime) / loopTime) * loopLength;
setTime(time);
animation.id = window.requestAnimationFrame(animate);
};
// method for rendering layers
const renderLayers = () => {
return [
new TripsLayer({
id: "trips",
data: routes,
getPath: (d) => d.routes,
getTimestamps: (d) => d.timestamps,
getColor: () => DEFAULT_THEME.trailColor0,
opacity: 1,
widthMinPixels: 1,
widthScale: 0.5,
rounded: true,
trailLength: 1000,
currentTime: time,
}),
];
};
Docs : https://deck.gl/docs/api-reference/geo-layers/trips-layer
