leaflet.draw trash button delete all polygons and save

Question

Using javascript, how can I alter the leaflet.draw "Trash" button to delete all polygons that have been drawn and automatically save. Below is the code I've implemented but it is a complete hack. It removes the active polygon, but after I delete an object once I begin to get errors in the console when I click the "Trash" icon like NotFoundError: Node was not found and TypeError: this._deletedLayers is null

map.on('draw:editstart', function (e) {
            if(e.handler == 'remove' && typeof drawnItem != 'undefined' && drawnItem !== null){
                if(window.console) window.console.log('Drawing deleted...');
                if(typeof drawnItem != 'undefined' && drawnItem !== null){
                    drawnItems.removeLayer(drawnItem);
                }
                $('.leaflet-draw.leaflet-control .leaflet-draw-actions').hide();
                $('.leaflet-popup-pane .leaflet-draw-tooltip').remove();
            }
        });

It looks as if this may not be possible with leaflet.draw yet unless one makes a custom build: https://github.com/Leaflet/Leaflet.draw/issues/264 — jduhls, Jan 16 '14 at 16:42

score 8 · Answer 1 · edited Apr 13 '17 at 12:33

Solved my own problem with a custom control (thanks to stackexchange - https://gis.stackexchange.com/questions/60576/custom-leaflet-controls):

UPDATED! added @SpiderWan suggestions (thanks!) so no need for custom CSS. Also, the event was previously attached to the entire control bar. Instead attached to just the controlUI button itself.

Javascript:

L.Control.RemoveAll = L.Control.extend({
        options: {
            position: 'topleft',
        },

        onAdd: function (map) {
            var controlDiv = L.DomUtil.create('div', 'leaflet-control leaflet-bar');
            var controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove', controlDiv);
            controlUI.title = 'Remove all drawn items';
            controlUI.setAttribute('href', '#');

            L.DomEvent
                .addListener(controlUI, 'click', L.DomEvent.stopPropagation)
                .addListener(controlUI, 'click', L.DomEvent.preventDefault)
                .addListener(controlUI, 'click', function () {
                    drawnItems.clearLayers();
                    if(window.console) window.console.log('Drawings deleted...');
                });
            return controlDiv;
        }
    });

removeAllControl = new L.Control.RemoveAll();
map.addControl(removeAllControl);

score 6 · Answer 2 · answered Aug 26 '14 at 12:49

Like jduhls's answer but using Leaflet.draw CSS classes :

L.Control.RemoveAll = L.Control.extend(
{
    options:
    {
        position: 'topleft',
    },
    onAdd: function (map) {
        var controlDiv = L.DomUtil.create('div', 'leaflet-draw-toolbar leaflet-bar');
        L.DomEvent
            .addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
            .addListener(controlDiv, 'click', L.DomEvent.preventDefault)
        .addListener(controlDiv, 'click', function () {
            drawnItems.clearLayers();
        });

        var controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove', controlDiv);
        controlUI.title = 'Remove All Polygons';
        controlUI.href = '#';
        return controlDiv;
    }
});
var removeAllControl = new L.Control.RemoveAll();
map.addControl(removeAllControl);

score 5 · Answer 3 · answered Sep 05 '19 at 17:17

5

You can also overwrite the delete tool's enable method to simply delete all layers instead of opening the delete menu:

L.EditToolbar.Delete.include({
  enable: function () {
    this.options.featureGroup.clearLayers()
  }
})

answered Sep 05 '19 at 17:17

lucas

1,050
12
21

This needs to be done before using map.addControl (drawControl); – fooquency Jun 08 '21 at 19:39

leaflet.draw trash button delete all polygons and save

3 Answers3

Linked