nicolas/librenms
1
0
Fork 0
mirror of https://github.com/stylersnico/librenms.git synced 2026-07-28 08:02:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add option singleMarkerMode

Browse Source 
Defaults to false. Setting to true causes markers
to appear as clusters with count 1. This is done
by overriding the Marker's icon to the Group's
iconCreateFunction.
This commit is contained in:
Alec Winograd
2012-08-31 23:09:07 -07:00
parent ce81e394c6
commit 068f9f9f8a
3 changed files with 66 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/marker-clustering-singlemarkermode.html
+61
View File
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="screen.css" />
<link rel="stylesheet" href="../dist/MarkerCluster.css" />
<link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/MarkerCluster.Default.ie.css" /><![endif]-->
<script src="../dist/leaflet.markercluster-src.js"></script>
</head>
<body>
<div id="map"></div>
<span>Click a cluster to zoom to its bounds</span>
<script type="text/javascript">
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
latlng = new L.LatLng(50.5, 30.51);
var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
var markers = new L.MarkerClusterGroup({ singleMarkerMode: true});
function populate() {
for (var i = 0; i < 100; i++) {
var m = new L.Marker(getRandomLatLng(map));
markers.addLayer(m);
}
return false;
}
function getRandomLatLng(map) {
var bounds = map.getBounds(),
southWest = bounds.getSouthWest(),
northEast = bounds.getNorthEast(),
lngSpan = northEast.lng - southWest.lng,
latSpan = northEast.lat - southWest.lat;
return new L.LatLng(
southWest.lat + latSpan * Math.random(),
southWest.lng + lngSpan * Math.random());
}
markers.on('clusterclick', function (a) {
a.layer.zoomToBounds();
});
populate();
map.addLayer(markers);
</script>
</body>
</html>
src/MarkerCluster.js
+4
View File
@@ -52,6 +52,10 @@ L.MarkerCluster = L.Marker.extend({
this._childClusters.push(new1);
this._childCount += new1._childCount;
} else {
if (this._group.options.singleMarkerMode === true) {
new1.options.icon = this._group.options.iconCreateFunction(1);
}
this._markers.push(new1);
this._childCount++;
}
src/MarkerClusterGroup.js
+1
View File
@@ -12,6 +12,7 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({
spiderfyOnMaxZoom: true,
showCoverageOnHover: true,
zoomToBoundsOnClick: true,
singleMarkerMode: false,
disableClusteringAtZoom: null
},