Leaflet making features gone when zoom out

Question

I am wondering about an option to make all or at least majority of placemarks (depends on their internal zoom settings) invisible when zooming out.

It can be something alternative to the leaflet markerclusters:

https://github.com/Leaflet/Leaflet.markercluster

where the placemarks are clustered as we are zooming out.

My goal is to make them completely dissapeared when my zoom level drops. If you don't know what I mean you can open some tile maps i.e. OpenstreetMap or Google. Having a zoom 1 level you have got a blank map, whereas your zoom level increase, a new features are coming up.

However i don't know, why this attidude doesn't apply to the markers or another features created by an user. It refers both to Google, Google Earth, Leaflet and another interactive mapping tools.

This situation applies to the polygons too, although due to their square features, they tend to be smaller when zoom out.

Is there some way to make it gone, at least in the Leaflet map software? rise an opposite situation as below:

Features disappear from Leaflet after zooming in

Put markers on different map layers, depending on what is the zoom level when you want them to disappear. Then on zoomend event check the zoom level and add/remove required layers. — TomazicM, Oct 30 '19 at 11:24
How to do this? Is it something related to this query? https://stackoverflow.com/questions/44422287/how-to-add-markers-to-different-layers-in-leaflet-using-oneachfeature-and-geojso — Geographos, Oct 30 '19 at 11:30
If you show some effort from your side, you will likely to get help on this site, don't expect it otherwise. Policy of this site says:
When seeking help to debug/write/improve code always provide the desired behavior, a specific problem/error and the shortest code (as formatted text, not pictures) needed to reproduce it in the question body. Providing a clear problem statement and a code attempt helps others to help you. — TomazicM, Oct 30 '19 at 13:05
I understood. Sometimes I have problems with gathering/using right words to describe the problem, which also impact the search results. That's why I not present code from time to time, but it will improve for sure. — Geographos, Oct 30 '19 at 13:07

score 2 · Answer 1 · answered Oct 30 '19 at 13:17

It looks like I found a solution:

An example is based here:

https://stackoverflow.com/questions/19658564/leaflet-control-geojson-layers-by-zoom-level

and also here

Load or display differents geojson data on zoom level for leaflet maps

which leads to the live example here:

http://jsfiddle.net/expedio/kuovyw8m/

regarding to my code I would like to display the snippet below:

  map.on('zoomend', function (e) {
   zoom_based_layerchange();
  });

   function clean_map() {
     map.eachLayer(function (layer) {
    if (layer instanceof L.GeoJSON)
    {
        map.removeLayer(layer);
    }
    //console.log(layer);
});
  }

     function zoom_based_layerchange() {
//console.log(map.getZoom());

    var currentZoom = map.getZoom();
       switch (currentZoom) {
    case 8:     //refers to the zoom level: 8
        clean_map();
        sitis.addTo(map); //show "sitis" geoJSON layer
        break;
    case 12:
        //clean_map(); - removed, as I don't need to remove the layer visible at lower zoom level
        church.addTo(map);   //show "church" geoJSON layer
        break;
    default:
        // do nothing
        break;
}
   }

score 0 · Answer 2 · answered Oct 30 '19 at 16:51

Because previous query doesn't solve problem in 100% (at least one layer is visible up to 1z level and they switch between each other) I would like to present another solution, which should work, even for multiple geoJSON layers:

 map.on('zoomend', function() {
   if (map.getZoom() <6){
        map.removeLayer(job);//1st geoJSON layer
    }else{
      map.addLayer(job);
       }
    if (map.getZoom() <7){
        map.removeLayer(job2); //2nd geoJSON layer
    }else{
    map.addLayer(job2);
    }
    if (map.getZoom() <8){
        map.removeLayer(job3); //3rd geoJSON layer
    }else{
    map.addLayer(job3);
    }
 });

This is the explanation valid if we want to have every single layer being switched on at the separate zoom level (which is believed to be desired for most of us).

The shorter way can be as follows:

 map.on('zoomend', function() {
    if (map.getZoom() <6){
        map.removeLayer(job);//1st geoJSON layer
   }
   if (map.getZoom() <8){
        map.removeLayer(job2);//2nd geoJSON layer
   }
   if (map.getZoom() <10){
        map.removeLayer(job3);//3rd geoJSON layer
   }
   else {
        map.addLayer(job);
        map.addLayer(job2);
        map.addLayer(job3);
    } //all layers are to be switched on, when zoom level reach 10
   });

but all layers will appear again, when reach the max. zoom level set in the function! It can be quite awkward then.

Leaflet making features gone when zoom out

2 Answers2

Linked