87 lines
No EOL
1.6 KiB
Vue
87 lines
No EOL
1.6 KiB
Vue
<template>
|
|
|
|
<div id="app">
|
|
<router-view />
|
|
<Popup
|
|
v-if="popupData"
|
|
:nearestStructureData="popupData"
|
|
:onClose="closePopup"
|
|
/>
|
|
</div>
|
|
|
|
<searchbar/>
|
|
|
|
<ol-map
|
|
:loadTilesWhileAnimating="true"
|
|
:loadTilesWhileInteracting="true"
|
|
style=
|
|
"
|
|
height: 100%;
|
|
width: 100%;
|
|
position: fixed;
|
|
"
|
|
@click="handleMapClick"
|
|
>
|
|
<ol-view
|
|
ref="view"
|
|
:center="center"
|
|
:rotation="rotation"
|
|
:zoom="zoom"
|
|
:projection="projection"
|
|
/>
|
|
|
|
<ol-tile-layer>
|
|
<ol-source-osm />
|
|
</ol-tile-layer>
|
|
</ol-map>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
import searchbar from '@/components/searchbar.vue';
|
|
import Popup from "@/components/Popup.vue"; // Import the Popup componen
|
|
import { ref } from "vue";
|
|
import axios from "axios";
|
|
|
|
const center = ref([100.538611, 13.764722]);
|
|
const projection = ref("EPSG:4326");
|
|
const zoom = ref(19);
|
|
const rotation = ref(0);
|
|
|
|
const popupData = ref(null);
|
|
|
|
//Show API
|
|
const handleMapClick = async event => {
|
|
const clickedCoordinate = event.coordinate;
|
|
|
|
try {
|
|
const response = await axios.get(
|
|
`https://nominatim.openstreetmap.org/reverse?format=json&lat=${clickedCoordinate[1]}&lon=${clickedCoordinate[0]}`
|
|
);
|
|
|
|
const nearestStructureData = response.data;
|
|
popupData.value = nearestStructureData; // Show popup
|
|
|
|
} catch (error) {
|
|
console.error("Error fetching reverse geocoding data:", error);
|
|
}
|
|
};
|
|
|
|
const closePopup = () => {
|
|
popupData.value = null; // Hide popup
|
|
};
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.ol-zoom{
|
|
top: 40px;
|
|
}
|
|
.ol-attribution ul{
|
|
padding:1px .5em;
|
|
margin-bottom: 8em;
|
|
}
|
|
</style> |