@opengeoweb/webmap-react 14.5.2 → 15.1.0

package/index.esm.js

@@ -1,8 +1,8 @@
-import { WMInvalidDateValues, getCorrectWMSDimName, WMImageStore, WMImageStoreLoadType, WMJSDimension, webmapUtils, WMLayer, LayerType, legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WEBMAP_NAMESPACE, WMProj4Defs, privateWebMapUtils, tilesettings } from '@opengeoweb/webmap';
+import { WMInvalidDateValues, getCorrectWMSDimName, WMImageStore, WMImageStoreLoadType, WMJSDimension, webmapUtils, WMLayer, LayerType, legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WEBMAP_NAMESPACE, WMProj4Defs, privateWebMapUtils, wmDetermineDimensionMode, tilesettings } from '@opengeoweb/webmap';
 export { WEBMAP_NAMESPACE, webmapTranslations } from '@opengeoweb/webmap';
 import React, { createContext, useMemo, useRef, useState, useEffect, useContext, useCallback, useLayoutEffect } from 'react';
 import { memoize, range, without, isEqual, throttle, debounce, cloneDeep } from 'lodash';
-import { equals, containsExtent, getCenter, extend } from 'ol/extent';
+import { equals, containsExtent, getCenter } from 'ol/extent';
 import ImageState from 'ol/ImageState';
 import LayerProperty from 'ol/layer/Property';
 import { fromResolutionLike } from 'ol/resolution';
@@ -10,19 +10,19 @@ import ImageSource, { getRequestExtent } from 'ol/source/Image';
 import ImageWrapper, { load } from 'ol/Image';
 import { getImageSrc, getRequestParams, createLoader } from 'ol/source/wms';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { CustomTooltip, CanvasComponent, useWheelStopPropagation, ToolContainerDraggable, CustomIconButton, dateUtils } from '@opengeoweb/shared';
-import { Paper, Box, Typography, useTheme, Grid, styled, Slider, TextField, FormControl, InputLabel, Select, MenuItem, Icon as Icon$2, FormLabel, Switch } from '@mui/material';
+import { CustomTooltip, CanvasComponent, useWheelStopPropagation, ToolContainerDraggable, CustomIconButton, dateUtils, useMakeSureContainerStaysInsideWindow, Draggable, Resizable } from '@opengeoweb/shared';
+import { Paper, Box, Typography, useTheme, Grid, styled, Slider, TextField, FormControl, InputLabel, Select, MenuItem, Icon as Icon$2, FormLabel, Switch, ThemeProvider } from '@mui/material';
 import { queryOptions, useQuery } from '@tanstack/react-query';
-import { Point, MultiPoint, Polygon, LineString } from 'ol/geom';
+import { Point, MultiPoint, LineString, Polygon } from 'ol/geom';
 import { Style, Icon as Icon$1, Circle, Stroke, Fill, Text } from 'ol/style';
-import { arrowUpPath, Home, Add, Minus, List, Equalizer, DimensionsElevation, Link, LinkOff, Info, DimensionsOther, DimensionsRefTime, DimensionsTime, locationPath, Location, DrawToolSmoothLine, DrawToolFreehand, DrawToolOval, DrawToolCircle, DrawToolSquare, Delete, DrawToolLineString, DrawToolRectangle, DrawToolPolygon, DrawToolPoint, DrawFIRLand, ArrowUp } from '@opengeoweb/theme';
+import { arrowUpPath, Home, Add, Minus, List, Equalizer, DimensionsElevation, Link, LinkOff, Info, DimensionsOther, DimensionsRefTime, DimensionsTime, locationPath, rotatePath, Location, DrawToolSmoothLine, DrawToolFreehand, DrawToolOval, DrawToolCircle, DrawToolSquare, Delete, DrawToolLineString, DrawToolRectangle, DrawToolPolygon, DrawToolPoint, DrawFIRLand, ArrowUp, darkTheme, ChevronRight, Clock as Clock$1, Resize } from '@opengeoweb/theme';
 import { http, HttpResponse } from 'msw';
 import 'i18next';
 import { useTranslation } from 'react-i18next';
 import Box$1 from '@mui/material/Box';
 import Typography$1 from '@mui/material/Typography';
 import { View, Map, Feature, Collection, Overlay } from 'ol';
-import { defaults, MouseWheelZoom, Draw, Modify, Translate, Snap } from 'ol/interaction';
+import { defaults, MouseWheelZoom, Draw, Modify, Translate, Snap, DragPan } from 'ol/interaction';
 import 'ol/ol.css';
 import { listen, unlistenByKey } from 'ol/events';
 import { unByKey } from 'ol/Observable';
