wip

Author: mdastous-bentley

packages/itwin/geo-tools/src/GoogleAddressProvider.ts

@@ -9,11 +9,17 @@ import { IModelApp } from "@itwin/core-frontend";
 import type { MapCartoRectangle } from "@itwin/core-frontend";
 import type { AddressProvider, AddressRequest, AddressData, GeoCoder } from "./AddressProvider";
 
-
+/**
+ * Information requiered to retreive location from Google Places API.
+ **/
 export interface GoogleAddressData  extends AddressData {
   placeId: string;
 }
 
+/**
+ * Address provider for Google Places API.
+ * It supports address suggestions and location retrieval based on place IDs.
+ */
 export class GoogleAddressProvider implements AddressProvider {
   private _radius = 5000;
   private _apiKey: string;

packages/itwin/geo-tools/src/components/GeoAddressSearch.scss

@@ -5,7 +5,7 @@
 
 
 .geotools-geoaddresssearch__container {
-  width: 300px;
+  width: 400px;
   margin-left: -7px;
   margin-right: -7px;
 }

packages/itwin/geo-tools/src/components/GeoAddressSearch.tsx

@@ -5,30 +5,61 @@
 
 import "./GeoAddressSearch.scss";
 import * as React from "react";
+import { useActiveViewport } from "@itwin/appui-react";
+import { BaseMapLayerSettings } from "@itwin/core-common";
 import { SvgCloseSmall, SvgSearch } from "@itwin/itwinui-icons-react";
 import { ComboBox, IconButton } from "@itwin/itwinui-react";
 import { BingAddressProvider } from "../BingAddressProvider";
 import { GeoTools } from "../GeoTools";
+import { GoogleAddressProvider } from "../GoogleAddressProvider";
 import { IModelGeoView } from "../IModelGeoView";
 
+import type { Viewport } from "@itwin/core-frontend";
 import type { SelectOption } from "@itwin/itwinui-react";
 import type { AddressData, AddressProvider } from "../AddressProvider";
+/**
+ * Properties for the <GeoAddressSearch> component.
+ */
 export interface GeoAddressSearchProps {
   /** Address provider object */
   provider?: AddressProvider;
   /** Indicates whether to set focus to the input element (default to true)*/
   setFocus?: boolean;
 }
 
+const isGoogleBaseMap = (vp?: Viewport): boolean => {
+      return (
+          vp?.viewFlags.backgroundMap === true
+          && vp?.displayStyle.backgroundMapBase instanceof BaseMapLayerSettings
+          && vp.displayStyle.backgroundMapBase.formatId === "GoogleMaps"
+      );
+};
+const isValidBaseMap = (provider: AddressProvider, vp?: Viewport) => {
+  const isGoogleAddressProvider = provider instanceof GoogleAddressProvider;
+  return !isGoogleAddressProvider || (isGoogleAddressProvider && isGoogleBaseMap(vp));
+}
+
+/**
+ * <GeoAddressSearch> react component
+ */
 export function GeoAddressSearch(props: GeoAddressSearchProps) {
   const [inputValue, setInputValue] = React.useState("");
   const [options, setOptions] = React.useState<SelectOption<string>[]>([]);
   const [addressCache, setAddressCache] = React.useState<AddressData[]>([]);
+  const activeViewport = useActiveViewport(); // Hook to ensure the component re-renders when the active viewport changes
+  const [disabled, setDisabled] = React.useState<boolean>(() => isGoogleBaseMap(activeViewport));
 
   // `React.useMemo' is used avoid creating new object on each render cycle
   // Default is Bing provider, but we might want to default to Google in the future
   const addressProvider = React.useMemo(() => props.provider ?? new BingAddressProvider(), [props.provider]);
 
+  React.useEffect(() => {
+    setDisabled(!isValidBaseMap(addressProvider, activeViewport));
+    return activeViewport?.onDisplayStyleChanged.addListener(
+      (vp)=>{setDisabled(!isValidBaseMap(addressProvider, vp));}
+    );
+  }, [activeViewport]);
+
   const onAddressSelected = async (selected: string) => {
     setInputValue(selected);
     let locatedByPosition = false
@@ -69,12 +100,14 @@ export function GeoAddressSearch(props: GeoAddressSearchProps) {
     <div className="geotools-geoaddresssearch__container">
       <div className="geotools-geoaddresssearch__combobox">
         <ComboBox
+
           options={options}
           filterFunction={(options)=>options} // disable filtering as it can interfere with the address provider
           emptyStateMessage={GeoTools.translate("geoAddressSearch.noResults")}
           onHide={()=>clearValue()}
           inputProps={{
-            placeholder: GeoTools.translate("geoAddressSearch.inputPlaceHolder"),
+            disabled,
+            placeholder: disabled ? GeoTools.translate("geoAddressSearch.invalidBaseMap") : GeoTools.translate("geoAddressSearch.inputPlaceHolder"),
             onChange: async (event: React.ChangeEvent<HTMLInputElement>) => {
 
               const items = await getAddressesFunc(inputValue);
@@ -87,12 +120,15 @@ export function GeoAddressSearch(props: GeoAddressSearchProps) {
           }}
           onChange={(value: any) => {
             onAddressSelected(value);
+
           }}
           value={inputValue}
           enableVirtualization
         />
       </div>
+
       <IconButton
+        disabled={disabled}
         className="geotools-geoaddresssearch__button"
         onClick={clearValue}
         label={!inputValue ? "" : GeoTools.translate("geoAddressSearch.clearTooltip")} >

packages/itwin/geo-tools/src/public/locales/en/GeoTools.json

@@ -2,6 +2,7 @@
   "geoAddressSearch": {
     "label": "Search Address",
     "inputPlaceHolder": "Search Address..",
+    "invalidBaseMap": "Invalid Base Map",
     "clearTooltip": "Clear",
     "noResults": "No results found"
   }