Show/hide markers depending on zoom-level

Question

I would like to show icons if the user zooms to level 7 or more and hide the markers when zoom level is 6 or lower. I've tried using the 'zoomend' property in my function like so:

var shelter1 = L.marker([55.1, 11.6], {icon: shelterIcon}).addTo(map);

    map.on('zoomend', function() {
        var currentZoom = map.getZoom();
        if(currentZoom >= 7) {
          shelter1.bindPopup("Shelter");
        }
        else {
          shelter1.hide();
        }
    });

I know that hide() is not valid. But I need something similar. Couldn't find anything in the Leaflet documentation.

To remove popup: shelter1.unbindPopup(); – TomazicM Oct 15 '17 at 09:56 — TomazicM, Oct 15 '17 at 09:56

score 22 · Accepted Answer · edited Jun 25 '18 at 17:27

22

All right. I came up with a solution using a layer:

var shelter1 = L.marker([55.08, 11.62], {icon: shelterIcon});

var shelterMarkers = new L.FeatureGroup();

shelterMarkers.addLayer(shelter1);

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

edited Jun 25 '18 at 17:27

Roberto

103
3

answered Oct 14 '17 at 21:57

Saud

711
4
10
22

This should be accepted as the answer. Thank you very much Saud. – Federico Alvarez Nov 21 '20 at 00:56

Show/hide markers depending on zoom-level

1 Answers1