@@ -60,6 +60,7 @@ var en = {
 	"webmap-react-title": "Title",
 	"webmap-react-name": "Name",
 	"webmap-react-service": "Service",
+	"webmap-react-service-url": "Service URL",
 	"webmap-react-abstract": "Abstract",
 	"webmap-react-dimensions": "Dimensions",
 	"webmap-react-styles": "Styles",
@@ -99,7 +100,9 @@ var en = {
 	"webmap-react-location": "Location",
 	"webmap-react-delete": "Delete",
 	"webmap-react-legend-no-image": "No legend graphic available",
-	"webmap-react-map-measure-help-tooltip": "Click to measure"
+	"webmap-react-map-measure-help-tooltip": "Click to measure",
+	"clock-show": "Show clock",
+	"clock-hide": "Hide clock"
 };
 var fi = {
 	"webmap-react-event": "tapahtuma:",
@@ -113,6 +116,7 @@ var fi = {
 	"webmap-react-title": "Otsikko",
 	"webmap-react-name": "Nimi",
 	"webmap-react-service": "Palvelu",
+	"webmap-react-service-url": "Palvelun URL",
 	"webmap-react-abstract": "Tiivistelmä",
 	"webmap-react-dimensions": "Ulottuvuudet",
 	"webmap-react-styles": "Tyylit",
@@ -144,7 +148,9 @@ var fi = {
 	"webmap-react-polygon": "Monikulmio",
 	"webmap-react-box": "Laatikko",
 	"webmap-react-linestring": "Viivajono",
-	"webmap-react-delete": "Poista"
+	"webmap-react-delete": "Poista",
+	"clock-show": "Näytä kello",
+	"clock-hide": "Piilota kello"
 };
 var no = {
 	"webmap-react-event": "hendelse:",
@@ -158,6 +164,7 @@ var no = {
 	"webmap-react-title": "Tittel",
 	"webmap-react-name": "Navn",
 	"webmap-react-service": "Service",
+	"webmap-react-service-url": "Service URL",
 	"webmap-react-abstract": "Abstrakt",
 	"webmap-react-dimensions": "Dimensjoner",
 	"webmap-react-styles": "Stiler",
@@ -189,7 +196,9 @@ var no = {
 	"webmap-react-polygon": "Polygon",
 	"webmap-react-box": "Boks",
 	"webmap-react-linestring": "Linje",
-	"webmap-react-delete": "Fjerne"
+	"webmap-react-delete": "Fjerne",
+	"clock-show": "Vis klokke",
+	"clock-hide": "Skjul klokke"
 };
 var nl = {
 	"webmap-react-event": "event:",
@@ -203,6 +212,7 @@ var nl = {
 	"webmap-react-title": "Titel",
 	"webmap-react-name": "Naam",
 	"webmap-react-service": "Service",
+	"webmap-react-service-url": "Service-URL",
 	"webmap-react-abstract": "Abstract",
 	"webmap-react-dimensions": "Dimensies",
 	"webmap-react-styles": "Stijlen",
@@ -242,7 +252,9 @@ var nl = {
 	"webmap-react-location": "Locatie",
 	"webmap-react-delete": "Verwijder",
 	"webmap-react-legend-no-image": "Geen legenda beschikbaar",
-	"webmap-react-map-measure-help-tooltip": "Klik om te meten"
+	"webmap-react-map-measure-help-tooltip": "Klik om te meten",
+	"clock-show": "Klok tonen",
+	"clock-hide": "Klok verbergen"
 };
 var webmapReactTranslations = {
 	en: en,
@@ -11225,7 +11237,8 @@ var LayerInfoButton = function LayerInfoButton(_ref) {
 
 var textStyle = {
   lineHeight: '20px',
-  letterSpacing: '0.25px'
+  letterSpacing: '0.25px',
+  overflowWrap: 'break-word'
 };
 var textStyleWithMargin = _objectSpread2(_objectSpread2({}, textStyle), {}, {
   marginBottom: 1
@@ -11410,6 +11423,7 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
   var onClose = _ref.onClose,
     layer = _ref.layer,
     serviceName = _ref.serviceName,
+    serviceUrl = _ref.serviceUrl,
     isOpen = _ref.isOpen,
     _ref$onMouseDown = _ref.onMouseDown,
     onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
@@ -11453,6 +11467,9 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
       }), jsx(LayerInfoText, {
         label: t('webmap-react-service'),
         value: serviceName
+      }), jsx(LayerInfoText, {
+        label: t('webmap-react-service-url'),
+        value: serviceUrl || '-'
       }), jsx(LayerInfoText, {
         label: t('webmap-react-abstract'),
         value: layer["abstract"] || '-'
@@ -12546,7 +12563,12 @@ var useQueryGetWMSLayers = function useQueryGetWMSLayers(serviceUrl) {
     if (!getCapabilitiesJSON) {
       setLayers([]);
     } else {
-      setLayers(privateWmsFlattenLayerTree(privateWmsGetLayerTree(getCapabilitiesJSON)));
+      var tree = privateWmsGetLayerTree(getCapabilitiesJSON);
+      if (!tree) {
+        setLayers([]);
+      } else {
+        setLayers(privateWmsFlattenLayerTree(tree));
+      }
     }
   }, [serviceUrl, getCapabilitiesJSON]);
   return layers;
@@ -12603,17 +12625,26 @@ var useGetWMLayerInstance = function useGetWMLayerInstance(layerFoundation) {
     setErrorMessage = _React$useState10[1];
   var refId = useRef(id || webmapUtils.generateLayerId());
   var layerId = refId.current;
+  var _useContext = useContext(TimeContext),
+    refTimeDimensionModes = _useContext.refTimeDimensionModes;
   // Check if the layer is already registered
   var tmpWMLayer = webmapUtils.getWMLayerById(layerId);
   var layerIdChanged = id && id !== (tmpWMLayer === null || tmpWMLayer === void 0 ? void 0 : tmpWMLayer.id);
   var layerServiceChanged = (tmpWMLayer === null || tmpWMLayer === void 0 ? void 0 : tmpWMLayer.service) !== serviceUrl;
   if (layerServiceChanged || layerIdChanged) {
     // Make a new layer if the serviceUrl changes. (But not when the name changes)
+    var refTimeDimensionMode = wmDetermineDimensionMode({
+      name: name,
+      service: serviceUrl,
+      id: layerId,
+      layerType: layerType
+    }, refTimeDimensionModes);
     var wmLayer = new WMLayer({
       name: name,
       service: serviceUrl,
       layerType: layerType,
-      id: layerId
+      id: layerId,
+      refTimeDimensionMode: refTimeDimensionMode
     });
     webmapUtils.registerWMLayer(wmLayer, layerId);
   }
@@ -13417,6 +13448,7 @@ var USEANIMATIONFORLAYER_DEFAULT_MSINHOUR = 3600000;
 var useAnimationForLayer = function useAnimationForLayer(layerProps, intervalInMs) {
   var numStepsTillLatest = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : USEANIMATIONFORLAYER_DEFAULT_NUMSTEPS;
   var checkForUpdatesMs = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : USEANIMATIONFORLAYER_DEFAULT_UPDATEINTERVALMS;
+  var refTimeDimensionModes = arguments.length > 4 ? arguments[4] : undefined;
   var now = dateUtils.getNowUtc().getTime();
   var animationStep = useRef(0);
   var _React$useState = React.useState(''),
@@ -13504,7 +13536,9 @@ var useAnimationForLayer = function useAnimationForLayer(layerProps, intervalInM
       name: 'time',
       currentValue: timeValue
     }],
-    timeContext: timeSpan
+    timeContext: _objectSpread2(_objectSpread2({}, timeSpan), {}, {
+      refTimeDimensionModes: refTimeDimensionModes
+    })
   };
 };
 
@@ -13840,12 +13874,14 @@ var TimeAwareEDRLocationLayer = function TimeAwareEDRLocationLayer(_ref) {
     features: [],
     type: 'FeatureCollection'
   };
+  // Don't show anything if no parameter is selected
+  var isVisible = visible && parameter.length > 0;
   return jsx(OpenLayersFeatureLayer, {
     declutter: true,
     featureCollection: featureCollection,
     opacity: opacity,
     style: isFetching ? loadingStyle : style,
-    visible: visible,
+    visible: isVisible,
     zIndex: zIndex
   });
 };
@@ -13889,6 +13925,28 @@ var fetchStacCollection = /*#__PURE__*/function () {
     return _ref.apply(this, arguments);
   };
 }();
+var fetchStacItem = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(stacItemUrl) {
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.next = 2;
+          return fetch(stacItemUrl);
+        case 2:
+          _context2.next = 4;
+          return _context2.sent.json();
+        case 4:
+          return _context2.abrupt("return", _context2.sent);
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return function fetchStacItem(_x2) {
+    return _ref2.apply(this, arguments);
+  };
+}();
 var fetchStacItems = /*#__PURE__*/function () {
   var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(collectionUrl) {
     var collection;
@@ -15337,6 +15395,29 @@ var ICON_LOCATIONMARKER_MODIFY = createIconStyle(locationPath, {
     anchor: [0.5, 1]
   }
 });
+// Pre-rendered canvas for the rotate icon so we can create
+// dynamically rotated instances that follow the box orientation.
+var ROTATE_ICON_SIZE = [24, 24];
+var ROTATE_ICON_CANVAS = typeof document !== 'undefined' ? function () {
+  var canvas = document.createElement('canvas');
+  var width = ROTATE_ICON_SIZE[0],
+    height = ROTATE_ICON_SIZE[1];
+  canvas.width = width;
+  canvas.height = height;
+  var ctx = canvas.getContext('2d');
+  if (!ctx) {
+    return undefined;
+  }
+  var path = new Path2D(rotatePath);
+  // Draw a white outline behind the rotate icon for better contrast
+  ctx.lineWidth = 1.5;
+  ctx.strokeStyle = 'rgba(255, 255, 255, 1)';
+  ctx.stroke(path);
+  // Fill the actual rotate icon
+  ctx.fillStyle = '#051039';
+  ctx.fill(path);
+  return canvas;
+}() : undefined;
 var FEATURE_VERTICES_EDIT_HANDLES = new Style$1({
   image: FEATURE_VERTICE_IMAGE,
   geometry: function geometry(feature) {
@@ -15929,49 +16010,294 @@ new Style$1({
 }),
 // Vertices
 FEATURE_VERTICES_EDIT_HANDLES];
-// This function creates a box out of a modified polygon. It detects which corner was moved by comparing
-// vertices between the two geometries. Then it draws a new box based on the moved vertice and the opposing
-// vertice.
+// This function creates a box out of a modified polygon. It detects which corner was moved by comparing vertices between the two geometries. Then it draws a new box based on the moved vertice and the opposing vertice.
+// For squares the box scales uniformly around the fixed center.
+// For rectangles the diagonal opposite corner does not change, the other two corners are recomputed.
+// The original rotation is preserved.
 var createBoxBasedOnModifiedVertex = function createBoxBasedOnModifiedVertex(modifiedGeometry, originalGeometry) {
-  var originalGeometryCoords = originalGeometry.getCoordinates()[0];
-  var draggedCornerIndex = modifiedGeometry.getCoordinates()[0].findIndex(function (coords, idx) {
-    return originalGeometryCoords[idx][0] !== coords[0] || originalGeometryCoords[idx][1] !== coords[1];
+  var _classified$find, _classified$find2, _classified$find3, _classified$find4;
+  var keepSquare = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var originalRing = originalGeometry.getCoordinates()[0];
+  var modifiedRing = modifiedGeometry.getCoordinates()[0];
+  if (!originalRing || !modifiedRing || originalRing.length < 4) {
+    return originalGeometry;
+  }
+  // Strip closing coordinate if present so we only work with the four corners.
+  var stripClose = function stripClose(ring) {
+    if (ring.length > 4 && ring[0][0] === ring[ring.length - 1][0] && ring[0][1] === ring[ring.length - 1][1]) {
+      return ring.slice(0, ring.length - 1);
+    }
+    return ring;
+  };
+  var originalCorners = stripClose(originalRing);
+  var modifiedCorners = stripClose(modifiedRing);
+  if (originalCorners.length < 4 || modifiedCorners.length < 4) {
+    return originalGeometry;
+  }
+  // Detect which corner was dragged by comparing original vs modified
+  var draggedCornerIndex = originalCorners.findIndex(function (orig, idx) {
+    var mod = modifiedCorners[idx];
+    return orig[0] !== mod[0] || orig[1] !== mod[1];
   });
   if (draggedCornerIndex === -1) {
+    // No corner actually changed, keep original
     return originalGeometry;
   }
-  var draggedCoords = modifiedGeometry.getCoordinates()[0][draggedCornerIndex];
-  var opposingCoords = modifiedGeometry.getCoordinates()[0][(draggedCornerIndex + 2) % 4];
-  var box = extend([draggedCoords[0], draggedCoords[1], draggedCoords[0], draggedCoords[1]], [opposingCoords[0], opposingCoords[1], opposingCoords[0], opposingCoords[1]]);
-  var boxPolygon = new Polygon([[[box[0], box[1]], [box[2], box[1]], [box[2], box[3]], [box[0], box[3]], [box[0], box[1]]]]);
-  return boxPolygon;
-};
-var boxModificationStyle = [new Style$1({
-  fill: FEATURE_FILL,
-  stroke: FEATURE_STROKE_EDIT,
-  geometry: function geometry(feature) {
-    var originalGeometry = feature === null || feature === void 0 ? void 0 : feature.get('originalGeometry');
-    if (originalGeometry) {
-      return createBoxBasedOnModifiedVertex(feature.getGeometry(), originalGeometry);
-    }
-    return feature.getGeometry();
+  var dragged = modifiedCorners[draggedCornerIndex];
+  // Compute center of the original box
+  var centerX = originalCorners.reduce(function (sum, _ref) {
+    var _ref2 = _slicedToArray(_ref, 1),
+      x = _ref2[0];
+    return sum + x;
+  }, 0) / originalCorners.length;
+  var centerY = originalCorners.reduce(function (sum, _ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      y = _ref4[1];
+    return sum + y;
+  }, 0) / originalCorners.length;
+  // Derive local axes from the original box so we can preserve its
+  // rotation. Use the edges from corner 0 to its two neighbours.
+  var p0 = originalCorners[0];
+  var p1 = originalCorners[1];
+  var p3 = originalCorners[3];
+  var edgeUx = p1[0] - p0[0];
+  var edgeUy = p1[1] - p0[1];
+  var edgeVx = p3[0] - p0[0];
+  var edgeVy = p3[1] - p0[1];
+  var edgeUlength = Math.hypot(edgeUx, edgeUy);
+  var edgeVlenght = Math.hypot(edgeVx, edgeVy);
+  if (!edgeUlength || !edgeVlenght) {
+    // if either egde has zero length, bail out
+    return originalGeometry;
   }
-}), new Style$1({
-  image: FEATURE_VERTICE_IMAGE,
-  geometry: function geometry(feature) {
-    var originalGeometry = feature === null || feature === void 0 ? void 0 : feature.get('originalGeometry');
-    var geom = originalGeometry ? createBoxBasedOnModifiedVertex(feature.getGeometry(), originalGeometry) : feature === null || feature === void 0 ? void 0 : feature.getGeometry();
-    if (geom && geom.getType() === 'Polygon') {
-      var coordinates = geom.getCoordinates()[0];
-      return new MultiPoint(coordinates);
-    }
-    if (geom && geom.getType() === 'LineString') {
-      var _coordinates2 = geom.getCoordinates();
-      return new MultiPoint(_coordinates2);
-    }
+  var ux = edgeUx / edgeUlength;
+  var uy = edgeUy / edgeUlength;
+  var vx = edgeVx / edgeVlenght;
+  var vy = edgeVy / edgeVlenght;
+  // Remember which corner is which
+  var cornerSigns = [{
+    sx: -1,
+    sy: -1
+  }, {
+    sx: 1,
+    sy: -1
+  }, {
+    sx: 1,
+    sy: 1
+  }, {
+    sx: -1,
+    sy: 1
+  }];
+  var minSize = 1e-6;
+  // Squares keep their center fixed and scale uniformly from the
+  // dragged corner.
+  if (keepSquare) {
+    // Project the dragged corner into the same local coordinate
+    // system to determine the new half-size while keeping the
+    // existing rotation.
+    var drx = dragged[0] - centerX;
+    var dry = dragged[1] - centerY;
+    var dragLocalX = drx * ux + dry * uy;
+    var dragLocalY = drx * vx + dry * vy;
+    var _halfWidth = Math.max(Math.abs(dragLocalX), minSize);
+    var _halfHeight = Math.max(Math.abs(dragLocalY), minSize);
+    var halfSize = Math.max(_halfWidth, _halfHeight);
+    var newCorners = originalCorners.map(function (_, idx) {
+      var _cornerSigns$idx = cornerSigns[idx],
+        sx = _cornerSigns$idx.sx,
+        sy = _cornerSigns$idx.sy;
+      var localX = sx * halfSize;
+      var localY = sy * halfSize;
+      var worldX = centerX + localX * ux + localY * vx;
+      var worldY = centerY + localX * uy + localY * vy;
+      return [worldX, worldY];
+    });
+    newCorners.push(newCorners[0]);
+    return new Polygon([newCorners]);
+  }
+  // Rectangles (non-squares) should resize using the dragged
+  // corner while keeping the diagonal opposite anchored. The two remaining
+  // corners adjust accordingly, and the overall rotation is kept. When the
+  // dragged corner crosses past the center, the rectangle is allowed to
+  // "flip" instead of bouncing back.
+  // Diagonal corner relative to the dragged one in the 4-corner ring
+  var anchorIndex = (draggedCornerIndex + 2) % originalCorners.length;
+  var anchor = originalCorners[anchorIndex];
+  // Vector from anchored corner to dragged corner, in world space
+  var deltaWx = dragged[0] - anchor[0];
+  var deltaWy = dragged[1] - anchor[1];
+  // Express that vector in the local (u, v) frame
+  var deltaLocalX = deltaWx * ux + deltaWy * uy;
+  var deltaLocalY = deltaWx * vx + deltaWy * vy;
+  // Half-sizes in local coordinates. We keep the sign so that when the
+  // dragged corner crosses past the anchor along either axis, the
+  // rectangle flips instead of being clamped.
+  var halfWidth = deltaLocalX / 2;
+  var halfHeight = deltaLocalY / 2;
+  // Center in local coordinates is halfway between anchor (0,0) and
+  // dragged (deltaLocalX, deltaLocalY).
+  var centerLocalX = halfWidth;
+  var centerLocalY = halfHeight;
+  // Convert center back to world coordinates.
+  var centerXNew = anchor[0] + centerLocalX * ux + centerLocalY * vx;
+  var centerYNew = anchor[1] + centerLocalX * uy + centerLocalY * vy;
+  // Rebuild the four corners in local coordinates around the new center.
+  var localCorners = [[-halfWidth, -halfHeight], [halfWidth, -halfHeight], [halfWidth, halfHeight], [-halfWidth, halfHeight]];
+  var newCornersWorld = localCorners.map(function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+      lx = _ref6[0],
+      ly = _ref6[1];
+    var worldX = centerXNew + lx * ux + ly * vx;
+    var worldY = centerYNew + lx * uy + ly * vy;
+    return [worldX, worldY];
+  });
+  // Normalise corner order so index 0..3 always correspond to
+  // bottom-left, bottom-right, top-right, top-left in the box's
+  // local frame. This keeps rotate-handle orientation and
+  // indexing stable even after the rectangle "flips" when a
+  // corner is dragged past the centre.
+  var classified = newCornersWorld.map(function (corner) {
+    var _corner = _slicedToArray(corner, 2),
+      wx = _corner[0],
+      wy = _corner[1];
+    var rx = wx - centerXNew;
+    var ry = wy - centerYNew;
+    var localX = rx * ux + ry * uy;
+    var localY = rx * vx + ry * vy;
+    return {
+      corner: corner,
+      qx: localX >= 0 ? 1 : -1,
+      qy: localY >= 0 ? 1 : -1
+    };
+  });
+  var bl = (_classified$find = classified.find(function (corner) {
+    return corner.qx === -1 && corner.qy === -1;
+  })) === null || _classified$find === void 0 ? void 0 : _classified$find.corner;
+  var br = (_classified$find2 = classified.find(function (corner) {
+    return corner.qx === 1 && corner.qy === -1;
+  })) === null || _classified$find2 === void 0 ? void 0 : _classified$find2.corner;
+  var tr = (_classified$find3 = classified.find(function (corner) {
+    return corner.qx === 1 && corner.qy === 1;
+  })) === null || _classified$find3 === void 0 ? void 0 : _classified$find3.corner;
+  var tl = (_classified$find4 = classified.find(function (corner) {
+    return corner.qx === -1 && corner.qy === 1;
+  })) === null || _classified$find4 === void 0 ? void 0 : _classified$find4.corner;
+  var orderedCorners = bl && br && tr && tl ? [bl, br, tr, tl] : newCornersWorld;
+  // Close the ring
+  orderedCorners.push(orderedCorners[0]);
+  return new Polygon([orderedCorners]);
+};
+var getBoxRotateHandlePoints = function getBoxRotateHandlePoints(feature, resolution) {
+  var originalGeometry = feature === null || feature === void 0 ? void 0 : feature.get('originalGeometry');
+  var geom = originalGeometry ? createBoxBasedOnModifiedVertex(feature.getGeometry(), originalGeometry, feature.get('selectionType') === 'square') : feature === null || feature === void 0 ? void 0 : feature.getGeometry();
+  if (!geom || geom.getType() !== 'Polygon') {
     return undefined;
   }
-})];
+  var ring = geom.getCoordinates()[0];
+  if (ring.length < 4) {
+    return undefined;
+  }
+  // First four coordinates are the corners of the box (possibly rotated)
+  var corners = ring.slice(0, 4);
+  // Compute box center as the average of the corners
+  var centerX = corners.reduce(function (sum, _ref7) {
+    var _ref8 = _slicedToArray(_ref7, 1),
+      x = _ref8[0];
+    return sum + x;
+  }, 0) / corners.length;
+  var centerY = corners.reduce(function (sum, _ref9) {
+    var _ref0 = _slicedToArray(_ref9, 2),
+      y = _ref0[1];
+    return sum + y;
+  }, 0) / corners.length;
+  // Place the rotate handle at a nearly constant distance from the
+  // corner in screen space, independent of how large the box is.
+  // We move a fixed number of pixels along the outward diagonal
+  // from each corner.
+  var pixelOffset = 16; // pixels away from the corner
+  var baseOffset = resolution ? pixelOffset * resolution : 0;
+  return corners.map(function (_ref1) {
+    var _ref10 = _slicedToArray(_ref1, 2),
+      x = _ref10[0],
+      y = _ref10[1];
+    var dx = x - centerX;
+    var dy = y - centerY;
+    var distance = Math.hypot(dx, dy);
+    if (!distance || !baseOffset) {
+      return [x, y];
+    }
+    var ux = dx / distance;
+    var uy = dy / distance;
+    return [x + ux * baseOffset, y + uy * baseOffset];
+  });
+};
+var boxModificationStyle = function boxModificationStyle(feature, resolution) {
+  var styles = [];
+  var originalGeometry = feature === null || feature === void 0 ? void 0 : feature.get('originalGeometry');
+  var geom = originalGeometry ? createBoxBasedOnModifiedVertex(feature.getGeometry(), originalGeometry, feature.get('selectionType') === 'square') : feature.getGeometry();
+  if (geom) {
+    styles.push(new Style$1({
+      fill: FEATURE_FILL,
+      stroke: FEATURE_STROKE_EDIT,
+      geometry: geom
+    }));
+  }
+  if (geom && (geom.getType() === 'Polygon' || geom.getType() === 'LineString')) {
+    var coordinates = geom.getType() === 'Polygon' ? geom.getCoordinates()[0] : geom.getCoordinates();
+    styles.push(new Style$1({
+      image: FEATURE_VERTICE_IMAGE,
+      geometry: new MultiPoint(coordinates)
+    }));
+  }
+  var handlePoints = getBoxRotateHandlePoints(feature, resolution);
+  var activeIndexRaw = feature.get('activeRotateHandleIndex');
+  var activeIndex = typeof activeIndexRaw === 'number' && activeIndexRaw >= 0 && activeIndexRaw < 4 ? activeIndexRaw : undefined;
+  // While the box is being modified (corner drag), hide the rotate
+  // handle so only sizing handles are visible.
+  var suppressRotateHandle = feature.get('suppressRotateHandle');
+  if (ROTATE_ICON_CANVAS && handlePoints && handlePoints.length >= 4 && activeIndex !== undefined && !suppressRotateHandle) {
+    var _handlePoints = _slicedToArray(handlePoints, 4),
+      h0 = _handlePoints[0],
+      h1 = _handlePoints[1],
+      h2 = _handlePoints[2],
+      h3 = _handlePoints[3];
+    // Base angle: along the edge between first two corner handles.
+    var baseAngle = Math.atan2(h1[1] - h0[1], h1[0] - h0[0]);
+    // Assign per-corner offsets.
+    var handleConfigs = [{
+      point: h0,
+      offset: 0
+    },
+    // bottom-left
+    {
+      point: h1,
+      offset: -Math.PI / 2
+    },
+    // bottom-right
+    {
+      point: h2,
+      offset: Math.PI
+    },
+    // top-right
+    {
+      point: h3,
+      offset: Math.PI / 2
+    } // top-left
+    ];
+    var _handleConfigs$active = handleConfigs[activeIndex],
+      point = _handleConfigs$active.point,
+      offset = _handleConfigs$active.offset;
+    var icon = new Icon$1({
+      img: ROTATE_ICON_CANVAS,
+      rotation: -baseAngle + offset
+    });
+    styles.push(new Style$1({
+      image: icon,
+      geometry: new MultiPoint([point])
+    }));
+  }
+  return styles;
+};
 var circleFeatureStyle = function circleFeatureStyle(feature, resolution) {
   // use OL default styles to keep circle edge tracking
   var styles = createDefaultStyle(feature, resolution);
@@ -16298,6 +16624,48 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
     var lastPointerEvent = null;
     var trackPointerMove = function trackPointerMove(event) {
       lastPointerEvent = event;
+      // Update which rotate handle is "active" so only that
+      // icon is rendered near the mouse when editing boxes/squares.
+      // While rotating, keep the originally clicked handle active.
+      if (isBoxOrSquare && selectedFeatureHasGeometry && !isRotating) {
+        var featureToRotate = editFeatureCollection.item(0);
+        if (!featureToRotate) {
+          return;
+        }
+        var resolution = map.getView().getResolution();
+        var handlePoints = getBoxRotateHandlePoints(featureToRotate, resolution);
+        var prevIndex = featureToRotate.get('activeRotateHandleIndex');
+        var newIndex;
+        if (!handlePoints || !resolution) {
+          newIndex = undefined;
+        } else {
+          var coord = map.getEventCoordinate(event);
+          var threshold = 18 * resolution; // enlarge hover hit area for rotate handle
+          var closestIndex = -1;
+          var closestDist = Infinity;
+          handlePoints.forEach(function (_ref2, idx) {
+            var _ref3 = _slicedToArray(_ref2, 2),
+              hx = _ref3[0],
+              hy = _ref3[1];
+            var dx = coord[0] - hx;
+            var dy = coord[1] - hy;
+            var dist = Math.sqrt(dx * dx + dy * dy);
+            if (dist < closestDist) {
+              closestDist = dist;
+              closestIndex = idx;
+            }
+          });
+          newIndex = closestDist <= threshold ? closestIndex : undefined;
+        }
+        if (prevIndex !== newIndex) {
+          if (newIndex === undefined) {
+            featureToRotate.unset('activeRotateHandleIndex', true);
+          } else {
+            featureToRotate.set('activeRotateHandleIndex', newIndex, true);
+          }
+          layer.changed();
+        }
+      }
     };
     map.getViewport().addEventListener('pointermove', trackPointerMove);
     var deleteVertexOnDeleteKey = function deleteVertexOnDeleteKey(event) {
@@ -16310,12 +16678,13 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
       }
     };
     window.addEventListener('keydown', deleteVertexOnDeleteKey);
-    var isBoxOrSquare = actualDrawMode === DRAWMODE.BOX || actualDrawMode === DRAWMODE.SQUARE;
+    var isSquare = actualDrawMode === DRAWMODE.SQUARE;
+    var isBoxOrSquare = actualDrawMode === DRAWMODE.BOX || isSquare;
     // Modifying is a combination of Modify and Translate interactions
     var modify = new Modify({
       features: editFeatureCollection,
       insertVertexCondition: !isBoxOrSquare ? always : never,
-      style: modifyHandleStyle
+      style: isSquare ? [] : modifyHandleStyle
     });
     if (isBoxOrSquare) {
       // Box is a special case:
@@ -16324,16 +16693,39 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
       modify.on('modifystart', function (evt) {
         var _feature$getGeometry2;
         var feature = evt.features.getArray()[0];
+        // Mark that we are modifying the box so rotate handles
+        // can be hidden while dragging.
+        feature.set('suppressRotateHandle', true, true);
         feature.set('originalGeometry', (_feature$getGeometry2 = feature.getGeometry()) === null || _feature$getGeometry2 === void 0 ? void 0 : _feature$getGeometry2.clone(), true);
+        var viewport = map.getViewport();
+        if (viewport && viewport.style) {
+          viewport.style.cursor = 'grabbing';
+        }
       });
       modify.on('modifyend', function (evt) {
         var feature = evt.features.getArray()[0];
-        var boxPolygon = createBoxBasedOnModifiedVertex(feature.getGeometry(), feature.get('originalGeometry'));
+        var boxPolygon = createBoxBasedOnModifiedVertex(feature.getGeometry(), feature.get('originalGeometry'), isSquare);
         feature.setGeometry(boxPolygon);
+        // Re-enable rotate handle visibility after modifying.
+        feature.unset('suppressRotateHandle', true);
+        var viewport = map.getViewport();
+        if (viewport && viewport.style) {
+          viewport.style.cursor = '';
+        }
         updateFeature(feature);
       });
     } else {
+      modify.on('modifystart', function () {
+        var viewport = map.getViewport();
+        if (viewport && viewport.style) {
+          viewport.style.cursor = 'grabbing';
+        }
+      });
       modify.on('modifyend', function (evt) {
+        var viewport = map.getViewport();
+        if (viewport && viewport.style) {
+          viewport.style.cursor = '';
+        }
         updateFeature(evt.features.getArray()[0]);
       });
     }
@@ -16343,6 +16735,236 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
     translate.on('translateend', function (evt) {
       updateFeature(evt.features.getArray()[0]);
     });
+    // Rotation handling for boxes and squares using the visual rotate handles
+    var isRotating = false;
+    var rotationCenter = null;
+    var rotationStartAngle = 0;
+    var originalRing = null;
+    var disabledDragPans = [];
+    // Track when the user has pressed down near a resize corner so we can
+    // immediately show a grabbing cursor on mousedown (before any movement).
+    var isPointerDownNearCorner = false;
+    var handlePointerDownNearCorner = function handlePointerDownNearCorner(event) {
+      if (!isBoxOrSquare || !selectedFeatureHasGeometry) {
+        return;
+      }
+      var feature = editFeatureCollection.item(0);
+      var geom = feature === null || feature === void 0 ? void 0 : feature.getGeometry();
+      if (!geom || geom.getType() !== 'Polygon') {
+        return;
+      }
+      var polygon = geom;
+      var ring = polygon.getCoordinates()[0];
+      if (!ring || ring.length < 4) {
+        return;
+      }
+      var clickCoord = map.getEventCoordinate(event);
+      var resolution = map.getView().getResolution();
+      if (!resolution) {
+        return;
+      }
+      var threshold = 10 * resolution;
+      var closestDist = Infinity;
+      ring.forEach(function (_ref4) {
+        var _ref5 = _slicedToArray(_ref4, 2),
+          vx = _ref5[0],
+          vy = _ref5[1];
+        var dx = clickCoord[0] - vx;
+        var dy = clickCoord[1] - vy;
+        var dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist < closestDist) {
+          closestDist = dist;
+        }
+      });
+      if (closestDist <= threshold) {
+        var viewport = map.getViewport();
+        if (viewport && viewport.style) {
+          viewport.style.cursor = 'grabbing';
+        }
+        isPointerDownNearCorner = true;
+      }
+    };
+    var handlePointerUpAfterCorner = function handlePointerUpAfterCorner() {
+      if (!isPointerDownNearCorner && !isRotating) {
+        return;
+      }
+      var viewport = map.getViewport();
+      if (viewport && viewport.style) {
+        viewport.style.cursor = '';
+      }
+      isPointerDownNearCorner = false;
+    };
+    var startRotateIfOnHandle = function startRotateIfOnHandle(event) {
+      if (!isBoxOrSquare || !selectedFeatureHasGeometry) {
+        return;
+      }
+      var featureToRotate = editFeatureCollection.item(0);
+      var geom = featureToRotate === null || featureToRotate === void 0 ? void 0 : featureToRotate.getGeometry();
+      if (!geom || geom.getType() !== 'Polygon') {
+        return;
+      }
+      var polygon = geom;
+      var ring = polygon.getCoordinates()[0];
+      if (!ring || ring.length < 4) {
+        return;
+      }
+      // Exclude possible closing coordinate
+      var ringWithoutClose = ring.length > 4 && ring[0][0] === ring[ring.length - 1][0] && ring[0][1] === ring[ring.length - 1][1] ? ring.slice(0, ring.length - 1) : ring;
+      var clickCoord = map.getEventCoordinate(event);
+      var resolution = map.getView().getResolution();
+      if (!resolution) {
+        return;
+      }
+      // Use the same helper for handle locations as the style code,
+      // so visual position and click area are consistent.
+      var handlePoints = getBoxRotateHandlePoints(featureToRotate, resolution);
+      if (!handlePoints) {
+        return;
+      }
+      var threshold = 12 * resolution; // enlarge click hit area for rotate handle
+      // Determine which handle was clicked (nearest within threshold)
+      var closestIndex = -1;
+      var closestDist = Infinity;
+      handlePoints.forEach(function (_ref6, idx) {
+        var _ref7 = _slicedToArray(_ref6, 2),
+          hx = _ref7[0],
+          hy = _ref7[1];
+        var dx = clickCoord[0] - hx;
+        var dy = clickCoord[1] - hy;
+        var dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist < closestDist) {
+          closestDist = dist;
+          closestIndex = idx;
+        }
+      });
+      if (closestIndex === -1 || closestDist > threshold) {
+        return;
+      }
+      // Lock the active rotate handle index so its icon stays visible
+      var handleFeature = editFeatureCollection.item(0);
+      if (handleFeature) {
+        handleFeature.set('activeRotateHandleIndex', closestIndex, true);
+        layer.changed();
+      }
+      isRotating = true;
+      // Temporarily disable map panning while rotating so the
+      // underlying map does not move when dragging the rotate handle.
+      disabledDragPans = [];
+      map.getInteractions().forEach(function (interaction) {
+        if (interaction instanceof DragPan && interaction.getActive()) {
+          disabledDragPans.push(interaction);
+          interaction.setActive(false);
+        }
+      });
+      // Recompute box center from the current polygon
+      var minX = ringWithoutClose[0][0];
+      var maxX = ringWithoutClose[0][0];
+      var minY = ringWithoutClose[0][1];
+      var maxY = ringWithoutClose[0][1];
+      ringWithoutClose.forEach(function (_ref8) {
+        var _ref9 = _slicedToArray(_ref8, 2),
+          x = _ref9[0],
+          y = _ref9[1];
+        if (x < minX) {
+          minX = x;
+        }
+        if (x > maxX) {
+          maxX = x;
+        }
+        if (y < minY) {
+          minY = y;
+        }
+        if (y > maxY) {
+          maxY = y;
+        }
+      });
+      var centerX = (minX + maxX) / 2;
+      var centerY = (minY + maxY) / 2;
+      rotationCenter = [centerX, centerY];
+      rotationStartAngle = Math.atan2(clickCoord[1] - centerY, clickCoord[0] - centerX);
+      originalRing = ring.map(function (_ref0) {
+        var _ref1 = _slicedToArray(_ref0, 2),
+          x = _ref1[0],
+          y = _ref1[1];
+        return [x, y];
+      });
+      // While rotating, show a grabbing cursor on the map viewport
+      var viewport = map.getViewport();
+      if (viewport && viewport.style) {
+        viewport.style.cursor = 'grabbing';
+      }
+      // While rotating, disable modify/translate to avoid conflicts
+      modify.setActive(false);
+      translate.setActive(false);
+      event.preventDefault();
+    };
+    var rotateOnPointerMove = function rotateOnPointerMove(event) {
+      if (!isRotating || !rotationCenter || !originalRing) {
+        return;
+      }
+      var featureToRotate = editFeatureCollection.item(0);
+      var geom = featureToRotate === null || featureToRotate === void 0 ? void 0 : featureToRotate.getGeometry();
+      if (!geom || geom.getType() !== 'Polygon') {
+        return;
+      }
+      var polygon = geom;
+      var _rotationCenter = rotationCenter,
+        _rotationCenter2 = _slicedToArray(_rotationCenter, 2),
+        centerX = _rotationCenter2[0],
+        centerY = _rotationCenter2[1];
+      var coord = map.getEventCoordinate(event);
+      var angle = Math.atan2(coord[1] - centerY, coord[0] - centerX);
+      var delta = angle - rotationStartAngle;
+      var cos = Math.cos(delta);
+      var sin = Math.sin(delta);
+      var rotatedRing = originalRing.map(function (_ref10) {
+        var _ref11 = _slicedToArray(_ref10, 2),
+          x = _ref11[0],
+          y = _ref11[1];
+        var dx = x - centerX;
+        var dy = y - centerY;
+        var newX = centerX + dx * cos - dy * sin;
+        var newY = centerY + dx * sin + dy * cos;
+        return [newX, newY];
+      });
+      if (rotatedRing.length > 0) {
+        // Ensure the ring is closed
+        var _rotatedRing$ = _slicedToArray(rotatedRing[0], 2),
+          firstX = _rotatedRing$[0],
+          firstY = _rotatedRing$[1];
+        rotatedRing[rotatedRing.length - 1] = [firstX, firstY];
+      }
+      polygon.setCoordinates([rotatedRing]);
+    };
+    var endRotate = function endRotate() {
+      if (!isRotating) {
+        return;
+      }
+      isRotating = false;
+      rotationCenter = null;
+      rotationStartAngle = 0;
+      originalRing = null;
+      // Re-enable any drag-pan interactions we disabled when rotation
+      // started so normal map panning works again.
+      disabledDragPans.forEach(function (interaction) {
+        return interaction.setActive(true);
+      });
+      disabledDragPans = [];
+      // Restore the default cursor when rotation stops
+      var viewport = map.getViewport();
+      if (viewport && viewport.style) {
+        viewport.style.cursor = '';
+      }
+      modify.setActive(true);
+      translate.setActive(true);
+      var featureToRotate = editFeatureCollection.item(0);
+      if (featureToRotate) {
+        updateFeature(featureToRotate);
+        // Clear active handle so hover logic can take over again
+        featureToRotate.unset('activeRotateHandleIndex', true);
+        layer.changed();
+      }
+    };
     var abortOnEsc = function abortOnEsc(evt) {
       if (evt.key === 'Escape') {
         evt.preventDefault();
@@ -16354,7 +16976,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
         }
       }
     };
-    var onlyAllowMoving = actualDrawMode === DRAWMODE.CIRCLE || actualDrawMode === DRAWMODE.OVAL || actualDrawMode === DRAWMODE.FREEHANDLINE || actualDrawMode === DRAWMODE.SQUARE;
+    var onlyAllowMoving = actualDrawMode === DRAWMODE.CIRCLE || actualDrawMode === DRAWMODE.OVAL || actualDrawMode === DRAWMODE.FREEHANDLINE;
     if (selectedFeatureHasGeometry) {
       if (onlyAllowMoving) {
         interactions.push(translate); // Only allow moving
@@ -16367,6 +16989,16 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
     interactions.push(new Snap({
       source: viewOnlySource
     }));
+    if (isBoxOrSquare && selectedFeatureHasGeometry) {
+      var viewport = map.getViewport();
+      viewport.addEventListener('pointerdown', startRotateIfOnHandle);
+      viewport.addEventListener('pointermove', rotateOnPointerMove);
+      viewport.addEventListener('pointerup', endRotate);
+      // Ensure the grabbing cursor appears immediately when pressing on a
+      // resize corner, not only after the pointer starts moving.
+      viewport.addEventListener('pointerdown', handlePointerDownNearCorner);
+      viewport.addEventListener('pointerup', handlePointerUpAfterCorner);
+    }
     window.addEventListener('keydown', abortOnEsc);
     interactions.forEach(function (i) {
       return map.addInteraction(i);
@@ -16381,6 +17013,14 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
       map.removeLayer(layer);
       map.removeLayer(viewOnlyLayer);
       map.getViewport().removeEventListener('pointermove', trackPointerMove);
+      if (isBoxOrSquare && selectedFeatureHasGeometry) {
+        var _viewport = map.getViewport();
+        _viewport.removeEventListener('pointerdown', startRotateIfOnHandle);
+        _viewport.removeEventListener('pointermove', rotateOnPointerMove);
+        _viewport.removeEventListener('pointerup', endRotate);
+        _viewport.removeEventListener('pointerdown', handlePointerDownNearCorner);
+        _viewport.removeEventListener('pointerup', handlePointerUpAfterCorner);
+      }
       window.removeEventListener('keydown', deleteVertexOnDeleteKey);
     };
   }, [map, isInEditMode, geojson, projection, viewOnlyStyle, selectedFeatureIndex, exitDrawModeCallback, updateGeojson, drawMode]);
@@ -16388,7 +17028,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
 };
 
 var defaultIntersectionStyleProperties = _objectSpread2(_objectSpread2({}, defaultGeoJSONStyleProperties), {}, {
-  'fill-opacity': 0.5
+  'fill-opacity': 0.1
 });
 var emptyLineString = _objectSpread2(_objectSpread2({}, lineString), {}, {
   properties: defaultGeoJSONStyleProperties
@@ -18279,6 +18919,265 @@ var MapMeasure = function MapMeasure(_ref) {
   return null;
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+// To be used with translations of days in formatted date
+// enum DaysOfWeeki18n {
+//   SUNDAY = 'timeslider-sunday',
+//   MONDAY = 'timeslider-monday',
+//   TUESDAY = 'timeslider-tuesday',
+//   WEDNESDAY = 'timeslider-wednesday',
+//   THURSDAY = 'timeslider-thursday',
+//   FRIDAY = 'timeslider-friday',
+//   SATURDAY = 'timeslider-saturday',
+// }
+// To be used with translations of months in formatted date
+// enum MonthsOfTheYeari18n {
+//   JANUARY = 'timeslider-january',
+//   FEBRUARY = 'timeslider-february',
+//   MARCH = 'timeslider-march',
+//   APRIL = 'timeslider-april',
+//   MAY = 'timeslider-may',
+//   JUNE = 'timeslider-june',
+//   JULY = 'timeslider-july',
+//   AUGUST = 'timeslider-august',
+//   SEPTEMBER = 'timeslider-september',
+//   OCTOBER = 'timeslider-october',
+//   NOVEMBER = 'timeslider-november',
+//   DECEMBER = 'timeslider-december',
+// }
+var DaysOfWeek;
+(function (DaysOfWeek) {
+  DaysOfWeek["SUNDAY"] = "Sun";
+  DaysOfWeek["MONDAY"] = "Mon";
+  DaysOfWeek["TUESDAY"] = "Tue";
+  DaysOfWeek["WEDNESDAY"] = "Wed";
+  DaysOfWeek["THURSDAY"] = "Thu";
+  DaysOfWeek["FRIDAY"] = "Fri";
+  DaysOfWeek["SATURDAY"] = "Sat";
+})(DaysOfWeek || (DaysOfWeek = {}));
+var MonthsOfTheYear;
+(function (MonthsOfTheYear) {
+  MonthsOfTheYear["JANUARY"] = "Jan";
+  MonthsOfTheYear["FEBRUARY"] = "Feb";
+  MonthsOfTheYear["MARCH"] = "Mar";
+  MonthsOfTheYear["APRIL"] = "Apr";
+  MonthsOfTheYear["MAY"] = "May";
+  MonthsOfTheYear["JUNE"] = "Jun";
+  MonthsOfTheYear["JULY"] = "Jul";
+  MonthsOfTheYear["AUGUST"] = "Aug";
+  MonthsOfTheYear["SEPTEMBER"] = "Sep";
+  MonthsOfTheYear["OCTOBER"] = "Oct";
+  MonthsOfTheYear["NOVEMBER"] = "Nov";
+  MonthsOfTheYear["DECEMBER"] = "Dec";
+})(MonthsOfTheYear || (MonthsOfTheYear = {}));
+var dateToManualFormatString = function dateToManualFormatString(inDate) {
+  if (!inDate) {
+    return 'Date not available';
+  }
+  var EEE = inDate && Object.values(DaysOfWeek)[inDate.getUTCDay()];
+  var dd = "0".concat(inDate === null || inDate === void 0 ? void 0 : inDate.getUTCDate()).slice(-2);
+  var MMM = inDate && Object.values(MonthsOfTheYear)[inDate.getUTCMonth()];
+  var HH = "0".concat(inDate === null || inDate === void 0 ? void 0 : inDate.getUTCHours()).slice(-2);
+  var mm = "0".concat(inDate === null || inDate === void 0 ? void 0 : inDate.getUTCMinutes()).slice(-2);
+  return "".concat(EEE, " ").concat(dd, " ").concat(MMM, " ").concat(HH, ":").concat(mm, " UTC");
+};
+
+/**
+ * Format a date to a string
+ *
+ * Expects the following props:
+ * @param {Date} inDate - date to be formatted
+ *
+ */
+var ClockContainer = function ClockContainer(_ref) {
+  var fontSize = _ref.fontSize,
+    onButtonClick = _ref.onButtonClick,
+    time = _ref.time;
+  var _useWebmapReactTransl = useWebmapReactTranslation(),
+    t = _useWebmapReactTransl.t;
+  var title = t('clock-hide');
+  var currentDateString = dateToManualFormatString(dateUtils.fromUnix(time));
+  return jsxs(Grid, {
+    container: true,
+    sx: {
+      justifyContent: 'space-evenly',
+      alignItems: 'center',
+      cursor: 'move',
+      height: '100%',
+      width: '100%',
+      backgroundColor: 'geowebColors.timeSlider.playerTimeMarkers.fill',
+      borderRadius: '5px'
+    },
+    wrap: "nowrap",
+    children: [jsx(Grid, {
+      sx: {
+        width: '4px'
+      }
+    }), jsx(CustomTooltip, {
+      title: title,
+      children: jsx(Grid, {
+        sx: {
+          zIndex: 2
+        },
+        children: jsx(ThemeProvider, {
+          theme: darkTheme,
+          children: jsx(CustomIconButton, {
+            "aria-label": title,
+            onClick: onButtonClick,
+            variant: "boxed",
+            children: jsx(ChevronRight, {})
+          })
+        })
+      })
+    }), jsx(Grid, {
+      children: jsx(Typography, {
+        sx: {
+          whiteSpace: 'nowrap',
+          fontSize: fontSize,
+          color: '#fff'
+        },
+        variant: "subtitle2",
+        children: currentDateString
+      })
+    })]
+  });
+};
+
+var MIN_WIDTH = 170;
+var MIN_HEIGHT = 32;
+var MIN_FONT_SIZE = 14; // bigger font size will cause render delay in LCP
+var FONT_SIZE_WIDTH_RATIO = MIN_FONT_SIZE / MIN_WIDTH;
+var BUTTON_WIDTH = 40;
+var resizeHandlePlacement = {
+  top: false,
+  right: false,
+  bottom: false,
+  left: false,
+  topRight: false,
+  bottomRight: false,
+  bottomLeft: true,
+  topLeft: false
+};
+var Clock = function Clock(_ref2) {
+  var time = _ref2.time,
+    _ref2$isVisible = _ref2.isVisible,
+    isClockVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
+    onToggleClock = _ref2.onToggleClock;
+  var _useWebmapReactTransl = useWebmapReactTranslation(),
+    t = _useWebmapReactTransl.t;
+  var clockElement = useRef(null);
+  var _useState = useState({
+      x: 0,
+      y: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    position = _useState2[0],
+    setPosition = _useState2[1];
+  useMakeSureContainerStaysInsideWindow(clockElement, position, setPosition);
+  var _useState3 = useState({
+      width: MIN_WIDTH,
+      height: MIN_HEIGHT
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    size = _useState4[0],
+    setSize = _useState4[1];
+  var _useState5 = useState(MIN_FONT_SIZE),
+    _useState6 = _slicedToArray(_useState5, 2),
+    fontSize = _useState6[0],
+    setFontSize = _useState6[1];
+  var toggleClock = function toggleClock(isClockVisible) {
+    onToggleClock === null || onToggleClock === void 0 || onToggleClock(isClockVisible);
+  };
+  return jsx(Fragment, {
+    children: !isClockVisible ? jsx(CustomIconButton, {
+      "aria-label": t('clock-show'),
+      onClick: function onClick() {
+        toggleClock(true);
+      },
+      sx: {
+        position: 'absolute',
+        top: 16,
+        right: 8,
+        zIndex: 1
+      },
+      tooltipTitle: t('clock-show'),
+      variant: "boxed",
+      children: jsx(Clock$1, {})
+    }) : jsx(Draggable, {
+      bounds: "parent",
+      cancel: ".MuiButtonBase-root",
+      nodeRef: clockElement,
+      onStop: function onStop(_event, position) {
+        setPosition(position);
+      },
+      position: position,
+      children: jsx("div", {
+        ref: function ref(_ref3) {
+          clockElement.current = _ref3;
+        },
+        style: {
+          position: 'absolute',
+          zIndex: 1001,
+          top: '10px',
+          right: '10px'
+        },
+        children: jsx(Resizable, {
+          enable: resizeHandlePlacement,
+          handleComponent: {
+            bottomLeft: jsx(Resize, {
+              isRightAligned: true,
+              style: {
+                fill: '#FFFFFF'
+              }
+            })
+          },
+          lockAspectRatio: true,
+          minHeight: MIN_HEIGHT,
+          minWidth: MIN_WIDTH + BUTTON_WIDTH,
+          onResize: function onResize(_event, _direction, _ref, delta) {
+            var width = size.width + delta.width;
+            var adjustedWidth = width - BUTTON_WIDTH;
+            var fontSize = FONT_SIZE_WIDTH_RATIO * adjustedWidth;
+            setFontSize(fontSize);
+          },
+          onResizeStop: function onResizeStop(_event, _direction, _ref, delta) {
+            var width = size.width + delta.width;
+            var height = size.height + delta.height;
+            setSize({
+              width: width,
+              height: height
+            });
+          },
+          size: size,
+          children: jsx(ClockContainer, {
+            fontSize: fontSize,
+            onButtonClick: function onButtonClick() {
+              toggleClock(false);
+            },
+            time: time
+          })
+        })
+      })
+    })
+  });
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18355,4 +19254,4 @@ var getLayerUpdateInfo = function getLayerUpdateInfo(wmLayer, mapId) {
   return updateObject;
 };
 
-export { BaseLayerType, CLASSNAME_MAP_MEASURE_TOOLTIP, ClickOnMapTool, DEFAULT_GEOJSON_STYLE_FILL_OPACITY, DRAWMODE, DefaultBaseLayers, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EditModeButton as EditModeButtonField, FEATURE_DRAW_FILL_COLOR, FEATURE_DRAW_FILL_COLOR_TRANSPARENT, FEATURE_DRAW_SECONDARY_FILL_COLOR, FEATURE_DRAW_SECONDARY_STROKE_COLOR, FEATURE_DRAW_STROKE_COLOR, FEATURE_FILL, FEATURE_FILL_SELECTED, FEATURE_STROKE, FEATURE_STROKE_EDIT, FEATURE_STROKE_SELECTED, FEATURE_VERTICES_EDIT_HANDLES, FEATURE_VERTICE_HANDLE_IMAGE, FEATURE_VERTICE_IMAGE, FeatureLayer, FeatureLayers, GeoJSONTextField, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MapContext, MapControlButton, MapControls, MapDimensionSelect, MapFeatureClass, MapMeasure, MapTime, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, OpenLayersFeatureLayer, OpenLayersGetFeatureInfo, OpenLayersLayer, OpenLayersMapDraw, OpenLayersMapView, OpenLayersZoomControl, SelectField, StoryLayoutGrid, TimeAwareEDRLocationLayer, TimeAwareGeoTIFFLayer, TimeAwareWMTSLayer, TimeContext, TimeawareImageSource, TimeawareImageSourceWMSLayer, WEBMAP_REACT_NAMESPACE, WMSLayer, WMTSLayer, XYZLayer, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, catmullRomSpline, clearImageCacheForAllMaps, colorMaps, createBoxBasedOnModifiedVertex, createIconStyle, createInterSections, createOval, currentlySupportedDrawModes, defaultBox, defaultCircle, defaultDelete, defaultEdrStyles, defaultFreehandLine, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultLineString, defaultLocation, defaultModes, defaultOval, defaultPoint, defaultPolygon, defaultSmoothLine, defaultSquare, defaultTimeFormat, dimensionConfig, drawPolyStoryStyles, drawStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, fakeEdrLayerApiHandlers, featureMultiPoint, featurePoint, featurePolygon, fillOptions, firSelectionType, formatTime, generateImageFromLegend, genericOpenLayersFeatureStyle, geowebColorToOpenLayersColor, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getDrawModeIdFromSelectionType, getFeatureCollection, getFeatureExtent, getFeaturePointStyle, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getLegendClass, getProj4, getTimeDimension, getToolIcon, initializeOpenLayersProjections, inlineFeatureStyle, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, isGeoJSONGeometryEmpty, isPointFeatureCollection, labelOptions, lineString, lineStringCollection, makeFeatureStyleDisc, makeFeatureStyleLoading, makeFeatureStyleMultiParam, makeFeatureStyleMultiParamLoading, makeFeatureStyleWind, makeLegendFromColorMap, makeLegendFromStyleName, makeTimeList, makeView, marksByDimension, measureResultStyle, measureToolStyle, modifyStyles, moveFeature, multiLineStringLabelStyle, multiPolygonLabelStyle, opacityOptions, openLayersGetMapImageStore, precipitationMMLegendColorsWoW, projectorCache, publicLayers, publicServices, rewindGeometry, roundCoordinates, selectPreferredWMSProjection, setMapCenter, setViewFromExtent, setViewFromFeature, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleGeometryCollectionGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, styleNameToStyleLike, temperatureLegendColorsCWK, temperatureLegendColorsWoW, textLabelStyle, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useAnimationForLayer, useEDRGetCollectionDetails, useEDRGetParameterData, useEDRWMLayer, useGeoJSON, useGetWMLayerInstance, useGetWMSLayerStyleList, useIconStyle, useMapDrawTool, useProjection, useQueryGetWMSGetCapabilities, useQueryGetWMSLayer, useQueryGetWMSLayers, useQueryGetWMSLayersTree, useQueryGetWMSServiceInfo, useQueryWMTSGetCapabilities, useSetIntervalWhenVisible, useViewFromLayer, viewUtils, webmapEDRQueryOptions, webmapReactTranslations };
+export { BaseLayerType, CLASSNAME_MAP_MEASURE_TOOLTIP, ClickOnMapTool, Clock, DEFAULT_GEOJSON_STYLE_FILL_OPACITY, DRAWMODE, DefaultBaseLayers, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EditModeButton as EditModeButtonField, FEATURE_DRAW_FILL_COLOR, FEATURE_DRAW_FILL_COLOR_TRANSPARENT, FEATURE_DRAW_SECONDARY_FILL_COLOR, FEATURE_DRAW_SECONDARY_STROKE_COLOR, FEATURE_DRAW_STROKE_COLOR, FEATURE_FILL, FEATURE_FILL_SELECTED, FEATURE_STROKE, FEATURE_STROKE_EDIT, FEATURE_STROKE_SELECTED, FEATURE_VERTICES_EDIT_HANDLES, FEATURE_VERTICE_HANDLE_IMAGE, FEATURE_VERTICE_IMAGE, FeatureLayer, FeatureLayers, GeoJSONTextField, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MapContext, MapControlButton, MapControls, MapDimensionSelect, MapFeatureClass, MapMeasure, MapTime, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, OpenLayersFeatureLayer, OpenLayersGetFeatureInfo, OpenLayersLayer, OpenLayersMapDraw, OpenLayersMapView, OpenLayersZoomControl, SelectField, StoryLayoutGrid, TimeAwareEDRLocationLayer, TimeAwareGeoTIFFLayer, TimeAwareWMTSLayer, TimeContext, TimeawareImageSource, TimeawareImageSourceWMSLayer, WEBMAP_REACT_NAMESPACE, WMSLayer, WMTSLayer, XYZLayer, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, catmullRomSpline, clearImageCacheForAllMaps, colorMaps, createBoxBasedOnModifiedVertex, createIconStyle, createInterSections, createOval, currentlySupportedDrawModes, defaultBox, defaultCircle, defaultDelete, defaultEdrStyles, defaultFreehandLine, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultLineString, defaultLocation, defaultModes, defaultOval, defaultPoint, defaultPolygon, defaultSmoothLine, defaultSquare, defaultTimeFormat, dimensionConfig, drawPolyStoryStyles, drawStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, fakeEdrLayerApiHandlers, featureMultiPoint, featurePoint, featurePolygon, fetchStacCollection, fetchStacItem, fetchStacItems, fillOptions, firSelectionType, formatTime, generateImageFromLegend, genericOpenLayersFeatureStyle, geowebColorToOpenLayersColor, getBoxRotateHandlePoints, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getDrawModeIdFromSelectionType, getFeatureCollection, getFeatureExtent, getFeaturePointStyle, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getLegendClass, getProj4, getTimeDimension, getToolIcon, initializeOpenLayersProjections, inlineFeatureStyle, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, isGeoJSONGeometryEmpty, isPointFeatureCollection, labelOptions, lineString, lineStringCollection, makeFeatureStyleDisc, makeFeatureStyleLoading, makeFeatureStyleMultiParam, makeFeatureStyleMultiParamLoading, makeFeatureStyleWind, makeLegendFromColorMap, makeLegendFromStyleName, makeTimeList, makeView, marksByDimension, measureResultStyle, measureToolStyle, modifyStyles, moveFeature, multiLineStringLabelStyle, multiPolygonLabelStyle, opacityOptions, openLayersGetMapImageStore, precipitationMMLegendColorsWoW, projectorCache, publicLayers, publicServices, rewindGeometry, roundCoordinates, selectPreferredWMSProjection, setMapCenter, setViewFromExtent, setViewFromFeature, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleGeometryCollectionGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, styleNameToStyleLike, temperatureLegendColorsCWK, temperatureLegendColorsWoW, textLabelStyle, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useAnimationForLayer, useEDRGetCollectionDetails, useEDRGetParameterData, useEDRWMLayer, useFetchGeoTIFFBlob, useGeoJSON, useGetWMLayerInstance, useGetWMSLayerStyleList, useIconStyle, useMapDrawTool, useProjection, useQueryGetWMSGetCapabilities, useQueryGetWMSLayer, useQueryGetWMSLayers, useQueryGetWMSLayersTree, useQueryGetWMSServiceInfo, useQueryWMTSGetCapabilities, useSetIntervalWhenVisible, useStacCollection, useStacItems, useViewFromLayer, viewUtils, webmapEDRQueryOptions, webmapReactTranslations };