- implemented spatial filtering

- Component 'draw.component.vue' has been extended with the 'preserve' property to control whether the drawn rectangle disappears again
- npm updates

resources/js/Components/Map/draw.component.vue

@@ -4,13 +4,10 @@
       <fa-icon [icon]="faSearchLocation"></fa-icon>
     </button> -->
         <!--  -->
-        <button
-            ref="inputDraw"
+        <button ref="inputDraw"
             class="inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 text-black border-teal-50 hover:bg-gray-200 text-sm p-1"
-            type="button"
-            :class="[_enabled ? 'cursor-not-allowed bg-gray-200' : 'bg-teal-50 is-active']"
-            @click.prevent="draw"
-        >
+            type="button" :class="[_enabled ? 'cursor-not-allowed bg-cyan-200' : 'bg-teal-50 is-active']"
+            @click.prevent="toggleDraw">
             <BaseIcon v-if="mdiDrawPen" :path="mdiDrawPen" />
         </button>
     </div>
@@ -36,19 +33,9 @@ import { LatLngBounds } from 'leaflet/src/geo/LatLngBounds';
     },
 })
 export default class DrawControlComponent extends Vue {
-    TYPE = 'rectangle';
-
-    /**
-     * class properties.
-     */
+    public TYPE = 'rectangle';
     mdiDrawPen = mdiDrawPen;
-    featuresLayer;
-    // options = {
-    //     zIndex: 1000,
-    //     // markerClass: Marker, // CylinderGeometry,
-    //     drawingCSSClass: 'gba-editable-drawing',
-    //     drawingCursor: 'crosshair',
-    // };
+    // private featuresLayer;
 
     options = {
         shapeOptions: {
@@ -66,17 +53,17 @@ export default class DrawControlComponent extends Vue {
         metric: true, // Whether to use the metric measurement system or imperial
     };
 
-    /**
-     * Connect map id.
-     */
+
     @Prop() public mapId: string;
     // @Prop() public map: Map;
-    @Prop public southWest;
-    @Prop public northEast;
+    @Prop public southWest: LatLngBounds;
+    @Prop public northEast: LatLngBounds;
+    @Prop({
+        default: true
+    }) public preserve: boolean;
 
 
     mapService = MapService();
-    // try:
     public _enabled;
     private _map: Map;
     private _isDrawing: boolean = false;
@@ -84,8 +71,6 @@ export default class DrawControlComponent extends Vue {
     private _mapDraggable;
     private _shape: Rectangle | undefined;
 
-    // @method enable(): this
-    // Enables the handler
     enable() {
         if (this._enabled) {
             return this;
@@ -96,8 +81,6 @@ export default class DrawControlComponent extends Vue {
         return this;
     }
 
-    // @method disable(): this
-    // Disables the handler
     disable() {
         if (!this._enabled) {
             return this;
@@ -108,17 +91,13 @@ export default class DrawControlComponent extends Vue {
         return this;
     }
 
-    // @method enabled(): Boolean
-    // Returns `true` if the handler is enabled
     enabled() {
         return !!this._enabled;
     }
 
     // @Ref('inputDraw') private _inputDraw: HTMLElement;
 
-    // SimpleShape
-    // @method addHooks(): void
-    // Add listener hooks to this handler.
+
     private addHooks() {
         // L.Draw.Feature.prototype.addHooks.call(this);
         this._map = this.mapService.getMap(this.mapId);
@@ -146,10 +125,7 @@ export default class DrawControlComponent extends Vue {
         }
     }
 
-    // SimpleShape
-    // @method removeHooks(): void
-    // Remove listener hooks from this handler.
-    removeHooks() {
+    private removeHooks() {
         // L.Draw.Feature.prototype.removeHooks.call(this);
         if (this._map) {
             if (this._mapDraggable) {
@@ -171,11 +147,11 @@ export default class DrawControlComponent extends Vue {
             // document.removeEventListener('touchstart', preventDefault);
 
             // If the box element doesn't exist they must not have moved the mouse, so don't need to destroy/return
-            // if (this._shape) {
-            // 	this._map.removeLayer(this._shape);
-            // 	// delete this._shape;
-            //     this._shape = undefined;
-            // }
+            if (this._shape && this.preserve == false) {
+                this._map.removeLayer(this._shape);
+                // delete this._shape;
+                this._shape = undefined;
+            }
         }
         this._isDrawing = false;
     }
@@ -217,7 +193,7 @@ export default class DrawControlComponent extends Vue {
     private _fireCreatedEvent(shape) {
         var rectangle = new Rectangle(shape.getBounds(), this.options.shapeOptions);
         // L.Draw.SimpleShape.prototype._fireCreatedEvent.call(this, rectangle);
-        this._map.fire('Daw.Event.CREATED', { layer: rectangle, type: this.TYPE });
+        this._map.fire('Draw.Event.CREATED', { layer: rectangle, type: this.TYPE });
     }
 
     public drawShape(southWest, northEast) {
@@ -244,11 +220,7 @@ export default class DrawControlComponent extends Vue {
         }
     }
 
-    public draw() {
-        // let map: Map = this.mapService.getMap(this.mapId);
-        // const bounds: LatLngBoundsExpression = toLatLngBounds(this.southWest, this.northEast);
-        // map.fitBounds(bounds);
-
+    public toggleDraw() {
         if (this._enabled == true) {
             this.disable();
         } else {

resources/js/Components/Map/map.component.vue

@@ -162,7 +162,7 @@ export default class MapComponent extends Vue {
         attributionControl.setPrefix(false);
 
         map.on(
-            'Daw.Event.CREATED',
+            'Draw.Event.CREATED',
             function (event) {
                 // drawnItems.clearLayers();
                 // var type = event.type;