Angular-Leaflet avec le style d'icône personnalisé Markercluster

Question

J'essaie d'obtenir la carte de la feuille angulaire de cette application pour travailler avec le cluster de marqueurs-feuillets et la logique de cluster personnalisée. Je n'arrive pas à savoir où devrait vivre le iconCreateFunction.

J'ai essayé de l'inclure dans le bloc $scope.markers[id] = {}, ainsi que dans le bloc suivant.

var bingRoad = { bingRoad: { name: 'Bing Road', type: 'bing', key: bing_key, layerOptions: { type: 'Road', } } }; 
    var bingAerialWithLabels = { bingAerialWithLabels: { name: 'Bing Aerial With Labels', type: 'bing', key: bing_key, layerOptions: { type: 'AerialWithLabels', position: 'front' } } }; 
    var baselayers = { bingRoad: bingRoad.bingRoad, bingAerialWithLabels: bingAerialWithLabels.bingAerialWithLabels }; 

    angular.extend($scope, { 
    center: { 
     lat: someLat, 
     lng: someLong, 
     zoom: 7 
    }, 
    icons: local_icons, 
    markers: {}, 
    layers: { 
     baselayers: baselayers 
    } 
    }); 

Je n'arrive pas à comprendre quelle section de mon code gère la logique de clustering? Ils se regroupent correctement, mais je veux des couleurs/classes personnalisées basées sur des données provenant du cluster. Des pensées?

Answer 1

vous pouvez l'ajouter à

layerOptions: { 
         showCoverageOnHover: false, 
         disableClusteringAtZoom: 12, 
         iconCreateFunction: function (cluster) { 
          var className = ''; 
          _($scope.songs).forEach(function(song) { 
           switch (song.genre) { 
            case 3: 
             className = 'red'; 
             break; 
            case 2: 
             className = 'yellow'; 
             break; 
            default: 
             className = 'green'; 
             break; 
           } 
          }); 


          return new L.DivIcon({ 
           className: className, 
           iconSize: new L.Point(40, 40) 
          }); 
         } 
        }