[GIS] How to detect “delete” or “edit” events in popup menu created with Leaflet-draw-toolbar plugin

javascriptleafletleaflet-drawtoolbar

In this example you may create a polygon and then click it and popup menu shows. There is three buttons: edit, delete and pick a color. How can I detect event and determine which of it – delete or edit – was executed in popup menu? I want to perform some action when one of this events is executed e.g. when a polygon is edited or deleted. The standart way for it:

map.on('draw:created', function (evt) {
        layer = evt.layer;
        // do something when polygon is created
});

map.on('draw:edited', function (evt) {
        layer = evt.layer;
        // do something when polygon is edited
});

map.on('draw:deleted', function (evt) {
        layer = evt.layer;
        // do something when polygon is deleted
});

But for events in popup menu it doesn't work.

So I edited file leaflet.draw-toolbar.js and added my custom event 'draw-popup:edited'

LeafletToolbar.EditAction.Popup.Edit = LeafletToolbar.ToolbarAction.extend({
...
    map.on('click', function () {
        shape.editing.disable();
        shape.fire('draw-popup:edited', shape);
    });
...
});

Now in my script file I'm able to detect 'draw-popup:edited' event

layer.on('draw-popup:edited', function() {
        var geom = this.toGeoJSON();
        console.log(geom);

});

But now it's fired multiple times when I click on a map and returns all shapes that were edited.
What is the right way to detect event and return the shape that was edited?

Best Answer

Thanks for reporting this issue. This is fixed in the latest release of leaflet-draw-toolbar (0.2.1): https://www.npmjs.com/package/leaflet-draw-toolbar.

Related Question