diff --git a/src/atomicui/pages/DemoPage/DemoPage.tsx b/src/atomicui/pages/DemoPage/DemoPage.tsx index da69fe5e..2089f66f 100644 --- a/src/atomicui/pages/DemoPage/DemoPage.tsx +++ b/src/atomicui/pages/DemoPage/DemoPage.tsx @@ -151,7 +151,7 @@ const DemoPage: FC = () => { const mapRef = useRef(null); const geolocateControlRef = useRef(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} diff --git a/src/hooks/useMap.ts b/src/hooks/useMap.ts index 45811c2b..cec96c3a 100644 --- a/src/hooks/useMap.ts +++ b/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 diff --git a/src/services/usePlaceService.ts b/src/services/usePlaceService.ts index 13f71837..70b3bd56 100644 --- a/src/services/usePlaceService.ts +++ b/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] ); }; diff --git a/src/stores/useMapStore.ts b/src/stores/useMapStore.ts index a5c2b490..b9020091 100644 --- a/src/stores/useMapStore.ts +++ b/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 = { @@ -47,7 +48,8 @@ const initialState: IStateProps = { alpha2: "", alpha3: "", desc: "no_political_view.text" - } + }, + biasPosition: [US.longitude, US.latitude] }; export default createStore(initialState, true, localStorageKey);