@opengeoweb/webmap-react 15.2.0 → 16.0.0

package/index.esm.js

@@ -11,14 +11,14 @@ 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, 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 { useTheme, Card, Box, Typography, Grid, styled, Slider, FormGroup, FormControlLabel, Checkbox, TextField, FormControl, InputLabel, Select, MenuItem, Icon as Icon$2, FormLabel, Switch, Paper, ThemeProvider } from '@mui/material';
+import { Visibility, VisibilityOff, 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, Options, Clock as Clock$1 } from '@opengeoweb/theme';
+import 'i18next';
+import { useTranslation } from 'react-i18next';
 import { queryOptions, useQuery } from '@tanstack/react-query';
 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, 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';
@@ -91,6 +91,7 @@ var en = {
 	"webmap-react-point": "Point",
 	"webmap-react-polygon": "Polygon",
 	"webmap-react-box": "Rectangle",
+	"webmap-react-rotatable-box": "Rectangle",
 	"webmap-react-linestring": "Line String",
 	"webmap-react-circle": "Circle",
 	"webmap-react-square": "Square",
@@ -102,7 +103,11 @@ var en = {
 	"webmap-react-legend-no-image": "No legend graphic available",
 	"webmap-react-map-measure-help-tooltip": "Click to measure",
 	"clock-show": "Show clock",
-	"clock-hide": "Hide clock"
+	"clock-hide": "Hide clock",
+	"clock-animation-options": "Animation options",
+	"webmap-react-show-layer-legend": "Show layer legend",
+	"webmap-react-show-layer": "Show layer in legend",
+	"webmap-react-hide-layer": "Hide layer in legend"
 };
 var fi = {
 	"webmap-react-event": "tapahtuma:",
@@ -147,10 +152,15 @@ var fi = {
 	"webmap-react-point": "Piste",
 	"webmap-react-polygon": "Monikulmio",
 	"webmap-react-box": "Laatikko",
+	"webmap-react-rotatable-box": "Laatikko",
 	"webmap-react-linestring": "Viivajono",
 	"webmap-react-delete": "Poista",
 	"clock-show": "Näytä kello",
-	"clock-hide": "Piilota kello"
+	"clock-hide": "Piilota kello",
+	"clock-animation-options": "Animoinnin asetukset",
+	"webmap-react-show-layer-legend": "Näytä karttatason selite",
+	"webmap-react-show-layer": "Näytä karttataso selitteessä",
+	"webmap-react-hide-layer": "Piilota karttataso selitteestä"
 };
 var no = {
 	"webmap-react-event": "hendelse:",
@@ -195,10 +205,15 @@ var no = {
 	"webmap-react-point": "Punkt",
 	"webmap-react-polygon": "Polygon",
 	"webmap-react-box": "Boks",
+	"webmap-react-rotatable-box": "Boks",
 	"webmap-react-linestring": "Linje",
 	"webmap-react-delete": "Fjerne",
 	"clock-show": "Vis klokke",
-	"clock-hide": "Skjul klokke"
+	"clock-hide": "Skjul klokke",
+	"clock-animation-options": "Animasjonsinnstillinger",
+	"webmap-react-show-layer-legend": "Vis",
+	"webmap-react-show-layer": "Vis laget i tegnforklaringen",
+	"webmap-react-hide-layer": "Skjul laget i tegnforklaringen"
 };
 var nl = {
 	"webmap-react-event": "event:",
@@ -243,6 +258,7 @@ var nl = {
 	"webmap-react-point": "Punt",
 	"webmap-react-polygon": "Polygoon",
 	"webmap-react-box": "Rechthoek",
+	"webmap-react-rotatable-box": "Rechthoek",
 	"webmap-react-linestring": "Lijn",
 	"webmap-react-circle": "Cirkel",
 	"webmap-react-square": "Vierkant",
@@ -254,7 +270,11 @@ var nl = {
 	"webmap-react-legend-no-image": "Geen legenda beschikbaar",
 	"webmap-react-map-measure-help-tooltip": "Klik om te meten",
 	"clock-show": "Klok tonen",
-	"clock-hide": "Klok verbergen"
+	"clock-hide": "Klok verbergen",
+	"clock-animation-options": "Animatie opties",
+	"webmap-react-show-layer-legend": "Toon laag in legenda",
+	"webmap-react-show-layer": "Toon laag in legenda",
+	"webmap-react-hide-layer": "Verberg laag in legenda"
 };
 var webmapReactTranslations = {
 	en: en,
@@ -818,6 +838,13 @@ var TIMEAWAREIMAGEWRAPPER_IMAGEDIDNOTLOADSUCCESFULLY = 'Image did not load succe
 // export const WMS_EXTENT_RATIO_TO_VIEWPORT = 1.0;
 // export const ENABLE_PREFETCH = false;
 
+/**
+ *
+ * @param wmTimeDim WMDimension time containing dimension values
+ * @param stepsToCheck Array with timestamps as posix timestamps to check
+ * @param isAnimating If the application is running an animation loop
+ * @returns A string list with ISO8601 values to fetch
+ */
 var makeDimValuesToPrefetch = function makeDimValuesToPrefetch(wmTimeDim, stepsToCheck, isAnimating) {
   if (wmTimeDim) {
     if ((stepsToCheck === null || stepsToCheck === void 0 ? void 0 : stepsToCheck.length) > 0) {
@@ -866,44 +893,48 @@ var makeDimValuesToPrefetch = function makeDimValuesToPrefetch(wmTimeDim, stepsT
  */
 var getDimensionParamsForWMS = function getDimensionParamsForWMS(dimensions, wmLayer) {
   // Check if pre-requisites are OK. Possibly still fetching WMS GetCapabilities.
-  if (!dimensions || !(wmLayer !== null && wmLayer !== void 0 && wmLayer.isConfigured)) {
+  if (!(wmLayer !== null && wmLayer !== void 0 && wmLayer.isConfigured)) {
     return undefined;
   }
   var dimProps = {};
-  if ((dimensions === null || dimensions === void 0 ? void 0 : dimensions.length) === 0 && (wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.dimensions.length) === 0 && wmLayer !== null && wmLayer !== void 0 && wmLayer.isConfigured) {
-    // It is possible that a layer has no dimensions. In that case return a map without any key values.
-    return dimProps;
-  }
+  var wmLayerDims = wmLayer.getDimensions();
   // Loop without forEach so we can exit and return.
-  var _iterator = _createForOfIteratorHelper(dimensions),
+  var _iterator = _createForOfIteratorHelper(wmLayerDims),
     _step;
   try {
+    var _loop = function _loop() {
+        var wmLayerDim = _step.value;
+        // Check if passed as part of the list of dimensions
+        var layerDim = dimensions.find(function (dim) {
+          return dim.name === wmLayerDim.name;
+        });
+        if (layerDim) {
+          var closestValue = wmLayerDim.getClosestValue(layerDim.currentValue);
+          if (!WMInvalidDateValues.has(closestValue)) {
+            wmLayerDim.setValue(closestValue);
+            dimProps[getCorrectWMSDimName(wmLayerDim.name)] = closestValue;
+          } else {
+            // The requested value is not in the range of the dimension, image should not show
+            return {
+              v: undefined
+            };
+          }
+        } else {
+          // Not specified so fall back to current/default value from WMLayer
+          dimProps[getCorrectWMSDimName(wmLayerDim.name)] = wmLayerDim.currentValue ? wmLayerDim.currentValue : wmLayerDim.defaultValue;
+        }
+      },
+      _ret;
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var dimension = _step.value;
-      var wmLayerDimension = dimension.name && (wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.getDimension(dimension === null || dimension === void 0 ? void 0 : dimension.name));
-      if (!wmLayerDimension) {
-        return undefined;
-      }
-      // Take the closest WMLayer dimension value
-      var closestValue = wmLayerDimension.getClosestValue(dimension.currentValue);
-      if (!WMInvalidDateValues.has(closestValue)) {
-        wmLayerDimension.setValue(closestValue);
-        dimProps[getCorrectWMSDimName(dimension.name)] = closestValue;
-      } else {
-        // The dimension name does not occur in the layer, or the requested value is not in the range of the dimension
-        return undefined;
-      }
+      _ret = _loop();
+      if (_ret) return _ret.v;
     }
-    // Check if all dims where used which occur in the WMLayer
   } catch (err) {
     _iterator.e(err);
   } finally {
     _iterator.f();
   }
-  return wmLayer !== null && wmLayer !== void 0 && wmLayer.dimensions.every(function (wmLayerDim) {
-    var wmsName = getCorrectWMSDimName(wmLayerDim.name);
-    return wmsName in dimProps;
-  }) ? dimProps : undefined;
+  return dimProps;
 };
 /**
  * Calculates number of timesteps for given timespan
@@ -1016,10 +1047,7 @@ var TimeAwareImageWrapper = /*#__PURE__*/function (_ImageWrapper) {
         src = _this$getWMSGetMapReq.src,
         newExtent = _this$getWMSGetMapReq.extent,
         newResolution = _this$getWMSGetMapReq.resolution;
-      var geoRef = openLayersGetMapImageStore.getAltGeoReferencedImage(src, newExtent, newResolution) || openLayersGetMapImageStore.getGeoReferencedImage(src, {
-        extent: newExtent,
-        resolution: newResolution
-      });
+      var geoRef = openLayersGetMapImageStore.getAltGeoReferencedImage(src, newExtent, newResolution);
       if (geoRef) {
         return {
           el: geoRef.getElement(),
@@ -1040,10 +1068,7 @@ var TimeAwareImageWrapper = /*#__PURE__*/function (_ImageWrapper) {
         src = _this$getWMSGetMapReq2.src,
         newExtent = _this$getWMSGetMapReq2.extent,
         newResolution = _this$getWMSGetMapReq2.resolution;
-      var imageEl = openLayersGetMapImageStore.getGeoReferencedImage(src, {
-        extent: newExtent,
-        resolution: newResolution
-      });
+      var imageEl = openLayersGetMapImageStore.getImage(src);
       if (imageEl) {
         return {
           el: imageEl.getElement(),
@@ -1066,7 +1091,6 @@ var TimeAwareImageWrapper = /*#__PURE__*/function (_ImageWrapper) {
       this.setImage(el);
       this.extent = extent;
       this.resolution = resolution;
-      // this.projection = projection;/?TODO
     }
   }, {
     key: "load",
@@ -1076,7 +1100,7 @@ var TimeAwareImageWrapper = /*#__PURE__*/function (_ImageWrapper) {
         src = _this$getWMSGetMapReq3.src,
         newExtent = _this$getWMSGetMapReq3.extent,
         newResolution = _this$getWMSGetMapReq3.resolution;
-      var imageEl = openLayersGetMapImageStore.getGeoReferencedImage(src, {
+      var imageEl = openLayersGetMapImageStore.getImageAndSetGeoReference(src, {
         extent: newExtent,
         resolution: newResolution
       });
@@ -1437,7 +1461,7 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
       this.changed();
     }
     /**
-     * Check if an image is available and loaded for requested date. Used for animation to proceed.
+     * Check if an image is available and loaded for requested date. Used for showlayerinfo to proceed.
      * @param isoTime
      * @returns
      */
@@ -1445,6 +1469,9 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
     key: "hasImageLoadedForTimeValue",
     value: function hasImageLoadedForTimeValue(isoTime) {
       var _this$_loadedExtent;
+      if (!isoTime || WMInvalidDateValues.has(isoTime)) {
+        return false;
+      }
       if (((_this$_loadedExtent = this._loadedExtent) === null || _this$_loadedExtent === void 0 ? void 0 : _this$_loadedExtent.length) !== 4) {
         return false;
       }
@@ -1456,24 +1483,44 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
       }
       return true;
     }
-    // This function can be used to determine if the animation can proceed to the next step.
   }, {
-    key: "isImageLoadingForTimestep",
-    value: function isImageLoadingForTimestep(isoTime) {
+    key: "getAltGeoReferencedImages",
+    value: function getAltGeoReferencedImages(isoTime) {
       var _this$_loadedExtent2;
+      if (!isoTime || WMInvalidDateValues.has(isoTime)) {
+        return [];
+      }
       if (((_this$_loadedExtent2 = this._loadedExtent) === null || _this$_loadedExtent2 === void 0 ? void 0 : _this$_loadedExtent2.length) !== 4) {
-        return false;
+        return [];
       }
       var dimPropWithRequestedDate = _objectSpread2({}, this._dimProperties);
       dimPropWithRequestedDate['TIME'] = isoTime;
-      var image = this._imWrapperForOlSource.getAlternativeImage(this._lastRequestedExtent, this._lastRequestedResolution, this._lastRequestedPixelRatio, this._lastRequestedProjection, this._wmsUrl, this._extraWMSParams, this._layerName, this._styleName, dimPropWithRequestedDate);
-      if (image === false) {
+      var _this$_imWrapperForOl = this._imWrapperForOlSource.getWMSGetMapRequestURL(this._lastRequestedExtent, this._lastRequestedResolution, this._lastRequestedPixelRatio, this._lastRequestedProjection, this._wmsUrl, this._extraWMSParams, this._layerName, this._styleName, dimPropWithRequestedDate),
+        src = _this$_imWrapperForOl.src,
+        newExtent = _this$_imWrapperForOl.extent,
+        newResolution = _this$_imWrapperForOl.resolution;
+      var geoRefs = openLayersGetMapImageStore.getAltGeoReferencedImages(src, newExtent, newResolution);
+      return geoRefs;
+    }
+    /**
+     * This function can be used to determine if the animation can proceed to the next step.
+     * @param isoTime ISO8601 string formatat like `YYYY-MM-DDTHH:MM:SSZ`
+     * @returns Only specic case it returns false: when a image is available and is loading. That means we wait till it is loaded.
+     *          This function returns true if an image is not available in the store. Or true if it is available and already loaded.
+     */
+  }, {
+    key: "isImageLoadingForTimestep",
+    value: function isImageLoadingForTimestep(isoTime) {
+      var geoRefs = this.getAltGeoReferencedImages(isoTime);
+      if (geoRefs.length === 0) {
         // If there is no image at all for requested timestep, it means that the layer does not advertise data for that timestep.
         // In that case the animation should proceed, so return true here to avoid blocking the animation.
         return true;
       }
       // If it is still loading, we can block the animation going forward.
-      return !image.isLoading;
+      return geoRefs.filter(function (geoRef) {
+        return !geoRef.isLoading();
+      }).length !== 0;
     }
   }, {
     key: "setImageForTimeValue",
@@ -1518,25 +1565,92 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
   }]);
 }(ImageSource);
 
+var WEBMAP_REACT_NAMESPACE = 'webmapreact';
+var useWebmapReactTranslation = function useWebmapReactTranslation() {
+  var ns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : WEBMAP_REACT_NAMESPACE;
+  return useTranslation(ns);
+};
+
 var LegendLayout = function LegendLayout(_ref) {
   var title = _ref.title,
-    name = _ref.name,
-    dimensions = _ref.dimensions,
     children = _ref.children,
     height = _ref.height,
     width = _ref.width,
-    minWidth = _ref.minWidth;
-  return jsxs(Paper, {
+    _ref$showLayerLegend = _ref.showLayerLegend,
+    showLayerLegend = _ref$showLayerLegend === void 0 ? true : _ref$showLayerLegend,
+    toggleLayerLegendVisibility = _ref.toggleLayerLegendVisibility;
+  var _useWebmapReactTransl = useWebmapReactTranslation(),
+    t = _useWebmapReactTransl.t;
+  var theme = useTheme();
+  return jsxs(Card, {
     "data-testid": "legend",
     sx: {
-      padding: '10px',
-      border: '1px solid grey',
-      backgroundColor: '#FFF',
+      border: 'none',
+      // eslint-disable-next-line no-nested-ternary
+      backgroundColor: toggleLayerLegendVisibility ? showLayerLegend ? 'geowebColors.cards.cardContainer' : 'geowebColors.cards.cardContainerDisabled' : '#FFF',
       overflow: 'hidden',
-      marginBottom: 0.5
+      marginBottom: 0.5,
+      boxShadow: 0,
+      borderRadius: '3px',
+      padding: toggleLayerLegendVisibility ? 'none' : '10px'
     },
-    children: [jsx(Box, {
+    children: [toggleLayerLegendVisibility ? jsx(Box, {
+      "data-testid": "legend-title",
+      children: jsx(CustomTooltip, {
+        title: showLayerLegend ? t('webmap-react-hide-layer') : t('webmap-react-show-layer'),
+        children: jsxs(Typography, {
+          alignItems: "center",
+          component: "button",
+          display: "flex",
+          gap: 1,
+          onClick: function onClick(event) {
+            event.stopPropagation();
+            toggleLayerLegendVisibility(!showLayerLegend);
+          },
+          sx: {
+            fontFamily: 'Roboto, Helvetica, Arial',
+            fontSize: '12px',
+            width: "".concat(width, "px"),
+            minWidth: '100%',
+            padding: '4px',
+            margin: '0 0 1px',
+            wordWrap: 'break-word',
+            color: showLayerLegend ? 'geowebColors.typographyAndIcons.text' : 'geowebColors.typographyAndIcons.inactiveText',
+            whiteSpace: 'nowrap',
+            border: showLayerLegend ? 'none' : "1px solid ".concat(theme.palette.geowebColors.cards.cardContainerDisabledBorder),
+            backgroundColor: showLayerLegend ? 'geowebColors.cards.cardContainer' : 'geowebColors.cards.cardContainerDisabled',
+            textAlign: 'left',
+            cursor: 'pointer',
+            '&:hover': {
+              backgroundColor: 'geowebColors.cards.cardContainerMouseOver',
+              border: showLayerLegend ? 'none' : "1px solid ".concat(theme.palette.geowebColors.cards.cardContainerBorder)
+            }
+          },
+          variant: "subtitle2",
+          children: [showLayerLegend ? jsx(Visibility, {
+            fontSize: "medium",
+            sx: {
+              margin: 'auto 0px'
+            }
+          }) : jsx(VisibilityOff, {
+            fontSize: "medium",
+            sx: {
+              margin: 'auto 0px'
+            }
+          }), jsx("span", {
+            style: {
+              overflow: 'hidden',
+              textOverflow: 'ellipsis'
+            },
+            children: title
+          })]
+        })
+      })
+    }) : jsx(Box, {
       "data-testid": "legend-title",
+      sx: {
+        backgroundColor: '#FFF'
+      },
       children: jsx(Typography, {
         sx: {
           fontFamily: 'Roboto, Helvetica, Arial',
@@ -1549,41 +1663,19 @@ var LegendLayout = function LegendLayout(_ref) {
         variant: "h3",
         children: title
       })
-    }), jsx(CustomTooltip, {
+    }), !!showLayerLegend && jsx(CustomTooltip, {
       placement: "top",
       title: title || 'loading',
       children: jsx(Box, {
         sx: {
-          margin: '10px 0px 10px 0px',
+          margin: toggleLayerLegendVisibility ? '2px 0 8px 12px' : '10px 0px 10px 0px',
           height: "".concat(height, "px"),
-          width: "".concat(width, "px")
+          width: "".concat(width, "px"),
+          minWidth: '100%',
+          backgroundColor: '#FFF'
         },
         children: children
       })
-    }), jsx(Box, {
-      "data-testid": "legend-info",
-      sx: _objectSpread2({
-        fontFamily: 'Roboto, Helvetica, Arial',
-        fontSize: 10,
-        color: 'common.black',
-        overflowX: 'hidden',
-        wordWrap: 'break-word',
-        whiteSpace: 'nowrap'
-      }, minWidth && {
-        minWidth: "".concat(minWidth, "px")
-      }),
-      children: dimensions === null || dimensions === void 0 ? void 0 : dimensions.map(function (dim) {
-        return jsx(Box, {
-          children: dim.name === 'time' ? "".concat(dim.currentValue) : jsxs(Fragment, {
-            children: [jsxs(Box, {
-              style: {
-                fontWeight: 500
-              },
-              children: [dim.name, ":"]
-            }), dim.currentValue, " ", dim.units]
-          })
-        }, name + dim.name);
-      })
     })]
   });
 };
@@ -1666,6 +1758,12 @@ var joinUrlParams = function joinUrlParams(params) {
     return x !== undefined && x.length > 0;
   }).join('/');
 };
+// This is a copy from libs/api/src/utils.ts due to circular dependency
+var withJsonFormat = function withJsonFormat(url) {
+  var urlObj = new URL(url);
+  urlObj.searchParams.set('f', 'json');
+  return urlObj.toString();
+};
 var fetchEDRCollectionDetails = /*#__PURE__*/function () {
   var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(edrBaseUrlWithCollection) {
     var instanceId,
@@ -1674,7 +1772,7 @@ var fetchEDRCollectionDetails = /*#__PURE__*/function () {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
           instanceId = _args3.length > 1 && _args3[1] !== undefined ? _args3[1] : '';
-          return _context3.abrupt("return", fetch(joinUrlParams([edrBaseUrlWithCollection, instanceId])).then(handleResponse));
+          return _context3.abrupt("return", fetch(withJsonFormat(joinUrlParams([edrBaseUrlWithCollection, instanceId]))).then(handleResponse));
         case 2:
         case "end":
           return _context3.stop();
@@ -10496,12 +10594,6 @@ var fakeEdrLayerApiHandlers = [http.get('https://gw-edr.pub.knmi.cloud/edr/colle
   });
 })];
 
-var WEBMAP_REACT_NAMESPACE = 'webmapreact';
-var useWebmapReactTranslation = function useWebmapReactTranslation() {
-  var ns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : WEBMAP_REACT_NAMESPACE;
-  return useTranslation(ns);
-};
-
 var defaultCanvasWidth = 150;
 var defaultCanvasHeight = 30;
 /**
@@ -10534,7 +10626,8 @@ var renderLegendGraphic = function renderLegendGraphic(wmImage, ctx, width, heig
 };
 var Legend = function Legend(_ref) {
   var _layer$options;
-  var layer = _ref.layer;
+  var layer = _ref.layer,
+    onToggleLayerLegendVisibility = _ref.onToggleLayerLegendVisibility;
   /* Variable to remember the previous image */
   var previousLegendImage = useRef(null);
   /* Function to force rerender of this component when legend image loads */
@@ -10583,12 +10676,15 @@ var Legend = function Legend(_ref) {
   var wmLayer = webmapUtils.getWMLayerById(layer.id);
   var isEdrLayer = layer.layerType === LayerType.edrFeatureLayer;
   var title = isEdrLayer ? (_layer$options = layer.options) === null || _layer$options === void 0 ? void 0 : _layer$options.collectionId : wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.title;
+  /* Custom legend toggle for layer */
+  var toggleLayerLegendVisibility = function toggleLayerLegendVisibility(showLegend) {
+    return onToggleLayerLegendVisibility(layerId, showLegend);
+  };
   return jsx(LegendLayout, {
-    dimensions: layer === null || layer === void 0 ? void 0 : layer.dimensions,
     height: canvasContainerHeight,
-    minWidth: defaultCanvasWidth,
-    name: wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.name,
+    showLayerLegend: layer === null || layer === void 0 ? void 0 : layer.showLayerLegend,
     title: title,
+    toggleLayerLegendVisibility: toggleLayerLegendVisibility,
     width: canvasContainerWidth,
     children: jsx(CanvasComponent, {
       onRenderCanvas: function onRenderCanvas(ctx, width, height) {
@@ -10663,7 +10759,8 @@ var LegendDialog = function LegendDialog(_ref) {
     _ref$order = _ref.order,
     order = _ref$order === void 0 ? 0 : _ref$order,
     _ref$source = _ref.source,
-    source = _ref$source === void 0 ? 'app' : _ref$source;
+    source = _ref$source === void 0 ? 'app' : _ref$source,
+    onToggleLayerLegendVisibility = _ref.onToggleLayerLegendVisibility;
   var _useWebmapReactTransl = useWebmapReactTranslation(),
     t = _useWebmapReactTransl.t;
   var stopWheelEventPropagationRef = useWheelStopPropagation();
@@ -10692,13 +10789,18 @@ var LegendDialog = function LegendDialog(_ref) {
         sx: {
           display: 'flex',
           flexDirection: 'column',
+          padding: '0 16px',
           '&>div:last-child': {
             marginBottom: 0
+          },
+          '&>div:first-child': {
+            marginTop: '8px'
           }
         },
         children: layers.map(function (layer) {
           return jsx(Legend, {
-            layer: layer
+            layer: layer,
+            onToggleLayerLegendVisibility: onToggleLayerLegendVisibility
           }, layer.id);
         })
       }) : jsx(Typography, {
@@ -11261,19 +11363,36 @@ var LayerInfoText = function LayerInfoText(_ref) {
 
 var LayerInfoLegend = function LayerInfoLegend(_ref) {
   var title = _ref.title,
-    name = _ref.name,
-    dimensions = _ref.dimensions,
-    legendURL = _ref.legendURL;
+    legendURL = _ref.legendURL,
+    showLayerLegend = _ref.showLayerLegend,
+    onToggleLayerLegendVisibility = _ref.onToggleLayerLegendVisibility;
   var _useWebmapReactTransl = useWebmapReactTranslation(),
     t = _useWebmapReactTransl.t;
   return jsxs(Fragment, {
-    children: [jsx(Typography$1, {
-      sx: textStyleWithMargin,
-      variant: "subtitle2",
-      children: t('webmap-react-legend')
+    children: [jsxs(Box, {
+      sx: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        width: '100%'
+      },
+      children: [jsx(Typography$1, {
+        sx: textStyleWithMargin,
+        variant: "subtitle2",
+        children: t('webmap-react-legend')
+      }), jsx(FormGroup, {
+        children: jsx(FormControlLabel, {
+          control: jsx(Checkbox, {
+            checked: showLayerLegend,
+            onChange: function onChange() {
+              onToggleLayerLegendVisibility(!showLayerLegend);
+            }
+          }),
+          label: t('webmap-react-show-layer-legend'),
+          sx: textStyleWithMargin
+        })
+      })]
     }), jsx(LegendLayout, {
-      dimensions: dimensions,
-      name: name,
       title: title,
       children: legendURL ? jsx("img", {
         alt: title,
@@ -11437,7 +11556,9 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
       top: 150,
       left: 900
     } : _ref$startPosition,
-    selectedStyle = _ref.selectedStyle;
+    selectedStyle = _ref.selectedStyle,
+    showLayerLegend = _ref.showLayerLegend,
+    onToggleLayerLegendVisibility = _ref.onToggleLayerLegendVisibility;
   var styles = getLayerStyles(layer);
   var dimensions = getDimensionsList(layer.dimensions);
   var _useWebmapReactTransl = useWebmapReactTranslation(),
@@ -11445,7 +11566,7 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
   var bbox = getLayerBbox(t, layer);
   var legendURL = ((_layer$styles = layer.styles) === null || _layer$styles === void 0 || (_layer$styles = _layer$styles.find(function (styleItem) {
     return styleItem.name === selectedStyle;
-  })) === null || _layer$styles === void 0 ? void 0 : _layer$styles.legendURL) || ((_layer$styles2 = layer.styles) === null || _layer$styles2 === void 0 ? void 0 : _layer$styles2[0].legendURL) ||
+  })) === null || _layer$styles === void 0 ? void 0 : _layer$styles.legendURL) || ((_layer$styles2 = layer.styles) === null || _layer$styles2 === void 0 || (_layer$styles2 = _layer$styles2[0]) === null || _layer$styles2 === void 0 ? void 0 : _layer$styles2.legendURL) ||
   // show first style if none selected
   undefined;
   return jsx(ToolContainerDraggable, {
@@ -11495,9 +11616,9 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
         label: t('webmap-react-keywords'),
         value: ((_layer$keywords = layer.keywords) === null || _layer$keywords === void 0 ? void 0 : _layer$keywords.join(', ')) || '-'
       }), jsx(LayerInfoLegend, {
-        dimensions: layer.dimensions,
         legendURL: legendURL,
-        name: layer.name,
+        onToggleLayerLegendVisibility: onToggleLayerLegendVisibility,
+        showLayerLegend: showLayerLegend,
         title: layer.title
       })]
     })
@@ -11629,7 +11750,7 @@ var MapMousePosition = function MapMousePosition() {
       sx: {
         zIndex: 10,
         justifySelf: 'center',
-        bottom: '36px',
+        bottom: '26px',
         left: '6px',
         position: 'absolute'
       },
@@ -12771,12 +12892,13 @@ var ShowTimeAwareLayerInfo = function ShowTimeAwareLayerInfo(_ref) {
     }
     var itemWidth = Math.round(1000 / timeStepsToCheck.length);
     return timeStepsToCheck.map(function (timeStep, index) {
-      var _layer$getSource;
+      var _layer$getSource, _layer$getSource2;
       var closestValue = (wmTimeDim === null || wmTimeDim === void 0 ? void 0 : wmTimeDim.getClosestValueForTime(timeStep)) || '';
       var requestedStepIsOutsideRange = WMInvalidDateValues.has(closestValue);
-      var requestedStepHasImage = layer === null || layer === void 0 || (_layer$getSource = layer.getSource()) === null || _layer$getSource === void 0 ? void 0 : _layer$getSource.hasImageLoadedForTimeValue(closestValue);
+      var images = (layer === null || layer === void 0 || (_layer$getSource = layer.getSource()) === null || _layer$getSource === void 0 ? void 0 : _layer$getSource.getAltGeoReferencedImages(closestValue)) || [];
       var isSelectedStep = visible && (wmTimeDim === null || wmTimeDim === void 0 ? void 0 : wmTimeDim.currentValue) === closestValue;
-      var colorImageIsAvailable = requestedStepHasImage ? '#40AF50' : '#FF0000';
+      var colorImageIsLoading = layer !== null && layer !== void 0 && (_layer$getSource2 = layer.getSource()) !== null && _layer$getSource2 !== void 0 && _layer$getSource2.hasImageLoadedForTimeValue(closestValue) ? '#40AF50' : '#666666';
+      var colorImageIsAvailable = (images === null || images === void 0 ? void 0 : images.length) > 0 ? colorImageIsLoading : '#FF0000';
       var colorLayerIsOutsideRange = requestedStepIsOutsideRange ? '#5080FA' : colorImageIsAvailable;
       var height = requestedStepIsOutsideRange ? '15px' : '20px';
       var top = requestedStepIsOutsideRange ? '5px' : '2px';
@@ -12885,7 +13007,8 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
     layerOptions = _ref.layerOptions,
     styleName = _ref.styleName,
     layerName = _ref.layerName,
-    dimensions = _ref.dimensions,
+    _ref$dimensions = _ref.dimensions,
+    dimensions = _ref$dimensions === void 0 ? [] : _ref$dimensions,
     debugMode = _ref.debugMode,
     _ref$visible = _ref.visible,
     visible = _ref$visible === void 0 ? true : _ref$visible,
@@ -13861,7 +13984,8 @@ var TimeAwareEDRLocationLayer = function TimeAwareEDRLocationLayer(_ref) {
     style = _ref.style,
     zIndex = _ref.zIndex,
     opacity = _ref.opacity,
-    dimensions = _ref.dimensions,
+    _ref$dimensions = _ref.dimensions,
+    dimensions = _ref$dimensions === void 0 ? [] : _ref$dimensions,
     layerId = _ref.layerId,
     _ref$visible = _ref.visible,
     visible = _ref$visible === void 0 ? true : _ref$visible,
@@ -14255,7 +14379,8 @@ var TimeAwareGeoTIFFLayer = function TimeAwareGeoTIFFLayer(_ref) {
     _ref.style;
     var zIndex = _ref.zIndex,
     opacity = _ref.opacity,
-    dimensions = _ref.dimensions,
+    _ref$dimensions = _ref.dimensions,
+    dimensions = _ref$dimensions === void 0 ? [] : _ref$dimensions,
     layerId = _ref.layerId,
     _ref$visible = _ref.visible,
     visible = _ref$visible === void 0 ? true : _ref$visible,
@@ -14347,7 +14472,8 @@ var registerProjection = function registerProjection(wkt2) {
 var TimeAwareWMTSLayer = function TimeAwareWMTSLayer(_ref) {
   var getCapsURL = _ref.getCapsURL,
     layerName = _ref.layerName,
-    dimensions = _ref.dimensions,
+    _ref$dimensions = _ref.dimensions,
+    dimensions = _ref$dimensions === void 0 ? [] : _ref$dimensions,
     layerOptions = _ref.layerOptions,
     layerId = _ref.layerId,
     onInitializeLayer = _ref.onInitializeLayer,
@@ -16357,6 +16483,7 @@ var drawStyles = {
   POINT: pointFeatureStyle,
   MULTIPOINT: pointFeatureStyle,
   LOCATION: locationFeatureStyle,
+  ROTATABLEBOX: drawPolygonLikeFeatureStyle,
   DELETE: [],
   '': []
 };
@@ -16372,6 +16499,7 @@ var modifyStyles = {
   POINT: modifyPointFeatureStyle,
   MULTIPOINT: modifyPointFeatureStyle,
   LOCATION: locationFeatureStyle,
+  ROTATABLEBOX: boxModificationStyle,
   DELETE: [],
   '': []
 };
@@ -16406,6 +16534,7 @@ var DRAWMODE;
   DRAWMODE["OVAL"] = "OVAL";
   DRAWMODE["LOCATION"] = "LOCATION";
   DRAWMODE["FREEHANDLINE"] = "FREEHANDLINE";
+  DRAWMODE["ROTATABLEBOX"] = "ROTATABLEBOX";
 })(DRAWMODE || (DRAWMODE = {}));
 
 var createDrawOperation = function createDrawOperation(type) {
@@ -16425,6 +16554,7 @@ var createDrawOperation = function createDrawOperation(type) {
         geometryFunction: createRegularPolygon(4)
       };
     case 'BOX':
+    case 'ROTATABLEBOX':
       return {
         type: 'Circle',
         geometryFunction: createBox()
@@ -16469,6 +16599,8 @@ var selectionTypeToDrawModeValue = function selectionTypeToDrawModeValue(selecti
       return DRAWMODE.SQUARE;
     case 'box':
       return DRAWMODE.BOX;
+    case 'rotatable-box':
+      return DRAWMODE.ROTATABLEBOX;
     case 'oval':
       return DRAWMODE.OVAL;
     case 'point':
@@ -16679,7 +16811,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
         var handlePoints = getBoxRotateHandlePoints(featureToRotate, resolution);
         var prevIndex = featureToRotate.get('activeRotateHandleIndex');
         var newIndex;
-        if (!handlePoints || !resolution) {
+        if (!handlePoints || !resolution || !isBoxOrSquareRotatable) {
           newIndex = undefined;
         } else {
           var coord = map.getEventCoordinate(event);
@@ -16722,7 +16854,8 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
     };
     window.addEventListener('keydown', deleteVertexOnDeleteKey);
     var isSquare = actualDrawMode === DRAWMODE.SQUARE;
-    var isBoxOrSquare = actualDrawMode === DRAWMODE.BOX || isSquare;
+    var isBoxOrSquareRotatable = actualDrawMode === DRAWMODE.ROTATABLEBOX || isSquare;
+    var isBoxOrSquare = actualDrawMode === DRAWMODE.BOX || isBoxOrSquareRotatable;
     // Modifying is a combination of Modify and Translate interactions
     var modify = new Modify({
       features: editFeatureCollection,
@@ -16838,7 +16971,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
       isPointerDownNearCorner = false;
     };
     var startRotateIfOnHandle = function startRotateIfOnHandle(event) {
-      if (!isBoxOrSquare || !selectedFeatureHasGeometry) {
+      if (!isBoxOrSquareRotatable || !selectedFeatureHasGeometry) {
         return;
       }
       var featureToRotate = editFeatureCollection.item(0);
@@ -17099,6 +17232,7 @@ var getIcon = function getIcon(selectionType) {
     case 'poly':
       return jsx(DrawToolPolygon, {});
     case 'box':
+    case 'rotatable-box':
       return jsx(DrawToolRectangle, {});
     case 'linestring':
       return jsx(DrawToolLineString, {});
@@ -17208,8 +17342,16 @@ var defaultSmoothLine = {
   isSelectable: true,
   selectionType: 'smooth-line'
 };
-var defaultModes = [defaultPolygon, defaultLineString, defaultFreehandLine, defaultOval, defaultCircle, defaultBox, defaultSquare, defaultPoint, defaultLocation, defaultDelete];
-var currentlySupportedDrawModes = [defaultPolygon, defaultLineString, defaultFreehandLine, defaultCircle, defaultSquare, defaultPoint, defaultDelete, defaultSmoothLine, defaultOval, defaultBox, defaultLocation];
+var defaultRotatableBox = {
+  drawModeId: 'drawtools-rotatable-box',
+  value: DRAWMODE.ROTATABLEBOX,
+  title: "".concat(WEBMAP_REACT_NAMESPACE, ":webmap-react-rotatable-box"),
+  shape: emptyPolygon,
+  isSelectable: true,
+  selectionType: 'rotatable-box'
+};
+var defaultModes = [defaultPolygon, defaultLineString, defaultFreehandLine, defaultOval, defaultCircle, defaultBox, defaultSquare, defaultPoint, defaultLocation, defaultDelete, defaultRotatableBox];
+var currentlySupportedDrawModes = [defaultPolygon, defaultLineString, defaultFreehandLine, defaultCircle, defaultSquare, defaultPoint, defaultDelete, defaultSmoothLine, defaultOval, defaultBox, defaultLocation, defaultRotatableBox];
 var useMapDrawTool = function useMapDrawTool(_ref) {
   var _ref$defaultDrawModes = _ref.defaultDrawModes,
     defaultDrawModes = _ref$defaultDrawModes === void 0 ? defaultModes : _ref$defaultDrawModes,
@@ -19047,84 +19189,124 @@ var dateToManualFormatString = function dateToManualFormatString(inDate) {
   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 getButtonSizes = function getButtonSizes(fontSize) {
+  if (fontSize > 40) {
+    return {
+      buttonSize: 'large',
+      iconSize: 40
+    };
+  }
+  if (fontSize > 24) {
+    return {
+      buttonSize: 'medium',
+      iconSize: 32
+    };
+  }
+  return {
+    buttonSize: 'small',
+    iconSize: 24
+  };
+};
 var ClockContainer = function ClockContainer(_ref) {
-  var fontSize = _ref.fontSize,
-    onButtonClick = _ref.onButtonClick,
-    time = _ref.time;
+  var _ref$isOptionsMenuVis = _ref.isOptionsMenuVisible,
+    isOptionsMenuVisible = _ref$isOptionsMenuVis === void 0 ? false : _ref$isOptionsMenuVis,
+    fontSize = _ref.fontSize,
+    onToggleClock = _ref.onToggleClock,
+    time = _ref.time,
+    onToggleOptions = _ref.onToggleOptions,
+    optionsElement = _ref.optionsElement;
   var _useWebmapReactTransl = useWebmapReactTranslation(),
     t = _useWebmapReactTransl.t;
   var title = t('clock-hide');
+  var optionsTitle = t('clock-animation-options');
   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, {
+  var _getButtonSizes = getButtonSizes(fontSize),
+    buttonSize = _getButtonSizes.buttonSize,
+    iconSize = _getButtonSizes.iconSize;
+  return jsx(ThemeProvider, {
+    theme: darkTheme,
+    children: jsxs(Grid, {
+      container: true,
       sx: {
-        width: '4px'
-      }
-    }), jsx(CustomTooltip, {
-      title: title,
-      children: jsx(Grid, {
+        justifyContent: 'space-evenly',
+        alignItems: 'center',
+        cursor: 'move',
+        height: '100%',
+        width: '100%',
+        backgroundColor: 'geowebColors.timeSlider.playerTimeMarkers.fill',
+        borderRadius: '5px'
+      },
+      wrap: "nowrap",
+      children: [jsx(Grid, {
         sx: {
-          zIndex: 2
+          marginLeft: '12px',
+          marginRight: '12px'
         },
-        children: jsx(ThemeProvider, {
-          theme: darkTheme,
-          children: jsx(CustomIconButton, {
-            "aria-label": title,
-            onClick: onButtonClick,
-            variant: "boxed",
-            children: jsx(ChevronRight, {})
+        children: jsx(CustomIconButton, {
+          "aria-label": title,
+          onClick: onToggleClock,
+          size: buttonSize,
+          tooltipTitle: title,
+          variant: "boxed",
+          children: jsx(ChevronRight, {
+            sx: {
+              width: iconSize,
+              height: iconSize
+            }
           })
         })
-      })
-    }), jsx(Grid, {
-      children: jsx(Typography, {
+      }), jsx(Grid, {
+        children: jsx(Typography, {
+          sx: {
+            whiteSpace: 'nowrap',
+            fontSize: fontSize,
+            color: 'geowebColors.timeSlider.playerTimeText.color'
+          },
+          variant: "subtitle2",
+          children: currentDateString
+        })
+      }), jsx(Grid, {
         sx: {
-          whiteSpace: 'nowrap',
-          fontSize: fontSize,
-          color: '#fff'
+          marginLeft: '12px',
+          marginRight: '12px'
         },
-        variant: "subtitle2",
-        children: currentDateString
-      })
-    })]
+        children: jsx(CustomIconButton, {
+          "aria-label": optionsTitle,
+          isSelected: isOptionsMenuVisible,
+          onClick: onToggleOptions,
+          ref: optionsElement,
+          size: buttonSize,
+          tooltipTitle: optionsTitle,
+          variant: "boxed",
+          children: jsx(Options, {
+            sx: {
+              width: iconSize,
+              height: iconSize
+            }
+          })
+        })
+      })]
+    })
   });
 };
 
-var MIN_WIDTH = 170;
+var MIN_WIDTH = 240;
 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,
+  topRight: true,
+  bottomRight: true,
   bottomLeft: true,
-  topLeft: false
+  topLeft: true
 };
 var Clock = function Clock(_ref2) {
-  var time = _ref2.time,
+  var optionsElement = _ref2.optionsElement,
+    time = _ref2.time,
     _ref2$isVisible = _ref2.isVisible,
     isClockVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
     onToggleClock = _ref2.onToggleClock,
@@ -19139,7 +19321,10 @@ var Clock = function Clock(_ref2) {
       width: MIN_WIDTH,
       height: MIN_HEIGHT
     } : _ref2$size,
-    onSetSize = _ref2.onSetSize;
+    onSetSize = _ref2.onSetSize,
+    onToggleOptions = _ref2.onToggleOptions,
+    _ref2$isOptionsMenuVi = _ref2.isOptionsMenuVisible,
+    isOptionsMenuVisible = _ref2$isOptionsMenuVi === void 0 ? false : _ref2$isOptionsMenuVi;
   var _useWebmapReactTransl = useWebmapReactTranslation(),
     t = _useWebmapReactTransl.t;
   var clockElement = useRef(null);
@@ -19163,6 +19348,9 @@ var Clock = function Clock(_ref2) {
   var setSize = function setSize(size) {
     onSetSize === null || onSetSize === void 0 || onSetSize(size);
   };
+  var toggleOptions = function toggleOptions() {
+    onToggleOptions === null || onToggleOptions === void 0 || onToggleOptions();
+  };
   return jsx(Fragment, {
     children: !isClockVisible ? jsx(CustomIconButton, {
       "aria-label": t('clock-show'),
@@ -19190,9 +19378,7 @@ var Clock = function Clock(_ref2) {
       },
       position: position,
       children: jsx("div", {
-        ref: function ref(_ref3) {
-          clockElement.current = _ref3;
-        },
+        ref: clockElement,
         style: {
           position: 'absolute',
           zIndex: 1001,
@@ -19201,17 +19387,9 @@ var Clock = function Clock(_ref2) {
         },
         children: jsx(Resizable, {
           enable: resizeHandlePlacement,
-          handleComponent: {
-            bottomLeft: jsx(Resize, {
-              isRightAligned: true,
-              style: {
-                fill: '#FFFFFF'
-              }
-            })
-          },
           lockAspectRatio: true,
           minHeight: MIN_HEIGHT,
-          minWidth: MIN_WIDTH + BUTTON_WIDTH,
+          minWidth: MIN_WIDTH,
           nodeRef: clockElement,
           onResize: function onResize(_event, _direction, _ref, delta) {
             var width = size.width + delta.width;
@@ -19235,9 +19413,12 @@ var Clock = function Clock(_ref2) {
           size: size,
           children: jsx(ClockContainer, {
             fontSize: fontSize,
-            onButtonClick: function onButtonClick() {
+            isOptionsMenuVisible: isOptionsMenuVisible,
+            onToggleClock: function onToggleClock() {
               toggleClock(false);
             },
+            onToggleOptions: toggleOptions,
+            optionsElement: optionsElement,
             time: time
           })
         })
@@ -19322,4 +19503,4 @@ var getLayerUpdateInfo = function getLayerUpdateInfo(wmLayer, mapId) {
   return updateObject;
 };
 
-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, MIN_HEIGHT, MIN_WIDTH, 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 };
+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, MIN_HEIGHT, MIN_WIDTH, 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, defaultRotatableBox, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap-react",
-  "version": "15.2.0",
+  "version": "16.0.0",
   "description": "GeoWeb react wrapper for webmap",
   "license": "Apache-2.0",
   "repository": {
@@ -8,9 +8,9 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/webmap": "15.2.0",
-    "@opengeoweb/theme": "15.2.0",
-    "@opengeoweb/shared": "15.2.0",
+    "@opengeoweb/webmap": "16.0.0",
+    "@opengeoweb/theme": "16.0.0",
+    "@opengeoweb/shared": "16.0.0",
     "lodash": "^4.17.21",
     "ol": "^10.4.0",
     "proj4": "^2.9.2",

package/src/lib/components/Clock/Clock.d.ts

@@ -1,5 +1,5 @@
-import type { FC } from 'react';
-export declare const MIN_WIDTH = 170;
+import type { FC, Ref } from 'react';
+export declare const MIN_WIDTH = 240;
 export declare const MIN_HEIGHT = 32;
 export interface Position {
     x: number;
@@ -10,6 +10,7 @@ export interface Size {
     height: number;
 }
 export declare const Clock: FC<{
+    optionsElement: Ref<HTMLButtonElement>;
     time: number;
     isVisible?: boolean;
     onToggleClock?: (isVisible: boolean) => void;
@@ -17,4 +18,6 @@ export declare const Clock: FC<{
     onSetPosition: (position: Position) => void;
     size?: Size | undefined;
     onSetSize: (size: Size) => void;
+    onToggleOptions?: () => void;
+    isOptionsMenuVisible?: boolean;
 }>;

package/src/lib/components/Clock/ClockContainer.d.ts

@@ -1,13 +1,9 @@
-import type { FC } from 'react';
-/**
- * Format a date to a string
- *
- * Expects the following props:
- * @param {Date} inDate - date to be formatted
- *
- */
+import type { FC, Ref } from 'react';
 export declare const ClockContainer: FC<{
-    onButtonClick: () => void;
+    isOptionsMenuVisible?: boolean;
+    onToggleClock: () => void;
+    onToggleOptions: () => void;
+    optionsElement: Ref<HTMLButtonElement>;
     fontSize: number;
     time: number;
 }>;

package/src/lib/components/LayerInfo/LayerInfoDialog.d.ts

@@ -12,5 +12,7 @@ export interface LayerInfoDialogProps {
     dialogHeight?: number;
     startPosition?: Position;
     selectedStyle?: string;
+    showLayerLegend: boolean;
+    onToggleLayerLegendVisibility: (showLegend: boolean) => void;
 }
 export declare const LayerInfoDialog: React.FC<LayerInfoDialogProps>;

package/src/lib/components/LayerInfo/LayerInfoLegend.d.ts

@@ -1,8 +1,7 @@
-import type { Dimension } from '@opengeoweb/webmap';
 export interface LayerInfoLegendProps {
     title: string;
-    name: string;
-    dimensions: Dimension[];
     legendURL?: string;
+    showLayerLegend: boolean;
+    onToggleLayerLegendVisibility: (showLegend: boolean) => void;
 }
 export declare const LayerInfoLegend: React.FC<LayerInfoLegendProps>;

package/src/lib/components/Legend/Legend.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { LayerFoundation } from '@opengeoweb/webmap';
 interface LegendProps {
     layer: LayerFoundation;
+    onToggleLayerLegendVisibility: (layerId: string, showLegend: boolean) => void;
 }
 export declare const Legend: React.FC<LegendProps>;
 export {};

package/src/lib/components/Legend/LegendDialog.d.ts

@@ -10,6 +10,7 @@ interface LegendDialogProps {
     showMapId?: boolean;
     order?: number;
     source?: Source;
+    onToggleLayerLegendVisibility: (layerId: string, showLegend: boolean) => void;
 }
 export declare const LegendDialog: React.FC<LegendDialogProps>;
 export {};

package/src/lib/components/Legend/LegendLayout.d.ts

@@ -1,12 +1,10 @@
-import type { Dimension } from '@opengeoweb/webmap';
 interface LegendLayoutProps {
     title: string;
-    name: string;
-    dimensions: Dimension[];
     children: React.ReactNode;
     height?: number;
     width?: number;
-    minWidth?: number;
+    showLayerLegend?: boolean;
+    toggleLayerLegendVisibility?: (showLegend: boolean) => void;
 }
 export declare const LegendLayout: React.FC<LegendLayoutProps>;
 export {};

package/src/lib/components/OpenLayers/OpenLayersMapView.NoTimeDim.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { OpenLayersMapView } from '.';
+declare const meta: Meta<typeof OpenLayersMapView>;
+export default meta;
+type Story = StoryObj<typeof OpenLayersMapView>;
+export declare const MapViewNoTimeDim: Story;

package/src/lib/components/OpenLayers/draw/index.d.ts

@@ -1,6 +1,6 @@
 export * from './OpenLayersMapDraw';
 export * from './types';
-export { useMapDrawTool, defaultPoint, defaultDelete, defaultPolygon, defaultBox, defaultLocation, defaultIntersectionStyleProperties, defaultSmoothLine, defaultCircle, defaultFreehandLine, defaultLineString, defaultOval, defaultSquare, getIcon, currentlySupportedDrawModes, defaultModes, } from './useMapDrawTool';
+export { useMapDrawTool, defaultPoint, defaultDelete, defaultPolygon, defaultBox, defaultLocation, defaultIntersectionStyleProperties, defaultSmoothLine, defaultCircle, defaultFreehandLine, defaultLineString, defaultOval, defaultSquare, defaultRotatableBox, getIcon, currentlySupportedDrawModes, defaultModes, } from './useMapDrawTool';
 export type { MapDrawToolOptions } from './useMapDrawTool';
 export * from './utils';
 export * from './storyExamplesMapDrawTool';

package/src/lib/components/OpenLayers/draw/types.d.ts

@@ -10,7 +10,8 @@ export declare enum DRAWMODE {
     SQUARE = "SQUARE",
     OVAL = "OVAL",
     LOCATION = "LOCATION",
-    FREEHANDLINE = "FREEHANDLINE"
+    FREEHANDLINE = "FREEHANDLINE",
+    ROTATABLEBOX = "ROTATABLEBOX"
 }
 export interface FeatureEvent {
     coordinateIndexInFeature: number;

package/src/lib/components/OpenLayers/draw/useMapDrawTool.d.ts

@@ -53,6 +53,7 @@ export declare const defaultFreehandLine: DrawMode;
 export declare const defaultOval: DrawMode;
 export declare const defaultLocation: DrawMode;
 export declare const defaultSmoothLine: DrawMode;
+export declare const defaultRotatableBox: DrawMode;
 export declare const defaultModes: DrawMode[];
 export declare const currentlySupportedDrawModes: DrawMode[];
 export declare const useMapDrawTool: ({ defaultDrawModes, shouldAllowMultipleShapes, defaultGeoJSON, defaultGeoJSONIntersection, defaultGeoJSONIntersectionBounds, defaultGeoJSONIntersectionProperties, geoJSONLayerId, geoJSONIntersectionLayerId, geoJSONIntersectionBoundsLayerId, projection, }: MapDrawToolOptions) => MapDrawToolProps;

package/src/lib/components/OpenLayers/utils/TimeawareImageSource.d.ts

@@ -2,6 +2,7 @@ import type { Extent } from 'ol/extent';
 import type ImageWrapper from 'ol/Image';
 import type { Projection } from 'ol/proj';
 import ImageSource from 'ol/source/Image';
+import type { WMImage } from '@opengeoweb/webmap';
 import TimeAwareImageWrapper from './TimeAwareImageWrapper';
 export declare const initImageWrapper: () => TimeAwareImageWrapper;
 interface TimeawareImageSourceOptions {
@@ -47,11 +48,18 @@ export declare class TimeawareImageSource extends ImageSource {
     getImage(extent: Extent, resolution: number, pixelRatio: number, projection: Projection): ImageWrapper;
     setDimProps(params: Record<string, string>): void;
     /**
-     * Check if an image is available and loaded for requested date. Used for animation to proceed.
+     * Check if an image is available and loaded for requested date. Used for showlayerinfo to proceed.
      * @param isoTime
      * @returns
      */
     hasImageLoadedForTimeValue(isoTime: string): boolean;
+    getAltGeoReferencedImages(isoTime: string): WMImage[];
+    /**
+     * This function can be used to determine if the animation can proceed to the next step.
+     * @param isoTime ISO8601 string formatat like `YYYY-MM-DDTHH:MM:SSZ`
+     * @returns Only specic case it returns false: when a image is available and is loading. That means we wait till it is loaded.
+     *          This function returns true if an image is not available in the store. Or true if it is available and already loaded.
+     */
     isImageLoadingForTimestep(isoTime: string): boolean;
     setImageForTimeValue(timeStampsToPrefetch: string): void;
     setStyle(styleName: string): void;

package/src/lib/components/OpenLayers/utils/TimeawareImageSource.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/src/lib/components/OpenLayers/utils/makeDimValuesToPrefetch.d.ts

@@ -1,5 +1,12 @@
 import type { WMJSDimension, Dimension, WMLayer } from '@opengeoweb/webmap';
 import type { Timespan } from '../types/Timespan';
+/**
+ *
+ * @param wmTimeDim WMDimension time containing dimension values
+ * @param stepsToCheck Array with timestamps as posix timestamps to check
+ * @param isAnimating If the application is running an animation loop
+ * @returns A string list with ISO8601 values to fetch
+ */
 export declare const makeDimValuesToPrefetch: (wmTimeDim: WMJSDimension, stepsToCheck: number[], isAnimating: boolean) => string[];
 export declare const extendPrefetchListWithModelRunTimeSteps: (wmLayer: WMLayer, stepsToCheck: number[]) => number[];
 /**
@@ -10,7 +17,7 @@ export declare const extendPrefetchListWithModelRunTimeSteps: (wmLayer: WMLayer,
  * @param wmLayer The layer for which we would like to do the request
  * @returns A map which returns a key/value to use
  */
-export declare const getDimensionParamsForWMS: (dimensions: Dimension[] | undefined, wmLayer: WMLayer | null) => Record<string, string> | undefined;
+export declare const getDimensionParamsForWMS: (dimensions: Dimension[], wmLayer: WMLayer | null) => Record<string, string> | undefined;
 /**
  * Calculates number of timesteps for given timespan
  * @param timespan Object of Timespan, with start/stop/end in milliseconds