Add indicator of zoomLevel and datasetLevel to map

CHANGES.md

@@ -15,7 +15,7 @@
 ### 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 
+   issue for the export of screenshorts (charts and map) in the Firefox 
    browser.
 
 ### New Features 
@@ -30,6 +30,13 @@
   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":{ "showZoomBox": true, ...`), 
+  the default is `false`. In addition, the total number of dataset levels has been 
+  added to the metadata in the Info panel. (#287)
 
 ## Changes in version 1.6.1
 

src/actions/controlActions.tsx

@@ -823,6 +823,19 @@ 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 type ControlAction =
   | SelectDataset
   | UpdateDatasetPlaceGroup
@@ -860,4 +873,5 @@ export type ControlAction =
   | SetMapPointInfoBoxEnabled
   | SetVariableCompareMode
   | UpdateVariableSplitPos
-  | FlyTo;
+  | FlyTo
+  | SetZoomLevel;

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("Number of resolution levels")}
+              value={getOnOff(settings.showZoomBox)}
+            >
+              <ToggleSetting
+                propertyName={"showZoomBox"}
+                settings={settings}
+                updateSettings={updateSettings}
+              />
+            </SettingsSubPanel>
             <SettingsSubPanel label={i18n.get("On dataset selection")}>
               <TextField
                 variant="standard"

src/components/Viewer/Viewer.tsx

