[Pkg-javascript-commits] [leaflet-markercluster] 34/479: Tidy up examples. Add a -everything example which shows boundarys on mouse over and zooms on click.
Jonas Smedegaard
dr at jones.dk
Thu Oct 16 16:00:06 UTC 2014
This is an automated email from the git hooks/post-receive script.
js pushed a commit to branch master
in repository leaflet-markercluster.
commit db3b7f2fc27b38353d852e898e3e9466f8606e97
Author: danzel <danzel at localhost.geek.nz>
Date: Wed Jul 18 11:46:51 2012 +1200
Tidy up examples. Add a -everything example which shows boundarys on mouse over and zooms on click.
---
example/marker-clustering-convexhull.html | 55 +++++++++----------
...hull.html => marker-clustering-everything.html} | 63 ++++++++++------------
2 files changed, 54 insertions(+), 64 deletions(-)
diff --git a/example/marker-clustering-convexhull.html b/example/marker-clustering-convexhull.html
index 5b3490f..704fddb 100644
--- a/example/marker-clustering-convexhull.html
+++ b/example/marker-clustering-convexhull.html
@@ -32,23 +32,14 @@
var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
var markers = new L.MarkerClusterGroup();
- var markersList = [];
function populate() {
for (var i = 0; i < 100; i++) {
var m = new L.Marker(getRandomLatLng(map));
- markersList.push(m);
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(),
@@ -61,37 +52,41 @@
southWest.lng + lngSpan * Math.random());
}
- markers.on('click', function (a) {
+
+
+ var polygon;
+ var polygonCluster;
+ markers.on('mouseover', function (a) {
if (a.layer instanceof L.MarkerCluster) {
console.log('cluster ' + a.layer.getAllChildMarkers().length);
- //a.layer.zoomToBounds();
- var path = new L.Polygon(a.layer.getConvexHull());
- map.addLayer(path);
+ if (polygon) {
+ map.removeLayer(polygon);
+ }
+ polygon = new L.Polygon(a.layer.getConvexHull());
+ map.addLayer(polygon);
} else {
console.log('marker ' + a.layer);
}
});
+ markers.on('mouseout', function (a) {
+ if (a.layer instanceof L.MarkerCluster && polygon) {
+ map.removeLayer(polygon);
+ polygon = null;
+ }
+ });
+
+ map.on('zoomend', function () {
+ if (polygon) {
+ map.removeLayer(polygon);
+ polygon = null;
+ }
+ });
+
+
populate();
- //populateRandomVector();
map.addLayer(markers);
-
- L.DomUtil.get('populate').onclick = function () {
- var bounds = map.getBounds(),
- southWest = bounds.getSouthWest(),
- northEast = bounds.getNorthEast(),
- lngSpan = northEast.lng - southWest.lng,
- latSpan = northEast.lat - southWest.lat;
- var m = new L.Marker(new L.LatLng(
- southWest.lat + latSpan * 0.5,
- southWest.lng + lngSpan * 0.5));
- markersList.push(m);
- markers.addLayer(m);
- };
- L.DomUtil.get('remove').onclick = function () {
- markers.removeLayer(markersList.pop());
- };
</script>
</body>
</html>
diff --git a/example/marker-clustering-convexhull.html b/example/marker-clustering-everything.html
similarity index 64%
copy from example/marker-clustering-convexhull.html
copy to example/marker-clustering-everything.html
index 5b3490f..17b5073 100644
--- a/example/marker-clustering-convexhull.html
+++ b/example/marker-clustering-everything.html
@@ -19,8 +19,6 @@
<body>
<div id="map"></div>
- <button id="populate">Populate 1 marker</button>
- <button id="remove">Remove 1 marker</button>
<script type="text/javascript">
@@ -42,13 +40,6 @@
}
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(),
@@ -60,38 +51,42 @@
southWest.lat + latSpan * Math.random(),
southWest.lng + lngSpan * Math.random());
}
-
+
+ //Zoom on cluster click
markers.on('click', function (a) {
if (a.layer instanceof L.MarkerCluster) {
- console.log('cluster ' + a.layer.getAllChildMarkers().length);
- //a.layer.zoomToBounds();
-
- var path = new L.Polygon(a.layer.getConvexHull());
- map.addLayer(path);
- } else {
- console.log('marker ' + a.layer);
+ a.layer.zoomToBounds();
+ }
+ });
+
+ //Show convex hull (boundary) polygon on mouse over
+ var polygon;
+ var polygonCluster;
+ markers.on('mouseover', function (a) {
+ if (a.layer instanceof L.MarkerCluster) {
+ if (polygon) {
+ map.removeLayer(polygon);
+ }
+ polygon = new L.Polygon(a.layer.getConvexHull());
+ map.addLayer(polygon);
+ }
+ });
+ markers.on('mouseout', function (a) {
+ if (a.layer instanceof L.MarkerCluster && polygon) {
+ map.removeLayer(polygon);
+ polygon = null;
+ }
+ });
+ map.on('zoomend', function () {
+ if (polygon) {
+ map.removeLayer(polygon);
+ polygon = null;
}
});
+
populate();
- //populateRandomVector();
map.addLayer(markers);
-
- L.DomUtil.get('populate').onclick = function () {
- var bounds = map.getBounds(),
- southWest = bounds.getSouthWest(),
- northEast = bounds.getNorthEast(),
- lngSpan = northEast.lng - southWest.lng,
- latSpan = northEast.lat - southWest.lat;
- var m = new L.Marker(new L.LatLng(
- southWest.lat + latSpan * 0.5,
- southWest.lng + lngSpan * 0.5));
- markersList.push(m);
- markers.addLayer(m);
- };
- L.DomUtil.get('remove').onclick = function () {
- markers.removeLayer(markersList.pop());
- };
</script>
</body>
</html>
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/leaflet-markercluster.git
More information about the Pkg-javascript-commits
mailing list