[Pkg-javascript-commits] [leaflet-markercluster] 98/128: Add an example with draggable markers. Fix dragging markers. Fixes #685
Jonas Smedegaard
dr at jones.dk
Sun Apr 16 06:26:07 UTC 2017
This is an automated email from the git hooks/post-receive script.
js pushed a commit to branch master
in repository leaflet-markercluster.
commit ee69a43f8541f94c1d8f4debceb985c3eb278689
Author: danzel <dave at smartrak.co.nz>
Date: Tue Jan 24 14:15:26 2017 +1300
Add an example with draggable markers. Fix dragging markers. Fixes #685
---
example/marker-clustering-dragging.html | 83 +++++++++++++++++++++++++++++++++
src/MarkerClusterGroup.js | 32 +++++++++++--
2 files changed, 110 insertions(+), 5 deletions(-)
diff --git a/example/marker-clustering-dragging.html b/example/marker-clustering-dragging.html
new file mode 100644
index 0000000..4936aeb
--- /dev/null
+++ b/example/marker-clustering-dragging.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet-src.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" />
+ <script src="../dist/leaflet.markercluster-src.js"></script>
+</head>
+<body>
+
+ <div id="map"></div>
+ <button id="moveone">Move a random marker</button>
+
+ <script type="text/javascript">
+
+ var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+ maxZoom: 18,
+ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+ }),
+ latlng = new L.LatLng(50.5, 30.51);
+
+ var map = new L.Map('map', {center: latlng, zoom: 15, layers: [tiles]});
+
+ var markers = new L.MarkerClusterGroup();
+ var markersList = [];
+
+ function populate() {
+ for (var i = 0; i < 100; i++) {
+ var m = new L.Marker(getRandomLatLng(map), { draggable: true });
+ 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(),
+ 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) {
+ alert('cluster ' + a.layer.getAllChildMarkers().length);
+ });
+ markers.on('click', function (a) {
+ alert('marker ' + a.layer);
+ });
+
+ populate();
+ map.addLayer(markers);
+
+ L.DomUtil.get('moveone').onclick = function () {
+ var m = markersList[Math.floor(Math.random() * markersList.length)];
+ var bounds = map.getBounds(),
+ southWest = bounds.getSouthWest(),
+ northEast = bounds.getNorthEast(),
+ lngSpan = northEast.lng - southWest.lng,
+ latSpan = northEast.lat - southWest.lat;
+ m.setLatLng(new L.LatLng(
+ southWest.lat + latSpan * 0.5,
+ southWest.lng + lngSpan * 0.5));
+ };
+ </script>
+</body>
+</html>
diff --git a/src/MarkerClusterGroup.js b/src/MarkerClusterGroup.js
index 4031a68..d3a82e0 100644
--- a/src/MarkerClusterGroup.js
+++ b/src/MarkerClusterGroup.js
@@ -161,7 +161,9 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({
this._refreshClustersIcons();
+ layer.off('dragstart', this._childMarkerDragStart, this);
layer.off('move', this._childMarkerMoved, this);
+ layer.off('dragend', this._childMarkerDragEnd, this);
if (this._featureGroup.hasLayer(layer)) {
this._featureGroup.removeLayer(layer);
@@ -407,7 +409,9 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({
this._nonPointGroup.clearLayers();
this.eachLayer(function (marker) {
+ marker.off('dragstart', this._childMarkerDragStart, this);
marker.off('move', this._childMarkerMoved, this);
+ marker.off('dragend', this._childMarkerDragEnd, this);
delete marker.__parent;
}, this);
@@ -653,15 +657,31 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({
}
},
+ _childMarkerDragStart: function (e) {
+ e.target.__dragStart = e.target._latlng;
+ },
+
_childMarkerMoved: function (e) {
- if (!this._ignoreMove) {
- e.target._latlng = e.oldLatLng;
- this.removeLayer(e.target);
+ if (!this._ignoreMove && !e.target.__dragStart) {
+ this._moveChild(e.target, e.oldLatLng, e.latlng);
+ }
+ },
- e.target._latlng = e.latlng;
- this.addLayer(e.target);
+ _moveChild: function (layer, from, to) {
+ layer._latlng = from;
+ this.removeLayer(layer);
+
+ layer._latlng = to;
+ this.addLayer(layer);
+ },
+
+ _childMarkerDragEnd: function (e) {
+ if (e.target.__dragStart) {
+ this._moveChild(e.target, e.target.__dragStart, e.target._latlng);
}
+ delete e.target.__dragStart;
},
+
//Internal function for removing a marker from everything.
//dontUpdateMap: set to true if you will handle updating the map manually (for bulk functions)
@@ -908,7 +928,9 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({
this._overrideMarkerIcon(layer);
}
+ layer.on('dragstart', this._childMarkerDragStart, this);
layer.on('move', this._childMarkerMoved, this);
+ layer.on('dragend', this._childMarkerDragEnd, this);
//Find the lowest zoom level to slot this one in
for (; zoom >= 0; zoom--) {
--
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