update token & url map

src/components/AscGISMap.vue

@@ -17,6 +17,7 @@ const poiPlaceName = ref<string>('') // ชื่อพื้นที่ใก
 
 // Replace ArcGIS api key
 const apiKey = ref<string>(
+  // 'YLATgWuywoeRLHn6KImj5rg7UaP8bJoR9jiTldoCVBHlqFIebwMSA5wIXEmcYhwXwMHkmNISEYtUz3x0oiGIIx0bIXXnUwi0OzupoOEtDrQIsRPVtor7gaPpXEmH8TrNaMT3snf6zO_yujHLGzborg-L9aeAjTJn4ndL6f8qFmRzYcX93E2vyA-7XCufLYTRsdTE5Aq-9hnx1q9PmYVMqhAZpL7dWqn3JgO33fRXetk.'
   'AAPK4f700a4324d04e9f8a1a134e0771ac45FXWawdCl-OotFfr52gz9XKxTDJTpDzw_YYcwbmKDDyAJswf14FoPyw0qBkN64DvP'
 )
 const zoomMap = ref<number>(16)
@@ -24,100 +25,109 @@ const zoomMap = ref<number>(16)
 async function initializeMap() {
   try {
     // Load modules of ArcGIS
-    const [esriConfig, Map, MapView, Point, Graphic] = await loadModules([
+    loadModules([
       'esri/config',
       'esri/Map',
       'esri/views/MapView',
       'esri/geometry/Point',
       'esri/Graphic',
-    ])
+      'esri/layers/FeatureLayer',
+    ]).then(
+      async ([esriConfig, Map, MapView, Point, Graphic, FeatureLayer]) => {
+        // Set apiKey
+        esriConfig.apiKey = apiKey.value
 
-    // Set apiKey
-    esriConfig.apiKey = apiKey.value
+        // Create a FeatureLayer using a custom server URL
+        // const featureLayer = new FeatureLayer({
+        //   url: 'https://bmagis.bangkok.go.th/arcgis/rest/services/cache/BMA_3D_2D_Cache/MapServer&source=sd',
+        // })
 
-    const map = new Map({
-      basemap: 'arcgis-topographic',
-      // basemap: 'streets-navigation-vector',
-    })
+        const map = new Map({
+          basemap: 'arcgis-topographic',
+          // basemap: 'streets-navigation-vector',
+          // layers: [featureLayer],
+        })
 
-    navigator.geolocation.getCurrentPosition(async (position) => {
-      const { latitude, longitude } = position.coords
+        navigator.geolocation.getCurrentPosition(async (position) => {
+          const { latitude, longitude } = position.coords
 
-      const mapView = new MapView({
-        container: 'mapViewDisplay',
-        map: map,
-        center: {
-          latitude: latitude,
-          longitude: longitude,
-        }, // Set the initial map center current position
-        zoom: zoomMap.value,
-        constraints: {
-          snapToZoom: false, // Disables snapping to the zoom level
-          minZoom: zoomMap.value, // Set minimum zoom level
-          maxZoom: zoomMap.value, // Set maximum zoom level (same as minZoom for fixed zoom)
-        },
-        ui: {
-          components: [], // Empty array to remove all default UI components
-        },
-      })
-
-      // Update the state with the current position
-      currentPosition.value = await {
-        latitude: latitude,
-        longitude: longitude,
-      }
-
-      // Create a Point object with the coordinates
-      const point = new Point({
-        longitude,
-        latitude,
-      })
-
-      // Pin icon
-      const pinSymbol = {
-        type: 'picture-marker',
-        url: 'http://maps.google.com/mapfiles/ms/icons/red.png',
-        width: '32px',
-        height: '32px',
-      }
-
-      // Create a graphic using the point and symbol
-      const pointGraphic = new Graphic({
-        geometry: point,
-        symbol: pinSymbol,
-      })
-      mapView.graphics.add(pointGraphic)
-
-      // Get POI place
-      axios
-        .get(
-          'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
-          {
-            params: {
-              f: 'json', // Format JSON response
-              distance: 2000,
-              category: 'POI',
-              location: {
-                spatialReference: { wkid: 4326 },
-                x: longitude,
-                y: latitude,
-              },
-              // token: apiKey.value,
+          const mapView = new MapView({
+            container: 'mapViewDisplay',
+            map: map,
+            center: {
+              latitude: latitude,
+              longitude: longitude,
+            }, // Set the initial map center current position
+            zoom: zoomMap.value,
+            constraints: {
+              snapToZoom: false, // Disables snapping to the zoom level
+              minZoom: zoomMap.value, // Set minimum zoom level
+              maxZoom: zoomMap.value, // Set maximum zoom level (same as minZoom for fixed zoom)
             },
-          }
-        )
-        .then((response) => {
-          // console.log('poi', response.data.address)
-          poiPlaceName.value = response.data.address
-            ? response.data.address.PlaceName
-            : 'ไม่พบข้อมูล'
+            ui: {
+              components: [], // Empty array to remove all default UI components
+            },
+          })
 
-          updateLocation(latitude, longitude, poiPlaceName.value)
+          // Update the state with the current position
+          currentPosition.value = await {
+            latitude: latitude,
+            longitude: longitude,
+          }
+
+          // Create a Point object with the coordinates
+          const point = new Point({
+            longitude,
+            latitude,
+          })
+
+          // Pin icon
+          const pinSymbol = {
+            type: 'picture-marker',
+            url: 'http://maps.google.com/mapfiles/ms/icons/red.png',
+            width: '32px',
+            height: '32px',
+          }
+
+          // Create a graphic using the point and symbol
+          const pointGraphic = new Graphic({
+            geometry: point,
+            symbol: pinSymbol,
+          })
+          mapView.graphics.add(pointGraphic)
+
+          // Get POI place
+          axios
+            .get(
+              'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
+              {
+                params: {
+                  f: 'json', // Format JSON response
+                  distance: 2000,
+                  category: 'POI',
+                  location: {
+                    spatialReference: { wkid: 4326 },
+                    x: longitude,
+                    y: latitude,
+                  },
+                  token: apiKey.value,
+                },
+              }
+            )
+            .then((response) => {
+              // console.log('poi', response.data.address)
+              poiPlaceName.value = response.data.address
+                ? response.data.address.PlaceName
+                : 'ไม่พบข้อมูล'
+
+              updateLocation(latitude, longitude, poiPlaceName.value)
+            })
+            .catch((error) => {
+              console.error('Error fetching points of interest:', error)
+            })
         })
-        .catch((error) => {
-          console.error('Error fetching points of interest:', error)
-        })
-    })
+      }
+    )
   } catch (error) {
     console.error('Error loading the map', error)
   }