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.

This commit is contained in:
danzel
2012-07-24 13:46:35 +12:00
parent 602a5ae1d2
commit bca91c6dc9
4 changed files with 62 additions and 45 deletions
+54
View File
@@ -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;
}
});
}
};
}());
+5
View File
@@ -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);
+1 -12
View File
@@ -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) {