Angular-Leaflet with Markercluster custom icon styling

Question

I'm trying to get this app's angular-leaflet map to work with leaflet-markercluster and custom cluster logic. I can't figure out where the iconCreateFunction should live.

I've tried including it in the $scope.markers[id] = {} block, as well as all over the following 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
    }
  });

I can't figure out what section of my code handles the clustering logic? They cluster correctly, but I want custom colors/classes based on data from within the cluster. Any thoughts?

Answer 1

you can add it in

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