fix check null POI

src/components/AscGISMap.vue

@@ -2,10 +2,16 @@
 import { onMounted, ref } from 'vue'
 import { loadModules } from 'esri-loader'
 import axios from 'axios'
+import { useCounterMixin } from '@/stores/mixin'
+import { useQuasar } from 'quasar'
 
-import type { LocationObject } from '@/interface/index/Main'
+const mixin = useCounterMixin()
+const { messageError } = mixin
 
+// import type { LocationObject } from '@/interface/index/Main'
+const mapElement = ref<HTMLElement | null>(null)
 const emit = defineEmits(['update:location'])
+const $q = useQuasar()
 
 function updateLocation(latitude: number, longitude: number, namePOI: string) {
   // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
@@ -191,6 +197,61 @@ async function initializeMap() {
   }
 }
 
+const locationGranted = ref(false)
+// Function to request location permission
+const requestLocationPermission = () => {
+  if (!navigator.geolocation) {
+    messageError(
+      $q,
+      '',
+      'ไม่สามารถระบุตำแหน่งปัจจุบันได้ เบราว์เซอร์ของคุณไม่รองรับ Geolocation'
+    )
+    return
+  }
+
+  navigator.geolocation.getCurrentPosition(
+    () => {
+      // Permission granted
+      locationGranted.value = true
+
+      // Center map on user's location if map is initialized
+      initializeMap()
+    },
+    (error) => {
+      // Permission denied
+      locationGranted.value = false
+
+      switch (error.code) {
+        case error.PERMISSION_DENIED:
+          messageError(
+            $q,
+            '',
+            'ไม่สามารถระบุตำแหน่งปัจจุบันได้ เนื่องจากคุณปฏิเสธการเข้าถึงตำแหน่ง กรุณาเปิดการเข้าถึงตำแหน่ง'
+          )
+          break
+        case error.POSITION_UNAVAILABLE:
+          messageError($q, '', 'ไม่สามารถระบุตำแหน่งปัจจุบันได้')
+          break
+        case error.TIMEOUT:
+          messageError($q, '', 'การร้องขอตำแหน่งหมดเวลา กรุณาลองอีกครั้ง')
+          break
+        default:
+          messageError(
+            $q,
+            '',
+            'ไม่สามารถระบุตำแหน่งปัจจุบันได้ เกิดข้อผิดพลาดไม่ทราบสาเหตุในการเข้าถึงตำแหน่ง'
+          )
+          break
+      }
+    },
+    { enableHighAccuracy: true }
+  )
+}
+
+defineExpose({
+  requestLocationPermission,
+})
+
 onMounted(async () => {
   await initializeMap()
 })
@@ -215,7 +276,11 @@ onMounted(async () => {
     :style="$q.screen.gt.xs ? ';' : 'border-radius: 20px'"
   >
     <div v-if="$q.screen.gt.xs">
-      <div id="mapViewDisplay" style="height: 35vh; pointer-events: none"></div>
+      <div
+        id="mapViewDisplay"
+        ref="mapElement"
+        style="height: 35vh; pointer-events: none"
+      ></div>
 
       <div
         :class="