Color of a cluster of sheets based on icons inside

Question

I have contacts on my leaflet.js page where the image is determined by the state of the object they represent. For example, online and offline users on the network are green, while offline users are red. I do this by adding a class to divIcon and then manage the images with css.

Now I have added a cluster of clusters to my map. What I want to do is to determine the color of the cluster using most of the status “inside the cluster. My first idea was to do something like this:

this.markers = L.markerClusterGroup({
    iconCreateFunction: function(cluster) {
        // Use this somehow to filter through and look at the pin elements
        console.log(cluster.getAllChildMarkers());

        return new L.DivIcon({ html: /* ?? */ });
    }
});

But unfortunately, I cannot access the HTML elements from the array returned from getAllChildMarkers.

Anyone have any ideas on how I can do this? Or a way to get an HTML buffer element?

thank

EDIT:

( mapPin):

that.mapPins.org = L.divIcon({
className: 'org-div-icon',
    html: "<div class='org-status "+ org.getGroupStatus() +"'></div>",
    iconSize: [35, 35],
    iconAnchor: [18, 17]
});

:

$(model.get('mapPin')._icon).find('.org-status').attr('class', 'org-status ' + model.getGroupStatus());

, _icon getAllChildMarkers, , , , .

Answer 1

getAllChildMarkers, . , marker.options.icon.options.className. html marker.options.icon.options.html

, underscore.js, , , , .

var markers = L.markerClusterGroup({
  iconCreateFunction: function (cluster) {
    var childMarkers = cluster.getAllChildMarkers();
    // count how many there are of each class
    var counts = _.countBy(childMarkers, function(marker) {
      // class at icon level
      //return marker.options.icon.options.className;
      // class inside html
      return $(marker.options.icon.options.html).attr('class');
    });
    // get the class with the highest count
    var maxClass = _.invert(counts)[_.max(counts)];
    // use this class in the cluster marker
    return L.divIcon({ html: cluster.getChildCount(), className: maxClass });
  },
});