feat: UI override to mapconfig icon settings

map-view/src/App.tsx

@@ -9,7 +9,7 @@ import "./App.css";
 import LayerSwitcher from "./components/LayerSwitcher";
 import FeatureInfo from "./components/FeatureInfo";
 import Map from "./common/Map";
-import { Feature, MapConfig } from "./models";
+import { Feature, IconSize, MapConfig } from "./models";
 import OngoingFetchInfo from "./components/OngoingFetchInfo";
 import AddressInput from "./components/AddressInput";
 import { Address, convertToEPSG3879OL, getAddressSearchResults, getNameFromAddress } from "./common/AddressSearchUtils";
@@ -47,12 +47,39 @@ const App = () => {
   const [features, setFeatures] = useState<Feature[]>([]);
   const [ongoingFeatureFetches, setOngoingFeatureFetches] = useState<Set<string>>(new Set());
   const [addressSearchResults, setAddressSearchResults] = useState<Address[]>([]);
+  const [iconScale, setIconScale] = useState<number>(0.1);
+  const [iconType, setIconType] = useState<string>("svg");
+  const [iconSize, setIconSize] = useState<IconSize>(128);
 
   useEffect(() => {
     const mapId = "map";
     MapConfigAPI.getMapConfig().then(async (config: MapConfig) => {
       setMapConfig(config);
+
+      // Try to load icon settings from localStorage
+      const savedScale = localStorage.getItem("mapview_icon_scale");
+      const savedType = localStorage.getItem("mapview_icon_type");
+      const savedSize = localStorage.getItem("mapview_icon_size");
+
+      // Parse and validate saved values
+      const scale = savedScale ? Number.parseFloat(savedScale) : config.icon_scale;
+      const type = savedType || config.icon_type;
+      const size = savedSize ? Number.parseInt(savedSize, 10) : config.icon_size;
+
+      // Validate ranges and allowed values
+      const validScale = !Number.isNaN(scale) && scale >= 0.01 && scale <= 2 ? scale : config.icon_scale;
+      const validType = type === "svg" || type === "png" ? type : config.icon_type;
+      const validSize = [32, 64, 128, 256].includes(size) ? (size as IconSize) : (config.icon_size as IconSize);
+
+      setIconScale(validScale);
+      setIconType(validType);
+      setIconSize(validSize);
+
       await Map.initialize(mapId, config);
+
+      // Apply loaded settings to map after initialization
+      Map.updateIconSettings(validScale, validType, validSize);
+
       Map.registerFeatureInfoCallback((newFeatures: Feature[]) => setFeatures(newFeatures));
       Map.registerOngoingFeatureFetchesCallback((fetches: Set<string>) => {
         setOngoingFeatureFetches(new Set(fetches));
@@ -89,6 +116,35 @@ const App = () => {
     setFeatures(features.filter((feature) => getFeatureType(feature) !== removeLayerIdentifier));
   };
 
+  const handleIconScaleChange = (scale: number) => {
+    setIconScale(scale);
+    localStorage.setItem("mapview_icon_scale", scale.toString());
+    Map.updateIconSettings(scale, iconType, iconSize);
+  };
+
+  const handleIconTypeChange = (type: string) => {
+    setIconType(type);
+    localStorage.setItem("mapview_icon_type", type);
+    Map.updateIconSettings(iconScale, type, iconSize);
+  };
+
+  const handleIconSizeChange = (size: IconSize) => {
+    setIconSize(size);
+    localStorage.setItem("mapview_icon_size", size.toString());
+    Map.updateIconSettings(iconScale, iconType, size);
+  };
+
+  const handleResetIconSettings = () => {
+    if (!mapConfig) return;
+    localStorage.removeItem("mapview_icon_scale");
+    localStorage.removeItem("mapview_icon_type");
+    localStorage.removeItem("mapview_icon_size");
+    setIconScale(mapConfig.icon_scale);
+    setIconType(mapConfig.icon_type);
+    setIconSize(mapConfig.icon_size as IconSize);
+    Map.updateIconSettings(mapConfig.icon_scale, mapConfig.icon_type, mapConfig.icon_size as IconSize);
+  };
+
   return (
     <React.StrictMode>
       <div className="App">
@@ -151,6 +207,13 @@ const App = () => {
                   }
                 }
               }}
+              iconScale={iconScale}
+              iconType={iconType}
+              iconSize={iconSize}
+              onIconScaleChange={handleIconScaleChange}
+              onIconTypeChange={handleIconTypeChange}
+              onIconSizeChange={handleIconSizeChange}
+              onResetIconSettings={handleResetIconSettings}
             />
           )}
         </StyledDrawer>

map-view/src/api/MapConfigAPI.ts

@@ -10,10 +10,24 @@ class MapConfigAPI {
     } else {
       const url = `${APIBaseUrl}/map-config`;
       return fetch(url)
-        .then((response) => response.text())
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+          return response.text();
+        })
         .then((responseText) => {
-          this.mapConfig = JSON.parse(responseText);
-          return this.mapConfig;
+          try {
+            this.mapConfig = JSON.parse(responseText);
+            return this.mapConfig;
+          } catch (error) {
+            console.error("Failed to parse MapConfig JSON. Response was:", responseText.substring(0, 500));
+            throw new Error(`Invalid JSON response from server: ${error}`);
+          }
+        })
+        .catch((error) => {
+          console.error("Error fetching MapConfig:", error);
+          throw error;
         });
     }
   }

map-view/src/api/__mocks__/mock-data.ts

@@ -52,4 +52,5 @@ export const mockMapConfig: MapConfig = {
   featureTypeEditNameMapping: {},
   icon_scale: 0.1,
   icon_type: "svg",
+  icon_size: 128,
 };