10

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>
2
  • I cannot see any code of your tries to get this zoom function working...
    – Riccardo
    Feb 29, 2016 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' ?
    – LAC
    Feb 29, 2016 at 8:44

3 Answers 3

14

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

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() < 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;';
        }
    });
0

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

0

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.