@opengeoweb/webmap-react 15.1.0 → 15.3.0

package/index.esm.js

@@ -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",
@@ -147,6 +148,7 @@ 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",
@@ -195,6 +197,7 @@ 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",
@@ -243,6 +246,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",
@@ -818,6 +822,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 +877,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 +1031,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 +1052,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 +1075,6 @@ var TimeAwareImageWrapper = /*#__PURE__*/function (_ImageWrapper) {
       this.setImage(el);
       this.extent = extent;
       this.resolution = resolution;
-      // this.projection = projection;/?TODO
     }
   }, {
     key: "load",
@@ -1076,7 +1084,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 +1445,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 +1453,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 +1467,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",
@@ -11419,7 +11450,7 @@ var getDimensionsList = function getDimensionsList(dimensions) {
 };
 
 var LayerInfoDialog = function LayerInfoDialog(_ref) {
-  var _layer$path, _layer$keywords, _layer$styles;
+  var _layer$styles, _layer$styles2, _layer$path, _layer$keywords;
   var onClose = _ref.onClose,
     layer = _ref.layer,
     serviceName = _ref.serviceName,
@@ -11436,12 +11467,18 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
     startPosition = _ref$startPosition === void 0 ? {
       top: 150,
       left: 900
-    } : _ref$startPosition;
+    } : _ref$startPosition,
+    selectedStyle = _ref.selectedStyle;
   var styles = getLayerStyles(layer);
   var dimensions = getDimensionsList(layer.dimensions);
   var _useWebmapReactTransl = useWebmapReactTranslation(),
     t = _useWebmapReactTransl.t;
   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) ||
+  // show first style if none selected
+  undefined;
   return jsx(ToolContainerDraggable, {
     isOpen: isOpen,
     onClose: onClose,
@@ -11490,7 +11527,7 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
         value: ((_layer$keywords = layer.keywords) === null || _layer$keywords === void 0 ? void 0 : _layer$keywords.join(', ')) || '-'
       }), jsx(LayerInfoLegend, {
         dimensions: layer.dimensions,
-        legendURL: (_layer$styles = layer.styles) !== null && _layer$styles !== void 0 && _layer$styles.length ? layer.styles[0].legendURL : undefined,
+        legendURL: legendURL,
         name: layer.name,
         title: layer.title
       })]
