layer control and timeline out of sync

[mnortoft]

Thank you for a great timeline plugin.
I have several different layers on my map showing GeoJSON data through time with the timeline and it's working great. However, when I try to add a layer control where these layers can be switched on/off, it seems the layer control is not synchronizing with the timeline. The polygons are synchronized, but the different marker layers seem to not "listen" to the layer control and the timeline. When clicked on and then off in the layer control, the markers do not disappear from the map as they should when they are off time range, and they kind of "accumulate" on the map instead.

I tried playing around with layer/feature groupings and add them to the timecontrol, but then I just keep getting an error saying "Cannot read property 'filter' of undefined" in leaflet.timeline.min.js
and also referring to my own code line 624 (see image).

I am kind of stuck on figuring out the problem at this point. I hope someone can help.

You can see the map and the whole code here: http://prehistoricmap.com/homeland/test_icon.html

[marcelobbfonseca]

@mattbeets im trying to make something similar you did.
the diference is that i have the same GeoJSON data shown in different layers on my map with a radio button control: points as circleMarker, points as a heatMap and points as a clusterGroup.
I'm trying to add a timeline with these layer control groups.
I have the layergroup working fine and i managed to make the timeline work adding it directly to the map like in the examples:

      timelineControl.addTo(map)
      timelineControl.addTimelines(myTimeLine)
      myTimeLine.addTo(map)

But when i try to add it to a layer so i can toggle using groupedLayer i'm getting similar errors

[marcelobbfonseca]

@mattbeets i managed to solve it by adding the timeline to a LayerGroup. Notice that the diferent syntax is because im using vue-cli3.

      pointsTimeLineLayer = L.layerGroup()
      timeLineClusters = L.layerGroup()
      timelineHeatLayer = L.layerGroup()

      let baseLayers = {
        "Tile layer": tileLayer,
        "Grayscale": grayscale,
        "Streets": streets
      }
        let overlays = {
        "Timeline layers":{
          "points": pointsTimeLineLayer,
          "Clusters" : timeLineClusters,
          "HeatMap": timelineHeatLayer,          
        }
      }    
      L.control.groupedLayers(baseLayers, overlays).addTo(vm.map)

      let myTimeLine = L.timeline(geoJSONData,
        {
          pointToLayer: bookmarkMarkerOptions, // bookmarkMarkerOptions is a function
          onEachFeature: addBookmarkPopUp, // addBookmarkPopUp  is a function
          getInterval: getInterval // getInterval  is a function
        }
      )

      myTimeLine.addTo(pointsTimeLineLayer)
      timelineControl.addTo(map)
      timelineControl.addTimelines(myTimeLine)
      

i Hope this solves your issue

[mnortoft]

Thank you so much, Marcelo.
Great work. I'll try it as soon as possible :)