@@ -126,6 +126,8 @@ interface ViewerProps {
   variableSplitPos?: number;
   onMapRef?: (map: OlMap | null) => void;
   importUserPlacesFromText?: (text: string) => void;
+  setZoomLevel?: (zoomLevel: number | undefined) => void;
+  zoomBox?: MapElement;
 }
 
 export default function Viewer({
@@ -158,6 +160,8 @@ export default function Viewer({
   imageSmoothing,
   variableSplitPos,
   onMapRef,
+  zoomBox,
+  setZoomLevel,
 }: ViewerProps) {
   theme = useTheme();
 
@@ -279,6 +283,14 @@ export default function Viewer({
     }
   };
 
+  const handleMapZoom = (event: OlMapBrowserEvent<UIEvent>) => {
+    const zoomLevel = event.target.getZoom();
+
+    if (setZoomLevel) {
+      setZoomLevel(zoomLevel);
+    }
+  };
+
   const handleDrawEnd = (event: DrawEvent) => {
     if (map !== null && addDrawnUserPlace && mapInteraction !== "Select") {
       const feature = event.feature;
@@ -356,6 +368,7 @@ export default function Viewer({
       <Map
         id={mapId}
         onClick={(event) => handleMapClick(event)}
+        onZoom={(event) => handleMapZoom(event)}
         onMapRef={handleMapRef}
         mapObjects={MAP_OBJECTS}
         isStale={true}
@@ -426,6 +439,7 @@ export default function Viewer({
         {mapPointInfoBox}
         {mapControlActions}
         {mapSplitter}
+        {zoomBox}
         <ScaleLine bar={false} />
       </Map>
     </ErrorBoundary>

src/components/ZoomBox/ZoomBox.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ZoomBox from "./ZoomBox";
+
+const meta: Meta = {
+  component: ZoomBox,
+  title: "ZoomBox",
+  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 ZoomBox>;
+
+// noinspection JSUnusedGlobalSymbols
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// noinspection JSUnusedGlobalSymbols
+export const Default: Story = {
+  args: {
+    style: {},
+    zoomLevel: 10,
+    datasetLevel: 3,
+    visibility: true,
+  },
+};

src/components/ZoomBox/ZoomBox.tsx

@@ -0,0 +1,104 @@
+/*
+ * 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 ZoomBoxProps {
+  style: CSSProperties;
+  zoomLevel: number | undefined;
+  datasetLevel: number | undefined;
+  visibility: boolean;
+}
+
+export default function ZoomBox({
+  style,
+  zoomLevel,
+  datasetLevel,
+  visibility,
+}: ZoomBoxProps): 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"
+          >
+            {datasetLevel !== undefined
+              ? getLabelForValue(datasetLevel, 4)
+              : "no dataset level"}
+          </Typography>
+        </Box>
+      </Box>
+    </div>
+  );
+}

src/components/ZoomBox/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 ZoomBox from "./ZoomBox";
+
+export default ZoomBox;

src/components/ol/Map.tsx

@@ -35,6 +35,7 @@ interface MapProps extends OlMapOptions {
   children?: React.ReactNode;
   mapObjects?: { [id: string]: OlBaseObject };
   onClick?: (event: OlMapBrowserEvent<UIEvent>) => void;
+  onZoom?: (event: OlMapBrowserEvent<UIEvent>) => void;
   onMapRef?: (map: OlMap | null) => void;
   isStale?: boolean;
   onDropFiles?: (files: File[]) => void;
@@ -53,6 +54,7 @@ const DEFAULT_CONTAINER_STYLE: React.CSSProperties = {
 export class Map extends React.Component<MapProps, MapState> {
   private readonly contextValue: MapContext;
   private clickEventsKey: OlEventsKey | null = null;
+  private zoomEventsKey: OlEventsKey | null = null;
 
   constructor(props: MapProps) {
     super(props);
@@ -78,6 +80,7 @@ export class Map extends React.Component<MapProps, MapState> {
     const mapDiv = this.contextValue.mapDiv!;
 
     let map: OlMap | null = null;
+    let view: OlView | null = null;
     if (this.props.isStale) {
       const mapObject = this.contextValue.mapObjects[id];
       if (mapObject instanceof OlMap) {
@@ -86,6 +89,10 @@ export class Map extends React.Component<MapProps, MapState> {
         if (this.clickEventsKey) {
           map.un("click", this.clickEventsKey.listener);
         }
+        view = map?.getView();
+        if (this.zoomEventsKey) {
+          view.un("change:resolution", this.zoomEventsKey.listener);
+        }
       }
     }
 
@@ -104,11 +111,13 @@ export class Map extends React.Component<MapProps, MapState> {
       });
     }
 
+    view = map?.getView();
+
     this.contextValue.map = map;
     this.contextValue.mapObjects[id] = map;
 
     this.clickEventsKey = map.on("click", this.handleClick);
-
+    this.zoomEventsKey = view.on("change:resolution", this.handleZoom);
     //map.set('objectId', this.props.id);
     map.updateSize();
 
@@ -182,6 +191,7 @@ export class Map extends React.Component<MapProps, MapState> {
     const mapOptions = { ...this.props };
     delete mapOptions["children"];
     delete mapOptions["onClick"];
+    delete mapOptions["onZoom"];
     delete mapOptions["onDropFiles"];
     return mapOptions;
   }
@@ -193,6 +203,13 @@ export class Map extends React.Component<MapProps, MapState> {
     }
   };
 
+  private handleZoom = (event: OlEvent) => {
+    const onZoom = this.props.onZoom;
+    if (onZoom) {
+      onZoom(event as OlMapBrowserEvent<UIEvent>);
+    }
+  };
+
   private handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
     if (this.props.onDropFiles) {
       event.preventDefault();

src/connected/Viewer.tsx

@@ -29,12 +29,13 @@ import {
 } from "@/actions/dataActions";
 import _Viewer from "@/components/Viewer";
 import { userPlaceGroupsSelector } from "@/selectors/dataSelectors";
-import { selectPlace } from "@/actions/controlActions";
+import { selectPlace, setZoomLevel } from "@/actions/controlActions";
 import ColorBarLegend from "./ColorBarLegend";
 import ColorBarLegend2 from "./ColorBarLegend2";
 import MapSplitter from "./MapSplitter";
 import MapPointInfoBox from "./MapPointInfoBox";
 import MapControlActions from "./MapControlActions";
+import ZoomBox from "./ZoomBox";
 
 interface OwnProps {
   onMapRef?: (map: OlMap | null) => void;
@@ -68,6 +69,7 @@ const mapStateToProps = (state: AppState, ownProps: OwnProps) => {
     imageSmoothing: imageSmoothingSelector(state),
     variableSplitPos: state.controlState.variableSplitPos,
     onMapRef: ownProps.onMapRef,
+    zoomBox: <ZoomBox />,
   };
 };
 
@@ -76,6 +78,7 @@ const mapDispatchToProps = {
   addDrawnUserPlace,
   importUserPlacesFromText,
   selectPlace,
+  setZoomLevel,
 };
 
 const Viewer = connect(mapStateToProps, mapDispatchToProps)(_Viewer);