feat(widget): Add geocoder support to GeolocateWidget (#9608)

Author: ibgreen-openai

modules/widgets/src/geolocate-widget.tsx

@@ -10,6 +10,10 @@ import {render} from 'preact';
 /** @todo - is the the best we can do? */
 type ViewState = Record<string, unknown>;
 
+const GOOGLE_URL = 'https://maps.googleapis.com/maps/api/geocode/json';
+const MAPBOX_URL = 'https://api.mapbox.com/geocoding/v5/mapbox.places';
+const OPENCAGE_API_URL = 'https://api.opencagedata.com/geocode/v1/json';
+
 /** Properties for the GeolocateWidget */
 export type GeolocateWidgetProps = WidgetProps & {
   viewId?: string;
@@ -18,6 +22,15 @@ export type GeolocateWidgetProps = WidgetProps & {
   /** Tooltip message */
   label?: string;
   transitionDuration?: number;
+  /** Geocoding service */
+  geocoder?: 'google' | 'mapbox' | 'opencage' | 'custom' | 'coordinates';
+  /** API key used for geocoding services */
+  apiKey?: string;
+  /** Callback when using a custom geocoder */
+  onGeocode?: (
+    address: string,
+    apiKey: string
+  ) => Promise<{longitude: number; latitude: number} | null>;
 };
 
 /**
@@ -32,7 +45,10 @@ export class GeolocateWidget extends Widget<GeolocateWidgetProps> {
     viewId: undefined!,
     placement: 'top-left',
     label: 'Geolocate',
-    transitionDuration: 200
+    transitionDuration: 200,
+    geocoder: 'coordinates',
+    apiKey: '',
+    onGeocode: undefined!
   };
 
   className = 'deck-widget-geolocate';
@@ -50,6 +66,9 @@ export class GeolocateWidget extends Widget<GeolocateWidgetProps> {
   setProps(props: Partial<GeolocateWidgetProps>): void {
     this.placement = props.placement ?? this.placement;
     super.setProps(props);
+    if (!this.props.apiKey && ['google', 'mapbox', 'opencage'].includes(this.props.geocoder)) {
+      throw new Error('API key is required');
+    }
   }
 
   onRenderHTML(rootElement: HTMLElement): void {
@@ -59,10 +78,8 @@ export class GeolocateWidget extends Widget<GeolocateWidgetProps> {
           type="text"
           placeholder="-122.45, 37.8 or 37°48'N, 122°27'W"
           value={this.geolocateText}
-          onInput={
-            // @ts-expect-error event type
-            e => this.setInput(e.target?.value || '')
-          }
+          // @ts-expect-error event type
+          onInput={e => this.setInput(e.target?.value || '')}
           onKeyPress={this.handleKeyPress}
         />
         <button onClick={this.handleSubmit}>Go</button>
@@ -76,26 +93,123 @@ export class GeolocateWidget extends Widget<GeolocateWidgetProps> {
     this.geolocateText = text;
   };
 
-  handleSubmit = () => {
-    const coords = parseCoordinates(this.geolocateText);
-    if (coords) {
-      this.errorText = '';
-      this.handleCoordinates(coords);
-    } else {
-      this.errorText = 'Invalid coordinate format.';
-    }
-  };
-
   handleKeyPress = e => {
     if (e.key === 'Enter') {
       this.handleSubmit();
     }
   };
 
-  handleCoordinates = coordinates => {
-    this.setViewState(coordinates);
+  /** Sync wrapper for async geocode() */
+  handleSubmit = () => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    this.geocode();
   };
 
+  geocode: () => Promise<void> = async () => {
+    this.errorText = '';
+    try {
+      const coordinates = await this.callGeocoderService(this.geolocateText);
+      if (coordinates) {
+        this.setViewState(coordinates);
+      } else {
+        this.errorText = 'Invalid address';
+      }
+    } catch (error) {
+      this.errorText = `Error: ${(error as Error).message}`;
+    }
+  };
+
+  callGeocoderService = async (
+    address: string
+  ): Promise<{longitude: number; latitude: number} | null> => {
+    const {geocoder, apiKey, onGeocode} = this.props;
+
+    switch (geocoder) {
+      case 'google':
+        return this.geocodeGoogle(address, apiKey);
+      case 'mapbox':
+        return this.geocodeMapbox(address, apiKey);
+      case 'opencage':
+        return this.geocodeOpenCage(address, apiKey);
+      case 'custom':
+        return await onGeocode(address, apiKey);
+      case 'coordinates':
+        return await this.geocodeCoordinates(address);
+      default:
+        throw new Error(`Unsupported geocoder: ${geocoder}`);
+    }
+  };
+
+  async geocodeGoogle(
+    address: string,
+    apiKey: string
+  ): Promise<{longitude: number; latitude: number} | null> {
+    const encodedAddress = encodeURIComponent(address);
+    const json = await this._fetchJson(`${GOOGLE_URL}?address=${encodedAddress}&key=${apiKey}`);
+
+    switch (json.status) {
+      case 'OK':
+        const loc = json.results.length > 0 && json.results[0].geometry.location;
+        return loc ? {longitude: loc.lng, latitude: loc.lat} : null;
+      default:
+        throw new Error(`Google Geocoder failed: ${json.status}`);
+    }
+  }
+
+  async geocodeMapbox(
+    address: string,
+    apiKey: string
+  ): Promise<{longitude: number; latitude: number} | null> {
+    const encodedAddress = encodeURIComponent(address);
+    const json = await this._fetchJson(
+      `${MAPBOX_URL}/${encodedAddress}.json?access_token=${apiKey}`
+    );
+
+    if (Array.isArray(json.features) && json.features.length > 0) {
+      const center = json.features[0].center;
+      if (Array.isArray(center) && center.length >= 2) {
+        return {longitude: center[0], latitude: center[1]};
+      }
+    }
+    return null;
+  }
+
+  async geocodeOpenCage(
+    address: string,
+    key: string
+  ): Promise<{longitude: number; latitude: number} | null> {
+    const encodedAddress = encodeURIComponent(address);
+    const data = await this._fetchJson(`${OPENCAGE_API_URL}?q=${encodedAddress}&key=${key}`);
+    if (Array.isArray(data.results) && data.results.length > 0) {
+      const geometry = data.results[0].geometry;
+      return {longitude: geometry.lng, latitude: geometry.lat};
+    }
+    return null;
+  }
+
+  async geocodeCoordinates(address: string): Promise<{longitude: number; latitude: number} | null> {
+    return parseCoordinates(address) || null;
+  }
+
+  /** Fetch JSON, catching HTTP errors */
+  async _fetchJson(url: string): Promise<any> {
+    let response: Response;
+    try {
+      response = await fetch(url);
+    } catch (error) {
+      // Annoyingly, fetch reports some errors (e.g. CORS) using excpetions, not response.ok
+      throw new Error(`Failed to fetch ${url}: ${error}`);
+    }
+    if (!response.ok) {
+      throw new Error(`Failed to fetch ${url}: ${response.statusText}`);
+    }
+    const data = await response.json();
+    if (!data) {
+      throw new Error(`No data returned from ${url}`);
+    }
+    return data;
+  }
+
   // TODO - MOVE TO WIDGETIMPL?
 
   setViewState(viewState: ViewState) {

test/apps/widgets-example-9.2/app.ts

@@ -100,7 +100,7 @@ const deck = new Deck({
     new ResetViewWidget(),
     new _LoadingWidget(),
     new _ScaleWidget({placement: 'bottom-right'}),
-    new _GeolocateWidget(),
+    new _GeolocateWidget({viewId: 'left-map'}),
     new _ThemeWidget(),
     new _InfoWidget({mode: 'hover', getTooltip}),
     new _InfoWidget({mode: 'click', getTooltip}),