Leaflet MarkerCluster - how to check if cluster is going to be spiderfied (i.e. has maxZoom level)?

Question

I want to implement my own form of spiderfying (HTML popup) so I need to know if cluster is going to be spiderfied (i.e. has a maxZoom level). There is a spiderfied event, but it is fired after a cluster is spiderfied, which is useless for me.

There is a similar question on GIS, but answers don't work for me: How to determine if a cluster is at its maxZoom level?

I was examining the event objects after the cluster click, but I haven't found any difference between normal and "ready-to-be-spiderfied" cluster objects.

Answer 1

The logic in Leaflet.markercluster plugin that dictates if it should spiderfy or not is within the _zoomOrSpiderfy internal method of MarkerClusterGroup.

You can easily adapt it to your need:

var map = L.map("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);

map.setView([48.85, 2.35], 12);
var mcg = L.markerClusterGroup().addTo(map);

mcg.on("clusterclick", function(event) {
  var cluster = event.layer,
    bottomCluster = cluster;

  while (bottomCluster._childClusters.length === 1) {
    bottomCluster = bottomCluster._childClusters[0];
  }

  if (bottomCluster._zoom === mcg._maxZoom &&
    bottomCluster._childCount === cluster._childCount) {

    // All child markers are contained in a single cluster from this._maxZoom to this cluster.
    console.log('cluster will spiderfy');
  }
});

// 2 markers in exact same position.
L.marker([48.85, 2.35]).addTo(mcg);
L.marker([48.85, 2.35]).addTo(mcg);

// 1 in slightly different position, so that at the immediate higher zoom level, the marker gets out of the cluster.
L.marker([48.858, 2.358]).addTo(mcg);

<!-- 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: 180px;"></div>

However, since you want to replace the spiderfication by your own behaviour, you would have to set the option spiderfyOnMaxZoom: false, which would then change the Leaflet.markercluster behaviour to zoomToBoundsOnClick instead of the normal spiderfication, which you may also not want…

In that case, a "simple" solution would be instead to override the MarkerCluster.spiderfy() and unspiderfy() methods:

var markersList = document.getElementById('markersList');

L.MarkerCluster.include({
  spiderfy: function() {
    var childMarkers = this.getAllChildMarkers();
    this._group._unspiderfy();
    this._group._spiderfied = this;

    // Fill the markersList.
    markersList.innerHTML = childMarkers
      .map((marker, index) => `<li>Marker ${index + 1}: ${marker.getLatLng()}</li>`)
      .join('');
    // Show the modal.
    modal.classList.add("show-modal");
  },

  unspiderfy: function() {
    this._group._spiderfied = null;
    // Hide the modal.
    modal.classList.remove("show-modal");
  }
});

var map = L.map("map");

///////////////////////////////////////////////////////////
// https://sabe.io/tutorials/how-to-create-modal-popup-box
// MIT License https://sabe.io/terms#Licensing
var modal = document.querySelector(".modal");
var closeButton = document.querySelector(".close-button");

function closeModal() {
  // Use the unspiderfy method so that internal state is updated.
  mcg.unspiderfy();
}

function windowOnClick(event) {
  if (event.target === modal) {
    closeModal();
  }
}

closeButton.addEventListener("click", closeModal);
window.addEventListener("click", windowOnClick);
///////////////////////////////////////////////////////////

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

map.setView([48.85, 2.35], 12);
var mcg = L.markerClusterGroup().addTo(map);

// 2 markers in exact same position.
L.marker([48.85, 2.35]).addTo(mcg);
L.marker([48.85, 2.35]).addTo(mcg);

// 1 in slightly different position, so that at the immediate higher zoom level, the marker gets out of the cluster.
L.marker([48.858, 2.358]).addTo(mcg);

/* https://sabe.io/tutorials/how-to-create-modal-popup-box */

.modal {
  z-index: 1000;
  /* Make sure your modal renders above the Leaflet map. */
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 1rem 1.5rem;
  width: 24rem;
  border-radius: 0.5rem;
}

.close-button {
  float: right;
  width: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
  border-radius: 0.25rem;
  background-color: lightgray;
}

.close-button:hover {
  background-color: darkgray;
}

.show-modal {
  opacity: 1;
  visibility: visible;
  transform: scale(1.0);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

<!-- 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: 180px;"></div>

<div class="modal">
  <div class="modal-content">
    <span class="close-button">&times;</span>
    <ul id="markersList"></ul>
  </div>
</div>