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?
