leaflet.draw does not cancel properly

Question

In the code snippet below, I have setup the leaflet.draw plugin. Works fine for adding features (lines, markers, polygons). Works fine for editing and deleting. But the cancel operation does not work (nor does the simple intersection test, but I can live without that). Any idea what I did wrong to setup the plugin?

(Chrome V44, leaflet 1.0 Beta 2, leaflet.draw (0.2.4-dev) (seems to also fail in leaflet '0.7.7').

Here is the error:

Uncaught TypeError: Cannot read property '0' of undefined
L.Polyline.L.Path.extend._projectLatlngs @ leaflet-src.js:5535
L.Polyline.L.Path.extend._projectLatlngs @ leaflet-src.js:5547
L.Polyline.L.Path.extend._projectLatlngs @ leaflet-src.js:5547
L.Polyline.L.Path.extend._project @ leaflet-src.js:5519
L.SVG.L.Renderer.extend._updatePath @ leaflet-src.js:6042
L.Path.L.Layer.extend.redraw @ leaflet-src.js:5130
L.Polyline.L.Path.extend.setLatLngs @ leaflet-src.js:5411
L.EditToolbar.Edit.L.Handler.extend._revertLayer @ leaflet.draw-src.js:2759
(anonymous function) @ leaflet.draw-src.js:2716
L.LayerGroup.L.Layer.extend.eachLayer @ leaflet-src.js:4865
L.EditToolbar.Edit.L.Handler.extend.revertLayers @ leaflet.draw-src.js:2715
L.EditToolbar.L.Toolbar.extend.disable @ leaflet.draw-src.js:2578handler @ leaflet-src.js:6953

and here is the code I use to setup the leaflet.draw

     var theMap;
     var mapLayer;
     var carLayer;
     var drawLayer;
     var drawControl;
     var trackerButton;
     ....
         this.setupDraw();

         theMap = L.map('mapCanvas', {
             center: mCityCenter,
             zoom: 20,
             layers: [osmLight, mapLayer, carLayer, drawLayer]
         });
         theMap.on("draw:created", this.addDrawing);
      ....
     this.setupDraw = function () {
         drawLayer = new L.FeatureGroup();

         drawControl = new L.Control.Draw({
             draw: {
                 polygon: {
                     allowIntersection: false, // Restricts shapes to simple polygons
                     showArea: true,
                     drawError: {
                         color: '#e1e100', // Color the shape will turn when intersects
                         message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
                     }
                 }
             },
             edit: {
                 featureGroup: drawLayer
             }
         });
     }
     this.addDrawing = function (e) {
         var type = e.layerType;
         var layer = e.layer;

         if (type === 'marker') { }
         drawLayer.addLayer(layer);
     }

Answer 1

That version of Leaflet.draw plugin is not compatible with the version of Leaflet you are using.

Be sure to read docs for the plugin, it states you should be using Leaflet.js 0.7.

Leaflet.draw: https://github.com/Leaflet/Leaflet.draw

Leaflet.JS: http://leafletjs.com/reference.html

From the Leaflet.draw github page: "Leaflet.draw 0.2.3+ requires Leaflet 0.7.x."

As of today there does appear to be a fork of Leaflet.draw that is being developed against Leaflet 1.0 RC: https://github.com/Leaflet/Leaflet.draw/tree/leaflet-master