2
votes

I would like to set a separate zoom level for some specified geoJSON property layer in leaflet.

I used a following code (as per the continuation of this process): Setting zoom level for layers in leaflet

   map.on('zoomend', function() {
   if (map.getZoom() <6){
        map.removeLayer(mylayer);
     }else{
    map.addLayer(mylayer);
    }
  });

which is applicable for a geoJSON layer right? When zoom is lower than 6, the layer is gone.

I would like to do the same for some feature.property included in this GeoJSON layer.

I tried something like this then:

  map.on('zoomend', function() {
      if (map.getZoom() <8){
        map.removeLayer(feature.properties.Capacity>=40);
       }else{
        map.addLayer(feature.properties.Capacity>=40);
        }
       });

but unfortunately the result is terrible. Instead of working function, all of my points are floating across the map when flipping zoom level up and down.

The console states:

Uncaught ReferenceError: feature is not defined at i. ((index):173) at i.fire (leaflet.js:5) at i._moveEnd (leaflet.js:5) at i. (leaflet.js:5) (anonymous) @ (index):173 fire @ leaflet.js:5 _moveEnd @ leaflet.js:5 (anonymous) @ leaflet.js:5 requestAnimationFrame (async) M @ leaflet.js:5 _onZoomTransitionEnd @ leaflet.js:5 setTimeout (async) _animateZoom @ leaflet.js:5 (anonymous) @ leaflet.js:5 requestAnimationFrame (async) M @ leaflet.js:5 _tryAnimatedZoom @ leaflet.js:5 setView @ leaflet.js:5 setZoomAround @ leaflet.js:5 _performZoom @ leaflet.js:5 setTimeout (async) _onWheelScroll @ leaflet.js:5 s @ leaflet.js:5 2

which I don't really understand, because the geoJSON layer has been fetched to the map.

Could you help me to solve this problem?enter image description here

Something close to the stuff, that I am looking for is here:

https://gis.stackexchange.com/questions/41928/adding-removing-leaflet-geojson-layers

https://gis.stackexchange.com/questions/239795/leaflet-remove-filtered-layer

that lead me to the 3rd attempt, unfortunately in vain

  map.on('zoomend', function() {
     if (map.getZoom() <6){
    if (feature.properties.Capacity >=40){
        map.removeLayer(feature.properties.Capacity);
     }else{
     map.addLayer(feature.properties.Capacity);
     }
   });

Another my attempts you can see under this link: https://gis.stackexchange.com/questions/341684/leaflet-setting-zoom-level-for-a-specified-geojson-layer-feature

1

1 Answers

0
votes

Looks like the animation is bugging out, just set zoomanimation to zero.

https://leafletjs.com/reference-1.6.0.html#map-zoomanimation