Leaflet Markercluster: Is It Possible To Open Multiple Cluster-groups?

June 11, 2024 Post a Comment

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

Solution 1:

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();  //deactivatedvar 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) {
  ///<param Name="zoomDetails">Argument from zoomanim if being called in a zoom animation or null otherwise</param>// 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 ;).

Solution 2:

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.

Solution 3:

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.

Baca Juga

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.

Solution 4:

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();

Solution 5:

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%; }

<linkrel="stylesheet"href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" /><scriptsrc="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script><linkrel="stylesheet"href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" /><linkrel="stylesheet"href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" /><scriptsrc="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script><divid="mapid"></div>

JavaScript Free