- inertiajs file upload and validation via adonisjs

- npm updates

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

@@ -25,7 +25,7 @@ import { MapService } from '@/Stores/map.service';
 import { Map } from 'leaflet/src/map/index';
 // import { LayerGroup } from 'leaflet/src/layer/LayerGroup';
 // import { LatLngBounds, Rectangle } from 'leaflet';
-import { on, off , preventDefault } from 'leaflet/src/dom/DomEvent';
+import { on, off, preventDefault } from 'leaflet/src/dom/DomEvent';
 import { Rectangle } from 'leaflet/src/layer/vector/Rectangle';
 import { LatLngBounds } from 'leaflet/src/geo/LatLngBounds';
 
@@ -129,7 +129,7 @@ export default class DrawControlComponent extends Vue {
             }
             //TODO refactor: move cursor to styles
             // this._map.domElement.style.cursor = 'crosshair';
-            this._map._container.style.cursor = "crosshair";
+            this._map._container.style.cursor = 'crosshair';
             // this._tooltip.updateContent({text: this._initialLabelText});
             this._map
                 .on('mousedown', this._onMouseDown, this)
@@ -220,8 +220,20 @@ export default class DrawControlComponent extends Vue {
         this._map.fire('Daw.Event.CREATED', { layer: rectangle, type: this.TYPE });
     }
 
+    public drawShape(southWest, northEast) {
+        if (!this._shape) {
+            const bounds = new LatLngBounds(southWest, northEast);
+            this._shape = new Rectangle(bounds, this.options.shapeOptions);
+            // this._map.addLayer(this._shape);
+            this._map = this.mapService.getMap(this.mapId);
+            this._shape.addTo(this._map);
+        } else {
+            this._shape.setBounds(new LatLngBounds(southWest, northEast));
+        }
+    }
+
     // from Draw Rectangle
