Webmap time controls / slider

[darrylvil]

Hi all, I was hoping someone could point me towards some resources for creating a webmap that integrates a time control /slider (like in this example https://maplibre.org/maplibre-gl-js/docs/examples/timeline-animation/). My data comes from a vector point layer, with each point having a timestamp. It's actually the movement of cattle recorded using GPS enabled collars. What I would like to do is create a map where the cattle's movements can be viewed as a timeline animation using a play button and/or slider control. I have tried and failed to get this working using leaflet and various plugins (timedimension etc)
My data is local not wms, so I would need a solution where the data can be loaded via a stored file such as .js or .geojson etc.

If anyone knows where I can start looking on maplibre that would be great :)

[HarelM]

I would start with cloude.
I think you'd need to preprocess your data into points per time window. One you do that you can create a geojson source and use setData to update it with a slider or animation so that you feed it a new time window every time.
Totally possible, but you'd need to code it, I'm not familiar with a plugin you can use to solve this.

[darrylvil]

Thanks for that. I will look up Cloude. When you say 'preprocess your data into points per time window' do you mean create some sort of grouping logic, say all points in a 30 min period, then create a new attribute that identifies each group the points belong to?

[HarelM]

Yeah something like that, because you would like to update the geojson data with a set of points, this set of points need to belong to a group.

[darrylvil]

I searched for Cloude and can’t find anything, and obviously Cloud (without an e) is a bit ubiquitous. Do you have a link?

[IvanSanchez]

Disclaimer: I'm the author of Gleo, and I currently work for a company that sells asset/fleet tracking equipment.

I'll suggest my maplibre-gleo custom layer (https://gitlab.com/IvanSanchez/maplibre-gleo), plus some Gleo symbols with the trajectorify and trailify decorators. See the trajectorify demo at https://ivansanchez.gitlab.io/gleo/repl.html , and the code for https://gitlab.com/IvanSanchez/gleo/-/blob/master/browser-demos/67-trajectory.html .

You'll have to do your own parsing and handling of the timestamps, though (which in your case should be a good thing).

[darrylvil]

Thanks Ivan, I will take a look. It's the parsing bit I'm struggling with at the moment. Either trying to find a solution that works with local vector data, or a free web service for wms that support time dimension.