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;