Leaflet.draw

by aidankirrane

HTML

<script src="http://leaflet.github.com/Leaflet.draw/lib/leaflet/leaflet.js"></script>
<link rel="stylesheet" href="http://leaflet.github.com/Leaflet.draw/lib/leaflet/leaflet.css">
<link rel="stylesheet" href="http://leaflet.github.com/Leaflet.draw/leaflet.draw.css">
<script src="http://leaflet.github.com/Leaflet.draw/leaflet.draw.js"></script>
<div id="map"></div>
Click delete button and then click the geoJson blue rectangle. It will not be deleted.<br/>
<br/>
Now cancel the operation, click delete button and click the geoJson blue rectangle, it will be removed.

CSS

#map {
    height: 340px;
}

JavaScript

L.EditToolbar.Delete = L.Handler.extend({
    statics: {
        TYPE: 'remove' // not delete as delete is reserved in js
    },

    includes: L.Mixin.Events,

    initialize: function (map, options) {
        L.Handler.prototype.initialize.call(this, map);

        L.Util.setOptions(this, options);

        // Store the selectable layer group for ease of access
        this._deletableLayers = this.options.featureGroup;

        if (!(this._deletableLayers instanceof L.FeatureGroup)) {
            throw new Error('options.featureGroup must be a L.FeatureGroup');
        }

        // Save the type so super can fire, need to do this as cannot do this.TYPE :(
        this.type = L.EditToolbar.Delete.TYPE;
    },

    enable: function () {
        if (this._enabled || !this._hasAvailableLayers()) {
            return;
        }

        //console.log('enable');
        L.Handler.prototype.enable.call(this);

        this._deletableLayers
            .on('layeradd', this._enableLayerDelete, this)
            .on('layerremove', this._disableLayerDelete, this);

        this.fire('enabled', { handler: this.type});
        this._map.fire('draw:editstart', { handler: this.type });
    },

    disable: function () {
        if (!this._enabled) { return; }

        L.Handler.prototype.disable.call(this);

        this._deletableLayers
            .off('layeradd', this._enableLayerDelete, this)
            .off('layerremove', this._disableLayerDelete, this);

        this.fire('disabled', { handler: this.type});
        this._map.fire('draw:editstop', { handler: this.type });
    },

    addHooks: function () {
        if (this._map) {
            this._deletableLayers.eachLayer(this._enableLayerDelete, this);
            this._deletedLayers = new L.layerGroup();

            this._tooltip = new L.Tooltip(this._map);
            this._tooltip.updateContent({ text: L.drawLocal.edit.handlers.remove.tooltip.text });

            this._map.on('mousemove', this._onMouseMove,...