- added route for showing map with all bounding boxes

- npm updates
- new Map.vue

resources/js/Pages/Map.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { Head } from '@inertiajs/vue3';
+import { onMounted, onUnmounted } from 'vue';
+// import { MainService } from '@/Stores/main';;
+import {
+	mdiChartTimelineVariant,
+	mdiArrowLeftBoldOutline,
+} from '@mdi/js';
+import LayoutGuest from '@/Layouts/LayoutGuest.vue';
+import SectionMain from '@/Components/SectionMain.vue';
+// import CardBox from '@/Components/CardBox.vue';
+import BaseButton from '@/Components/BaseButton.vue';
+
+import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
+// import SectionBannerStarOnGitHub from '@/Components/SectionBannerStarOnGitea.vue';
+import { Map } from 'leaflet/src/map/index';
+import { Rectangle } from 'leaflet';
+import { canvas } from 'leaflet/src/layer/vector/Canvas';
+import { svg } from 'leaflet/src/layer/vector/SVG';
+import { MapOptions } from '@/Components/Map/MapOptions';
+import axios from 'axios';
+import { LatLngBoundsExpression } from 'leaflet/src/geo/LatLngBounds';
+import { tileLayerWMS } from 'leaflet/src/layer/tile/TileLayer.WMS';
+import { Attribution } from 'leaflet/src/control/Control.Attribution';
+import { stardust } from '@eidellev/adonis-stardust/client';
+
+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_ATTRIBUTION = '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors';
+const OPEN_SEARCH_HOST = 'http://192.168.21.18';
+let map: Map;
+
+const fitBounds: LatLngBoundsExpression = [
+	[46.4318173285, 9.47996951665],
+	[49.0390742051, 16.9796667823],
+];
+
+onMounted(() => {
+	initMap();
+});
+
+const mapOptions: MapOptions = {
+	center: [48.208174, 16.373819],
+	zoom: 3,
+	zoomControl: false,
+	attributionControl: false,
+};
+
+const initMap = async () => {
+	// init leaflet map
+	map = new Map('map', mapOptions);
+	map.fitBounds(fitBounds);
+
+	const attributionControl = new Attribution().addTo(map);
+	attributionControl.setPrefix(false);
+
+	let osmGgray = tileLayerWMS('https://ows.terrestris.de/osm-gray/service', {
+		format: 'image/png',
+		attribution: DEFAULT_BASE_LAYER_ATTRIBUTION,
+		layers: 'OSM-WMS',
+	});
+	let layerOptions = {
+		label: DEFAULT_BASE_LAYER_NAME,
+		visible: true,
+		layer: osmGgray,
+	};
+	layerOptions.layer.addTo(map);
+
+	// const query = {
+	// 	query: {
+	// 		term: {
+	// 			id: "103"
+	// 		}
+	// 	}
+	// };
+	const query = {
+		// q: 'id:103'
+		// q: 'author:"Iglseder, Christoph" OR title:"Datensatz"',
+		// q: 'author:"Iglseder"',		
+		q: '*',
+		_source: 'author,bbox_xmin,bbox_xmax,bbox_ymin,bbox_ymax,abstract,title',
+		size: 1000
+		// qf:"title^3 author^2 subject^1",
+	}
+	try {
+		let response = await axios({
+			method: 'GET',
+			url: OPEN_SEARCH_HOST + '/tethys-records/_search',
+			headers: { 'Content-Type': 'application/json' },
+			params: query
+		});
+		// Loop through the hits in the response
+		response.data.hits.hits.forEach(hit => {
+			// Get the geo_location attribute
+			// var geo_location = hit._source.geo_location;
+			let xMin = hit._source.bbox_xmin;
+			let xMax = hit._source.bbox_xmax;
+			let yMin = hit._source.bbox_ymin;
+			let yMax = hit._source.bbox_ymax;
+			var bbox: LatLngBoundsExpression = [[yMin, xMin], [yMax, xMax]];
+			// Parse the WKT string to get the bounding box coordinates
+			// var bbox = wktToBbox(geo_location);
+
+			// // Add the bounding box to the map as a rectangle
+			new Rectangle(bbox, { color: "#ff7800", weight: 1 }).addTo(map);
+			// console.log(hit._source);
+		});
+	} catch (error) {
+		console.error(error);
+	}
+
+};
+
+onUnmounted(() => {
+	map.off('zoomend zoomlevelschange');
+});
+
+</script>
+
+<template>
+	<LayoutGuest>
+
+		<Head title="Map" />
+
+		<!-- <section class="p-6" v-bind:class="containerMaxW"> -->
+		<SectionMain>
+			<SectionTitleLineWithButton v-bind:icon="mdiChartTimelineVariant" title="Tethys Map" main>
+				<!-- <BaseButton href="https://gitea.geologie.ac.at/geolba/tethys" target="_blank" :icon="mdiGithub"
+					label="Star on Gitea" color="contrast" rounded-full small /> -->
+					<BaseButton :route-name="stardust.route('app.login.show')" label="Login"
+                    color="white" rounded-full small />
+			</SectionTitleLineWithButton>
+
+
+			<!-- <SectionBannerStarOnGitHub /> -->
+
+			<!-- <CardBox> -->
+				<div id="map" class="map-container mapDesktop mt-6 mb-6 rounded-2xl py-12 px-6 text-center"></div>
+			<!-- </CardBox> -->
+
+		</SectionMain>
+		<!-- </section> -->
+	</LayoutGuest>
+</template>