Adding a Custom Action to the Toolbar

Adding your own custom Action and creating a button for it on the toolbar is not very complicated. It’s a 3 step process in which you need to change only a few lines from the following example:

1. Have a function you want to execute. This code could be included in the action itself (see step 2), but it makes the code more readable to have it as a seperate function:

   function theActualFunctionToExecute(){
       console.log("works");
   }
   

2. Define the action itself

The parts you may want to change are the name of the Action, the font awesome icon used for the toolbar, the tooltip text for it and of course the name of the function you want to execute.

newAction = L.EditAction.extend({
        initialize: function (map, overlay, options) {
            options = options || {};
            options.toolbarIcon = {
                html: '<i class="fas fa-check"></i>',
                tooltip: My new Action'
            };

            L.EditAction.prototype.initialize.call(this, map, overlay, options);
        },

        addHooks: function () {
            var ov = this._overlay;
            if (ov.editing._mode !== 'lock') {
                theActualFunctionToExecute();
            }
        }
    });

1. Add the Action to the popup toolbar

Here you just hand over the name of your new Action to the addTool() function

L.DomEvent.on(img._image, 'load', function() {
    img.editing.addTool(newAction);
  });