click and show detail as a pop-up

src/components/Popup.vue

@@ -0,0 +1,50 @@
+<template>
+  <div v-if="showPopup" class="popup">
+    <div class="popup-content">
+      <p>{{ nearestStructureData.display_name }}</p>
+      <button @click="closePopup">Close</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    nearestStructureData: Object,
+    onClose: Function,
+  },
+  data() {
+    return {
+      showPopup: true,
+    };
+  },
+  methods: {
+    closePopup() {
+      this.showPopup = false;
+      this.onClose();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.popup {
+  position: fixed;
+  top: 50%; /* Set the popup to be vertically centered */
+  left: 50%; /* Set the popup to be horizontally centered */
+  transform: translate(-50%, -50%); /* Center the popup accurately */
+  background-color: white;
+  border: 1px solid #ccc;
+  padding: 10px;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+
+.popup-content {
+  margin: 0;
+}
+
+button {
+  margin-top: 10px;
+}
+</style>

src/views/Home.vue

@@ -1,5 +1,14 @@
 <template>
 
+<div id="app">
+    <router-view />
+    <Popup
+      v-if="popupData"
+      :nearestStructureData="popupData"
+      :onClose="closePopup"
+    />
+  </div>
+  
   <searchbar/>
 
     <ol-map
@@ -33,6 +42,7 @@
 <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";
 
@@ -41,23 +51,29 @@ 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;
-  console.log("Clicked coordinate:", clickedCoordinate);
 
   try {
     const response = await axios.get(
       `https://nominatim.openstreetmap.org/reverse?format=json&lat=${clickedCoordinate[1]}&lon=${clickedCoordinate[0]}`
     );
 
-    console.log("API response:", response.data);
-
     const nearestStructureData = response.data;
-    console.log("Nearest structure:", nearestStructureData);
+    popupData.value = nearestStructureData; // Show popup
+
   } catch (error) {
     console.error("Error fetching reverse geocoding data:", error);
   }
 };
+
+const closePopup = () => {
+  popupData.value = null; // Hide popup
+};
+
 </script>
 
 <style>