@@ -12047,12 +12084,13 @@ var addFeatureProperties = function addFeatureProperties(geojson, featurePropert
  * @returns Whether `feature` is empty or not
  */
 var isGeoJSONGeometryEmpty = function isGeoJSONGeometryEmpty(feature) {
-  return feature.geometry && (feature.geometry.type === 'Polygon' && feature.geometry.coordinates && feature.geometry.coordinates.length === 1 && feature.geometry.coordinates[0].length === 0 || feature.geometry.type === 'LineString' && feature.geometry.coordinates && feature.geometry.coordinates.length === 0 || feature.geometry.type === 'Point' && feature.geometry.coordinates && feature.geometry.coordinates.length === 0);
+  var _feature$geometry$coo, _feature$geometry$coo2, _feature$geometry$coo3;
+  return feature.geometry && (feature.geometry.type === 'Polygon' && ((_feature$geometry$coo = feature.geometry.coordinates) === null || _feature$geometry$coo === void 0 ? void 0 : _feature$geometry$coo.length) === 1 && feature.geometry.coordinates[0].length === 0 || feature.geometry.type === 'LineString' && ((_feature$geometry$coo2 = feature.geometry.coordinates) === null || _feature$geometry$coo2 === void 0 ? void 0 : _feature$geometry$coo2.length) === 0 || feature.geometry.type === 'Point' && ((_feature$geometry$coo3 = feature.geometry.coordinates) === null || _feature$geometry$coo3 === void 0 ? void 0 : _feature$geometry$coo3.length) === 0);
 };
 var getGeoJSONPropertyValue = function getGeoJSONPropertyValue(property, properties, polygonDrawMode) {
   var defaultProperties = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : defaultGeoJSONStyleProperties;
   // if a shape is set, extract the style from there
-  if (properties && properties[property] !== undefined) {
+  if ((properties === null || properties === void 0 ? void 0 : properties[property]) !== undefined) {
     return properties[property];
   }
   // if active polygon tool is preset, retreive style from there
@@ -12107,7 +12145,7 @@ var moveFeature = function moveFeature(currentGeoJSON, newGeoJSON, featureLayerI
       newGeoJSON.features.push(_copyFeature);
       return newGeoJSON.features.length - 1;
     }
-    if (geometry.type === 'Point' && currentFeature && currentFeature.geometry.type === 'Point' && currentFeature.geometry.coordinates.length > 0 && reason === NEW_POINT_CREATED) {
+    if (geometry.type === 'Point' && (currentFeature === null || currentFeature === void 0 ? void 0 : currentFeature.geometry.type) === 'Point' && currentFeature.geometry.coordinates.length > 0 && reason === NEW_POINT_CREATED) {
       var _copyFeature2 = _objectSpread2(_objectSpread2({}, currentFeature), selectionType && {
         properties: _objectSpread2(_objectSpread2({}, feature.properties), {}, {
           selectionType: selectionType
@@ -12764,12 +12802,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';
@@ -12878,7 +12917,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,
@@ -13738,7 +13778,7 @@ var FeatureLayer = function FeatureLayer(_ref) {
     var previousHover = [];
     var pointerMoveFunction = debounce(function (evt) {
       var hoveredFeature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
-        if (!layer || layer.getSource() !== source) {
+        if (!layer || (layer === null || layer === void 0 ? void 0 : layer.getSource()) !== source) {
           return false;
         }
         return feature;
@@ -13854,7 +13894,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,
@@ -14248,7 +14289,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,
@@ -14340,7 +14382,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,
@@ -15422,11 +15465,11 @@ var FEATURE_VERTICES_EDIT_HANDLES = new Style$1({
   image: FEATURE_VERTICE_IMAGE,
   geometry: function geometry(feature) {
     var geom = feature === null || feature === void 0 ? void 0 : feature.getGeometry();
-    if (geom && geom.getType() === 'Polygon') {
+    if ((geom === null || geom === void 0 ? void 0 : geom.getType()) === 'Polygon') {
       var coordinates = geom.getCoordinates()[0];
       return new MultiPoint(coordinates);
     }
-    if (geom && geom.getType() === 'LineString') {
+    if ((geom === null || geom === void 0 ? void 0 : geom.getType()) === 'LineString') {
       var _coordinates = geom.getCoordinates();
       return new MultiPoint(_coordinates);
     }
@@ -15937,7 +15980,7 @@ var drawPolygonLikeFeatureStyle = function drawPolygonLikeFeatureStyle(feature)
     image: FEATURE_VERTICE_IMAGE,
     geometry: function geometry(feature) {
       var geom = feature === null || feature === void 0 ? void 0 : feature.getGeometry();
-      if (geom && geom.getType() === 'LineString') {
+      if ((geom === null || geom === void 0 ? void 0 : geom.getType()) === 'LineString') {
         var coordinates = geom.getCoordinates();
         return new MultiPoint(coordinates);
       }
@@ -16190,7 +16233,7 @@ var createBoxBasedOnModifiedVertex = function createBoxBasedOnModifiedVertex(mod
 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') {
+  if (!geom || (geom === null || geom === void 0 ? void 0 : geom.getType()) !== 'Polygon') {
     return undefined;
   }
   var ring = geom.getCoordinates()[0];
@@ -16350,6 +16393,7 @@ var drawStyles = {
   POINT: pointFeatureStyle,
   MULTIPOINT: pointFeatureStyle,
   LOCATION: locationFeatureStyle,
+  ROTATABLEBOX: drawPolygonLikeFeatureStyle,
   DELETE: [],
   '': []
 };
@@ -16365,6 +16409,7 @@ var modifyStyles = {
   POINT: modifyPointFeatureStyle,
   MULTIPOINT: modifyPointFeatureStyle,
   LOCATION: locationFeatureStyle,
+  ROTATABLEBOX: boxModificationStyle,
   DELETE: [],
   '': []
 };
@@ -16399,6 +16444,7 @@ var DRAWMODE;
   DRAWMODE["OVAL"] = "OVAL";
   DRAWMODE["LOCATION"] = "LOCATION";
   DRAWMODE["FREEHANDLINE"] = "FREEHANDLINE";
+  DRAWMODE["ROTATABLEBOX"] = "ROTATABLEBOX";
 })(DRAWMODE || (DRAWMODE = {}));
 
 var createDrawOperation = function createDrawOperation(type) {
@@ -16418,6 +16464,7 @@ var createDrawOperation = function createDrawOperation(type) {
         geometryFunction: createRegularPolygon(4)
       };
     case 'BOX':
+    case 'ROTATABLEBOX':
       return {
         type: 'Circle',
         geometryFunction: createBox()
@@ -16462,6 +16509,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':
@@ -16503,7 +16552,9 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
     geojson = _ref.geojson,
     selectedFeatureIndex = _ref.selectedFeatureIndex,
     exitDrawModeCallback = _ref.exitDrawModeCallback,
-    updateGeojson = _ref.updateGeojson;
+    updateGeojson = _ref.updateGeojson,
+    onViewOnlyFeatureClick = _ref.onViewOnlyFeatureClick,
+    onNoFeatureClick = _ref.onNoFeatureClick;
   var _React$useContext = React.useContext(MapContext),
     map = _React$useContext.map;
   var projection = useProjection();
@@ -16532,7 +16583,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
       style: viewOnlyStyle,
       zIndex: 1000000 - 1
     });
-    var editFeatureCollection = new Collection([allFeatures[selectedFeatureIndex]]);
+    var editFeatureCollection = new Collection(allFeatures[selectedFeatureIndex] ? [allFeatures[selectedFeatureIndex]] : []);
     var source = new VectorSource({
       features: editFeatureCollection
     });
@@ -16546,6 +16597,26 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
     map.addLayer(layer);
     map.addLayer(viewOnlyLayer);
     var interactions = [];
+    var handleSingleClick = (onViewOnlyFeatureClick || onNoFeatureClick) && function (event) {
+      var features = [];
+      map.forEachFeatureAtPixel(event.pixel, function (featureAtPixel, layerAtPixel) {
+        if (layerAtPixel === viewOnlyLayer || layerAtPixel === layer) {
+          features.push(featureAtPixel);
+        }
+      }, {
+        layerFilter: function layerFilter(layerAtPixel) {
+          return layerAtPixel === viewOnlyLayer || layerAtPixel === layer;
+        }
+      });
+      if (features.length) {
+        onViewOnlyFeatureClick === null || onViewOnlyFeatureClick === void 0 || onViewOnlyFeatureClick(features);
+      } else {
+        onNoFeatureClick === null || onNoFeatureClick === void 0 || onNoFeatureClick();
+      }
+    };
+    if (handleSingleClick) {
+      map.on('singleclick', handleSingleClick);
+    }
     var updateFeature = function updateFeature(feature) {
       var _feature$getGeometry;
       // Convert Circle to Polygon for GeoJSON serialization
@@ -16624,6 +16695,20 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
     var lastPointerEvent = null;
     var trackPointerMove = function trackPointerMove(event) {
       lastPointerEvent = event;
+      if (onViewOnlyFeatureClick) {
+        var pixel = map.getEventPixel(event);
+        var hasViewOnlyHit = false;
+        map.forEachFeatureAtPixel(pixel, function (_featureAtPixel, layerAtPixel) {
+          if (layerAtPixel === viewOnlyLayer) {
+            hasViewOnlyHit = true;
+          }
+        }, {
+          layerFilter: function layerFilter(layerAtPixel) {
+            return layerAtPixel === viewOnlyLayer;
+          }
+        });
+        map.getViewport().style.cursor = hasViewOnlyHit ? 'pointer' : '';
+      }
       // 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.
@@ -16636,7 +16721,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);
@@ -16679,7 +16764,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,
@@ -16698,7 +16784,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
         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) {
+        if (viewport !== null && viewport !== void 0 && viewport.style) {
           viewport.style.cursor = 'grabbing';
         }
       });
@@ -16709,7 +16795,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
         // Re-enable rotate handle visibility after modifying.
         feature.unset('suppressRotateHandle', true);
         var viewport = map.getViewport();
-        if (viewport && viewport.style) {
+        if (viewport !== null && viewport !== void 0 && viewport.style) {
           viewport.style.cursor = '';
         }
         updateFeature(feature);
@@ -16717,13 +16803,13 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
     } else {
       modify.on('modifystart', function () {
         var viewport = map.getViewport();
-        if (viewport && viewport.style) {
+        if (viewport !== null && viewport !== void 0 && viewport.style) {
           viewport.style.cursor = 'grabbing';
         }
       });
       modify.on('modifyend', function (evt) {
         var viewport = map.getViewport();
-        if (viewport && viewport.style) {
+        if (viewport !== null && viewport !== void 0 && viewport.style) {
           viewport.style.cursor = '';
         }
         updateFeature(evt.features.getArray()[0]);
@@ -16750,7 +16836,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
       }
       var feature = editFeatureCollection.item(0);
       var geom = feature === null || feature === void 0 ? void 0 : feature.getGeometry();
-      if (!geom || geom.getType() !== 'Polygon') {
+      if (!geom || (geom === null || geom === void 0 ? void 0 : geom.getType()) !== 'Polygon') {
         return;
       }
       var polygon = geom;
@@ -16778,7 +16864,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
       });
       if (closestDist <= threshold) {
         var viewport = map.getViewport();
-        if (viewport && viewport.style) {
+        if (viewport !== null && viewport !== void 0 && viewport.style) {
           viewport.style.cursor = 'grabbing';
         }
         isPointerDownNearCorner = true;
@@ -16789,18 +16875,18 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
         return;
       }
       var viewport = map.getViewport();
-      if (viewport && viewport.style) {
+      if (viewport !== null && viewport !== void 0 && viewport.style) {
         viewport.style.cursor = '';
       }
       isPointerDownNearCorner = false;
     };
     var startRotateIfOnHandle = function startRotateIfOnHandle(event) {
-      if (!isBoxOrSquare || !selectedFeatureHasGeometry) {
+      if (!isBoxOrSquareRotatable || !selectedFeatureHasGeometry) {
         return;
       }
       var featureToRotate = editFeatureCollection.item(0);
       var geom = featureToRotate === null || featureToRotate === void 0 ? void 0 : featureToRotate.getGeometry();
-      if (!geom || geom.getType() !== 'Polygon') {
+      if (!geom || (geom === null || geom === void 0 ? void 0 : geom.getType()) !== 'Polygon') {
         return;
       }
       var polygon = geom;
@@ -16890,7 +16976,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
       });
       // While rotating, show a grabbing cursor on the map viewport
       var viewport = map.getViewport();
-      if (viewport && viewport.style) {
+      if (viewport !== null && viewport !== void 0 && viewport.style) {
         viewport.style.cursor = 'grabbing';
       }
       // While rotating, disable modify/translate to avoid conflicts
@@ -16904,7 +16990,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
       }
       var featureToRotate = editFeatureCollection.item(0);
       var geom = featureToRotate === null || featureToRotate === void 0 ? void 0 : featureToRotate.getGeometry();
-      if (!geom || geom.getType() !== 'Polygon') {
+      if (!geom || (geom === null || geom === void 0 ? void 0 : geom.getType()) !== 'Polygon') {
         return;
       }
       var polygon = geom;
@@ -16952,7 +17038,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
       disabledDragPans = [];
       // Restore the default cursor when rotation stops
       var viewport = map.getViewport();
-      if (viewport && viewport.style) {
+      if (viewport !== null && viewport !== void 0 && viewport.style) {
         viewport.style.cursor = '';
       }
       modify.setActive(true);
@@ -17022,8 +17108,14 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
         _viewport.removeEventListener('pointerup', handlePointerUpAfterCorner);
       }
       window.removeEventListener('keydown', deleteVertexOnDeleteKey);
+      if (handleSingleClick) {
+        map.un('singleclick', handleSingleClick);
+      }
+      if (onViewOnlyFeatureClick) {
+        map.getViewport().style.cursor = '';
+      }
     };
-  }, [map, isInEditMode, geojson, projection, viewOnlyStyle, selectedFeatureIndex, exitDrawModeCallback, updateGeojson, drawMode]);
+  }, [map, isInEditMode, geojson, projection, viewOnlyStyle, selectedFeatureIndex, exitDrawModeCallback, updateGeojson, drawMode, onViewOnlyFeatureClick, onNoFeatureClick]);
   return null;
 };
 
@@ -17050,6 +17142,7 @@ var getIcon = function getIcon(selectionType) {
     case 'poly':
       return jsx(DrawToolPolygon, {});
     case 'box':
+    case 'rotatable-box':
       return jsx(DrawToolRectangle, {});
     case 'linestring':
       return jsx(DrawToolLineString, {});
@@ -17159,8 +17252,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,
@@ -19078,32 +19179,42 @@ 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({
+    onToggleClock = _ref2.onToggleClock,
+    _ref2$position = _ref2.position,
+    position = _ref2$position === void 0 ? {
       x: 0,
       y: 0
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    position = _useState2[0],
-    setPosition = _useState2[1];
-  useMakeSureContainerStaysInsideWindow(clockElement, position, setPosition);
-  var _useState3 = useState({
+    } : _ref2$position,
+    onSetPosition = _ref2.onSetPosition,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? {
       width: MIN_WIDTH,
       height: MIN_HEIGHT
-    }),
+    } : _ref2$size,
+    onSetSize = _ref2.onSetSize;
+  var _useWebmapReactTransl = useWebmapReactTranslation(),
+    t = _useWebmapReactTransl.t;
+  var clockElement = useRef(null);
+  useMakeSureContainerStaysInsideWindow(clockElement, position, onSetPosition);
+  var _useState = useState(FONT_SIZE_WIDTH_RATIO * size.width),
+    _useState2 = _slicedToArray(_useState, 2),
+    resizeFontSize = _useState2[0],
+    setResizeFontSize = _useState2[1];
+  var _useState3 = useState(false),
     _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];
+    isResizing = _useState4[0],
+    setIsResizing = _useState4[1];
+  // While resizing, use the local font size. Once you finish and the width has been updated, revert back to the size as determined from width
+  var fontSize = isResizing ? resizeFontSize : FONT_SIZE_WIDTH_RATIO * size.width;
   var toggleClock = function toggleClock(isClockVisible) {
     onToggleClock === null || onToggleClock === void 0 || onToggleClock(isClockVisible);
   };
+  var setPosition = function setPosition(position) {
+    onSetPosition === null || onSetPosition === void 0 || onSetPosition(position);
+  };
+  var setSize = function setSize(size) {
+    onSetSize === null || onSetSize === void 0 || onSetSize(size);
+  };
   return jsx(Fragment, {
     children: !isClockVisible ? jsx(CustomIconButton, {
       "aria-label": t('clock-show'),
@@ -19124,7 +19235,10 @@ var Clock = function Clock(_ref2) {
       cancel: ".MuiButtonBase-root",
       nodeRef: clockElement,
       onStop: function onStop(_event, position) {
-        setPosition(position);
+        setPosition({
+          x: position.x,
+          y: position.y
+        });
       },
       position: position,
       children: jsx("div", {
@@ -19150,15 +19264,21 @@ var Clock = function Clock(_ref2) {
           lockAspectRatio: true,
           minHeight: MIN_HEIGHT,
           minWidth: MIN_WIDTH + BUTTON_WIDTH,
+          nodeRef: clockElement,
           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);
+            var fontSize = FONT_SIZE_WIDTH_RATIO * width;
+            setResizeFontSize(fontSize);
+          },
+          onResizeStart: function onResizeStart() {
+            setIsResizing(true);
+            setResizeFontSize(FONT_SIZE_WIDTH_RATIO * size.width);
           },
           onResizeStop: function onResizeStop(_event, _direction, _ref, delta) {
             var width = size.width + delta.width;
             var height = size.height + delta.height;
+            setIsResizing(false);
+            setResizeFontSize(FONT_SIZE_WIDTH_RATIO * width);
             setSize({
               width: width,
               height: height
@@ -19254,4 +19374,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, 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.1.0",
+  "version": "15.3.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.1.0",
-    "@opengeoweb/theme": "15.1.0",
-    "@opengeoweb/shared": "15.1.0",
+    "@opengeoweb/webmap": "15.3.0",
+    "@opengeoweb/theme": "15.3.0",
+    "@opengeoweb/shared": "15.3.0",
     "lodash": "^4.17.21",
     "ol": "^10.4.0",
     "proj4": "^2.9.2",

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

@@ -1,6 +1,20 @@
 import type { FC } from 'react';
+export declare const MIN_WIDTH = 170;
+export declare const MIN_HEIGHT = 32;
+export interface Position {
+    x: number;
+    y: number;
+}
+export interface Size {
+    width: number;
+    height: number;
+}
 export declare const Clock: FC<{
     time: number;
     isVisible?: boolean;
     onToggleClock?: (isVisible: boolean) => void;
+    position?: Position | undefined;
+    onSetPosition: (position: Position) => void;
+    size?: Size | undefined;
+    onSetSize: (size: Size) => void;
 }>;

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

@@ -11,5 +11,6 @@ export interface LayerInfoDialogProps {
     source?: Source;
     dialogHeight?: number;
     startPosition?: Position;
+    selectedStyle?: string;
 }
 export declare const LayerInfoDialog: React.FC<LayerInfoDialogProps>;

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

@@ -3,6 +3,6 @@ export interface LayerInfoLegendProps {
     title: string;
     name: string;
     dimensions: Dimension[];
-    legendURL: string;
+    legendURL?: string;
 }
 export declare const LayerInfoLegend: React.FC<LayerInfoLegendProps>;

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/OpenLayersMapDraw.d.ts

@@ -1,3 +1,5 @@
+import type { Feature } from 'ol';
+import type { Geometry } from 'ol/geom';
 import type { StyleLike } from 'ol/style/Style';
 import React from 'react';
 import type { DrawModeExitCallback, DrawModeValue } from './types';
@@ -9,6 +11,8 @@ export interface OpenLayersMapDrawProps {
     isInEditMode: boolean;
     selectedFeatureIndex: number;
     updateGeojson?: (geoJson: GeoJSON.FeatureCollection, text: string) => void;
+    onViewOnlyFeatureClick?: (feature: Feature<Geometry>[]) => void;
+    onNoFeatureClick?: () => void;
 }
 /**
  * Integrates with OpenLayers Draw and Modify (+Snap) interactions, to implement feature drawing

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