diff --git a/README.md b/README.md
index ce3a9926e..0245e9719 100644
--- a/README.md
+++ b/README.md
@@ -35,11 +35,12 @@ var markers = new L.MarkerClusterGroup({ spiderfyOnMaxZoom: false, showCoverageO
As an option to MarkerClusterGroup you can provide your own function for creating the Icon for the clustered markers.
The default implementation changes color at bounds of 10 and 100, but more advanced uses may require customising this.
You do not need to include the .Default css if you go this way.
+You are passed a MarkerCluster object, you'll probably want to use getChildCount() or getAllChildMarkers() to work out the icon to show
```javascript
var markers = new L.MarkerClusterGroup({ options: {
- iconCreateFunction: function(childCount) {
- return new L.DivIcon({ html: '' + childCount + '' });
+ iconCreateFunction: function(cluster) {
+ return new L.DivIcon({ html: '' + cluster.getChildCount() + '' });
}
}});
```
diff --git a/example/marker-clustering-custom.html b/example/marker-clustering-custom.html
index 66105c701..7b836ea46 100644
--- a/example/marker-clustering-custom.html
+++ b/example/marker-clustering-custom.html
@@ -40,8 +40,8 @@
//Custom radius and icon create function
var markers = new L.MarkerClusterGroup({
maxClusterRadius: 120,
- iconCreateFunction: function (count) {
- return new L.DivIcon({ html: count, className: 'mycluster', iconSize: new L.Point(40, 40) });
+ iconCreateFunction: function (cluster) {
+ return new L.DivIcon({ html: cluster.getChildCount(), className: 'mycluster', iconSize: new L.Point(40, 40) });
},
//Disable all of the defaults:
spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false
diff --git a/src/MarkerCluster.js b/src/MarkerCluster.js
index b0fa84a34..2f089396b 100644
--- a/src/MarkerCluster.js
+++ b/src/MarkerCluster.js
@@ -43,7 +43,7 @@ L.MarkerCluster = L.Marker.extend({
_baseInit: function () {
this._latlng = this._wLatLng;
- L.Marker.prototype.initialize.call(this, this._latlng, { icon: this._group.options.iconCreateFunction(this._childCount) });
+ L.Marker.prototype.initialize.call(this, this._latlng, { icon: this._group.options.iconCreateFunction(this) });
},
_addChild: function (new1) {
@@ -57,7 +57,7 @@ L.MarkerCluster = L.Marker.extend({
}
if (this._icon) {
- this.setIcon(this._group.options.iconCreateFunction(this._childCount));
+ this.setIcon(this._group.options.iconCreateFunction(this));
}
},
@@ -195,7 +195,7 @@ L.MarkerCluster = L.Marker.extend({
if (result) {
if (!('_zoom' in this)) {
- this.setIcon(this._group.options.iconCreateFunction(this._childCount));
+ this.setIcon(this._group.options.iconCreateFunction(this));
}
this._recalculateBounds();
}
@@ -240,7 +240,7 @@ L.MarkerCluster = L.Marker.extend({
this._recalculateBounds();
if (!('_zoom' in this)) {
- this.setIcon(group.options.iconCreateFunction(this._childCount));
+ this.setIcon(group.options.iconCreateFunction(this));
}
return true;
}
@@ -253,7 +253,7 @@ L.MarkerCluster = L.Marker.extend({
if (child._bounds.contains(layer._latlng) && child._recursivelyRemoveLayer(layer)) {
this._childCount--;
if (!('_zoom' in this)) {
- this.setIcon(group.options.iconCreateFunction(this._childCount));
+ this.setIcon(group.options.iconCreateFunction(this));
}
//if our child cluster is no longer a cluster, remove it and replace with just the marker
@@ -273,7 +273,7 @@ L.MarkerCluster = L.Marker.extend({
this._recalculateBounds();
if (this._icon && this._childCount > 1) { //No need to update if we are getting removed anyway
- this.setIcon(group.options.iconCreateFunction(this._childCount));
+ this.setIcon(group.options.iconCreateFunction(this));
}
return true;
}
diff --git a/src/MarkerClusterGroup.js b/src/MarkerClusterGroup.js
index d556aced2..b2d292bb2 100644
--- a/src/MarkerClusterGroup.js
+++ b/src/MarkerClusterGroup.js
@@ -146,7 +146,9 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({
},
//Default functionality
- _defaultIconCreateFunction: function (childCount) {
+ _defaultIconCreateFunction: function (cluster) {
+ var childCount = cluster.getChildCount();
+
var c = ' marker-cluster-';
if (childCount < 10) {
c += 'small';