From 8960f002b3a2df78d2abeddec56a48f3a16a7d5f Mon Sep 17 00:00:00 2001 From: jlamanskygitt Date: Mon, 22 Jun 2026 10:32:26 -0500 Subject: [PATCH 1/3] updated google reverseGeocode & canEdit logic --- .../form/dt-location-map/dt-map-modal.js | 7 +-- src/services/componentService.js | 4 +- src/services/googleGeocodeService.js | 45 ++++++++++--------- 3 files changed, 29 insertions(+), 27 deletions(-) diff --git a/src/components/form/dt-location-map/dt-map-modal.js b/src/components/form/dt-location-map/dt-map-modal.js index 19fa3179..e84749dc 100644 --- a/src/components/form/dt-location-map/dt-map-modal.js +++ b/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'); @@ -102,7 +102,7 @@ export class DtMapModal extends DtBase { } addPinFromMetadata() { - if (this.metadata) { + if (this.metadata?.lat) { const { lng, lat, level } = this.metadata; let zoom = 15 if (level === 'admin0') { @@ -137,7 +137,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 +152,7 @@ export class DtMapModal extends DtBase { .title=${this.metadata?.label} ?isopen=${this.isOpen} hideButton + closeButton @close=${this.onClose} tabindex="-1" > diff --git a/src/services/componentService.js b/src/services/componentService.js index 3d133290..9696aa07 100644 --- a/src/services/componentService.js +++ b/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', diff --git a/src/services/googleGeocodeService.js b/src/services/googleGeocodeService.js index eb7b13ab..6e5f1e24 100644 --- a/src/services/googleGeocodeService.js +++ b/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,7 +177,7 @@ export default class GoogleGeocodeService { return response; } - /** +/** * Reverse geocode a lng/lat pair to get place details * @param longitude * @param latitude @@ -180,28 +185,24 @@ export default class GoogleGeocodeService { * @returns {Promise} */ 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) { From 4ef56266be6f6945481ee89fb444f0a65680a856 Mon Sep 17 00:00:00 2001 From: jlamanskygitt Date: Thu, 25 Jun 2026 11:18:57 -0500 Subject: [PATCH 2/3] Locked pin to center of map --- src/components/form/dt-location-map/dt-map-modal.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/form/dt-location-map/dt-map-modal.js b/src/components/form/dt-location-map/dt-map-modal.js index e84749dc..836d0781 100644 --- a/src/components/form/dt-location-map/dt-map-modal.js +++ b/src/components/form/dt-location-map/dt-map-modal.js @@ -85,16 +85,19 @@ 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); } }); From 156c957623e2bf2af48a597aba08f98826f78281 Mon Sep 17 00:00:00 2001 From: Jon Wynveen Date: Fri, 26 Jun 2026 12:36:46 +0300 Subject: [PATCH 3/3] add storybook action for geocode event --- .../form/dt-location-map/dt-location-map.stories.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/form/dt-location-map/dt-location-map.stories.js b/src/components/form/dt-location-map/dt-location-map.stories.js index c4f77a00..ea90ef9a 100644 --- a/src/components/form/dt-location-map/dt-location-map.stories.js +++ b/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}