- npm updates

- draw bounding box geometry
- enter coverage information (elevation and depth)

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

@@ -2,7 +2,7 @@
     <div style="position: relative">
         <!-- <Map className="h-36" :center="state.center" :zoom="state.zoom"> // map component content </Map> -->
         <div :id="mapId" class="map-container mapDesktop rounded">
-            <ZoomControlComponent :mapId="mapId"></ZoomControlComponent>
+            <ZoomControlComponent ref="zoom" :mapId="mapId"></ZoomControlComponent>
             <DrawControlComponent :mapId="mapId" :southWest="southWest" :northEast="northEast"></DrawControlComponent>
         </div>
     </div>
@@ -10,7 +10,7 @@
 
 <script lang="ts">
 import { EventEmitter } from './EventEmitter';
-import { Component, Vue, Prop } from 'vue-facing-decorator';
+import { Component, Vue, Prop, Ref } from 'vue-facing-decorator';
 // import type { Coverage } from '@/Dataset';
 // import { Map, Control, MapOptions, LatLngBoundsExpression, tileLayer, latLng, latLngBounds, FeatureGroup } from 'leaflet';
 import { Map } from 'leaflet/src/map/index';
@@ -27,6 +27,54 @@ import { LayerOptions, LayerMap } from './LayerOptions';
 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';
+
+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;
+
+		if (!renderer) {
+			renderer = this._renderer = this._createRenderer();
+		}
+
+		if (!this.hasLayer(renderer)) {
+			this.addLayer(renderer);
+		}
+		return renderer;
+	},
+
+	_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;
+	},
+
+	_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';
@@ -36,7 +84,7 @@ const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a target="_blank" href="http://o
     name: 'MapComponent',
     components: {
         ZoomControlComponent,
-        DrawControlComponent
+        DrawControlComponent,
     },
 })
 export default class MapComponent extends Vue {
@@ -53,6 +101,9 @@ export default class MapComponent extends Vue {
     @Prop()
     public mapOptions: MapOptions;
 
+    @Prop()
+    public coverage: Coverage;
+
     // markerService: MarkerService
     /**
      * Bounds for the map
@@ -69,12 +120,13 @@ export default class MapComponent extends Vue {
     @Prop()
     public baseMaps: LayerMap;
 
+    @Ref('zoom') private zoom: ZoomControlComponent;
+
     mapService = MapService();
 
     southWest;
     northEast;
 
-
     /**
      * Informs when initialization is done with map id.
      */
@@ -88,6 +140,11 @@ 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 {
@@ -116,6 +173,28 @@ export default class MapComponent extends Vue {
         const attributionControl = new Attribution().addTo(this.map);
         attributionControl.setPrefix(false);
 
+        map.on(
+            'Daw.Event.CREATED',
+            function (event) {
+                // drawnItems.clearLayers();
+                // var type = event.type;
+                var layer = event.layer;
+
+                // if (type === "rectancle") {
+                // layer.bindPopup("A popup!" + layer.getBounds().toBBoxString());
+                var bounds = layer.getBounds();
+                this.coverage.x_min = bounds.getSouthWest().lng;
+                this.coverage.y_min = bounds.getSouthWest().lat;
+                // console.log(this.geolocation.xmin);
+                this.coverage.x_max = bounds.getNorthEast().lng;
+                this.coverage.y_max = bounds.getNorthEast().lat;
+                // }
+
+                // drawnItems.addLayer(layer);
+            },
+            this,
+        );
+
         // Initialise the FeatureGroup to store editable layers
         // let drawnItems = (this.drawnItems = new FeatureGroup());
         // map.addLayer(drawnItems);
@@ -150,4 +229,7 @@ export default class MapComponent extends Vue {
     height: 600px; /* <-- map height */
     width: 100%;
 }
+.leaflet-pane {
+    z-index: 30;
+}
 </style>