-    _drawShape(latlng) {
+    private _drawShape(latlng) {
         if (!this._shape) {
             const bounds = new LatLngBounds(this._startLatLng, latlng);
             this._shape = new Rectangle(bounds, this.options.shapeOptions);
@@ -274,7 +286,7 @@ export default class DrawControlComponent extends Vue {
     position: absolute;
     left: 10px;
     top: 100px;
-    z-index: 40;
+    z-index: 39;
 }
 
 .btn-group-vertical button {

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

@@ -3,7 +3,7 @@
         <!-- <Map className="h-36" :center="state.center" :zoom="state.zoom"> // map component content </Map> -->
         <div :id="mapId" class="map-container mapDesktop rounded">
             <ZoomControlComponent ref="zoom" :mapId="mapId"></ZoomControlComponent>
-            <DrawControlComponent :mapId="mapId" :southWest="southWest" :northEast="northEast"></DrawControlComponent>
+            <DrawControlComponent ref="draw" :mapId="mapId" :southWest="southWest" :northEast="northEast"></DrawControlComponent>
         </div>
     </div>
 </template>
@@ -28,54 +28,51 @@ import { MapService } from '@/Stores/map.service';
 import ZoomControlComponent from './zoom.component.vue';
 import DrawControlComponent from './draw.component.vue';
 import { Coverage } from '@/Dataset';
-
-
-import {canvas} from 'leaflet/src/layer/vector/Canvas';
-import {svg} from 'leaflet/src/layer/vector/SVG';
+import { canvas } from 'leaflet/src/layer/vector/Canvas';
+import { svg } from 'leaflet/src/layer/vector/SVG';
 
 Map.include({
-	// @namespace Map; @method getRenderer(layer: Path): Renderer
-	// Returns the instance of `Renderer` that should be used to render the given
-	// `Path`. It will ensure that the `renderer` options of the map and paths
-	// are respected, and that the renderers do exist on the map.
-	getRenderer: function (layer) {
-		// @namespace Path; @option renderer: Renderer
-		// Use this specific instance of `Renderer` for this path. Takes
-		// precedence over the map's [default renderer](#map-renderer).
-		var renderer = layer.options.renderer || this._getPaneRenderer(layer.options.pane) || this.options.renderer || this._renderer;
+    // @namespace Map; @method getRenderer(layer: Path): Renderer
+    // Returns the instance of `Renderer` that should be used to render the given
+    // `Path`. It will ensure that the `renderer` options of the map and paths
+    // are respected, and that the renderers do exist on the map.
+    getRenderer: function (layer) {
+        // @namespace Path; @option renderer: Renderer
+        // Use this specific instance of `Renderer` for this path. Takes
+        // precedence over the map's [default renderer](#map-renderer).
+        var renderer = layer.options.renderer || this._getPaneRenderer(layer.options.pane) || this.options.renderer || this._renderer;
 
-		if (!renderer) {
-			renderer = this._renderer = this._createRenderer();
-		}
+        if (!renderer) {
+            renderer = this._renderer = this._createRenderer();
+        }
 
-		if (!this.hasLayer(renderer)) {
-			this.addLayer(renderer);
-		}
-		return renderer;
-	},
+        if (!this.hasLayer(renderer)) {
+            this.addLayer(renderer);
+        }
+        return renderer;
+    },
 
-	_getPaneRenderer: function (name) {
-		if (name === 'overlayPane' || name === undefined) {
-			return false;
-		}
+    _getPaneRenderer: function (name) {
+        if (name === 'overlayPane' || name === undefined) {
+            return false;
+        }
 
-		var renderer = this._paneRenderers[name];
-		if (renderer === undefined) {
-			renderer = this._createRenderer({pane: name});
-			this._paneRenderers[name] = renderer;
-		}
-		return renderer;
-	},
+        var renderer = this._paneRenderers[name];
+        if (renderer === undefined) {
+            renderer = this._createRenderer({ pane: name });
+            this._paneRenderers[name] = renderer;
+        }
+        return renderer;
+    },
 
-	_createRenderer: function (options) {
-		// @namespace Map; @option preferCanvas: Boolean = false
-		// Whether `Path`s should be rendered on a `Canvas` renderer.
-		// By default, all `Path`s are rendered in a `SVG` renderer.
-		return (this.options.preferCanvas && canvas(options)) || svg(options);
-	}
+    _createRenderer: function (options) {
+        // @namespace Map; @option preferCanvas: Boolean = false
+        // Whether `Path`s should be rendered on a `Canvas` renderer.
+        // By default, all `Path`s are rendered in a `SVG` renderer.
+        return (this.options.preferCanvas && canvas(options)) || svg(options);
+    },
 });
 
-
 const DEFAULT_BASE_LAYER_NAME = 'BaseLayer';
 // const DEFAULT_BASE_LAYER_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors';
@@ -121,7 +118,9 @@ export default class MapComponent extends Vue {
     public baseMaps: LayerMap;
 
     @Ref('zoom') private zoom: ZoomControlComponent;
+    @Ref('draw') private draw: DrawControlComponent;
 
+    // services:
     mapService = MapService();
 
     southWest;
@@ -140,19 +139,16 @@ export default class MapComponent extends Vue {
 
     mounted(): void {
         this.initMap();
-        this.map.on('zoomend zoomlevelschange', this.zoom.updateDisabled, this.zoom);
     }
 
     unmounted() {
         this.map.off('zoomend zoomlevelschange');
     }
 
-    public deleteTest(): void {
-        this.onMapInitializedEvent.emit(this.mapId);
-    }
-
     // @Emit(this.onMapInitializedEvent)
     protected initMap(): void {
+        // let map: Map = (this.map = this.mapService.getMap(this.mapId));
+
         let map: Map = (this.map = new Map(this.mapId, this.mapOptions));
         this.mapService.setMap(this.mapId, map);
         map.scrollWheelZoom.disable();
@@ -162,14 +158,6 @@ export default class MapComponent extends Vue {
         this.onMapInitializedEvent.emit(this.mapId);
         this.addBaseMap();
 
-        // if (this.fitBounds) {
-        //     this.map.fitBounds(this.fitBounds);
-        // }
-        this.southWest = toLatLng(46.5, 9.9);
-        this.northEast = toLatLng(48.9, 16.9);
-        const bounds = toLatLngBounds(this.southWest, this.northEast);
-        map.fitBounds(bounds);
-
         const attributionControl = new Attribution().addTo(this.map);
         attributionControl.setPrefix(false);
 
@@ -198,6 +186,36 @@ export default class MapComponent extends Vue {
         // Initialise the FeatureGroup to store editable layers
         // let drawnItems = (this.drawnItems = new FeatureGroup());
         // map.addLayer(drawnItems);
+
+        this.map.on('zoomend zoomlevelschange', this.zoom.updateDisabled, this.zoom);
+
+        // if (this.fitBounds) {
+        //     this.map.fitBounds(this.fitBounds);
+        // }
+        if (this.coverage.x_min && this.coverage.y_min) {
+            this.southWest = toLatLng(this.coverage.y_min, this.coverage.x_min);
+        } else {
+            this.southWest = toLatLng(46.5, 9.9);
+        }
+        if (this.coverage.x_max && this.coverage.y_max) {
+            this.northEast = toLatLng(this.coverage.y_max, this.coverage.x_max);
+        } else {
+            this.northEast = toLatLng(48.9, 16.9);
+        } // this.northEast = toLatLng(48.9, 16.9);
+        const bounds = toLatLngBounds(this.southWest, this.northEast);
+        map.fitBounds(bounds);
+
+        if (this.coverage.x_min && this.coverage.x_max && this.coverage.y_min && this.coverage.y_max) {
+            let _southWest;
+            let _northEast;
+            if (this.coverage.x_min && this.coverage.y_min) {
+                _southWest = toLatLng(this.coverage.y_min, this.coverage.x_min);
+            }
+            if (this.coverage.x_max && this.coverage.y_max) {
+                _northEast = toLatLng(this.coverage.y_max, this.coverage.x_max);
+            }
+            this.draw.drawShape(_southWest, _northEast);
+        }
     }
 
     private addBaseMap(layerOptions?: LayerOptions): void {

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

@@ -100,7 +100,7 @@ export default class ZoomControlComponent extends Vue {
     position: absolute;
     left: 10px;
     top: 10px;
-    z-index: 40;
+    z-index: 39;
 }
 
 .btn-group-vertical button {