CODEWITHSUNDEEP
javascriptleafletleaflet.markercluster
ajl31701
ajl31701

Reputation: 79

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

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?

Upvotes: 4

Views: 5506

Answers (5)

ajl31701
ajl31701

Reputation: 79

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) {
  /// <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 ;).

Upvotes: 3

3limin4t0r
3limin4t0r

Reputation: 21110

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%; }
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

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

<div id="mapid"></div>

Upvotes: 1

ghybs
ghybs

Reputation: 53185

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.

Upvotes: 2

IvanSanchez
IvanSanchez

Reputation: 19049

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.

Upvotes: 1

YaFred
YaFred

Reputation: 10008

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.

Upvotes: 1

Related Questions