Add removeLegend

This method removes an entry from an instance.

CHANGELOG.md

@@ -1,3 +1,6 @@
+0.3.2 (2018-05-30)
+  * Add `removeLegend` method
+
 0.3.1 (2018-05-29)
   * Add `updateOpacity` to `options`
     - A new method that allows to use a custom function for adjusting layers opacity

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2016, Conservation Biology Institute
+Copyright (c) 2018, Conservation Biology Institute
 
 Permission to use, copy, modify, and/or distribute this software for any
 purpose with or without fee is hereby granted, provided that the above

README.md

@@ -2,7 +2,7 @@
 
 A simple Leaflet plugin for creating legends with HTML.
 
-*Tested with Leaflet 1.1.0*
+*Tested with Leaflet 1.3.x*
 
 ## Install
 
@@ -65,6 +65,8 @@ htmlLegend.addLegend({
     })
 ```
 
+An existing entry in a legend control instance can be removed using `removeLegend`. This method needs id of the entry, which can be obtained from `htmllegend._entries` (see the example for usage).
+
 
 See the [example](//consbio.github.io/Leaflet.HtmlLegend) for usage details.
 

index.html

@@ -282,15 +282,11 @@
     }).addTo(map)
 
     var layer2 = L.geoJSON(layer2GeoJSON, {
-        style: function (feature) {
-            return { color: 'blue', fill: false }
-        }
+        style: { color: 'blue', fill: false }
     })
 
     var layer3 = L.geoJSON(layer3GeoJSON, {
-        style: function (feature) {
-            return { color: 'orange', fill: false }
-        }
+        style: { color: 'orange', fill: false }
     }).addTo(map)
 
     var layer4 = L.geoJSON(layer4GeoJSON, {
@@ -301,7 +297,7 @@
         'Layer 1': layer1,
         'Layer 2': layer2,
         'Layer 3': layer3,
-        'Layer 4:': layer4
+        'Layer 4': layer4
     }
 
     L.control.layers(null, overlays, { collapsed: false }).addTo(map)
@@ -390,6 +386,23 @@
     })
 
     map.addControl(htmlLegend4)
+
+    var DeleteControl  = L.Control.extend({
+        options: {
+            position: 'topright'
+        },
+        onAdd: function(m) {
+            var btn = L.DomUtil.create('button')
+            btn.innerText = 'Delete layer 1'
+            L.DomEvent.on(btn, 'click', function() {
+                // Remove legend uses entry id, which can be accessed through `htmllegend._entries`
+                htmlLegend1and2.removeLegend(1)
+                m.removeControl(this)
+            })
+            return btn
+        }
+    })
+    map.addControl(new DeleteControl())
 </script>
 </body>
 </html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "leaflet-html-legend",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Leaflet legend plugin using html elements",
   "homepage": "http://github.com/consbio/Leaflet.HtmlLegend",
   "author": {
@@ -32,6 +32,7 @@
   },
   "keywords": [
     "leaflet",
-    "leaflet-legend"
+    "leaflet-legend",
+    "leaflet-html-legend"
   ]
 }

src/L.Control.HtmlLegend.js

@@ -27,6 +27,8 @@ L.Control.HtmlLegend = L.Control.extend({
     onAdd(map) {
         this._map = map;
         this._container = L.DomUtil.create('div', 'leaflet-control leaflet-bar leaflet-html-legend');
+        this._lastId = 0;
+        this._entries = {};
 
         // Disable events on container
         L.DomEvent.disableClickPropagation(this._container);
@@ -40,18 +42,28 @@ L.Control.HtmlLegend = L.Control.extend({
     render() {
         L.DomUtil.empty(this._container);
 
-        this.options.legends.forEach(this._renderLegend, this);
+        this.options.legends.forEach(legend => this._renderLegend(legend), this);
 
         this._checkVisibility();
     },
 
     addLegend(legend) {
-        this.options.legends.push(legend);
         if (this._map) {
             this._renderLegend(legend);
         }
     },
 
+    removeLegend(itemIdx) {
+        const entry = this._entries[itemIdx]
+        if (entry) {
+            if (entry.layer && entry.events) {
+                Object.entries(entry.events).forEach(([event, handler]) => entry.layer.off(event, handler))
+            }
+            L.DomUtil.remove(this._entries[itemIdx].container)
+            delete this._entries[itemIdx]
+        }
+    },
+
     _renderLegend(legend) {
         if (!legend.elements) {
             return;
@@ -73,11 +85,13 @@ L.Control.HtmlLegend = L.Control.extend({
         }
 
         const block = L.DomUtil.create('div', className, this._container);
+        const entryIdx = ++this._lastId;
+        this._entries[entryIdx] = { container: block }
 
         if (this.options.collapseSimple && elements.length === 1 && !elements[0].label) {
             this._addElement(elements[0].html, legend.name, elements[0].style, block);
-            this._connectLayer(block, legend);
-            return;
+            this._connectLayer(block, legend, entryIdx);
+            return block;
         }
 
         if (legend.name) {
@@ -105,7 +119,8 @@ L.Control.HtmlLegend = L.Control.extend({
             this._addElement(element.html, element.label, element.style, elementContainer);
         }, this);
 
-        this._connectLayer(block, legend);
+        this._connectLayer(block, legend, entryIdx);
+        return block;
     },
 
     _addElement(html, label, style, container) {
@@ -130,7 +145,19 @@ L.Control.HtmlLegend = L.Control.extend({
         }
     },
 
-    _connectLayer(container, legend) {
+    _layerAdd(container) {
+        this._activeLayers += 1;
+        container.style.display = '';
+        this._checkVisibility();
+    },
+
+    _layerRemove(container) {
+        this._activeLayers -= 1;
+        container.style.display = 'none';
+        this._checkVisibility();
+    },
+
+    _connectLayer(container, legend, entryIdx) {
         const layer = legend.layer;
 
         if (!layer) {
@@ -185,19 +212,15 @@ L.Control.HtmlLegend = L.Control.extend({
 
         L.DomUtil.create('i', this.options.hiddenIcon, opacityController);
 
-        this._map.on('layeradd', (e) => {
-            if (e.layer === layer) {
-                this._activeLayers += 1;
-                container.style.display = '';
-                this._checkVisibility();
-            }
-        }).on('layerremove', (e) => {
-            if (e.layer === layer) {
-                this._activeLayers -= 1;
-                container.style.display = 'none';
-                this._checkVisibility();
-            }
-        });
+
+        const layerAdd = this._layerAdd.bind(this, container)
+        const layerRemove = this._layerRemove.bind(this, container)
+        layer.on('add', layerAdd).on('remove', layerRemove)
+        this._entries[entryIdx].layer = layer
+        this._entries[entryIdx].events = {
+            add: layerAdd,
+            remove: layerRemove
+        }
     },
 
     _checkVisibility() {