Keep circles when time pass

[fabripetrelli]

Hi everyone,

I'm trying to build a map with TimeDimension that has sets of Circles that changes styles and dimension on the time change. The problem is that I'm stuck, the circles that I added with

  let circle1 = L.circle([41.89, 12.49], { radius: 11000 });
  let circle2 = L.circle([43, 11], { radius: 22000 });
  ...

  const dataLayer = L.timeDimension.layer([circle1, circle2, ...]);
  dataLayer.addTo(map);

are present only in the first frame, whenever the time changes the circles disappear, I've understood that this is because whenever the time change this plugin creates another layer, but I didn't understand how to keep my circles. How can I achieve this?

Also, how can I modify a set of Leaflet Vectors on time change? I've tried to do it by deleting the vectors and then re-adding them, but it was pretty slow with one circle, so I think that this isn't the best option.

[fabripetrelli]

I've managed to do that with

  map.timeDimension.on('timeloading', (data) =>
    //  Do your stuff here

    //  For example if you wanna access the index of the time that's the path
    console.log(data.target._currentTimeIndex),
  );

P.S. I'm using React-Leaflet but this shouldn't change

[bielfrontera]

Hi @fabriziopaolopetrelli, the idea is to extend L.Timedimension.Layer class to include there the interaction between your layer and TimeDimension.

As stated in the documentation, any children class should implement _onNewTimeLoading, isReady and _update functions to react to time changes.

I have prepared a very basic example with a CircleTimeDimensionLayer. Instead of getting the radius information from an external API, it simply gets a random radius (but with a setTimeout to simulate an API call). You can check it out here: https://codepen.io/bielfrontera/pen/XWemjaK