Capas de folletos en diferentes niveles de zoom. ¿Cómo?

Question

He añadido una capa de polígonos y una capa de puntos a mi mapa de folletos.

Me gustaría que los puntos aparecieran a partir de un determinado nivel de zoom o cuando se produzca un evento de "clic", por ejemplo. (polygons.on("click", function....)

He mirado diferentes preguntas aquí y también esto ejemplo

Pero sigo sin entender qué hacer en mi código.

Aquí está mi código:

<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

Bien. Yo iría así:

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

EDITAR

Basado en el comentario de @stephen-lead, probablemente deberías quedarte con la respuesta aceptada a menos que tengas una fuerte necesidad de usar CSS.

Dejaré mi respuesta original intacta, pero si crees que carece de valor, por favor, házmelo saber en lugar de votar a la baja y la eliminaré.

Respuesta original

Utilizando el mismo evento de mapa descrito por @Riccardo, podrías adoptar un enfoque basado en CSS. Esto puede o no puede ser tan performante si usted tiene un bajillón de marcadores, pero CSS ofrece más flexibilidad y le conseguirá toneladas de fechas**.

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

Si no utilizas el icono del marcador por defecto, puedes añadir un icono directamente utilizando className para lograr lo mismo.

** Sin confirmar