[Pkg-javascript-commits] [leaflet-markercluster] 188/479: Instead of passing childCount to iconCreateFunction, pass the markerCluster instead. Allows the user more flexibility with deciding on the icon.

Jonas Smedegaard dr at jones.dk
Thu Oct 16 16:00:28 UTC 2014


This is an automated email from the git hooks/post-receive script.

js pushed a commit to branch master
in repository leaflet-markercluster.

commit a1c55be6965f3b0da7c11a5814e14d5f042ccad2
Author: danzel <danzel at localhost.geek.nz>
Date:   Thu Aug 30 11:45:44 2012 +1200

    Instead of passing childCount to iconCreateFunction, pass the markerCluster instead. Allows the user more flexibility with deciding on the icon.
---
 README.md                             |  5 +++--
 example/marker-clustering-custom.html |  4 ++--
 src/MarkerCluster.js                  | 12 ++++++------
 src/MarkerClusterGroup.js             |  4 +++-
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index ce3a992..0245e97 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: '<b>' + childCount + '</b>' });
+	iconCreateFunction: function(cluster) {
+		return new L.DivIcon({ html: '<b>' + cluster.getChildCount() + '</b>' });
 	}
 }});
 ```
diff --git a/example/marker-clustering-custom.html b/example/marker-clustering-custom.html
index 66105c7..7b836ea 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 b0fa84a..2f08939 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 d556ace..b2d292b 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';

-- 
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/leaflet-markercluster.git



More information about the Pkg-javascript-commits mailing list