refactor code & fixed location

src/components/AscGISMap.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, shallowRef, onBeforeUnmount } from 'vue'
 import { loadModules } from 'esri-loader'
 import axios from 'axios'
 import { useCounterMixin } from '@/stores/mixin'
@@ -13,21 +13,32 @@ const privacyStore = usePrivacyStore()
 const emit = defineEmits(['update:location'])
 const $q = useQuasar()
 
+// Throttle mechanism to prevent excessive location updates
+const LOCATION_UPDATE_THROTTLE_MS = 500
+let lastLocationUpdate = 0
+
 function updateLocation(latitude: number, longitude: number, namePOI: string) {
+  const now = Date.now()
+  // Skip update if called too frequently (within throttle period)
+  if (now - lastLocationUpdate < LOCATION_UPDATE_THROTTLE_MS) {
+    return
+  }
+  lastLocationUpdate = now
   // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
   emit('update:location', latitude, longitude, namePOI)
 }
 
 const poiPlaceName = ref<string>('') // ชื่อพื้นที่ใกล้เคียง
+const mapView = shallowRef<any>(null) // Store mapView reference for cleanup (use shallowRef to avoid reactivity issues)
 
-// Replace ArcGIS api key
+// ArcGIS API key from environment variable
 const apiKey = ref<string>(
-  'YLATgWuywoeRLHn6KImj5rg7UaP8bJoR9jiTldoCVBHlqFIebwMSA5wIXEmcYhwXwMHkmNISEYtUz3x0oiGIIx0bIXXnUwi0OzupoOEtDrQIsRPVtor7gaPpXEmH8TrNaMT3snf6zO_yujHLGzborg-L9aeAjTJn4ndL6f8qFmRzYcX93E2vyA-7XCufLYTRsdTE5Aq-9hnx1q9PmYVMqhAZpL7dWqn3JgO33fRXetk.'
-  // 'AAPK4f700a4324d04e9f8a1a134e0771ac45FXWawdCl-OotFfr52gz9XKxTDJTpDzw_YYcwbmKDDyAJswf14FoPyw0qBkN64DvP'
+  import.meta.env.VITE_ARCGIS_API_KEY ||
+    'YLATgWuywoeRLHn6KImj5rg7UaP8bJoR9jiTldoCVBHlqFIebwMSA5wIXEmcYhwXwMHkmNISEYtUz3x0oiGIIx0bIXXnUwi0OzupoOEtDrQIsRPVtor7gaPpXEmH8TrNaMT3snf6zO_yujHLGzborg-L9aeAjTJn4ndL6f8qFmRzYcX93E2vyA-7XCufLYTRsdTE5Aq-9hnx1q9PmYVMqhAZpL7dWqn3JgO33fRXetk.'
 )
 const zoomMap = ref<number>(18)
 const textTooltip = ref<string>(
-  'พื้นที่ใกล้เคียง: สถานที่สำคัญรอบตัวคุณ (ไม่ใช่ตำแหน่งปัจจุบัน)'
+  'พื้นที่ใกล้เคียงคือ สถานที่สำคัญรอบตัวคุณ (ไม่ใช่ตำแหน่งปัจจุบัน)'
 )
 
 async function initializeMap() {
@@ -59,7 +70,7 @@ async function initializeMap() {
       navigator.geolocation.getCurrentPosition(async (position) => {
         const { latitude, longitude } = position.coords
 
-        const mapView = new MapView({
+        mapView.value = new MapView({
           container: 'mapViewDisplay',
           map: map,
           center: {
@@ -91,7 +102,7 @@ async function initializeMap() {
           geometry: userPoint,
           symbol: userSymbol,
         })
-        mapView.graphics.add(userGraphic)
+        mapView.value.graphics.add(userGraphic)
         // Get POI place ยิงไปขอที่ server ของกทม.ก่อน
         await axios
           .get(
@@ -131,9 +142,9 @@ async function initializeMap() {
               geometry: poiPoint,
               symbol: poiSymbol,
             })
-            mapView.graphics.add(poiGraphic)
+            mapView.value.graphics.add(poiGraphic)
             // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
-            mapView.goTo({
+            mapView.value.goTo({
               target: [userPoint, poiPoint],
               zoom: zoomMap.value,
             })
@@ -180,9 +191,9 @@ async function initializeMap() {
                   geometry: poiPoint,
                   symbol: poiSymbol,
                 })
-                mapView.graphics.add(poiGraphic)
+                mapView.value.graphics.add(poiGraphic)
                 // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
-                mapView.goTo({
+                mapView.value.goTo({
                   target: [userPoint, poiPoint],
                   zoom: zoomMap.value,
                 })
@@ -271,6 +282,14 @@ const requestLocationPermission = () => {
   )
 }
 
+// Cleanup map resources when component unmounts
+onBeforeUnmount(() => {
+  if (mapView.value) {
+    mapView.value.destroy()
+    mapView.value = null
+  }
+})
+
 defineExpose({
   requestLocationPermission,
 })
@@ -309,13 +328,13 @@ defineExpose({
         "
       >
         พื้นที่ใกล้เคียง
-        <span class="q-px-sm">:</span>
-        {{ poiPlaceName }}
         <q-icon name="mdi-information-outline" size="xs" class="q-mr-xs" />
 
         <q-tooltip anchor="top middle" self="bottom middle" :offset="[0, 5]">
           {{ textTooltip }}
         </q-tooltip>
+        <span class="q-px-sm">:</span>
+        {{ poiPlaceName }}
       </div>
     </div>