Angular-Leaflet mit Markercluster benutzerdefinierte Icon-Styling

Question

Ich versuche, die Angular-Leaflet-Map dieser App mit Leaflet-Markercluster und benutzerdefinierte Cluster-Logik zu arbeiten. Ich kann nicht herausfinden, wo die iconCreateFunction leben sollte.

Ich habe versucht, es in den $scope.markers[id] = {} Block, sowie alle über den folgenden Block.

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

Ich kann nicht herausfinden, welcher Abschnitt meines Codes die Clusterlogik behandelt? Sie clustern korrekt, aber ich möchte benutzerdefinierte Farben/Klassen basierend auf Daten aus dem Cluster. Irgendwelche Gedanken?

Answer 1

Sie können es in

hinzufügen

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