Leaflet clustering with custom markers

Question

I´m just starting with leaflet. My question is how can I cluster custom markers which where added to the map like this

var LeafIcon = L.Icon.extend({
options: {
    iconSize:     [38, 95],     
    shadowSize:   [50, 64], 
    iconAnchor:   [22, 94], 
    popupAnchor:  [-3, -10]
    }
});

var greenIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/docs/images/leaf-green.png'}),
redIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/docs/images/leaf-red.png'}),
orangeIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/docs/images/leaf-orange.png'});


L.marker([51.5, -0.071], {icon: greenIcon}).bindPopup("<p>ok</p><p>tada</p>.").addTo(map);
L.marker([51.5, -0.073], {icon: redIcon}).bindPopup("I am a red leaf.").addTo(map);
L.marker([51.5, -0.076], {icon: orangeIcon}).bindPopup("I am an orange leaf.").addTo(map);

I´m struggling adding this to a MarkerClusterGroup.

Please find a working fiddle here: http://jsfiddle.net/6uovronb/

thanks!

Answer 1

I updated your fiddle and added your markers to a marker group.

Here's some sample code:

var markers = new L.MarkerClusterGroup();
    markers.addLayer(L.marker([51.5, -0.071], {
        icon: greenIcon
    }).bindPopup("<p>ok</p><p>tada</p>."));

On a slightly unrelated note, I've never used marker cluster but that's a pretty slick leaflet plugin.