Adds a remove layer button to controls (#306)

* Adds a remove layer button to controls

* Rename remove button class

* Temporary fix to x location

Author: ahmadayubi

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;
 }

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 = "<span aria-hidden='true'>&#10006;</span>";
+        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) {