0

I have added an edit control on my map which is working fine (On the Frontend);

var editControls = new L.Control.Draw({
      draw: false,
      edit: {
        featureGroup: this.updateGeomLyr
      }
    }).addTo(this.map);

enter image description here

Now, when I save or cancel my changes, the event "draw:editstop" is called

this.map.on("draw:editstop", e => {
      this.updateGeomLyr.clearLayers();
      this.overlapLyr.clearLayers();

      //if saved;

      //if cancelled,
    });

But I want separate backend functions to be called on SAVE ad CANCEL. I couldn't find any attribute in the event "e" which shows if save is called or cancel.

0

Leaflet.draw plugin doesn't fire any event when editing is canceled. The only way to achieve this is to hack plugin by extending it. Since this requires taking part of the original code of plugin, tha downside of this is that it might now work with future versions of plugin.

getActions method of L.EditToolbar among other things sets callbacks for click events on edit toolbar buttons Save and Cancel. Callback for cancel (the second action) is now this.disable. This is replaced with new method _cancel, where first original action is called and then new draw:editcancel event fired.

L.EditToolbar.include({
  getActions: function (handler) {
    var actions = [
      {
        title: L.drawLocal.edit.toolbar.actions.save.title,
        text: L.drawLocal.edit.toolbar.actions.save.text,
        callback: this._save,
        context: this
      },
      {
        title: L.drawLocal.edit.toolbar.actions.cancel.title,
        text: L.drawLocal.edit.toolbar.actions.cancel.text,
//        callback: this.disable,  // --- original
        callback: this._cancel,    // --- changed
        context: this
      }
    ];

    if (handler.removeAllLayers) {
      actions.push({
        title: L.drawLocal.edit.toolbar.actions.clearAll.title,
        text: L.drawLocal.edit.toolbar.actions.clearAll.text,
        callback: this._clearAllLayers,
        context: this
      });
    }

    return actions;
  },

// --- new -----------------
  _cancel: function() {
    this.disable();
    this._map.fire('draw:editcancel');
  }  
});

function processCancel(e) {
  console.log('draw canceled');
}

map.on('draw:editcancel', processCancel);

Plugin extension has to be put at the very beginning of code.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.