mirror/librenms-librenms
1
0
Fork 0
mirror of https://github.com/librenms/librenms.git synced 2024-10-07 16:52:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Make everything work, add a custom example showing doing everything custom.

Browse Source
This commit is contained in:
danzel
2012-07-24 14:14:27 +12:00
parent bca91c6dc9
commit 5d9b427801
5 changed files with 116 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
example/marker-clustering-convexhull.html
View File

@@ -12,6 +12,7 @@
<link rel="stylesheet" href="../src/MarkerCluster.css" /> <link rel="stylesheet" href="../src/MarkerCluster.css" />
<link rel="stylesheet" href="../src/MarkerCluster.Default.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/MarkerClusterGroup.js"></script>
<script src="../src/MarkerCluster.js"></script> <script src="../src/MarkerCluster.js"></script>
<script src="../src/MarkerCluster.QuickHull.js"></script> <script src="../src/MarkerCluster.QuickHull.js"></script>

108
example/marker-clustering-custom.html Normal file
View File

@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../lib/leaflet-dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../lib/leaflet-dist/leaflet.ie.css" /><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="screen.css" />
<script src="../lib/leaflet-dist/leaflet-src.js"></script>
<link rel="stylesheet" href="../src/MarkerCluster.css" />
<script src="../src/MarkerClusterGroup.js"></script>
<script src="../src/MarkerCluster.js"></script>
<script src="../src/MarkerCluster.QuickHull.js"></script>
<style>
.mycluster {
width: 40px;
height: 40px;
background-color: greenyellow;
text-align: center;
font-size: 24px;
}
</style>
</head>
<body>
<div id="map"></div>
<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]});
//Custom radius and icon create function
var markers = new L.MarkerClusterGroup({
maxClusterRadius: 120,
iconCreateFunction: function (count) {
return new L.DivIcon({ html: count, className: 'mycluster', iconSize: new L.Point(40, 40) });
}
});
function populate() {
for (var i = 0; i < 100; i++) {
var m = new L.Marker(getRandomLatLng(map));
markers.addLayer(m);
}
return false;
}
function populateRandomVector() {
for (var i = 0, latlngs = [], len = 20; i < len; i++) {
latlngs.push(getRandomLatLng(map));
}
var path = new L.Polyline(latlngs);
map.addLayer(path);
}
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());
}
populate();
map.addLayer(markers);
var shownLayer, polygon;
function removePolygon() {
if (shownLayer) {
shownLayer.setOpacity(1);
}
if (polygon) {
map.removeLayer(polygon);
polygon = null;
}
};
markers.on('clustermouseover', function (a) {
removePolygon();
a.layer.setOpacity(0.2);
shownLayer = a.layer;
polygon = new L.Polygon(a.layer.getConvexHull());
map.addLayer(polygon);
});
markers.on('clustermouseout', removePolygon);
map.on('zoomend', removePolygon);
</script>
</body>
</html>

1
example/marker-clustering-zoomtobounds.html
View File

@@ -12,6 +12,7 @@
<link rel="stylesheet" href="../src/MarkerCluster.css" /> <link rel="stylesheet" href="../src/MarkerCluster.css" />
<link rel="stylesheet" href="../src/MarkerCluster.Default.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/MarkerClusterGroup.js"></script>
<script src="../src/MarkerCluster.js"></script> <script src="../src/MarkerCluster.js"></script>
</head> </head>

9
example/marker-clustering.html
View File

@@ -12,6 +12,7 @@
<link rel="stylesheet" href="../src/MarkerCluster.css" /> <link rel="stylesheet" href="../src/MarkerCluster.css" />
<link rel="stylesheet" href="../src/MarkerCluster.Default.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/MarkerClusterGroup.js"></script>
<script src="../src/MarkerCluster.js"></script> <script src="../src/MarkerCluster.js"></script>
</head> </head>
@@ -60,16 +61,14 @@
southWest.lng + lngSpan * Math.random()); southWest.lng + lngSpan * Math.random());
} }
markers.on('click', function (a) { markers.on('clusterclick', function (a) {
if (a.layer instanceof L.MarkerCluster) {
console.log('cluster ' + a.layer.getAllChildMarkers().length); console.log('cluster ' + a.layer.getAllChildMarkers().length);
} else { });
markers.on('click', function (a) {
console.log('marker ' + a.layer); console.log('marker ' + a.layer);
}
}); });
populate(); populate();
//populateRandomVector();
map.addLayer(markers); map.addLayer(markers);
L.DomUtil.get('populate').onclick = function () { L.DomUtil.get('populate').onclick = function () {

2
src/MarkerCluster.Default.js
View File

@@ -18,7 +18,7 @@
bindEvents: function (map, markerClusterGroup) { bindEvents: function (map, markerClusterGroup) {
var me = this; var me = this;
//Zoom cluster click or spiderfy if we are at the lowest level //Zoom on cluster click or spiderfy if we are at the lowest level
markerClusterGroup.on('clusterclick', function (a) { markerClusterGroup.on('clusterclick', function (a) {
if (map.getMaxZoom() === map.getZoom()) { if (map.getMaxZoom() === map.getZoom()) {
a.layer.spiderfy(); a.layer.spiderfy();