Additional class with MarkerClusterGroup name

[DahmaniAdame]

Is it possible to add an additional class with MarkerClusterGroup name?

Let's say, I create 2 different groups : var soccerfieldsmarkers = new L.MarkerClusterGroup(); var baseballfieldsmarkers = new L.MarkerClusterGroup();

and I create different overlays layers for them both.

The clustering takes the same color for both groups which confuses the view.

Adding such classes : clustergroup-soccerfieldmarkers and clustergroup-baseballfieldsmarkers will help style marker-cluster-small, marker-cluster-medium and marker-cluster-large classes for each group of markers with a different base color.

Hope it's not too much to ask :)

[danzel]

MarkerClusterGroup takes an option 'iconCreateFunction' https://github.com/danzel/Leaflet.markercluster#customising-the-clustered-markers

Example: https://github.com/danzel/Leaflet.markercluster/blob/master/example/marker-clustering-custom.html

You should be able to use this to achieve what you want quite easily. The default function is https://github.com/danzel/Leaflet.markercluster/blob/master/src/MarkerClusterGroup.js#L412-425

When using multiple MarkerClusterGroups there is no guarantee that the clusters won't appear on top of each other of course, so be wary of that.

Hope that helps :)

[DahmaniAdame]

Should have read a bit before posting the question because the answer was their on the documentation.

Thanks for taking time to answer :) I was able to use a custom class and it works.

Actually, I want to keep the marker-cluster+size class and add a new one to identify groups of clusters. When I use the counting loop, the whole section is ignored and it uses MarkerClusterGroup with it's default options.

Here's what I'm trying to do :

var schoolsMarkers = new L.MarkerClusterGroup({
var childCount = cluster.getChildCount();
var c = " marker-cluster-";
if (childCount < 10) {
c += "small";
} else if (childCount < 100) {
c += "medium";
} else {
c += "large";
}

maxClusterRadius: 120,
iconCreateFunction: function (cluster) {
return new L.DivIcon({ html: cluster.getChildCount(), className: "clustergroup-schools marker-cluster" + c, iconSize: new L.Point(40, 40) });
},
spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false });

How can I reuse this part without having it crashing?

var childCount = cluster.getChildCount();
var c = " marker-cluster-";
if (childCount < 10) {
c += "small";
} else if (childCount < 100) {
c += "medium";
} else {
c += "large";
}

Thanks for your helps :+1:

PS.: thanks for notify me about the risks of using multiple MarkerClusterGroups. I noticed it while experimenting. Worth mention though :) but it should be a problem.

[danzel]

I would copy that part out to another function and call it from each of your iconCreateFunctions.

Also when posting code on github you can put 3 backticks (` the character to the left of the 1 on your keyboard) to format it as code. See "Syntax highlighting" on http://github.github.com/github-flavored-markdown

[DahmaniAdame]

Worked like a charm.

Thanks for your help :)