0

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. Google tile map details dissapear when zooming out

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.

My own features don't dissapear when zooming 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 at 11:24
  • How to do this? Is it something related to this query? stackoverflow.com/questions/44422287/… – Mariusz Krukar Oct 30 at 11:30
  • Yes. How to do this? Read documentation, search internet. – TomazicM Oct 30 at 12:02
  • This is not enough help, but thank you – Mariusz Krukar Oct 30 at 12:13
  • 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 at 13:05
1

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;
}
   }
0

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.

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.