Skip to main content
Title edit.
Link
TomazicM
  • 27k
  • 23
  • 31
  • 42

Leaflet set zoom for clickable Displaying selected layers depending on the mapzoom in Leaflet

Source Link
Geographos
  • 3.8k
  • 4
  • 37
  • 111

Leaflet set zoom for clickable layers on the map

It looks like I found the problem between the document.querySelector and map.on('zoomend') function.

I was going to set the zoom level for switching off some layers, what has been raised here:

Leaflet making features gone when zoom out

although there is a clash with the event .addEventListener function in my code.

In the result, when I switch off the layer, it's gone only for temporary zoom level.

When I change the zoom level it appears again, even when remains switched off on the sidebar (see image).

The code looks like:

    document.querySelector("input[name=cf]").addEventListener('change', function() {
            if(this.checked) map.addLayer(job)
              else map.removeLayer(job)
            })
            
   document.querySelector("input[name=vm]").addEventListener('change', function() {
            if(this.checked) map.addLayer(job2)
              else map.removeLayer(job2)
            })
            
    document.querySelector("input[name=bt]").addEventListener('change', function() {
            if(this.checked) map.addLayer(job3)
              else map.removeLayer(job3)
            })

and the part, which is responsible for specified zoom level for dissappearance

  map.on('zoomend', function() {
if (map.getZoom() <7){
        map.removeLayer(job);
}
if (map.getZoom() <7){
        map.removeLayer(job2);
}
if (map.getZoom() <7){
        map.removeLayer(job3);
}
else {
        map.addLayer(job);
        map.addLayer(job2);
        map.addLayer(job3);
    }
  });

Is it possible to combine these code together, making the layer invisible when scrolling between all zoom levels set in the map.on('zoomend' function ?

enter image description here