Merge branch 'main' into ALS-1902_political-view

src/atomicui/pages/DemoPage/DemoPage.tsx

@@ -151,7 +151,7 @@ const DemoPage: FC = () => {
 	const mapRef = useRef<MapRef | null>(null);
 	const geolocateControlRef = useRef<GeolocateControlRef | null>(null);
 	const { userProvidedValues } = useAuth();
-	const { currentLocationData, viewpoint, mapColorScheme } = useMap();
+	const { currentLocationData, viewpoint, mapColorScheme, setBiasPosition } = useMap();
 	const { zoom, setZoom } = usePlace();
 	const { routeData, directions } = useRoute();
 	const { isEditingRoute } = useTracker();
@@ -389,6 +389,12 @@ const DemoPage: FC = () => {
 				onClick={handleMapClick}
 				onLoad={onLoad}
 				onZoom={({ viewState }) => setZoom(viewState.zoom)}
+				onZoomEnd={({ viewState }) => {
+					setBiasPosition([viewState.longitude, viewState.latitude]);
+				}}
+				onDragEnd={({ viewState }) => {
+					setBiasPosition([viewState.longitude, viewState.latitude]);
+				}}
 				onError={error => errorHandler(error.error)}
 				onIdle={() => gridLoader && setGridLoader(false)}
 				attributionControl={false}

src/hooks/useMap.ts

@@ -52,6 +52,9 @@ const useMap = () => {
 			setMapPoliticalView: (mapPoliticalView: { alpha2: string; alpha3: string; desc: string }) => {
 				setState({ mapPoliticalView });
 			},
+			setBiasPosition: (biasPosition: number[]) => {
+				setState({ biasPosition });
+			},
 			resetStore() {
 				setState({
 					currentLocationData: undefined

src/services/usePlaceService.ts

@@ -23,7 +23,7 @@ const {
 
 const usePlaceService = () => {
 	const { placesClient } = useClient();
-	const { viewpoint, mapPoliticalView } = useMap();
+	const { mapPoliticalView, biasPosition: BiasPosition } = useMap();
 	const { i18n } = useTranslation();
 	const Language = i18n.language;
 
@@ -32,7 +32,7 @@ const usePlaceService = () => {
 			getPlaceSuggestions: async (QueryText: string) => {
 				const input: SuggestCommandInput = {
 					QueryText,
-					BiasPosition: [viewpoint?.longitude as number, viewpoint?.latitude as number],
+					BiasPosition,
 					Language,
 					AdditionalFeatures: ["Core"],
 					PoliticalView: mapPoliticalView.alpha3 || undefined
@@ -54,7 +54,7 @@ const usePlaceService = () => {
 				const input: SearchTextCommandInput = {
 					QueryText: isQueryId ? undefined : QueryTextOrId,
 					QueryId: isQueryId ? QueryTextOrId : undefined,
-					BiasPosition: isQueryId ? undefined : [viewpoint?.longitude as number, viewpoint?.latitude as number],
+					BiasPosition: isQueryId ? undefined : BiasPosition,
 					Language: isQueryId ? undefined : Language,
 					PoliticalView: mapPoliticalView.alpha3 || undefined
 				};
@@ -71,7 +71,6 @@ const usePlaceService = () => {
 				return await placesClient?.send(command);
 			},
 			getNLPlacesByText: async (Text: string) => {
-				const BiasPosition = [viewpoint?.longitude as number, viewpoint?.latitude as number];
 				const response = await fetch(
 					`${NL_BASE_URL}/places/ask?` +
 						new URLSearchParams([
@@ -94,7 +93,7 @@ const usePlaceService = () => {
 				return responseBody;
 			}
 		}),
-		[viewpoint, Language, mapPoliticalView, placesClient]
+		[BiasPosition, Language, mapPoliticalView.alpha3, placesClient]
 	);
 };
 

src/stores/useMapStore.ts

@@ -32,6 +32,7 @@ interface MapStoreProps {
 	mapStyle: MapStyleEnum;
 	mapColorScheme: MapColorSchemeEnum;
 	mapPoliticalView: { alpha2: string; alpha3: string; desc: string };
+	biasPosition: number[];
 }
 
 const initialState: IStateProps<MapStoreProps> = {
@@ -47,7 +48,8 @@ const initialState: IStateProps<MapStoreProps> = {
 		alpha2: "",
 		alpha3: "",
 		desc: "no_political_view.text"
-	}
+	},
+	biasPosition: [US.longitude, US.latitude]
 };
 
 export default createStore<MapStoreProps>(initialState, true, localStorageKey);