Tested with Leaflet 1.0.2, still backwards compatibile!

README.md

@@ -3,21 +3,81 @@ Leaflet.FreeHandShapes
 
 ![MIT License](http://img.shields.io/badge/license-MIT-lightgrey.svg)
  
-![Leaflet](http://img.shields.io/badge/leaflet-0.7.7-green.svg?style=flat)
+![Leaflet](http://img.shields.io/badge/leaflet-1.0.2-green.svg)
 
-Forked from [L.FreeDraw](https://github.com/Wildhoney/Leaflet.FreeDraw)
+Initially forked from and inspired by [L.FreeDraw](https://github.com/Wildhoney/Leaflet.FreeDraw)
+
+## What Is This?
+
+This is a Leaflet plugin for adding/manipulating polygons from a Leaflet map.  It is a freehand drawer that supports mobile, canvas, and multiple instances.  Each instance adds polygons to a Leaflet FeatureGroup, optionally merging with other polygons using [TurfJS](http://turfjs.org/).  Polygons can also be subtracted by other polygons using TurfJS.
 
 [See the demo](https://bozdoz.github.io/Leaflet.FreeHandShapes/)
 
 ![Screenshot](http://i.imgur.com/5Zis4Q4.png)
 
+## Usage
+
+```javascript
+// initialize
+var drawer = new L.FreeHandShapes();
+
+// enable drawing
+drawer.setMode('add');
+
+// stop drawing
+drawer.setMode('view');
+
+// enable substraction
+drawer.setMode('subtract');
+
+// enable click-to-delete
+drawer.setMode('delete');
+```
+
+## Options
+
+L.FreeHandShapes takes the following options:
+
+* `polygon` (object) : Same options as [L.Polygon](http://leafletjs.com/reference-1.0.2.html#polygon)
+**Default:**
+```
+{
+    className: 'leaflet-free-hand-shapes',
+    smoothFactor: 1,
+    fillOpacity : 0.5,
+    noClip : true,
+}
+```
+* `polyline` (object) : Same options as [L.Polyline](http://leafletjs.com/reference-1.0.2.html#polyline)
+**Default:**
+```
+{
+    color:'#5cb85c',
+    opacity:1,
+    smoothFactor: 0,
+    noClip : true,
+    clickable : false,
+    weight:2
+}
+```
+* `simplify_tolerance` (float) : how much to simplify the polygon (argument given to [L.LineUtil.simplify](https://github.com/Leaflet/Leaflet/blob/master/src/geometry/LineUtil.js)). 
+**Default:**
+`0.005`
+* `merge_polygons` (boolean)
+**Default:**
+`true
+
+## Controls
+
+There is no default control available for this plugin, because it is made to be more flexible, allowing for multiple instances and two drawing methods (addition/subtraction).  For an example on how to build your own, take a look at the example, where multiple instances are created for a sample land use development project and bound to some controls (built with [Bootstrap CSS](http://getbootstrap.com/)) : 
+
+* [HTML](https://github.com/bozdoz/Leaflet.FreeHandShapes/blob/master/example/index.html)
+* [JS](https://github.com/bozdoz/Leaflet.FreeHandShapes/blob/master/example/js/draw-controller.js) (See [Line 14](https://github.com/bozdoz/Leaflet.FreeHandShapes/blob/master/example/js/draw-controller.js#L14) for iteration/creation of instances, and [Line 246](https://github.com/bozdoz/Leaflet.FreeHandShapes/blob/master/example/js/draw-controller.js#L246) for handlers bound to the control buttons)
+
+## Pull Requests
+
+Please limit each PR to one clear improvement each (PR's offering several improvements are harder to read).  Any number of bug fixes are welcome!
+
 ## Goals
 
-* ~~Support for Canvas~~
-* ~~Support for Mobile~~
-* ~~Support for multiple instances~~
-* ~~Subtract mode~~
-* A built-in control (L.Control) for UI (probably for each instance)
-* Compatibility with IE10
-* Update to Leaflet 1.0.2!
-* ~~better stability with turfjs...~~
+* A built-in control (L.Control) for UI (probably for each instance)

dist/leaflet-freehandshapes.js

@@ -16969,6 +16969,7 @@
         10: [ function(_dereq_, module, exports) {
             var touch_extend = _dereq_("./leaflet-touch-extend"), _turf = _dereq_("./turf"), asyncForLoop = _dereq_("./async-for-loop");
             L.FreeHandShapes = L.FeatureGroup.extend({
+                version: "0.3.0",
                 options: {
                     polygon: {
                         className: "leaflet-free-hand-shapes",
@@ -17033,12 +17034,17 @@
                         if (this.hasLayer(layer)) {
                             return this;
                         }
-                        if ("on" in layer) {
-                            layer.on(L.FeatureGroup.EVENTS, this._propagateEvent, this);
-                        }
-                        L.LayerGroup.prototype.addLayer.call(this, layer);
-                        if (this._popupContent && layer.bindPopup) {
-                            layer.bindPopup(this._popupContent, this._popupOptions);
+                        if (L.version.substr(0, 1) === "0") {
+                            if ("on" in layer) {
+                                layer.on(L.FeatureGroup.EVENTS, this._propagateEvent, this);
+                            }
+                            L.LayerGroup.prototype.addLayer.call(this, layer);
+                            if (this._popupContent && layer.bindPopup) {
+                                layer.bindPopup(this._popupContent, this._popupOptions);
+                            }
+                        } else {
+                            layer.addEventParent(this);
+                            L.LayerGroup.prototype.addLayer.call(this, layer);
                         }
                         return this;
                     }

gulpfile.js

@@ -61,7 +61,8 @@ gulp.task('bs', ['browserify-example'], function() {
 });
 
 gulp.task('watch', ['bs'], function() {
-    gulp.watch(['./src/*.js','./example/js/*.js', '!./example/js/main.js'], ['browserify-example']);
+    gulp.watch(['./src/*.js','./example/js/*.js', 
+        '!./example/js/main.js', '!./example/js/turf-web-worker.min.js'], ['browserify-example']);
 });
 
 function browserifyTemplate (file, output, options) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "leaflet.freehandshapes",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Refactored Leaflet plugin for drawing freehand polygons, with support for mobile",
   "main": "dist/leaflet.freehandshapes.js",
   "authors": [
@@ -35,7 +35,7 @@
     "gulp": "^3.9.1",
     "gulp-derequire": "^2.1.0",
     "gulp-uglify": "^2.0.0",
-    "leaflet": "^0.7.7",
+    "leaflet": "^1.0.2",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0"
   }

src/index.js

@@ -3,7 +3,8 @@ var touch_extend = require('./leaflet-touch-extend'),
     asyncForLoop = require('./async-for-loop');
 
 L.FreeHandShapes = L.FeatureGroup.extend({
-    options: {
+    version : "0.3.0",
+    options : {
         polygon: {
             className: 'leaflet-free-hand-shapes',
             smoothFactor: 1,
@@ -81,19 +82,29 @@ L.FreeHandShapes = L.FeatureGroup.extend({
 
     addLayer : function (layer, noevent) {
         // conditionally fire layeradd event
+        // from parent L.FeatureGroup
         if (noevent) {
+
             if (this.hasLayer(layer)) {
                 return this;
             }
 
-            if ('on' in layer) {
-                layer.on(L.FeatureGroup.EVENTS, this._propagateEvent, this);
-            }
+            if (L.version.substr(0,1) === "0") {
+                // version 0
+                if ('on' in layer) {
+                    layer.on(L.FeatureGroup.EVENTS, this._propagateEvent, this);
+                }
 
-            L.LayerGroup.prototype.addLayer.call(this, layer);
+                L.LayerGroup.prototype.addLayer.call(this, layer);
+
+                if (this._popupContent && layer.bindPopup) {
+                    layer.bindPopup(this._popupContent, this._popupOptions);
+                }
+            } else {
+                // version 1 or higher
+                layer.addEventParent(this);
 
-            if (this._popupContent && layer.bindPopup) {
-                layer.bindPopup(this._popupContent, this._popupOptions);
+                L.LayerGroup.prototype.addLayer.call(this, layer);
             }
             return this;
         }