Couleur du cluster de dépliants basée sur les icônes à l'intérieur

Question

J'ai des épingles sur ma carte leaflet.js où l'image est déterminée par le statut de l'objet qu'elles représentent.Par exemple, les utilisateurs en ligne et hors ligne sont en vert et hors ligne en rouge.Je fais cela en ajoutant une classe au divIcon, puis en contrôlant les images avec CSS.

J'ai maintenant ajouté un regroupement de marqueurs à ma carte.Ce que je veux faire, c'est déterminer la couleur du cluster par le majorité de statut »au sein du cluster.Ma première idée était de faire quelque chose comme ceci :

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: /* ?? */ });
    }
});

Mais malheureusement, je ne parviens pas à accéder aux éléments HTML du tableau renvoyé par getAllChildMarkers.

Quelqu'un a-t-il des idées sur la façon dont je pourrais procéder ?Ou un moyen d'obtenir l'élément HTML de l'épingle ?

Merci

MODIFIER:

C'est ici que je crée mes épingles de carte (attribuées aux broches de mon modèle de backbone). mapPin attribut):

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

Et voici comment je change la classe dynamiquement :

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

Je pensais que je pourrais accéder _icon dès le retour de getAllChildMarkers comme je le fais ci-dessus, mais cela ne semble pas être là.

Answer 1

Vous pouvez utiliser getAllChildMarkers pour obtenir tous les marqueurs du cluster.Une fois que vous avez un marqueur, vous pouvez accéder à sa classe avec marker.options.icon.options.className.Vous pouvez accéder au HTML avec marker.options.icon.options.html

Voici du code qui utilise les fonctions underscore.js pour compter le nombre de marqueurs avec chaque classe, trouver celui qui est le plus populaire et utiliser cette classe pour le marqueur de cluster.

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 });
  },
});