I'm working on map where I want to display markers in markerClusterGroup and every markerClusterGroup must have different background color.
if (isChecked) {
color_html=$widget.data('colorhtml');
add_contacts(file);
}
add_contacts(file){
my_objects["contactsGroupe_"+file]=new L.markerClusterGroup({
iconCreateFunction: function(cluster) {
return new L.DivIcon({
html: '<div style="color: white; background: '+color_html+'; border-radius:5px; text-align: center; font-size: 18px; box-shadow: 8px 8px 12px grey; border: 0.1px solid '+color_html+'; display: inline-block; vertical-align:middle;">' + cluster.getChildCount() +'</div>',
iconSize: [0,0]
});
},
}).addTo(map);
}
my_objects["contactsGroupe_"+file].addLayer(my_objects["contacts_"+file]);
And I have a check list where I choose the files to display. When I check the first file, markerClusterGroup are displayed with the choosen background color, and when I chose the second file, the second markerClusterGroup are displayed with a different background color, but when I zoom in or I zoom out, The two markerClusterGroup have the same background colors (same of the last color choosen) and when I return to the initial zoom, I have two differents color. And If I want to have differents background colors in differents zooms, I have to go to every zoom after adding the first markerClusterGroup and before adding the second markerClusterGroup.
Someone can help me to understand the issue. Thnx