WIP use proper path for routing on hash replacements

Author: mxfh

apps/geoportal/src/app/components/GeoportalMap/GeoportalMap.tsx

@@ -95,7 +95,7 @@ interface MapProps {
 export const GeoportalMap = ({ height, width, allow3d }: MapProps) => {
   const dispatch = useDispatch();
 
-  const location = useLocation();
+  const { pathname } = useLocation();
   const rerenderCountRef = useRef(0);
   const lastRenderTimeStampRef = useRef(Date.now());
   const lastRenderIntervalRef = useRef(0);
@@ -334,7 +334,7 @@ export const GeoportalMap = ({ height, width, allow3d }: MapProps) => {
 
     replaceHashRoutedHistory(
       { hashParams: newParams },
-      location.pathname,
+      pathname,
       "GPM:TopicMap:locationChangedHandler"
     );
 
@@ -354,7 +354,7 @@ export const GeoportalMap = ({ height, width, allow3d }: MapProps) => {
       );
       return;
     }
-    replaceHashRoutedHistory(e, location.pathname, "GPM:3D");
+    replaceHashRoutedHistory(e, pathname, "GPM:3D");
   };
 
   // TODO Move out Controls to own component

apps/geoportal/src/app/components/GeoportalMap/controls/MapWrapper.tsx

@@ -103,15 +103,19 @@ import {
 } from "../../../store/slices/ui.ts";
 
 import { CESIUM_CONFIG } from "../../../config/app.config";
+import { useLocation } from "react-router-dom";
 
 // detect GPU support, disables 3d mode if not supported
 let hasGPU = false;
 const setHasGPU = (flag: boolean) => (hasGPU = flag);
 const testGPU = () => detectWebGLContext(setHasGPU);
 window.addEventListener("load", testGPU, false);
 
+// TODO: centralize the hash params update behavior
+
 const MapWrapper = () => {
   const dispatch = useDispatch();
+  const { pathname } = useLocation();
 
   const flags = useFeatureFlags();
 
@@ -252,6 +256,27 @@ const MapWrapper = () => {
   const { gazData } = useGazData();
   const { width, height } = useWindowSize(wrapperRef);
 
+  const clear3dHashParams = () => {
+    console.debug("[CESIUM|DEBUG] MapTypeSwitcher: 2D mode, clear hash params");
+
+    const only3d = cesiumCameraParamsKeyList.filter(
+      (k) => !["lng", "lat"].includes(k) // keep lng and lat for consistency
+    );
+
+    const clearValues = only3d.reduce(
+      (acc, key) => {
+        acc[key] = "";
+        return acc;
+      },
+      { is3d: "" }
+    );
+    replaceHashRoutedHistory(
+      { hashParams: clearValues },
+      pathname,
+      "MapTypeSwitcher Clear"
+    );
+  };
+
   const handleToggleMeasurement = () => {
     cancelOngoingRequests();
     dispatch(toggleUIMode(UIMode.MEASUREMENT));
@@ -419,25 +444,7 @@ const MapWrapper = () => {
                     duration={CESIUM_CONFIG.transitions.mapMode.duration}
                     className="!rounded-t-none !border-t-[1px]"
                     onComplete={(isTo2d: boolean) => {
-                      isTo2d &&
-                        (() => {
-                          console.debug(
-                            "[CESIUM|DEBUG] MapTypeSwitcher: 2D mode, clear hash params"
-                          );
-                          const clearValues = cesiumCameraParamsKeyList.reduce(
-                            (acc, key) => {
-                              acc[key] = "";
-                              return acc;
-                            },
-                            { is3d: "" }
-                          );
-                          replaceHashRoutedHistory(
-                            { hashParams: clearValues },
-                            location.pathname,
-                            "MapTypeSwitcher Clear"
-                          );
-                        })();
-
+                      isTo2d && clear3dHashParams();
                       //dispatch(setBackgroundLayer({ ...backgroundLayer, visible: isTo2d }));
                     }}
                     ref={tourRefLabels.toggle2d3d}