Add markerClusterGroup with different color

Question

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

Where is the variable `color_html` set? Maybe you set it to the newer value when creating a new group and the old group's function takes this new value on map reset. — Krxldfx, Sep 19 '16 at 16:29
As highlighted by @Krxldfx, there is missing info about `color_html` variable. There is some chance you just have a _scoping_ issue. See [How do JavaScript closures work?](https://stackoverflow.com/questions/111102/how-do-javascript-closures-work) — ghybs, Sep 19 '16 at 17:32

score 0 · Accepted Answer · answered Sep 21 '16 at 09:40

The solution is to put something like this

if (isChecked) {
color_html=$widget.data('colorhtml');
add_contacts(file);
}

add_contacts(file){
  my_objects["style_"+file]=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;"'

  my_objects["contactsGroupe_"+file]=new L.markerClusterGroup({
    iconCreateFunction: function(cluster) {
        return new L.DivIcon({ 
          html: '<div '+ my_objects["style_"+file]+'>' + cluster.getChildCount() +'</div>',
          iconSize: [0,0]
       });
    },
}).addTo(map);
}           
my_objects["contactsGroupe_"+file].addLayer(my_objects["contacts_"+file]);

score 0 · Answer 2 · answered Sep 21 '16 at 12:45

You could also add the color as a parameter to your function:

if (isChecked) {
    color_html=$widget.data('colorhtml');
    add_contacts(file, color);
}



add_contacts(file, color){
   my_objects["contactsGroupe_"+file]=new L.markerClusterGroup({
        iconCreateFunction: function(cluster) {
            return new L.DivIcon({ 
              html: '<div style="color: white; background: '+color+'; border-radius:5px;  text-align: center; font-size: 18px;  box-shadow: 8px 8px 12px grey; border: 0.1px solid '+color+'; display: inline-block; vertical-align:middle;">' + cluster.getChildCount() +'</div>',
              iconSize: [0,0]
           });
        },
    }).addTo(map);
}           
my_objects["contactsGroupe_"+file].addLayer(my_objects["contacts_"+file]);

Add markerClusterGroup with different color

2 Answers2