leafelt markercluster: open popup on childmarker after zoom in

Question

I have a leaflet map and using Leaflet.markercluster. The data for the markers come from an external service as json.

After loading the map, the popups from all visible markers are open as I want. But when i zoom out of the map the markers will be clustered and the popup disappear. At this point all worked fine, but when I zoom in, I want to open the popup of each childmarker again without clicking the marker itself.

At the moment the code looks like this:

vehicleClusterMarkers = L.markerClusterGroup({
    maxClusterRadius: 45,
    spiderfyOnMaxZoom: false
});
vehicleClusterMarkers.addLayer(TTJsonLayer);

//vehicleClusterMarkers.addTo(map);
map.addLayer(vehicleClusterMarkers);

vehicleClusterMarkers.eachLayer(function(layer) {
    layer.openPopup();
});         

I have done some research, but at the moment I have no idea how to solve this problem.

If anybody has some tips it would be nice. Thx!

Answer 1

You have several possible solutions to automatically open the popup of your unclustered Markers. You have to use event listeners, and you could listen to "zoomend", or probably better, to "layeradd" event (since Leaflet.markercluster also removes markers out of the view, so panning without changing the zoom level makes some new Markers appear).

Leaflet.markercluster plugin automatically removes your Markers from the map when they cluster, and add them back when they uncluster.

On "layeradd", check if the added layer is an individual Marker (i.e. instance of class L.Marker), rather than a Cluster. If it is a single Marker, then open its popup:

var map = L.map("map", {
  closePopupOnClick: false,
  maxZoom: 18
}).setView([48.85, 2.35], 11);

map.on('layeradd', function(event) {
  var layer = event.layer;

  if (layer instanceof L.Marker && !(layer instanceof L.MarkerCluster)) {
    layer.openPopup();
  }
});

var mcg = L.markerClusterGroup();

for (var i = 0; i < 10; i += 1) {
  L.marker(getRandomLatLng()).addTo(mcg).bindPopup('Marker ' + i, {
    autoClose: false,
    autoPan: false
  });
}

mcg.addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

function getRandomLatLng() {
  return [
    48.8 + 0.1 * Math.random(),
    2.25 + 0.2 * Math.random()
  ];
}

<!-- Leaflet assets -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<!-- Leaflet.markercluster assets -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster-src.js"></script>

<div id="map" style="height: 200px"></div>