Merge pull request #67 from oliverroick/leaflet-draw

Fix #28: Add Leaflet.Draw support
oliverroick · Jan 21, 2019 · 803552e · 803552e
2 parents 863a4f5 + f0a6fbd
commit 803552e
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -186,6 +186,42 @@ var polyline = L.polyline([
 deflate_features.addLayer(polyline);
 ```
 
+### Leaflet.Draw
+
+[Leaflet.Draw](https://github.com/Leaflet/Leaflet.draw) is a plugin that adds support for drawing and editing vector features on Leaflet maps. Leaflet.Deflate integrates with Leaflet.Draw.
+
+Initialize the [`Leaflet.draw` control](https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest#l-draw), instructing it to use the `L.deflate` instance to draw and edit features and add it to the map. 
+
+To ensure that newly added or edited features are deflated at the correct zoom level and show the marker at the correct location, you need call `prepLayer` with the edited layer on every change. In the example below, we call `prepLayer` inside the handler function for the [`L.Draw.Event.EDITED`](https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest#l-draw-event-draw:editstop) event.
+
+```javascript
+var map = L.map("map").setView([51.505, -0.09], 12);
+
+var deflate_features = L.deflate({minSize: 20, markerCluster: true});
+deflate_features.addTo(map);
+
+var drawControl = new L.Control.Draw({
+    edit: {
+        featureGroup: deflate_features
+    }
+});
+map.addControl(drawControl);
+
+map.on(L.Draw.Event.CREATED, function (event) {
+    var layer = event.layer;
+    deflate_features.addLayer(layer);
+});
+
+map.on(L.Draw.Event.EDITED, function(event) {
+    const editedLayers = event.layers;
+    editedLayers.eachLayer(function(l) {
+        deflate_features.prepLayer(l);
+    });
+});
+
+```
+
+
 ## Developing
 
 You'll need to install the dev dependencies to test and write the distribution file.

diff --git a/example/leaflet-draw.html b/example/leaflet-draw.html
@@ -1,9 +1,9 @@
 <html>
     <head>
-        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
-        <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.13/leaflet.draw.css" />
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.13/leaflet.draw-src.js"></script>
+        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
+        <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet-src.js"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw-src.js"></script>
         <script src="../src/L.Deflate.js"></script>
         <style>
             #map {
@@ -55,27 +55,20 @@
 
         var drawControl = new L.Control.Draw({
             edit: {
-                featureGroup: features._featureGroup
+                featureGroup: features
             }
         });
         map.addControl(drawControl);
 
-        map.on(L.Draw.Event.CREATED, function(event) {
-            event.layer.addTo(features);
-        });
-
-        map.on(L.Draw.Event.DELETED, function(event) {
-            const deletedLayers = event.layers;
-
-            deletedLayers.eachLayer(function(l) {
-                features.removeLayer(l);
-            });
+        map.on(L.Draw.Event.CREATED, function (event) {
+            var layer = event.layer;
+            features.addLayer(layer);
         });
 
         map.on(L.Draw.Event.EDITED, function(event) {
             const editedLayers = event.layers;
             editedLayers.eachLayer(function(l) {
-                l.marker = features._makeMarker(l);
+                features.prepLayer(l);
             });
         });
     }

diff --git a/src/L.Deflate.js b/src/L.Deflate.js
@@ -123,8 +123,8 @@ L.Deflate = L.FeatureGroup.extend({
         return marker
     },
 
-    _prepLayer: function(layer) {
-        if (layer.getBounds && !layer.zoomThreshold && !layer.marker) {
+    prepLayer: function(layer) {
+        if (layer.getBounds) {
             layer.computedBounds = this._getBounds(layer);
 
             var zoomThreshold = this._getZoomThreshold(layer);
@@ -147,7 +147,7 @@ L.Deflate = L.FeatureGroup.extend({
             }
         } else {
             if (this._map) {
-                this._prepLayer(layer);
+                this.prepLayer(layer);
                 this._addToMap(layer);
             } else {
                 this._needsPrepping.push(layer);