diff --git a/example/marker-clustering-everything.html b/example/marker-clustering-everything.html index be6ef724e..b91a18932 100644 --- a/example/marker-clustering-everything.html +++ b/example/marker-clustering-everything.html @@ -12,6 +12,7 @@ + @@ -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 000000000..212e28ee7 --- /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: '
' + childCount + '
', 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 3ece9f3e4..c82ad55ba 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 856bb3dd9..1d2f78a8a 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: '
' + childCount + '
', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) }); - } + iconCreateFunction: L.MarkerClusterDefault ? L.MarkerClusterDefault.iconCreateFunction : null }, initialize: function (options) {