[Pkg-javascript-commits] [leaflet-markercluster] 87/479: Make everything work, add a custom example showing doing everything custom.
Jonas Smedegaard
dr at jones.dk
Thu Oct 16 16:00:13 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 5d9b42780175c27607896c3ee1327fc1dc9b6018
Author: danzel <danzel at localhost.geek.nz>
Date: Tue Jul 24 14:14:27 2012 +1200
Make everything work, add a custom example showing doing everything custom.
---
example/marker-clustering-convexhull.html | 1 +
...nvexhull.html => marker-clustering-custom.html} | 71 ++++++++++++++--------
example/marker-clustering-zoomtobounds.html | 1 +
example/marker-clustering.html | 11 ++--
src/MarkerCluster.Default.js | 2 +-
5 files changed, 54 insertions(+), 32 deletions(-)
diff --git a/example/marker-clustering-convexhull.html b/example/marker-clustering-convexhull.html
index 518301c..bfad234 100644
--- a/example/marker-clustering-convexhull.html
+++ b/example/marker-clustering-convexhull.html
@@ -12,6 +12,7 @@
<link rel="stylesheet" href="../src/MarkerCluster.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/MarkerCluster.js"></script>
<script src="../src/MarkerCluster.QuickHull.js"></script>
diff --git a/example/marker-clustering-convexhull.html b/example/marker-clustering-custom.html
similarity index 68%
copy from example/marker-clustering-convexhull.html
copy to example/marker-clustering-custom.html
index 518301c..df73a2c 100644
--- a/example/marker-clustering-convexhull.html
+++ b/example/marker-clustering-custom.html
@@ -11,16 +11,24 @@
<link rel="stylesheet" href="../src/MarkerCluster.css" />
- <link rel="stylesheet" href="../src/MarkerCluster.Default.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>
- <button id="populate">Populate 1 marker</button>
- <button id="remove">Remove 1 marker</button>
<script type="text/javascript">
@@ -31,7 +39,15 @@
var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
- var markers = new L.MarkerClusterGroup();
+
+ //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++) {
@@ -40,6 +56,13 @@
}
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(),
@@ -52,36 +75,34 @@
southWest.lng + lngSpan * Math.random());
}
+ populate();
+ map.addLayer(markers);
- var polygon;
- var polygonCluster;
- markers.on('clustermouseover', function (a) {
- console.log('cluster ' + a.layer.getAllChildMarkers().length);
-
- if (polygon) {
- map.removeLayer(polygon);
- }
- polygon = new L.Polygon(a.layer.getConvexHull());
- map.addLayer(polygon);
- });
- markers.on('clustermouseout', function (a) {
- if (polygon) {
- map.removeLayer(polygon);
- polygon = null;
- }
- });
- map.on('zoomend', function () {
+ 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);
- populate();
- map.addLayer(markers);
</script>
</body>
</html>
diff --git a/example/marker-clustering-zoomtobounds.html b/example/marker-clustering-zoomtobounds.html
index 23bfafe..1af567d 100644
--- a/example/marker-clustering-zoomtobounds.html
+++ b/example/marker-clustering-zoomtobounds.html
@@ -12,6 +12,7 @@
<link rel="stylesheet" href="../src/MarkerCluster.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/MarkerCluster.js"></script>
</head>
diff --git a/example/marker-clustering.html b/example/marker-clustering.html
index 24e54e9..d7519dd 100644
--- a/example/marker-clustering.html
+++ b/example/marker-clustering.html
@@ -12,6 +12,7 @@
<link rel="stylesheet" href="../src/MarkerCluster.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/MarkerCluster.js"></script>
</head>
@@ -60,16 +61,14 @@
southWest.lng + lngSpan * Math.random());
}
+ markers.on('clusterclick', function (a) {
+ console.log('cluster ' + a.layer.getAllChildMarkers().length);
+ });
markers.on('click', function (a) {
- if (a.layer instanceof L.MarkerCluster) {
- console.log('cluster ' + a.layer.getAllChildMarkers().length);
- } else {
- console.log('marker ' + a.layer);
- }
+ console.log('marker ' + a.layer);
});
populate();
- //populateRandomVector();
map.addLayer(markers);
L.DomUtil.get('populate').onclick = function () {
diff --git a/src/MarkerCluster.Default.js b/src/MarkerCluster.Default.js
index 212e28e..d4de4e2 100644
--- a/src/MarkerCluster.Default.js
+++ b/src/MarkerCluster.Default.js
@@ -18,7 +18,7 @@
bindEvents: function (map, markerClusterGroup) {
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) {
if (map.getMaxZoom() === map.getZoom()) {
a.layer.spiderfy();
--
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