Move defaults out to their own file and use them for marker-clustering-everything. Gives people an easy way to use clustering with all the defaults.

example/marker-clustering-everything.html

@@ -12,6 +12,7 @@
 
 	<link rel="stylesheet" href="../src/MarkerCluster.css" />
 	<link rel="stylesheet" href="../src/MarkerCluster.Default.css" />
+	<script src="../src/MarkerCluster.Default.js"></script>
 	<script src="../src/MarkerClusterGroup.js"></script>
 	<script src="../src/MarkerCluster.js"></script>
 	<script src="../src/MarkerCluster.QuickHull.js"></script>
@@ -33,6 +34,7 @@
 		var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
 
 		var markers = new L.MarkerClusterGroup();
+		L.MarkerClusterDefault.bindEvents(map, markers);
 		var markersList = [];
 
 		function populate() {
@@ -55,39 +57,6 @@
 					southWest.lng + lngSpan * Math.random());
 		}
 
-		//Zoom or spiderfy on cluster click
-		markers.on('clusterclick', function (a) {
-			if (map.getMaxZoom() === map.getZoom()) {
-				a.layer.spiderfy();
-			} else {
-				a.layer.zoomToBounds();
-			}
-		});
-
-		//Show convex hull (boundary) polygon on mouse over
-		var polygon;
-		var polygonCluster;
-		markers.on('clustermouseover', function (a) {
-			if (polygon) {
-				map.removeLayer(polygon);
-			}
-			polygon = new L.Polygon(a.layer.getConvexHull());
-			map.addLayer(polygon);
-		});
-		markers.on('clustermouseout', function (a) {
-			if (polygon) {
-				map.removeLayer(polygon);
-				polygon = null;
-			}
-		});
-		map.on('zoomend', function () {
-			if (polygon) {
-				map.removeLayer(polygon);
-				polygon = null;
-			}
-		});
-
-
 		populate();
 		map.addLayer(markers);
 

src/MarkerCluster.Default.js

@@ -0,0 +1,54 @@
+(function () {
+	L.MarkerClusterDefault = {
+		iconCreateFunction: function (childCount) {
+			var c = ' marker-cluster-';
+			if (childCount < 10) {
+				c += 'small';
+			} else if (childCount < 100) {
+				c += 'medium';
+			} else {
+				c += 'large';
+			}
+
+			return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
+		},
+
+		_shownPolygon: null,
+
+		bindEvents: function (map, markerClusterGroup) {
+			var me = this;
+
+			//Zoom cluster click or spiderfy if we are at the lowest level
+			markerClusterGroup.on('clusterclick', function (a) {
+				if (map.getMaxZoom() === map.getZoom()) {
+					a.layer.spiderfy();
+				} else {
+					a.layer.zoomToBounds();
+				}
+			});
+
+			//Show convex hull (boundary) polygon on mouse over
+			markerClusterGroup.on('clustermouseover', function (a) {
+				if (me._shownPolygon) {
+					map.removeLayer(me._shownPolygon);
+				}
+				if (a.layer.getChildCount() > 2) {
+					me._shownPolygon = new L.Polygon(a.layer.getConvexHull());
+					map.addLayer(me._shownPolygon);
+				}
+			});
+			markerClusterGroup.on('clustermouseout', function (a) {
+				if (me._shownPolygon) {
+					map.removeLayer(me._shownPolygon);
+					me._shownPolygon = null;
+				}
+			});
+			map.on('zoomend', function () {
+				if (me._shownPolygon) {
+					map.removeLayer(me._shownPolygon);
+					me._shownPolygon = null;
+				}
+			});
+		}
+	};
+}());

src/MarkerCluster.js

@@ -31,6 +31,11 @@ L.MarkerCluster = L.Marker.extend({
 		return storageArray;
 	},
 
+	//Returns the count of how many child markers we have
+	getChildCount: function () {
+		return this._childCount;
+	},
+
 	//Zoom to the extents of this cluster
 	zoomToBounds: function () {
 		this._group._map.fitBounds(this._bounds);

src/MarkerClusterGroup.js

@@ -7,18 +7,7 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({
 
 	options: {
 		maxClusterRadius: 60, //A cluster will cover at most this many pixels from its center
-		iconCreateFunction: function (childCount) {
-			var c = ' marker-cluster-';
-			if (childCount < 10) {
-				c += 'small';
-			} else if (childCount < 100) {
-				c += 'medium';
-			} else {
-				c += 'large';
-			}
-
-			return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
-		}
+		iconCreateFunction: L.MarkerClusterDefault ? L.MarkerClusterDefault.iconCreateFunction : null
 	},
 
 	initialize: function (options) {