Assign Layers to value of timeline

[Yaajvin]

Hello, im actually working on a school project using Leaflet. I've just came across the leaflet-timeline-slider and i want to assign different layers to each value of the timeline so that the user can navigate through it. But i'm having some issues. I've created an array of imageOverlays and placed it in a featuregroup now i want to assign it to the different values in the timeline for e.g clicking on value "8 30" will display "layer_0830_1" and clicking on value "9 00" will display the second layer and so on. but while displaying other layers, the existing layers should be cleared from the map. Your help will be appreciated a lot, since i need to submit this soon!

Code: **changeFloodMap = function({value}){ var array = [layer_0830_1, layer_0900_2, layer_0930_3, layer_1000_4, layer_1030_5, layer_1100_6, layer_1130_7, layer_1200_8, layer_1230_9, layer_1300_10];

      var group = L.featureGroup(array);
      
      group.eachLayer(function(layer){
        if (layer instanceof map){
             map.removeLayer(layer);
        });
        map.addLayer(layer);
    };

    L.control.timelineSlider({
        timelineItems: ["08 30", "09 00", "09 30", "10 00", "10 30", "11 00", "11 30", "12 00", "12 30" , "13 00"],
        changeMap: changeFloodMap}).addTo(map);**

[svitkin]

Hard to tell without more details on what the layers in the array are, but in the code you posted group.eachLayer(...), shouldn't you be doing map.eachLayer(...) to remove the layers from the actual map object.

[Yaajvin]

Here is the code for the layers :

group_layers = new L.LayerGroup();

        var img_0830_1 = 'data/0830_1.png';
        var img_bounds_0830_1 = [[-20.057853477144814,57.575627574783994],[-20.034769614576177,57.60180083977471]];
        var layer_0830_1 = new L.imageOverlay(img_0830_1, img_bounds_0830_1);
        group_layers.addLayer(layer_0830_1);

        var img_0900_2 = 'data/0900_2.png';
        var img_bounds_0900_2 = [[-20.057853477144814,57.575627574783994],[-20.034769614576177,57.60180083977471]];
        var layer_0900_2 = new L.imageOverlay(img_0900_2, img_bounds_0900_2);
        group_layers.addLayer(layer_0900_2);

         group_layers.addTo(map);

I have manged to come across and idea and created a LayerGroup then added all the different layers then at last i've add the layergroup to the map since clearing all the layers remove my basemap as well.

Basemap code:

googleStreet = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        });

        map.addLayer(googleStreet);

Then i've called group_layers.clearLayers(): in my method for the timeline

changeFloodMap = function({label,value,map}){
          group_layers.clearLayers();
            
          if(value == 1){
            map.addLayer(layer_0830_1);
          }
          else if(value == 2){
            map.addLayer(layer_0900_2);
          }
          else if(value == 3){
            map.addLayer(layer_0930_3);
          }
          else if(value == 4){
            map.addLayer(layer_1000_4);
          }
          else if(value == 5){
            map.addLayer(layer_1030_5);
          }
          else if(value == 6){
            map.addLayer(layer_1100_6);
          }
          else if(value == 7){
            map.addLayer(layer_1130_7); 
          }
          else if(value == 8){
            map.addLayer(layer_1200_8);
          }
          else if(value == 9){
            map.addLayer(layer_1230_9);
          }
          else if(value == 10){
            map.addLayer(layer_1300_10);
          } 
                  
        };
        L.control.timelineSlider({
            timelineItems: ["08 30", "09 00", "09 30", "10 00", "10 30", "11 00", "11 30", "12 00", "12 30" , "13 00"],
            changeMap: changeFloodMap}).addTo(map);

I can navigate through the layers using the timeline, but i cannot go back, because i think the layers are not being cleared.