0

I need to open all the markers that are visible on the map at Zoom > 10. I am using leaflet.markercluster plugin.

Init map:

initMap() {
  this.map = L.map('map', {
    center: [55.55, 37.61],
    zoom: 9,
    layers: this.layer
  })
  this.tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution:
      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy;'
  })
  this.tileLayer.addTo(this.map)

this.map.on('zoom', function(ev) {
    ???
  })

Add marker layer:

this.markerLayer = new L.LayerGroup()   // layer contain searched elements
  // this.map.addLayer(this.markerLayer)

  for (const i in data) {
...
    const marker = new L.Marker(new L.latLng(loc), { title: title, icon: icon })// se property searched
    marker.bindPopup(title)
    this.markerLayer.addLayer(marker)
  }

Use leaflet marker cluster:

this.markersLayer = L.markerClusterGroup({
    iconCreateFunction: function(cluster) { ... },
    singleMarkerMode: false
  })
  this.markersLayer.addLayer(this.markerLayer)
  this.map.addLayer(this.markersLayer)
  • With 'I want to open markers' you mean open popups? – TomazicM Apr 18 at 14:57
  • Yes. Open popup if this.map.getZoom() > 11. – ncux199rus Apr 18 at 17:35
  • And the next question: do you want to open popups only for unclustered markers at given zoom or for all markers, regardless of clustering? – TomazicM Apr 18 at 17:50
  • The ideal option is to show a popup only for those markers that are visible on the map at this moment. And if the markers are clustered, then show the popup when you click on the cluster. I have a lot of markers that are located at one point. So far all I have been able to do is add and remove the popup layer when the zoom is changed. – ncux199rus Apr 18 at 18:09
0

I couldn't find any other method than to loop through all the markers at each view change (zoom, move) and show/hide popup for visible markers depending on zoom level.

Base of the code is taken from Leaflet.markercluster plugin example. Zoom level > 16 is set as trigger for popup display.

Important options:

  • for map: closePopupOnClick: false to prevent automativ popup close on map click
  • for popups: autoClose: false to prevent close of popup when another popup is opened, autoPan: false to prevent panning of map when popup is not entierly inside map
var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ'
  })

latlng = L.latLng(-37.82, 175.24);

var map = L.map('map', {center: latlng, zoom: 13, layers: [tiles], closePopupOnClick: false});

var markers = L.markerClusterGroup();

for (var i = 0; i < addressPoints.length; i++) {
  var a = addressPoints[i];
  var title = a[2];
  var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title });
  marker.bindPopup(title, {autoClose: false, autoPan: false});
  markers.addLayer(marker);
}

map.addLayer(markers);

var bounds;
var markersDisplayed = false;

map.on('moveend zoomend', function(e) {
  bounds = map.getBounds();
  var zoom = map.getZoom();
  if (zoom > 16) {
    markers.eachLayer(function (layer) {
      if (bounds.contains(layer.getLatLng())) {
        markersDisplayed = true;
        layer.openPopup();
      }
    });
    }
  else if (markersDisplayed) {
    markersDisplayed = false;
    markers.eachLayer(function (layer) {
      if (bounds.contains(layer.getLatLng())) {
        layer.closePopup();
      }
    });
  }
});

markers.on('clusterclick', function (e) {
  bounds = map.getBounds();
  var zoom = map.getZoom();
  var childMarkers = e.layer.getAllChildMarkers();
  if (zoom > 16) {
    childMarkers.eachLayer(function (layer) {
      if (bounds.contains(layer.getLatLng())) {
        markersDisplayed = true;
        layer.openPopup();
      }
    });
  }
});

Probably not everything was taken care of here, just the basic concept.

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.