Leaflet.draw: Edit handler example not working for Leaflet.js 1.5.1

I’m reporting a bug, not asking for help
I’ve looked at the documentation to make sure the behaviour is documented and expected
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…)
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

this example is as simple as possible
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>

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 1
Comments: 16

Most upvoted comments

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 😃

destus90 on Jun 19, 2019

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.

tinjaw on Jul 29, 2019

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

vstyle on Oct 10, 2019

@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?

joshkopecek on Jul 30, 2019

@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

joshkopecek on Jul 29, 2019