1

Continuing the previous query:

Leaflet set zoom for clickable layers on the map

I would like to fix my zoom feature, which doesn't work correctly as per in the picture below:

enter image description here

for this purpose I used the following solution:

      document.querySelector("input[name=cf]").addEventListener('change', function() {
            if(this.checked) map.addLayer(job)
              else map.removeLayer(job)
              map.on('zoomend', function() {
              if (map.getZoom() <7){
            map.removeLayer(job);
            }
              else
            map.addLayer(job);
            })
            })

Where I tried to bound the addEventListener('change', function() { with map.on('zoomend', function() {. Console says nothing, but map stands as usual with no reaction.

The code:

    document.querySelector("input[name=cf]").addEventListener('change', function() {
            if(this.checked) map.addLayer(job)
              else map.removeLayer(job)
            })
             map.on('zoomend', function() {
              if (map.getZoom() <7){
            map.removeLayer(job);
            }
              else
            map.addLayer(job);
            })

also is not correct.

I tried also another implementation:

   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 zoom code underneath:

  const zoomJobsMap = new Map([
   [6, job],
   [7, job2],
   [8, job3],
   ]);

  map.on('zoomend', function() {
let zoom = map.getZoom();   //# get zoom value at once
for (var [zoomLimit, jobObj] of zoomJobsMap) {
    (zoom < zoomLimit)? map.removeLayer(jobObj) : map.addLayer(jobObj);

}
 })

as per the example below:

https://codereview.stackexchange.com/questions/231557/setting-zoom-for-layer-disappearance-in-leaflet/231564#231564

however here the result is even worse (picture below:), because as zoom changes, the placemarks are shifting across the map. enter image description here

Moreover the console says:

Layer.js:159 Uncaught Error: The provided object is not a Layer. at NewClass.addLayer (Layer.js:159) at NewClass. ((index):986) at NewClass.fire (Events.js:190) at NewClass._moveEnd (Map.js:1206) at NewClass. (Map.js:1654)

Is there any option to fix this zoom in temrs of the checked layer boxes? Or alternatively shall I use try to uncheck each layer at the very beginning like here:

https://stackoverflow.com/questions/17732704/how-to-make-the-checkbox-unchecked-by-default-always

Your Answer

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

Browse other questions tagged or ask your own question.