force removing 3d params when updating 2D state urls

Author: mxfh

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

@@ -35,6 +35,7 @@ import { getApplicationVersion } from "@carma-commons/utils";
 
 import {
   CustomViewer,
+  getClearCesiumCameraParams,
   selectCurrentSceneStyle,
   selectShowPrimaryTileset,
   selectViewerIsMode2d,
@@ -84,14 +85,15 @@ import { CESIUM_CONFIG, LEAFLET_CONFIG } from "../../config/app.config";
 
 import "cesium/Build/Cesium/Widgets/widgets.css";
 import "../leaflet.css";
-import { on } from "events";
 
 interface MapProps {
   height: number;
   width: number;
   allow3d?: boolean;
 }
 
+const clear3dParams = getClearCesiumCameraParams();
+
 export const GeoportalMap = ({ height, width, allow3d }: MapProps) => {
   const dispatch = useDispatch();
 
@@ -326,6 +328,7 @@ export const GeoportalMap = ({ height, width, allow3d }: MapProps) => {
 
     const newParams = {
       ...currentParams,
+      ...clear3dParams,
       m: sceneStyle,
       lat: latTruncated,
       lng: lngTruncated,

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

@@ -1,4 +1,5 @@
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useLocation } from "react-router-dom";
 import { isMobile } from "react-device-detect";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -39,7 +40,7 @@ import { ENDPOINT, isAreaType } from "@carma-commons/resources";
 import { detectWebGLContext } from "@carma-commons/utils";
 
 import {
-  cesiumCameraParamsKeyList,
+  getClearCesiumCameraParams,
   MapTypeSwitcher,
   PitchingCompass,
   selectViewerIsMode2d,
@@ -103,14 +104,15 @@ 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);
 
+const clear3dHashParamsObject = getClearCesiumCameraParams();
+
 // TODO: centralize the hash params update behavior
 
 const MapWrapper = () => {
@@ -258,20 +260,8 @@ const MapWrapper = () => {
 
   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 },
+      { hashParams: clear3dHashParamsObject },
       pathname,
       "MapTypeSwitcher Clear"
     );

libraries/mapping/engines/cesium/src/index.ts

@@ -52,6 +52,7 @@ export {
   encodeCesiumCamera,
   decodeCesiumCamera,
   cesiumCameraParamsKeyList,
+  getClearCesiumCameraParams,
 } from "./lib/utils/cesiumHashParamsCodec";
 
 export {

libraries/mapping/engines/cesium/src/lib/utils/cesiumHashParamsCodec.ts

@@ -73,6 +73,21 @@ export const cesiumCameraParamsKeyList = Object.values(cameraCodec).map(
   (codec) => codec.key
 );
 
+export const getClearCesiumCameraParams = (emptyValue = "") => {
+  const only3d = cesiumCameraParamsKeyList.filter(
+    (k) => !["lng", "lat"].includes(k) // keep lng and lat for consistency
+  );
+
+  const clearValues = only3d.reduce(
+    (acc, key) => {
+      acc[key] = emptyValue;
+      return acc;
+    },
+    { is3d: emptyValue }
+  );
+  return clearValues;
+};
+
 function isNumber(value: unknown): value is number {
   return (
     value !== undefined &&