Black Lives Matter. Please consider donating to Black Girls Code today.

Dash Folium help

I have a few questions on Map inside Dash using Folium, which I want to do some customization. I have a map plot at https://i.imgur.com/Ga4VnLz.png which shows 3 clusters of size (8,10,29), which I would like this 3 clusters to have 3 different colors (blue, brown, light purple). I have tried some code below to separate those 3 clusters but does not work:

icon_create_function = “““
function (cluster) {
var childCount = cluster.getChildCount();
var c = ‘ marker-cluster-’;
if (childCount < 10) {
c += ‘small’;
}
else if (childCount >= 10 & childCount <= 20) {
c += ‘medium’;
}
else {
c += ‘large’;
}

return new L.DivIcon({ html: ‘<div><span>’ + childCount + ‘</span></div>’,
className: ‘marker-cluster’ + c, iconSize: new L.Point(40, 40) });
}”””

marker_cluster = MarkerCluster(
name=’Map Singapore’,
overlay=True,
control=True,
icon_create_function=icon_create_function
)

With icon_create_function=icon_create_function, it does not work.

With icon_create_function=None, the plot is as shown in the weblink above.

Also, are we able to replace the number in the clusters with some words, like “Cluster1”, “Cluster2” and “Cluster3”?

this may help you:

FeaturegroupSubGroup can be combined in Folium with ClusterMarkers
The thing I haven’t been able to solve is the custom icon for each group

sorry, I am still not able to make use of that code to have different colours for different number of cluster size. Do you have some examples?

Using the info of that link I was able to customize the icons of each group. BUT, I couldn’t customize the icon of each cluster, so I don’t have examples about that. However, in theory, it could be done by using some of the parameters of FeatureGroupSubGroup