tethys.backend/resources/js/Pages/Map.vue

<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>