Edit handler example not working for Leaflet.js 1.5.1

azophy commented 5 years ago

[x] I'm reporting a bug, not asking for help
[x] I've looked at the documentation to make sure the behaviour is documented and expected
[x] I'm sure this is a Leaflet Draw code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
[x] I've searched through the issues to make sure it's not yet reported

How to reproduce

Leaflet version I'm using: 1.5.1
Leaflet Draw version I'm using: 1.0.3
Browser (with version) I'm using: Google Chrome Version 72.0.3626.121 (Official Build)
OS/Platform (with version) I'm using: Lubuntu 18.04
change leaflet.js include in the edit_handler example for version 1.0+ into using leaflet.js latest CDN link

What behaviour I'm expecting and which behaviour I'm seeing

When run, it encounter error

Uncaught TypeError: Cannot read property 'hasOwnProperty' of undefined
    at i.setStyle (leaflet.js:5)
    at i.addHooks (Edit.Poly.js:152)
    at Edit.Poly.js:42
    at i._eachVertexHandler (Edit.Poly.js:33)
    at i.addHooks (Edit.Poly.js:41)
    at i.<anonymous> (Edit.Poly.js:511)
    at i.fire (leaflet.js:5)
    at i._layerAdd (leaflet.js:5)
    at i.whenReady (leaflet.js:5)
    at i.addLayer (leaflet.js:5)

Minimal example reproducing the issue

[x] this example is as simple as possible
[x] this example does not rely on any third party code

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet.draw vector editing handlers</title>

    <!--
    <link rel="stylesheet" href="libs/leaflet.css" />
    <script src="libs/leaflet-src.js"></script>
    -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
       integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
       crossorigin=""/>
     <!-- Make sure you put this AFTER Leaflet's CSS -->
     <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
       integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
       crossorigin=""></script>

    <script src="../../src/Leaflet.draw.js"></script>
    <script src="../../src/Leaflet.Draw.Event.js"></script>

    <script src="../../src/ext/TouchEvents.js"></script>

    <script src="../../src/edit/handler/Edit.Poly.js"></script>
    <script src="../../src/edit/handler/Edit.SimpleShape.js"></script>
    <script src="../../src/edit/handler/Edit.Rectangle.js"></script>
    <script src="../../src/edit/handler/Edit.Marker.js"></script>
    <script src="../../src/edit/handler/Edit.CircleMarker.js"></script>
    <script src="../../src/edit/handler/Edit.Circle.js"></script>

</head>
<body>
    <div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>

    <script>
        var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
            map = new L.Map('map', {layers: [osm], center: new L.LatLng(51.505, -0.04), zoom: 13});

        var polygon = new L.Polygon([
            [51.51, -0.1],
            [51.5, -0.06],
            [51.52, -0.03]
        ]);

        polygon.editing.enable();

        map.addLayer(polygon);

        var polyline = new L.Polyline([
            [51.50, -0.04],
            [51.49, -0.02],
            [51.51, 0],
            [51.52, -0.02]
        ]);

        polyline.editing.enable();

        map.addLayer(polyline);

        var circleMarker = L.circleMarker([51.50, -0.08]);

        circleMarker.editing.enable();

        map.addLayer(circleMarker);

        var circle = L.circle([51.53, -0.06], 600);

        circle.editing.enable();

        map.addLayer(circle);

        var rectangle = L.rectangle([[51.49, -0.1], [51.48, -0.06]]);

        rectangle.editing.enable();

        map.addLayer(rectangle);

        polygon.on('edit', function() {
            console.log('Polygon was edited!');
        });
        polyline.on('edit', function() {
            console.log('Polyline was edited!');
        });
    </script>
</body>
</html>

seedgabo commented 5 years ago

i just having the same error similar conditions

destus90 commented 5 years ago

I am having the same issue. I had to downgrade the Leaflet to 1.4.0 in order for the leaflet-draw plugin to be worked without the error. It would be nice to see another workaround for this.

destus90 commented 5 years ago

