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”?