add click in map to see detail

detail is in console log

src/views/Home.vue

@@ -11,6 +11,7 @@
       width: 100%;
       position: fixed;
       "
+    @click="handleMapClick"
   >
     <ol-view
       ref="view"
@@ -33,11 +34,30 @@
 
 import searchbar from '@/components/searchbar.vue';
 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 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);
+  } catch (error) {
+    console.error("Error fetching reverse geocoding data:", error);
+  }
+};
 </script>
 
 <style>