Seems that Leaflet has changed the logic in the Path.prototype.setStyle method (https://github.com/Leaflet/Leaflet/blob/master/src/layer/vector/Path.js#L108), so it causes the JavaScript error if you pass null or undefined in that method (https://github.com/Leaflet/Leaflet.draw/blob/develop/src/edit/handler/Edit.Poly.js#L152). If you don't want to change the source files, you should enable edit mode this way

var polygon = new L.Polygon([
    [51.51, -0.1],
    [51.5, -0.06],
    [51.52, -0.03]
], {
    editing: {},
    original: {}
});

polygon.editing.enable();

map.addLayer(polygon);

var polyline = new L.Polyline([
    [51.50, -0.04],
    [51.49, -0.02],
    [51.51, 0],
    [51.52, -0.02]
], {
    editing: {},
    original: {}
});

polyline.editing.enable();

map.addLayer(polyline);

var circleMarker = L.circleMarker([51.50, -0.08], {
    editing: {},
    original: {}
});

circleMarker.editing.enable();

map.addLayer(circleMarker);

var circle = L.circle([51.53, -0.06], 600, {
    editing: {},
    original: {}
});

circle.editing.enable();

map.addLayer(circle);

var rectangle = L.rectangle([
    [51.49, -0.1],
    [51.48, -0.06]
], {
    editing: {},
    original: {}
});

rectangle.editing.enable();

var rectangle = L.rectangle([
    [51.49, -0.1],
    [51.48, -0.06]
], {
    editing: {},
    original: {}
});

rectangle.editing.enable();

Now everything works fine :)

tinjaw commented 5 years ago

Has anybody patched this and submitted a PR? I would like to use leaflet 1.5.1 so I need to patch leaflet draw 1.0.4 to work with it.

gangstaJS commented 5 years ago

Have the same error, looks like Leaflet.draw repo died

joshkopecek commented 5 years ago

I am having a similar problems, except with

shape.editing.disable()

Are the authors/contributors @jacobtoye @ddproxy still maintaining this? What are people planning to use instead? @destus90 @tinjaw

destus90 commented 5 years ago

@joshkopecek I have got lots of things associated with Leaflet.Draw plugin. It now pains me to replace this. The best way for me to fork this plugin and maintain it by myself.

joshkopecek commented 5 years ago

@destus90 I would have thought this project would be 'too big to fail'? There are 20k downloads per week recorded on npmjs, but no changes to the npm package in the last 9 months. Latest commit to the repo is 13/09/2018, which means there are some private commits sitting around somewhere for 1.0.4. @ddproxy is still active according to github - perhaps Leaflet.Draw needs a new maintainer? @jacobtoye

tinjaw commented 5 years ago

I don't want to see this rot. It is a good extension. I'd be willing to help on in any way I can.

joshkopecek commented 5 years ago

@tinjaw @destus90 we're just a handful among many users for whom this is a critical tool.

@slurmalon @cimanzano seem to have been working on a more recent, popular fork here https://www.npmjs.com/package/@ceresimaging/leaflet-draw but the core plugin really needs some love. It's certainly holding me back from updating to Leaflet > 1.3.0

Mapbox and Leaflet must have vested interests in this plugin. How can we generate some support?

xxbld commented 5 years ago

sometimes shape.options.editing===undefine , override L.Path.prototype.setStyle just check empty;

L.Path.prototype.setStyle = function (style) { L.setOptions(this, style); if (this._renderer) { this._renderer._updateStyle(this); if (this.options.stroke && typeof style === 'object' && style.hasOwnProperty('weight')) { this._updateBounds(); } } return this; }; L.Circle.prototype.setStyle = function (style) { L.setOptions(this, style); if (this._renderer) { this._renderer._updateStyle(this); if (this.options.stroke && typeof style === 'object' && style.hasOwnProperty('weight')) { this._updateBounds(); } } return this; };

joshkopecek commented 5 years ago

@xxbld thanks for this, but overriding functions like that is not something I like doing. Seems very hacky.

I would prefer the Leaflet << ❤️ solution

tinjaw commented 5 years ago

PLS forgive me @ddproxy for pinging you, but you seem to be the main maintainer of this code. Do you have time to work on this, or, if not, can you provide some guidance on what to fix and maybe one of us can work on it.

vstyle commented 5 years ago

Solution by @destus90 really works! https://github.com/Leaflet/Leaflet.draw/issues/943#issuecomment-503438437

destus90 commented 4 years ago

With Leaflet@1.6.0 you don't need to enable editing mode with my comment above. They have changed setStyle method (https://github.com/Leaflet/Leaflet/pull/6728) so you can pass null to this method. Working demo can be found here https://stackblitz.com/edit/typescript-mzi9or?file=index.html

isacarcanjo commented 7 months ago

@destus90 it's a good example, but if you are using dynamic editing this it gonna help you:

After many hours, I resolved!

L.Circle.include({
    options: {
        editing: {},
        original: {},
    }
})
L.Rectangle.include({
    options: {
        editing: {},
        original: {},
    }
})
L.Polygon.include({
    options: {
        editing: {},
        original: {},
    }
})

Each shape that you will use it's necessary use the include to set options.

Leaflet / Leaflet.draw