[Pkg-javascript-commits] [leaflet-markercluster] 86/479: 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.

Jonas Smedegaard dr at jones.dk
Thu Oct 16 16:00:13 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 bca91c6dc98ee3b729b581cd0ec3a42c27249569
Author: danzel <danzel at localhost.geek.nz>
Date:   Tue Jul 24 13:46:35 2012 +1200

    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 | 35 ++------------------
 src/MarkerCluster.Default.js              | 54 +++++++++++++++++++++++++++++++
 src/MarkerCluster.js                      |  5 +++
 src/MarkerClusterGroup.js                 | 13 +-------
 4 files changed, 62 insertions(+), 45 deletions(-)

diff --git a/example/marker-clustering-everything.html b/example/marker-clustering-everything.html
index be6ef72..b91a189 100644
--- a/example/marker-clustering-everything.html
+++ b/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() {
@@ -54,39 +56,6 @@
 					southWest.lat + latSpan * Math.random(),
 					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);
diff --git a/src/MarkerCluster.Default.js b/src/MarkerCluster.Default.js
new file mode 100644
index 0000000..212e28e
--- /dev/null
+++ b/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;
+				}
+			});
+		}
+	};
+}());
\ No newline at end of file
diff --git a/src/MarkerCluster.js b/src/MarkerCluster.js
index 3ece9f3..c82ad55 100644
--- a/src/MarkerCluster.js
+++ b/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);
diff --git a/src/MarkerClusterGroup.js b/src/MarkerClusterGroup.js
index 856bb3d..1d2f78a 100644
--- a/src/MarkerClusterGroup.js
+++ b/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) {

-- 
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