Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Edit handler example not working for Leaflet.js 1.5.1

See original GitHub issue

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>

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:15

Top GitHub Comments

8reactions

destus90commented, Jun 19, 2019

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 😃

3reactions

tinjawcommented, Jul 29, 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.