1

I would like to add markerClusterGroup into another markerClusterGroup. I tried but without success, no marker are displayed.

Why? Because I would like to separate markerClusterGroup for multiple zones. (For each postal code of each country of each continent).

Or maybe there is another way to achieve this?

Edit: Here is a example where I try to add multiple cluster inside a main cluster: https://codepen.io/Inglebard/pen/jOWENgO

var marker_cluster_test= [];   
var main_cluster_test= new L.MarkerClusterGroup();
var clusters= [];
for (i = 0; i < 5; i++) {
  clusters[i] = new L.MarkerClusterGroup();
  clusters[i].addTo(main_cluster_test);
  marker_cluster_test[i]=[];
  for (j = 0; j < 5; j++) {
    marker_cluster_test[i][j] = L.marker([49.0435987,2.0838575]) ;
    marker_cluster_test[i][j].addTo(clusters[i]);
  }
}
main_cluster_test.addTo(map);
  • 1
    From SE GIS policy: When seeking help to debug/write/improve code always provide the desired behavior, a specific problem/error and the shortest code (as formatted text, not pictures) needed to reproduce it in the question body. Please include relevant code of what you have tried so far or question will most likely be closed. – TomazicM Jun 3 at 16:44
  • 1
    One another thing: there should be only one question per question. You have two, so another possible reason for the question to be closed. – TomazicM Jun 3 at 16:48
  • 2
    When you write "I tried but without success" GIS SE is going to ask "What exactly did you try?" "What did it do that wasn't successful?" – Vince Jun 3 at 18:07
2

To make the above code work, you just have to move clusters[i].addTo(main_cluster_test); statement after loop which adds markers to clusters[i] cluster:

for (i = 0; i < 5; i++) {
  clusters[i] = new L.MarkerClusterGroup();
  marker_cluster_test[i]=[];
  for (j = 0; j < 5; j++) {
    marker_cluster_test[i][j] = L.marker([49.0435987,2.0838575]) ;
    marker_cluster_test[i][j].addTo(clusters[i]);
  }
  clusters[i].addTo(main_cluster_test);
}

But the resulting marker cluster does not behave like you probably want/expect. It behaves like a single marker cluster without any subgroups, the same way it would behave if all the markers were added directly to main_cluster_test cluster.

If you want individual marker clusters to retain individuality, you have to add them to map directly, not via main_cluster_test cluster:

for (i = 0; i < 5; i++) {
  clusters[i] = new L.MarkerClusterGroup();
  clusters[i].addTo(main_cluster_test);
  marker_cluster_test[i]=[];
  for (j = 0; j < 5; j++) {
    marker_cluster_test[i][j] = L.marker([49.0435987,2.0838575]) ;
    marker_cluster_test[i][j].addTo(map);
  }
}

Downside of this approach is that when zooming out, these clusters will never be joined in a cluster no matter how close are final single icon clusters.

Is there a solution to this? Probably yes, but with a lot of coding and jumping over various unexpected hurdles along the way. Logic would go roughly along these lines:

  • create separate marker cluster group for each group of markers;
  • create additional master marker cluster group to receive one marker for specific cluster group when it is reduced to a single icon;
  • for each of marker cluster groups define icon creating function with iconCreateFunction option;
  • in this icon creating function check when number of clustered markers is equal to number of all the markers in the group;
    • when it is equal, hide clustered marker icon for cluster group and add single marker to master cluster group;
    • if it is less, show clustered marker icon for the cluster group and remove single marker for this group from master marker group;
  • take care of the count of cluster member markers along the way;
  • take core of the clicking one the single icon in the master cluster to be expanded to corresponding marker cluster group.

In this way when clustered marker group is reduced to a single marker, it can be further clustered when zooming out.

A lot of work, but interesting challenge.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.