3

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>
  • I cannot see any code of your tries to get this zoom function working... – Riccardo Feb 29 '16 at 8:41
  • No, i have tried different things. Also the function that i link to in "example". I thought it was easier to just show my code that works, and then get some input on what to do. It might be a better result to get a function that ads 'points' when "click" on 'polygons' ? – student Feb 29 '16 at 8:44
7

okay. 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)
});
  • That works! I have polygons with different extents. Is it possible to use the extent on the clicked polygon instead of the fixed zoom levels? with inspiration from your suggestion i added this, so the points appear on "click": areas.on("click", function (event) { map.addLayer(points); } ); Is it possible to add something, so that the points are removed again when you zoom away from the clicked polygon? – student Feb 29 '16 at 9:57
  • use the map.on('zoomed', function() { if map.contains(layer.getBounds()){ //so your map is bigger then the polygon) //do stuff } else { //do other cool stuff!} – Riccardo Feb 29 '16 at 11:00
  • check for more possibilities here: leafletjs.com/reference.html#latlngbounds – Riccardo Feb 29 '16 at 11:02
0

EDIT

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

I will leave my original answer intact, but if you feel it lacks value then please let me know rather than downvoting and I will remove it.

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

  • The disadvantage with this approach is that the map still has to manage all of the features in that layer even if it's hidden by CSS. In the case of the GeoJSON this may not have any effect, but if your layer is requesting data "live" from the server with each pan/zoom (eg WFS, GeoJSON served by ArcGIS Server, etc) the CSS approach will be inefficient. Adding and removing the layer based on zoom levels is the more robust approach in this case. – Stephen Lead Aug 31 '17 at 22:50
  • 1
    Good to know. I updated my answer accordingly. – abettermap Sep 1 '17 at 16:02

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.