Leaflet layers on different zoom levels. How?

Question

I've added a polygon layer and a point layer to my leaflet map.

I would like the points to appear after a certain zoom level or when a "click" event occurs e.g. (polygons.on("click", function....)

I have looked at different questions here and also this example

But I am still unable to understand what to do in my code.

Here is my code:

<script type="text/javascript">

  var mapboxTiles = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms &amp; Feedback</a>'
  });
  var map = L.map('map')
    .addLayer(mapboxTiles)
    .setView([42.444508, -76.499491], 4);

  var polygons =  new L.geoJson(null, {
      pointToLayer: function (feature, latlng) {
          return L.marker(latlng, {});
      }
  });
  var points =  new L.geoJson(null, {
      pointToLayer: function (feature, latlng) {
          return L.marker(latlng, {});
      }
  });

  points.bindPopup("popup.").openPopup();
  polygons.on("click", function (event) {
      map.fitBounds(event.layer.getBounds());
  });

  polygons.addTo(map);
  points.addTo(map);

  $.getJSON('polygons.php', function (data) {
      polygons.addData(data)
  });
  $.getJSON('points.php', function (data) {
    points.addData(data)
  });

</script>

Answer 1

I would go like this:

map.on("zoomend", function() {
    var zoomlevel = map.getZoom();
    if (zoomlevel < 10) {
        if (map.hasLayer(points)) {
            map.removeLayer(points);
        } else {
            console.log("no point layer active");
        }
    }
    if (zoomlevel >= 10) {
        if (map.hasLayer(points)) {
            console.log("layer already added");
        } else {
            map.addLayer(points);
        }
    }
    console.log("Current Zoom Level = " + zoomlevel);
});

Answer 2

Based on @StephenLead's comment, you should probably stick with the accepted answer unless you have a strong need to use CSS.

Original Answer

Using the same map event described by @Riccardo, you could take a CSS-based approach. This may or may not be as performant if you have a bajillion markers, but CSS offers more flexibility and will get you tons of dates**.

JS

var map = L.var map = L.map('map'),
  points = new L.geoJson(null, {
    pointToLayer: function(feature, latlng) {
      var marker = L.marker(latlng, {});
  // Add a class to the marker element
  marker.on('add', function(marker) {
    var markerElem = marker.target.getElement();
    markerElem.classList.add('point-layer');
  });
}

});
map.on('zoomend', function zoomendEvent(ev) {
  var currentZoomLevel = ev.target.getZoom(),
    mapDiv = map.getContainer(),
    minZoomToShowPtLayer = 11; // or whatever
if (currentZoomLevel >= minZoomToShowPtLayer) {
    mapDiv.classList.add('hide-point-layer');
  } else {
    mapDiv.classList.remove('hide-point-layer');
  }
});

CSS

.hide-point-layer .point-layer {
  display: none;
}

If you weren't using the default marker icon, you could add an icon directly using className to accomplish the same thing.

** Unconfirmed

Answer 3

I did it a little more layman style:

var overlayMaps = {
        "<table id=\'cityTable\'><tr><td ><img src=\'scripts/images/eagle-icon.png\' height=\'50px\' title=\'City Data\' /></td><td>City Data</td></tr></table>": lg_cities,
        "<table><tr><td ><img src=\'scripts/images/milestone.png\' height=\'40px\' title=\'Milestone Marker\' /></td><td>Milestone Marker</td></tr></table>": lg_specialMarkers
    }
// ==============================================
// MAP Control
// ==============================================
L.control.layers(baseMaps, overlayMaps, {collapsed: false}).addTo(map);

map.on('mouseover zoomend', function() {
    //alert(map.getZoom());
    if(map.getZoom() &lt; 2) {
        cityTable.style = 'display: none;';
        map.removeLayer(romaMarker);
        map.removeLayer(fidenaeMarker);
        map.removeLayer(caeninaMarker);
        map.removeLayer(antemnaeMarker);
        map.removeLayer(politoriumMarker);
    } else {
        cityTable.style = 'display: visible;';
    }
});