Clustering with groups shows cluster AND markers

[nmccready]

From @l0c0luke on March 9, 2014 15:27

I like this new example that doesnt use layers since i only want a single "layer" of guests on the map. I loop throguh my guests, make sure they can be on a map, then I add them. I also use the leafletBounds to be able to set the bounds of the map but I have tried this without using bounds and I had the same result. The result is that the clusters are showing up on the map, but so are the individual pins.

I do do some map resizing based on events which resizes the container and then invalidates the map to resize it.

The things I can think of is that the markers array does not have individual key names as i just push the marker object onto the array. The code is below.

var leafletLatLngs = [];
$scope.markers = [];
_.each($scope.guests, function(guest) {
    var message = '';
    if (guest.image && !guest.images) {
        message += '<img src="'+guest.image+'" class="img-rounded pull-left" style="margin-right: 10px; width: 50px;">';
    } else if (guest.images) {
        message += '<img src="' + guest.images["50x50"] + '" class="img-rounded pull-left" style="margin-right: 10px;">';
    } else if (!guest.image && guest.fb_id != 0) {
        message += '<img class="img-rounded pull-left" src="https://graph.facebook.com/'+guest.fb_id+'/picture?type=large" style="max-width: 50px; margin-right: 10px;">';
    }

        if (guest.current_lat && guest.current_lng) {
            message += '<h4 style="margin-bottom: -10px; min-width: 200px;"><a href="/e/'+$scope.event.slug+'/guest/'+guest.slug+'">'+guest.name+'</a></h4><br>Currently at: '+guest.current_location+'<div style="clear:both;"></div>';
            var marker = {
                group: 'guestGroups',
                lat: parseFloat(guest.current_lat),
                lng: parseFloat(guest.current_lng),
                message: message
            };
            $scope.markers.push(marker);

            var latLng = new L.LatLng(guest.current_lat, guest.current_lng);
            leafletLatLngs.push(latLng);
        }
});

var leafletBounds = new L.LatLngBounds(leafletLatLngs);
if (leafletBounds.getSouthWest()) {
    $scope.bounds = {
        southWest: {
            lat: leafletBounds.getSouthWest().lat,
            lng: leafletBounds.getSouthWest().lng
        },
        northEast: {
            lat: leafletBounds.getNorthEast().lat,
            lng: leafletBounds.getNorthEast().lng
        }
    };
} else {
    $scope.noMapData = true;
}

$scope.events = {
    map: {
        enable: ['click', 'drag', 'blur', 'touchstart'],
        logic: 'emit'
    }
};

$scope.$on('leafletDirectiveMap.touchstart', function(event){
    $scope.expandMap();
});
$scope.$on('leafletDirectiveMap.drag', function(event){
    $scope.expandMap();
});

$scope.$on('leafletDirectiveMap.click', function(event){
    $scope.expandMap();
});

$scope.$on('leafletDirectiveMap.blur', function(event){
    if ($scope.width < 768 && $scope.mapExpanded) {
        $scope.resizeMap();

        $scope.mapExpanded = false;
    }
});

and then the leaflet map code is called with this in the html...

<leaflet id="guestmap" width="100%" height="100%" event-broadcast="events" markers="markers" bounds="bounds" style="margin-top: -20px; position: fixed; z-index: 1000;"></leaflet>

If you have any advice it would be greatly appreciated.

Copied from original issue: tombatossals/angular-leaflet-directive#319