It looks like I found the problem between the document.querySelecto
r 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
?