mirror of
https://github.com/librenms/librenms.git
synced 2024-10-07 16:52:45 +00:00
Alec Winograd
068f9f9f8a
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.
62 lines
2.0 KiB
HTML
62 lines
2.0 KiB
HTML
<!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 © 2011 OpenStreetMap contributors, Imagery © 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>
|