Add indicator of zoomLevel and datasetLevel to map

CHANGES.md

@@ -20,15 +20,15 @@
 * A pin icon is now used in the dataset selector to mark a dataset
   that holds a pinned variable. (#424)
 
-*  Slimmed down the main application bar by grouping features under a 
-   single button that opens a dropdown menu. The features are: 
-   Documentation, Developer Reference, Imprint, and Settings. (#540)
+* Slimmed down the main application bar by grouping features under a 
+  single button that opens a dropdown menu. The features are: 
+  Documentation, Developer Reference, Imprint, and Settings. (#540)
 
 ### Fixes
 
-*  Applied workaround for a bug in `html-to-image` libary that causes an 
-   issuesfor the export of screenshorts (charts and map) in the Firefox 
-   browser.
+* Applied workaround for a bug in `html-to-image` libary that causes an 
+  issue for the export of screenshorts (charts and map) in the Firefox 
+  browser.
 
 ### New Features 
 
@@ -42,10 +42,17 @@
   Window. If this feature is configured, an `About` window can be opened
   with a button in the header and it will be shown initially while
   data is loading. (#508) 
+
+* A zoom-level indicator was added to the map. This box displays the current 
+  zoom level of the map and the dataset resolution level used for displaying it. 
+  The visibility of this feature can be controlled in the settings. The initial visibility 
+  can be set in `config.json` (`"branding":{ "showZoomInfoBox": true, ...`), 
+  the default is `false`. In addition, the total number of dataset levels has been 
+  added to the metadata in the Info panel. (#287)
 
 ### Other changes
 
-* Aligned styling of map elements (Zoom, MapActionsBar, ScaleBar, Attritution,
+* Aligned styling of map elements (Zoom, MapActionsBar, ScaleBar, Attribution,
   ColorLegend) to match styling of the rest of the Viewer. (#545).
 
 * Redux Developement tools is now available in development mode. Installation of

docs/features.md

@@ -493,6 +493,52 @@ A list of all the features that the viewer contains will be created here, in whi
 	</tbody>
 </table>
 
+### Zoom Information Box
+
+<table>
+	<thead>
+		<tr>
+			<th colspan="2">
+				<img src="../assets/images/zoom_infobox.png" alt="Zoom Infobox" />
+			</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td><b>Feature Name</b></td>
+			<td>Zoom Information Box</td>
+		</tr>
+		<tr>
+			<td><b>Description</b></td>
+			<td>
+	      Displays an information box that showing the current 
+        zoom level of the map and the dataset resolution level (particularly 
+        useful for multi-resolution dataset) used for displaying the dataset 
+        in the map.
+			</td>
+		</tr>
+		<tr></tr>
+		<tr>
+			<td><b>Functionality</b></td>
+			<td>
+        The visibility of this feature can be controlled in the 				
+          <a
+					href="../user_guide/settings"
+					rel="noopener noreferrer"
+					>settings</a
+				>. 
+        The initial visibility can be set in the Viewer configuration.
+			</td>
+		</tr>
+		<tr>
+			<td><b>Aim</b></td>
+			<td>Enable users to quickly access information about the zoom and dataset
+          level.
+      </td>
+		</tr>
+	</tbody>
+</table>
+
 ### Share Permalink
 
 <table>

src/actions/controlActions.tsx

@@ -823,6 +823,34 @@ export function updateUserColorBars(
 
 ////////////////////////////////////////////////////////////////////////////////
 
+export const SET_ZOOM_LEVEL = "SET_ZOOM_LEVEL";
+
+export interface SetZoomLevel {
+  type: typeof SET_ZOOM_LEVEL;
+  zoomLevel: number | undefined;
+}
+
+export function setZoomLevel(zoomLevel: number | undefined): SetZoomLevel {
+  return { type: SET_ZOOM_LEVEL, zoomLevel };
+}
+
+////////////////////////////////////////////////////////////////////////////////
+
+export const SET_DATASET_Z_LEVEL = "SET_DATASET_Z_LEVEL";
+
+export interface SetDatasetZLevel {
+  type: typeof SET_DATASET_Z_LEVEL;
+  datasetZLevel: number | undefined;
+}
+
+export function setDatasetZLevel(
+  datasetZLevel: number | undefined,
+): SetDatasetZLevel {
+  return { type: SET_DATASET_Z_LEVEL, datasetZLevel };
+}
+
+////////////////////////////////////////////////////////////////////////////////
+
 export type ControlAction =
   | SelectDataset
   | UpdateDatasetPlaceGroup
@@ -860,4 +888,6 @@ export type ControlAction =
   | SetMapPointInfoBoxEnabled
   | SetVariableCompareMode
   | UpdateVariableSplitPos
-  | FlyTo;
+  | FlyTo
+  | SetZoomLevel
+  | SetDatasetZLevel;

src/components/InfoPanel/DatasetInfoCard.tsx

@@ -95,6 +95,7 @@ const DatasetInfoCard: React.FC<DatasetInfoContentProps> = ({
         dataset.bbox.map((x) => getLabelForValue(x, 3)).join(", "),
       ],
       [i18n.get("Spatial reference system"), dataset.spatialRef],
+      [i18n.get("Levels"), dataset.resolutions.length],
     ];
     content = (
       <InfoCardContent>

src/components/SettingsDialog.tsx

@@ -387,6 +387,16 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
                 updateSettings={updateSettings}
               />
             </SettingsSubPanel>
+            <SettingsSubPanel
+              label={i18n.get("Show zoom level indicator")}
+              value={getOnOff(settings.showZoomInfoBox)}
+            >
+              <ToggleSetting
+                propertyName={"showZoomInfoBox"}
+                settings={settings}
+                updateSettings={updateSettings}
+              />
+            </SettingsSubPanel>
             <SettingsSubPanel label={i18n.get("On dataset selection")}>
               <TextField
                 variant="standard"

src/components/Viewer/Viewer.tsx

@@ -52,6 +52,8 @@ import { setFeatureStyle } from "@/components/ol/style";
 import { findMapLayer } from "@/components/ol/util";
 import { isNumber } from "@/util/types";
 
+import { getDatasetZLevel } from "@/model/dataset";
+
 const SELECTION_LAYER_ID = "selection";
 const SELECTION_LAYER_SOURCE = new OlVectorSource();
 
@@ -126,6 +128,9 @@ interface ViewerProps {
   variableSplitPos?: number;
   onMapRef?: (map: OlMap | null) => void;
   importUserPlacesFromText?: (text: string) => void;
+  setZoomLevel?: (zoomLevel: number | undefined) => void;
+  setDatasetZLevel?: (datasetZLevel: number | undefined) => void;
+  zoomBox?: MapElement;
 }
 
 export default function Viewer({
@@ -158,6 +163,9 @@ export default function Viewer({
   imageSmoothing,
   variableSplitPos,
   onMapRef,
+  zoomBox,
+  setZoomLevel,
+  setDatasetZLevel,
 }: ViewerProps) {
   theme = useTheme();
 
@@ -355,11 +363,41 @@ export default function Viewer({
     console.log("tile load progress:", p);
   }, []);
 
+  const handleMapZoom = (
+    event: OlMapBrowserEvent<UIEvent>,
+    map: OlMap | undefined,
+  ) => {
+    if (setZoomLevel) {
+      const zoomLevel = event.target.getZoom();
+      setZoomLevel(zoomLevel);
+    }
+
+    if (setDatasetZLevel) {
+      const datasetZLevel = getDatasetZLevel(event.target, map);
+      setDatasetZLevel(datasetZLevel);
+    }
+  };
+
+  useEffect(() => {
+    /* Force update of datasetZLevel after variable change. This is needed at
+       the moment and might become redundant in the future.
+       This ensures that datasetZLevel gets set, when the Viewer starts, so that
+       the datasetLevel can be calculated.
+     */
+    if (map) {
+      if (setDatasetZLevel) {
+        const datasetZLevel = getDatasetZLevel(map.getView(), map);
+        setDatasetZLevel(datasetZLevel);
+      }
+    }
+  }, [map, variableLayer, setDatasetZLevel]);
+
   return (
     <ErrorBoundary>
       <Map
         id={mapId}
         onClick={(event) => handleMapClick(event)}
+        onZoom={(event, map) => handleMapZoom(event, map)}
         onMapRef={handleMapRef}
         mapObjects={MAP_OBJECTS}
         isStale={true}
@@ -431,6 +469,7 @@ export default function Viewer({
         {mapPointInfoBox}
         {mapControlActions}
         {mapSplitter}
+        {zoomBox}
         <ScaleLine bar={false} />
       </Map>
     </ErrorBoundary>

src/components/ZoomInfoBox/ZoomInfoBox.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import ZoomInfoBox from "./ZoomInfoBox";
+
+const meta: Meta = {
+  component: ZoomInfoBox,
+  title: "ZoomInfoBox",
+  parameters: {
+    // Optional parameter to center the component in the Canvas.
+    // More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  // This component will have an automatically generated Autodocs entry:
+  // https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+} satisfies Meta<typeof ZoomInfoBox>;
+
+// noinspection JSUnusedGlobalSymbols
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// noinspection JSUnusedGlobalSymbols
+export const Default: Story = {
+  args: {
+    style: {},
+    zoomLevel: 10,
+    datasetLevel: 3,
+    datasetLevels: 4,
+    visibility: true,
+  },
+};

src/components/ZoomInfoBox/ZoomInfoBox.tsx

@@ -0,0 +1,110 @@
+/*
+ * Copyright (c) 2019-2025 by xcube team and contributors
+ * Permissions are hereby granted under the terms of the MIT License:
+ * https://opensource.org/licenses/MIT.
+ */
+
+import { CSSProperties } from "react";
+import { alpha } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import Divider from "@mui/material/Divider";
+import Typography from "@mui/material/Typography";
+
+import { getLabelForValue } from "@/util/label";
+import { makeStyles } from "@/util/styles";
+import { getBorderStyle } from "@/components/ColorBarLegend/style";
+
+const styles = makeStyles({
+  container: (theme) => ({
+    position: "absolute",
+    zIndex: 1000,
+    border: getBorderStyle(theme),
+    borderRadius: "4px",
+    backgroundColor: alpha(theme.palette.background.default, 0.85),
+    minWidth: "120px",
+    paddingLeft: theme.spacing(1.5),
+    paddingRight: theme.spacing(1.5),
+    paddingBottom: theme.spacing(0.5),
+    paddingTop: theme.spacing(0.5),
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    gap: 1,
+  }),
+  title: {
+    fontSize: "0.8rem",
+    fontWeight: "normal",
+    wordBreak: "break-word",
+    wordWrap: "break-word",
+  },
+  subTitle: {
+    fontSize: "0.7rem",
+    fontWeight: "lighter",
+    wordBreak: "break-word",
+    wordWrap: "break-word",
+  },
+});
+
+interface ZoomInfoBoxProps {
+  style: CSSProperties;
+  zoomLevel: number | undefined;
+  datasetLevel: number | undefined;
+  datasetLevels: number;
+  visibility: boolean;
+}
+
+export default function ZoomInfoBox({
+  style,
+  zoomLevel,
+  datasetLevel,
+  datasetLevels,
+  visibility,
+}: ZoomInfoBoxProps): JSX.Element | null {
+  if (!visibility) {
+    return null;
+  }
+
+  return (
+    <div>
+      <Box
+        //className="ol-unselectable ol-control"
+        sx={styles.container}
+        style={style}
+      >
+        <Box>
+          <Typography sx={styles.title} variant="subtitle1" color="textPrimary">
+            {"Zoom"}
+          </Typography>
+          <Typography
+            sx={styles.subTitle}
+            variant="subtitle2"
+            color="textPrimary"
+          >
+            {zoomLevel !== undefined
+              ? getLabelForValue(zoomLevel, 4)
+              : "no zoom level"}
+          </Typography>
+        </Box>
+        <Divider orientation="vertical" flexItem />
+        <Box>
+          <Typography sx={styles.title} variant="subtitle1" color="textPrimary">
+            {"Level"}
+          </Typography>
+          <Typography
+            sx={styles.subTitle}
+            variant="subtitle2"
+            color="textPrimary"
+          >
+            {/*            increment datasetLevel with +1, so that the dataset level range
+            starts with 1 instead of 0.*/}
+            {datasetLevel !== undefined
+              ? getLabelForValue(datasetLevel + 1, 0) +
+                " / " +
+                getLabelForValue(datasetLevels, 0)
+              : "no dataset level"}
+          </Typography>
+        </Box>
+      </Box>
+    </div>
+  );
+}

src/components/ZoomInfoBox/index.tsx

@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) 2019-2025 by xcube team and contributors
+ * Permissions are hereby granted under the terms of the MIT License:
+ * https://opensource.org/licenses/MIT.
+ */
+
+import ZoomInfoBox from "./ZoomInfoBox";
+
+export default ZoomInfoBox;