0

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

  • Your zoomend handling function does not seem correct. Whenever zoom level is under 7 and zoom level changes, it is trying to remove layers even when they were removed before. And whanever zoom is 7 or greater and zoom level changes, it's adding the same layers again and again – TomazicM Nov 3 at 14:50
  • So what should my zoomend look like? I tried sth like this: map.on.document.querySelector("input[name=cf]").addEventListener('zoomend','change', function() { if (map.getZoom() <7){ map.removeLayer(job); } else if (this.checked) map.addLayer(job) else map.removeLayer(job) }); – Mariusz Krukar Nov 8 at 10:41
  • I ried also sth like this: map.on('zoomend', function() { if (map.getZoom() <6){ map.removeLayer(job); }else{ map.addLayer(job); } if (map.getZoom() <7){ //zoom level condition for Virgin Media map.removeLayer(job2); }else if (this.checked) map.addLayer(job2) else {map.removeLayer(job2) } if (map.getZoom() <8){ map.removeLayer(job3); }else{ map.addLayer(job3); } }); but layers are gone, console says nothing – Mariusz Krukar Nov 8 at 13:07
1

When trying to remove layer, you have to check if layer is currently added to the map with map.hasLayer method. When trying to add layer you have to check if layer is selected for display and if it's not currently added to the map.

Your zoomend function could then look something like this:

map.on('zoomend', function() {
  if (map.getZoom() < 7){
    if (map.hasLayer(job)) map.removeLayer(job);
    if (map.hasLayer(job2)) map.removeLayer(job2);
    if (map.hasLayer(job3)) map.removeLayer(job3);
  }
  else {
    if (document.querySelector("input[name=cf]").checked && !map.hasLayer(job)) map.addLayer(job);
    if (document.querySelector("input[name=vm]").checked && !map.hasLayer(job2)) map.addLayer(job2);
    if (document.querySelector("input[name=bt]").checked && !map.hasLayer(job3)) map.addLayer(job3);
  }
});
  • It's working. Thank you for the hint! I didn't take the map.haslayer into account. Thank you so much – Mariusz Krukar yesterday

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.