Leaflet MarkerCluster: Is it possible to open multiple cluster-groups?

Question

I have recently started working with leaflet. I found the great plugin leaflet markercluster. I am currently trying to open several clustergroups at the same time. Unfortunately I can't find anything on google.

I have several cluster groups and draw connections from one marker to another. The user should be able to open both cluster groups to which the drawn line goes:

My example

Therefore my question: Is there a function for this that I have to switch on or is opening several groups at the same time not provided at all?

user_11630648 · Answer

Okay I have experimented a little bit on it now ;)

In the leaflet.markercluster-src.js I created an array called _spiderMan[] which is filled with the clicked objects in the function spiderfy.

spiderfy: function() {
  if (this._group._spiderfied === this || this._group._inZoomAnimation) {
    return;
  }

  var childMarkers = this.getAllChildMarkers(null, true),
    group = this._group,
    map = group._map,
    center = map.latLngToLayerPoint(this._latlng),
    positions;

  // this._group._unspiderfy();  //deactivated
  var markers = markers + childMarkers;
  _spiderMan.push(this);  //new          

  if (childMarkers.length >= this._circleSpiralSwitchover) {
    positions = this._generatePointsSpiral(childMarkers.length, center);
  } else {
    center.y += 10; 
    positions = this._generatePointsCircle(childMarkers.length, center);
  }

  this._animationSpiderfy(childMarkers, positions);
},

Then I have created a for loop which runs through the array and calls _spiderMan[i].unspiderfy(zoomDetails) every time. I built this loop into the function _unspiderfyZoomAnim for testing. Means every time you zoom in or out, all open groups are summarized.

_unspiderfyZoomAnim: function(zoomDetails) {
  if (L.DomUtil.hasClass(this._map._mapPane, 'leaflet-touching')) {
    return;
  }
  this._map.off('zoomanim', this._unspiderfyZoomAnim, this);
  var i;
  for (i = 0; i < _spiderMan.length; i++) {
    _spiderMan[i].unspiderfy(zoomDetails);
  }
  _spiderMan = [];
},

In addition, the following lines must be deactivated in the unspiderfy function:

unspiderfy: function(zoomDetails) {
  /// Argument from zoomanim if being called in a zoom animation or null otherwise
  // if (this._group._inZoomAnimation) {
  //    return;             
  // }
  this._animationUnspiderfy(zoomDetails);

  // this._group._spiderfied = null;        
},

So it's now possible to open and close mutiple cluster-groups but this is only a workaround and I think it will have some bad effects somewhere because of commenting out or removing code lines.

I think someone with more experience in JS and this plugin should find a better and more comfortable solution ;).

user_5108796 · Answer

Welcome to SO!

Unfortunately, the spiderfication management in Leaflet.markercluster plugin currently assumes a single cluster can be spiderfied at a time.

See also danzel's comment in Leaflet.markercluster issue #744 (Spiderfy all clusters at a particular view):

Leaflet.MarkerCluster only supports having one cluster spiderfied at the moment, so this would need a bit of work to support.

user_2876830 · Answer

May be you will get a better answer if you give a use case ...

However, it is safe to say that there is no function you can switch on to open several groups in one click.

From a usability point of view, it does not make much sense as the basic behaviour of MarkerCluster is to click on one icon to zoom in and expand the group you are interested in.

user_4768502 · Answer

Quoting from https://github.com/Leaflet/Leaflet.markercluster#other-clusters-methods :

spiderfy: Spiderfies the child markers of this cluster

unspiderfy: Unspiderfies a cluster (opposite of spiderfy)

So once you have references to the clusters you want to "open" (spiderify) at the same time, just call their .spiderify() method.

e.g. if the desired clusters are in variables cluster1 and cluster2:

cluster1.spiderify();
cluster2.spiderify();

See also https://github.com/Leaflet/Leaflet.markercluster#getting-the-visible-parent-of-a-marker and https://github.com/Leaflet/Leaflet.markercluster#clusters-methods about how to get references to the clusters.

user_3982562 · Answer

As far as I can tell you can keep open multiple clusters, but only one for each group. My guess is that your markers all belong to a single group. In which case you can't keep open multiple clusters.

You could opt for a hover approach, which opens a cluster if you hover over it.

const mymap = L.map('mapid').setView([48.550, 8.207], 6);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  id: 'mapbox.streets'
}).addTo(mymap);

const markers = L.markerClusterGroup({zoomToBoundsOnClick: false});
[[47.5617, 7.5504], [47.5255, 7.6163], [47.5691, 7.6355],
 [49.4922, 8.3922], [49.5306, 8.5172], [49.4547, 8.5062]]
  .map(latLng => L.marker(latLng))
  .forEach(marker => markers.addLayer(marker));
mymap.addLayer(markers);

markers.on("clustermouseover", a => a.layer.spiderfy());
markers.on("clustermouseout", a => a.layer.unspiderfy());

html, body, #mapid { margin: auto; height: 100%; }

Leaflet MarkerCluster: Is it possible to open multiple cluster-groups?

5 Answers