Updated Reverse Geocoding Logic

src/components/form/dt-location-map/dt-location-map.stories.js

@@ -80,6 +80,7 @@ export default {
     error: { control: 'text' },
     slot: { control: 'text' },
     onChange: { action: 'on-change' },
+    onGeocode: { action: 'dt:geocode' },
     ...argTypes,
   },
   args: {
@@ -106,6 +107,7 @@ export default {
     error: '',
     slot: '',
     onChange: action('on-change'),
+    onGeocode: action('dt:geocode'),
   },
   render: args => {
     const {
@@ -125,6 +127,7 @@ export default {
       loading = false,
       saved = false,
       onChange,
+      onGeocode,
       open,
       slot,
       i18n,
@@ -155,6 +158,7 @@ export default {
         limit="${ifDefined(args.limit)}"
         error="${ifDefined(args.error)}"
         @change=${args.onChange}
+        @dt:geocode=${args.onGeocode}
       >
         ${args.slot}
       </dt-location-map>

src/components/form/dt-location-map/dt-map-modal.js

@@ -47,7 +47,7 @@ export class DtMapModal extends DtBase {
   connectedCallback() {
     super.connectedCallback();
 
-    this.canEdit = !this.metadata;
+    this.canEdit = !(this.metadata?.lat);
 
     if (!window.mapboxgl) {
       const script = document.createElement('script');
@@ -85,24 +85,27 @@ export class DtMapModal extends DtBase {
       // Add pin if there is one
       this.addPinFromMetadata();
 
-      // If map is editable add/move marker on click
-      this.map.on('click', (e) => {
+      // Keep pin in the center of the map
+      this.map.on('move', () => {
         if (!this.canEdit) {
           return;
         }
+
+        const currentCenter = this.map.getCenter();
+
         if (this.marker) {
-          this.marker.setLngLat(e.lngLat)
+          this.marker.setLngLat(currentCenter);
         } else {
           this.marker = new mapboxgl.Marker()
-            .setLngLat(e.lngLat)
+            .setLngLat(currentCenter)
             .addTo(this.map);
         }
       });
     }
   }
 
   addPinFromMetadata() {
-    if (this.metadata) {
+    if (this.metadata?.lat) {
       const { lng, lat, level } = this.metadata;
       let zoom = 15
       if (level === 'admin0') {
@@ -137,7 +140,7 @@ export class DtMapModal extends DtBase {
   }
 
   onClose(e) {
-    if (e?.detail?.action === 'button' && this.marker) {
+    if (e?.detail?.action === 'button' && this.marker && this.canEdit) {
       this.dispatchEvent(new CustomEvent('submit', {
         detail: {
           location: this.marker.getLngLat(),
@@ -152,6 +155,7 @@ export class DtMapModal extends DtBase {
         .title=${this.metadata?.label}
         ?isopen=${this.isOpen}
         hideButton
+        closeButton
         @close=${this.onClose}
         tabindex="-1"
       >

src/services/componentService.js

@@ -335,8 +335,8 @@ export default class ComponentService {
           if (results && results.length) {
             const place = results[0];
             onSuccess({
-              lng: place.geometry.location.lng,
-              lat: place.geometry.location.lat,
+              lng: place.geometry.location.lng(),
+              lat: place.geometry.location.lat(),
               level: place.types && place.types.length ? place.types[0] : null,
               label: place.formatted_address,
               source: 'user',

src/services/googleGeocodeService.js

@@ -144,6 +144,11 @@ export default class GoogleGeocodeService {
    */
   async getPlaceDetails(metadata, language = 'en') {
     let response = null;
+
+    if (!metadata || !metadata.place_id) {
+      return response;
+    }
+
     if (this.window.google) {
       const geocoder = new window.google.maps.Geocoder();
       try {
@@ -172,36 +177,32 @@ export default class GoogleGeocodeService {
     return response;
   }
 
-  /**
+/**
    * Reverse geocode a lng/lat pair to get place details
    * @param longitude
    * @param latitude
    * @param language
    * @returns {Promise<Array>}
    */
   async reverseGeocode(longitude, latitude, language = 'en') {
-    const params = new URLSearchParams({
-      key: this.token,
-      latlng: `${latitude},${longitude}`,
-      language,
-      result_type: [
-        'point_of_interest',
-        'establishment',
-        'premise',
-        'street_address',
-        'neighborhood',
-        'sublocality',
-        'locality',
-        'colloquial_area',
-        'political',
-        'country',
-      ].join('|')
+    return new Promise((resolve) => {
+      const geocoder = new this.window.google.maps.Geocoder();
+      const latlng = { lat: parseFloat(latitude), lng: parseFloat(longitude) };
+
+      geocoder.geocode(
+        { location: latlng, language }, 
+        (results, status) => {
+          if (status === 'OK' && results) {
+            resolve(results);
+          } else if (status === 'ZERO_RESULTS') {
+            resolve([]);
+          } else {
+            console.error('Reverse geocoding failed:', status);
+            resolve([]);
+          }
+        }
+      );
     });
-    const apiUrl = `https://maps.googleapis.com/maps/api/geocode/json?${params}`;
-    const response = await fetch(apiUrl, { method: 'GET' });
-
-    const result = await response.json();
-    return result?.results;
   }
 
   convert_level(level) {