unmounting custom controls

cypress/e2e/toolbar.cy.js

@@ -525,4 +525,46 @@ describe('Testing the Toolbar', () => {
       done();
     });
   });
+
+  it('Deletes custom control and adds a new one with the same name', () => {
+    const clickSpy = cy.spy();
+    const clickSpyNew = cy.spy();
+
+    cy.window().then(({ map }) => {
+      map.pm.Toolbar.createCustomControl({
+        name: 'alertBox',
+        onClick: clickSpy,
+        toggle: false,
+        block: 'custom',
+      });
+
+      cy.toolbarButtonContainer('alertBox', map).then((container) => {
+        container[0].children[0].click(); // button
+      });
+    });
+
+    cy.window().then(({ map }) => {
+      // expect needs to be in the this block, otherwise it will be executed before the click event
+      expect(clickSpy.callCount).to.be.eq(1);
+
+      map.pm.Toolbar.deleteControl('alertBox');
+
+      map.pm.Toolbar.createCustomControl({
+        name: 'alertBox',
+        onClick: clickSpyNew,
+        toggle: false,
+        block: 'custom',
+      });
+
+      cy.toolbarButtonContainer('alertBox', map).then((container) => {
+        container[0].children[0].click(); // button
+      });
+    });
+
+    cy.window().then(() => {
+      // expect needs to be in the this block, otherwise it will be executed before the click event
+      expect(clickSpy.callCount).to.be.eq(1);
+      expect(clickSpyNew.callCount).to.be.eq(1);
+    });
+  });
 });

leaflet-geoman.d.ts

@@ -1087,6 +1087,9 @@ declare module 'leaflet' {
 
       /** Disable button by control name */
       setButtonDisabled(name: TOOLBAR_CONTROL_ORDER, state: boolean): void;
+
+      /** Deletes and removes a Control from the Toolbar */
+      deleteControl(name: string): void;
     }
 
     type KEYBOARD_EVENT_TYPE = 'current' | 'keydown' | 'keyup';

src/js/Toolbar/L.PM.Toolbar.js

@@ -151,6 +151,13 @@ const Toolbar = L.Class.extend({
 
     this.isVisible = false;
   },
+  deleteControl(name) {
+    const btnName = this._btnNameMapping(name);
+    if (this.buttons[btnName]) {
+      this.buttons[btnName].remove();
+      delete this.buttons[btnName];
+    }
+  },
   toggleControls(options = this.options) {
     if (this.isVisible) {
       this.removeControls();