I am trying to use a custom dataset for the trips layer. When I use the demo dataset, it works as expected. If I use my own, the map shows but no trips are animated, or even shown. I am thinking it is my input data; here is a snippet:
{"path": [[41.03251538262551, -88.75811070649046], [41.5572090829644, -88.59968467178443]], "timestamps": [20, 1900]}
All of the paths are using the same timestamps, as the speed at which they move needs to be constant. My thought is it is either my input data format, or the mere size, as there are about 40k paths. Below is my code.
const DEFAULT_THEME = {
buildingColor: [74, 80, 87],
trailColor0: [253, 128, 93],
trailColor1: [23, 184, 190],
};
const INITIAL_VIEW_STATE = {
longitude: -74,
latitude: 40.72,
zoom: 13,
pitch: 45,
bearing: 0
};
const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json';
export default function App({
trips = FLOW,
trailLength = 180,
initialViewState = INITIAL_VIEW_STATE,
mapStyle = MAP_STYLE,
theme = DEFAULT_THEME,
loopLength = 1800, // unit corresponds to the timestamp in source data
animationSpeed = 1
}) {
const [time, setTime] = useState(0);
const [animation] = useState({});
const animate = () => {
setTime(t => (t + animationSpeed) % loopLength);
animation.id = window.requestAnimationFrame(animate);
};
useEffect(() => {
animation.id = window.requestAnimationFrame(animate);
return () => window.cancelAnimationFrame(animation.id);
}, [animation]);
const layers = [
new TripsLayer({
id: 'trips',
data: trips,
getPath: d => d.path,
getTimestamps: d => d.timestamps,
getColor: theme.trailColor1,
opacity: 0.3,
widthMinPixels: 10,
rounded: true,
trailLength,
currentTime: time,
shadowEnabled: false
}),
];
return (
<DeckGL
layers={layers}
effects={theme.effects}
initialViewState={initialViewState}
controller={true}
>
<StaticMap reuseMaps mapStyle={mapStyle} preventStyleDiffing={true} />
</DeckGL>
);
}
export function renderToDOM(container) {
render(<App />, container);
}