From db3b7f2fc27b38353d852e898e3e9466f8606e97 Mon Sep 17 00:00:00 2001 From: danzel Date: Wed, 18 Jul 2012 11:46:51 +1200 Subject: [PATCH] Tidy up examples. Add a -everything example which shows boundarys on mouse over and zooms on click. --- example/marker-clustering-convexhull.html | 57 +++++++------- example/marker-clustering-everything.html | 92 +++++++++++++++++++++++ 2 files changed, 118 insertions(+), 31 deletions(-) create mode 100644 example/marker-clustering-everything.html diff --git a/example/marker-clustering-convexhull.html b/example/marker-clustering-convexhull.html index 5b3490f74..704fddbe2 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); } }); - populate(); - //populateRandomVector(); - map.addLayer(markers); + markers.on('mouseout', function (a) { + if (a.layer instanceof L.MarkerCluster && polygon) { + map.removeLayer(polygon); + polygon = null; + } + }); - 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()); - }; + map.on('zoomend', function () { + if (polygon) { + map.removeLayer(polygon); + polygon = null; + } + }); + + + populate(); + map.addLayer(markers); diff --git a/example/marker-clustering-everything.html b/example/marker-clustering-everything.html new file mode 100644 index 000000000..17b5073da --- /dev/null +++ b/example/marker-clustering-everything.html @@ -0,0 +1,92 @@ + + + + Leaflet debug page + + + + + + + + + + + + + + + + +
+ + + +