- leaflet DeleteButton in extra typescript class

- validate bounding box only if extent is given
- prettier modal dialog

resources/js/components/DeleteButton.ts

@@ -0,0 +1,80 @@
+import * as L from "leaflet";
+
+// var CustomControl = L.Control.extend({
+export default class DeleteButton extends L.Control {
+  options = {
+    position: "topleft",
+    faIcon: 'fa-trash',
+    id: "",
+    text: ""
+    // faIcon: 'fa-check-circle'
+  };
+
+  geolocation = null;
+  drawnItems = null;
+  bounds = null;
+  _map = null;
+  _container = null;
+
+  //constructor:
+  // initialize(options) {
+  //   //util.mixin(this.options, options);      
+  //   L.Util.setOptions(this, options);
+  //   // properties
+  //   this.geolocation = options.geolocation;
+  //   this.drawnItems = options.drawnItems;
+  //   this.bounds = options.bounds;
+  // }
+
+  constructor(options) {
+    super();
+    //util.mixin(this.options, options);      
+    L.Util.setOptions(this, options);
+    // properties
+    this.geolocation = options.geolocation;
+    this.drawnItems = options.drawnItems;
+    this.bounds = options.bounds;
+  }
+
+  onAdd(map) {
+    this._map = map;
+    this._container = L.DomUtil.create(
+      "div",
+      "leaflet-bar leaflet-control leaflet-control-custom"
+    )
+
+    this._container.style.backgroundColor = "white";
+    this._container.style.width = "30px";
+    this._container.style.height = "30px";
+    this._buildButton();
+
+    // container.onclick = function() {
+    //   console.log("buttonClicked");
+    // };
+
+    return this._container;
+  }
+
+  _buildButton() {
+    var _link = L.DomUtil.create('a', 'simplebutton-action', this._container);
+    // this._link.href = "#";
+    if (this.options.id) {
+      _link.id = this.options.id;
+    }
+    if (this.options.text) {
+      _link.innerHTML = this.options.text;
+    } else {
+      L.DomUtil.create('i', 'fa ' + this.options.faIcon, _link);
+    }
+    L.DomEvent.on(_link, 'click', function (ev) {
+      this.drawnItems.clearLayers();
+      this.options.geolocation.xmin = "";
+      this.options.geolocation.ymin = "";
+      this.options.geolocation.xmax = "";
+      this.options.geolocation.ymax = "";
+      this._map.fitBounds(this.bounds);
+    },
+      this);
+  }
+}
+// export default CustomControl;