diff --git a/src/mapml.css b/src/mapml.css index 4833d5b4b..9721798c5 100644 --- a/src/mapml.css +++ b/src/mapml.css @@ -434,4 +434,9 @@ summary { z-index: 1000; pointer-events: none; position: relative; +} + +.mapml-layer-remove-button { + margin-left: 15px; + text-decoration: none; } \ No newline at end of file diff --git a/src/mapml/layers/MapLayer.js b/src/mapml/layers/MapLayer.js index 39013dc1c..a596b1d04 100644 --- a/src/mapml/layers/MapLayer.js +++ b/src/mapml/layers/MapLayer.js @@ -494,6 +494,18 @@ export var MapMLLayer = L.Layer.extend({ opacityControlSummaryLabel = document.createElement('label'), mapEl = this._layerEl.parentNode; + let removeButton = document.createElement('a'); + removeButton.href = '#'; + removeButton.role = 'button'; + removeButton.title = 'Remove Layer'; + removeButton.innerHTML = ""; + removeButton.classList.add('mapml-layer-remove-button'); + L.DomEvent.disableClickPropagation(removeButton); + L.DomEvent.on(removeButton, 'click', L.DomEvent.stop); + L.DomEvent.on(removeButton, 'click', (e)=>{ + mapEl.removeChild(e.target.closest("fieldset").querySelector("span").layer._layerEl); + }, this); + input.defaultChecked = this._map ? true: false; input.type = 'checkbox'; input.className = 'leaflet-control-layers-selector'; @@ -598,6 +610,7 @@ export var MapMLLayer = L.Layer.extend({ fieldset.appendChild(details); details.appendChild(summary); summary.appendChild(label); + summary.appendChild(removeButton); details.appendChild(opacityControl); if (this._styles) {