@opengeoweb/webmap-react 15.3.0 → 17.0.0

package/index.esm.js

@@ -9,16 +9,16 @@ import { fromResolutionLike } from 'ol/resolution';
 import ImageSource, { getRequestExtent } from 'ol/source/Image';
 import ImageWrapper, { load } from 'ol/Image';
 import { getImageSrc, getRequestParams, createLoader } from 'ol/source/wms';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { CustomTooltip, CanvasComponent, useWheelStopPropagation, ToolContainerDraggable, CustomIconButton, dateUtils, useMakeSureContainerStaysInsideWindow, Draggable, Resizable } from '@opengeoweb/shared';
-import { Paper, Box, Typography, useTheme, Grid, styled, Slider, TextField, FormControl, InputLabel, Select, MenuItem, Icon as Icon$2, FormLabel, Switch, ThemeProvider } from '@mui/material';
-import { queryOptions, useQuery } from '@tanstack/react-query';
-import { Point, MultiPoint, 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 { 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 { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useQuery, queryOptions } from '@tanstack/react-query';
+import { Point, MultiPoint, Polygon, LineString } from 'ol/geom';
+import { Style, Icon as Icon$1, Circle, Stroke, Fill, Text } from 'ol/style';
+import { http, HttpResponse } from 'msw';
 import Box$1 from '@mui/material/Box';
 import Typography$1 from '@mui/material/Typography';
 import { View, Map, Feature, Collection, Overlay } from 'ol';
@@ -30,7 +30,7 @@ import EventType from 'ol/pointer/EventType';
 import { toLonLat, fromLonLat, transform } from 'ol/proj';
 import { register } from 'ol/proj/proj4';
 import proj4 from 'proj4';
-import { feature, simplify, booleanPointInPolygon, intersect, cleanCoords, polygonToLine, booleanClockwise, rewind, bbox, toWgs84, toMercator, coordEach } from '@turf/turf';
+import { bbox, feature, simplify, booleanPointInPolygon, intersect, cleanCoords, polygonToLine, booleanClockwise, rewind, toWgs84, toMercator, coordEach } from '@turf/turf';
 import { produce } from 'immer';
 import ImageLayer from 'ol/layer/Image';
 import WMTSCapabilities from 'ol/format/WMTSCapabilities';
@@ -103,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:",
@@ -152,7 +156,11 @@ var fi = {
 	"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:",
@@ -201,7 +209,11 @@ var no = {
 	"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:",
@@ -258,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,
@@ -284,6 +300,7 @@ var webmapReactTranslations = {
  * Copyright 2024 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var TimeContext = /*#__PURE__*/createContext({});
 
 function _OverloadYield(e, d) {
@@ -811,12 +828,14 @@ function _regeneratorRuntime() {
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var MAX_NUMBER_TO_PREFETCH = 200;
 var MAX_NUMBER_STEPS_IN_TIME_SLIDER_TO_PREFETCH = 10000;
 var NUMBER_PREFETCH_WORKERS = 4;
 var NUM_IMAGES_TO_CACHE = 10000;
 var WMS_EXTENT_RATIO_TO_VIEWPORT = 1.2;
 var TIMEAWAREIMAGEWRAPPER_IMAGEDIDNOTLOADSUCCESFULLY = 'Image did not load succesfully';
+
 // // To debug what dimensions are actually being used in the map, use:
 // export const ADD_SHOW_DIMS_OPTION = true;
 // export const WMS_EXTENT_RATIO_TO_VIEWPORT = 1.0;
@@ -851,6 +870,7 @@ var makeDimValuesToPrefetch = function makeDimValuesToPrefetch(wmTimeDim, stepsT
       var pastPrefetchValues = timePrefetchValuesArray.filter(function (timeStepAsTime) {
         return timeStepAsTime < currentTimeOfLayer;
       });
+
       // eslint-disable-next-line @typescript-eslint/require-array-sort-compare
       futurePrefetchValues.sort();
       isAnimating ?
@@ -867,6 +887,7 @@ var makeDimValuesToPrefetch = function makeDimValuesToPrefetch(wmTimeDim, stepsT
   }
   return [];
 };
+
 /**
  * We use the WMLayer dimension logic to obtain the dimension value to use in the WMS GetMap request. The input is the dimensions array which is typically the properties set for the layer component.
  * The input time is descretized to the closest value which is available in the WMS layer.
@@ -882,6 +903,7 @@ var getDimensionParamsForWMS = function getDimensionParamsForWMS(dimensions, wmL
   }
   var dimProps = {};
   var wmLayerDims = wmLayer.getDimensions();
+
   // Loop without forEach so we can exit and return.
   var _iterator = _createForOfIteratorHelper(wmLayerDims),
     _step;
@@ -920,6 +942,7 @@ var getDimensionParamsForWMS = function getDimensionParamsForWMS(dimensions, wmL
   }
   return dimProps;
 };
+
 /**
  * Calculates number of timesteps for given timespan
  * @param timespan Object of Timespan, with start/stop/end in milliseconds
@@ -950,6 +973,7 @@ var timeSpanToTimeList = function timeSpanToTimeList(timespan) {
   }
   return [];
 };
+
 /**
  * Calculates number of timesteps for given timespan
  * @param timespan Object of Timespan, with start/stop/end in milliseconds
@@ -968,6 +992,9 @@ var TimeAwareImageWrapper = /*#__PURE__*/function (_ImageWrapper) {
     var _this;
     _classCallCheck(this, TimeAwareImageWrapper);
     _this = _callSuper(this, TimeAwareImageWrapper, [extent, resolution, pixelRatio, ImageState.IDLE]);
+    _this._extentToLoad = void 0;
+    _this._resolutionToLoad = void 0;
+    _this._pixelRatioToLoad = void 0;
     _this._paramsToLoad = {};
     _this._dimPropsToLoad = {};
     _this._getMapUrl = null;
@@ -1008,6 +1035,7 @@ var TimeAwareImageWrapper = /*#__PURE__*/function (_ImageWrapper) {
       var resolution = resolutionToLoad;
       var requestResolution = Array.isArray(resolution) ? resolution[0] : resolution || 1;
       var newPixelRatio = pixelRatio;
+
       // Load 1.2^2 % larger WMS extents than the current view
       var ratio = WMS_EXTENT_RATIO_TO_VIEWPORT;
       var extent = extentToLoad;
@@ -1175,6 +1203,7 @@ var TimeAwareImageWrapper = /*#__PURE__*/function (_ImageWrapper) {
 var WorkerQueue = /*#__PURE__*/function () {
   function WorkerQueue(concurrency) {
     _classCallCheck(this, WorkerQueue);
+    this.maxConcurrency = void 0;
     this.tasksInProcess = [];
     this.taskQueue = [];
     this.disposed = false;
@@ -1245,6 +1274,7 @@ var WorkerQueue = /*#__PURE__*/function () {
 
 var initImageWrapper = function initImageWrapper() {
   var emptyButLoading = new TimeAwareImageWrapper([0, 0, 0, 0], 1, 1);
+
   // Set to loaded to indicate to ol that it can be displayed immediately
   emptyButLoading.setState(ImageState.LOADED);
   emptyButLoading.setImage(document.createElement('img'));
@@ -1263,6 +1293,29 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
       visible = _ref.visible;
     _classCallCheck(this, TimeawareImageSource);
     _this = _callSuper(this, TimeawareImageSource, [{}]);
+    _this._wmsUrl = void 0;
+    _this._extraWMSParams = void 0;
+    _this._timeStampsToPrefetch = void 0;
+    _this._prefetchWorkers = void 0;
+    _this._lastRequestedExtent = void 0;
+    _this._lastRequestedResolution = void 0;
+    _this._lastRequestedPixelRatio = void 0;
+    _this._lastRequestedProjection = void 0;
+    _this._loadedExtent = void 0;
+    _this._loadedResolution = void 0;
+    _this._loadedPixelRatio = void 0;
+    _this._loadedProjection = void 0;
+    _this._previousPrefetchExtent = void 0;
+    _this._dimProperties = void 0;
+    _this._imWrapperEmptyButLoading = void 0;
+    _this._imWrapperForOlSource = void 0;
+    _this._imWrapperForAltImage = void 0;
+    _this._styleName = void 0;
+    _this._layerName = void 0;
+    _this._imWrapperForPrefetch = void 0;
+    _this.throttledPrefetch = void 0;
+    _this.throttledImageLoad = void 0;
+    _this._layerId = void 0;
     _this._wmsUrl = wmsUrl;
     _this._extraWMSParams = _objectSpread2({}, params);
     _this._layerName = layerName;
@@ -1351,6 +1404,7 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
     value: function prefetch(extent, resolution, pixelRatio, projection) {
       var _this3 = this;
       var dimensionsToPrefetchUnFiltered = this._timeStampsToPrefetch;
+
       // Only work on imagery that still needs to be loaded.
       var dimensionsToPrefetch = dimensionsToPrefetchUnFiltered.filter(function (dimValue) {
         var hasExactImage = _this3._imWrapperForOlSource.hasImage(extent, resolution, pixelRatio, projection, _this3._wmsUrl, _this3._extraWMSParams, _this3._layerName, _this3._styleName, _objectSpread2(_objectSpread2({}, _this3._dimProperties), {}, {
@@ -1425,6 +1479,7 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
       this._lastRequestedPixelRatio = pixelRatio;
       this._lastRequestedProjection = projection;
       this.throttledImageLoad();
+
       // While we are loading, check if there is an alternative image available
       var altImage = this._loadedExtent && this._imWrapperForOlSource.getAlternativeImage(this._lastRequestedExtent, this._lastRequestedResolution, this._lastRequestedPixelRatio, this._lastRequestedProjection, this._wmsUrl, this._extraWMSParams, this._layerName, this._styleName, requestDimProperties);
       if (altImage && altImage.isLoaded) {
@@ -1432,6 +1487,7 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
         this._imWrapperForAltImage.setGeoReferencedImage(altImage);
         return this._imWrapperForAltImage;
       }
+
       // This thing is has nothing to show yet.
       return this._imWrapperEmptyButLoading;
     }
@@ -1444,6 +1500,7 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
       this._dimProperties = _objectSpread2({}, params);
       this.changed();
     }
+
     /**
      * Check if an image is available and loaded for requested date. Used for showlayerinfo to proceed.
      * @param isoTime
@@ -1515,6 +1572,7 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
       }
       var dimPropWithRequestedDate = _objectSpread2({}, this._dimProperties);
       dimPropWithRequestedDate['TIME'] = timeStampsToPrefetch;
+
       // While we are loading, check if there is an alternative image available
       var altImage = this._loadedExtent && this._imWrapperForOlSource.getAlternativeImage(this._loadedExtent, this._loadedResolution, this._loadedPixelRatio, this._loadedProjection, this._wmsUrl, this._extraWMSParams, this._layerName, this._styleName, dimPropWithRequestedDate);
       if (altImage && altImage.isLoaded) {
@@ -1549,26 +1607,111 @@ 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);
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 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 /*#__PURE__*/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 ? /*#__PURE__*/jsx(Box, {
+      "data-testid": "legend-title",
+      children: /*#__PURE__*/jsx(CustomTooltip, {
+        title: showLayerLegend ? t('webmap-react-hide-layer') : t('webmap-react-show-layer'),
+        children: /*#__PURE__*/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 ? /*#__PURE__*/jsx(Visibility, {
+            fontSize: "medium",
+            sx: {
+              margin: 'auto 0px'
+            }
+          }) : /*#__PURE__*/jsx(VisibilityOff, {
+            fontSize: "medium",
+            sx: {
+              margin: 'auto 0px'
+            }
+          }), /*#__PURE__*/jsx("span", {
+            style: {
+              overflow: 'hidden',
+              textOverflow: 'ellipsis'
+            },
+            children: title
+          })]
+        })
+      })
+    }) : /*#__PURE__*/jsx(Box, {
       "data-testid": "legend-title",
-      children: jsx(Typography, {
+      sx: {
+        backgroundColor: '#FFF'
+      },
+      children: /*#__PURE__*/jsx(Typography, {
         sx: {
           fontFamily: 'Roboto, Helvetica, Arial',
           fontSize: '10px',
@@ -1580,41 +1723,19 @@ var LegendLayout = function LegendLayout(_ref) {
         variant: "h3",
         children: title
       })
-    }), jsx(CustomTooltip, {
+    }), !!showLayerLegend && /*#__PURE__*/jsx(CustomTooltip, {
       placement: "top",
       title: title || 'loading',
-      children: jsx(Box, {
+      children: /*#__PURE__*/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);
-      })
     })]
   });
 };
@@ -1636,6 +1757,7 @@ var LegendLayout = function LegendLayout(_ref) {
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 // This function is a copy of /libs/api/src/utils.ts which cannot be used here due to circular dependency
 var handleResponse = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(response) {
@@ -1697,6 +1819,13 @@ 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,
@@ -1705,7 +1834,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();
@@ -1834,6 +1963,7 @@ var fetchEDRParameter = /*#__PURE__*/function () {
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var coverageCollectionToFeatureCollection = function coverageCollectionToFeatureCollection(cov, parameterNames) {
   if (cov === undefined) {
     return {
@@ -1841,6 +1971,7 @@ var coverageCollectionToFeatureCollection = function coverageCollectionToFeature
       type: 'FeatureCollection'
     };
   }
+
   // For coverage collection
   if (cov && _typeof(cov) === 'object' && 'coverages' in cov) {
     var _cov$coverages$reduce, _cov$coverages;
@@ -1885,7 +2016,9 @@ var coverageCollectionToFeatureCollection = function coverageCollectionToFeature
     };
     return _featurePoint;
   }
+
   // For Coverage
+
   var paramVals = {};
   parameterNames.split(',').forEach(function (parameterName) {
     var _cov$ranges$parameter;
@@ -1908,6 +2041,7 @@ var coverageCollectionToFeatureCollection = function coverageCollectionToFeature
 };
 
 var DEFAULT_STALE_TIME$1 = 60000; // One minute
+
 // Ensures every webmap-react query starts with the same query key
 var generateWebmapQueryKeys = function generateWebmapQueryKeys(queryKeys) {
   return ['webmap-react'].concat(queryKeys);
@@ -1995,6 +2129,7 @@ var useEDRGetParameterData = function useEDRGetParameterData(edrBaseUrlWithColle
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var temperatureLegendColorsWoW = ['#2E2E73', '#282898', '#201FBB', '#1A1ADC', '#3654DE', '#548EDC', '#72CADE', '#6DD8DF', '#55CDE2', '#38BBDC', '#20B0DC', '#19BAA6', '#1CCE6A', '#1BDF22', '#82C319', '#DCA819', '#DD921A', '#DE7C1A', '#DF671A', '#DE501A', '#DD3819', '#DD2319', '#D21A1E', '#C31927', '#AD1A30', '#9A1A3B', '#871A44', '#871A44'];
 var precipitationMMLegendColorsWoW = ['#BACDCB', '#A3C3C9', '#8BBCC8', '#6AAEC1', '#42A1C0', '#377EAF', '#46669C', '#56528D', '#86008D', '#610066'];
 var temperatureLegendColorsCWK = ['#BFB1FF', '#8E7EE4', '#6450CC', '#422BB1', '#260E99', '#B1E4FF', '#7EC3E4', '#50A3CC', '#2B85B1', '#0E6B99', '#E4FFB1', '#C3E47E', '#A3CC50', '#85B12B', '#6B990E', '#FFD8B1', '#E4B17E', '#CC8E50', '#B16E2B', '#99540E', '#FFB1B1', '#E47E7E', '#CC5050', '#B12B2B', '#990E0E', '#BFB1FF', '#8E7EE4', '#6450CC', '#422BB1', '#260E99', '#B1E4FF', '#7EC3E4', '#50A3CC', '#2B85B1', '#0E6B99', '#E4FFB1', '#C3E47E', '#A3CC50', '#85B12B', '#6B990E', '#FFD8B1', '#E4B17E', '#CC8E50', '#B16E2B', '#99540E', '#FFB1B1', '#E47E7E', '#CC5050', '#B12B2B', '#990E0E', '#BFB1FF', '#8E7EE4', '#6450CC', '#422BB1', '#260E99', '#B1E4FF', '#7EC3E4', '#50A3CC', '#2B85B1', '#0E6B99', '#E4FFB1', '#C3E47E', '#A3CC50', '#85B12B', '#6B990E', '#FFD8B1', '#E4B17E', '#CC8E50', '#B16E2B', '#99540E', '#FFB1B1', '#E47E7E', '#CC5050', '#B12B2B', '#990E0E'];
@@ -2127,6 +2262,7 @@ var generateImageFromLegend = function generateImageFromLegend(edrColorLegend, c
   var gap = 10; // gap between box and text
   var rowSpacing = 2; // vertical spacing between rows
   var font = '11px Arial';
+
   // Compute required canvas height
   var legendCount = edrColorLegend.legend.length;
   var requiredHeight = yStart + legendCount * (rowSpacing + boxSize);
@@ -2139,6 +2275,7 @@ var generateImageFromLegend = function generateImageFromLegend(edrColorLegend, c
   ctx.textBaseline = 'middle';
   // eslint-disable-next-line no-param-reassign
   ctx.fillStyle = '#111';
+
   // sort the legend based on highest value first
   var sortedLegend = _toConsumableArray(edrColorLegend.legend).sort(function (itemA, itemB) {
     return itemB.max - itemA.max;
@@ -2149,12 +2286,14 @@ var generateImageFromLegend = function generateImageFromLegend(edrColorLegend, c
       color = item.color;
     var text = "".concat(formatNumber(min), " : ").concat(formatNumber(max));
     var y = yStart + index * (rowSpacing + boxSize);
+
     // Draw colored box
     // eslint-disable-next-line no-param-reassign
     ctx.globalAlpha = opacity || 1;
     // eslint-disable-next-line no-param-reassign
     ctx.fillStyle = color;
     ctx.fillRect(x, y, boxSize, boxSize);
+
     // Draw text
     // eslint-disable-next-line no-param-reassign
     ctx.globalAlpha = 1;
@@ -2242,6 +2381,7 @@ var makeFeatureStyleWind = function makeFeatureStyleWind(feature) {
       lineWidth: 1
     }
   });
+
   // speed label
   var speedStyle = new Style({
     text: new Text({
@@ -2265,12 +2405,14 @@ var makeFeatureStyleMultiParam = function makeFeatureStyleMultiParam(feature) {
   var _feature$getPropertie2 = feature.getProperties(),
     values = _feature$getPropertie2.values;
   var paramValues = Object.values(values);
+
   // Determine offset between columns (long strings need more space)
   var maxLength = Math.max.apply(Math, _toConsumableArray(paramValues.map(function (el) {
     return el ? el.toString().length : 1;
   })));
   var factor = maxLength > 5 ? 1.4 : 1;
   var offsetValues = getOffsetValues(factor);
+
   // Don't allow showing more than 15 params
   var params = paramValues.slice(0, 15);
   return params.map(function (paramVal, index) {
@@ -2355,6 +2497,7 @@ var defaultLegend$1 = makeLegendFromColorMap({
   min: -18,
   max: 38
 });
+
 /**
  * Converts a stylename to openlayers style for features
  * @param styleName Strings like temperatureLegendColorsWoW:0,20 will get the legend temperatureLegendColorsWoW with a range from 0,20. This makes it flexible to adjust the colorrange via the stylename.
@@ -2441,6 +2584,7 @@ var useCreateEDRWMLayer = function useCreateEDRWMLayer(serviceUrl, name, id, onL
       });
       webmapUtils.registerWMLayer(_wmLayer, layerId);
     }
+
     // Set the name and parse the layer
     var wmLayer = webmapUtils.getWMLayerById(layerId);
     wmLayer.setName(name).then(function () {
@@ -10491,6 +10635,7 @@ var knmi_kdp_edr_collections_10_minute_in_situ_meteorological_observations_updat
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var fakeEdrLayerApiHandlers = [http.get('https://gw-edr.pub.knmi.cloud/edr/collections/10-minute-in-situ-meteorological-observations', function () {
   return HttpResponse.json(knmi_kdp_edr_collections_10_minute_in_situ_meteorological_observations);
 }), http.get('https://gw-edr.pub.knmi.cloud/edr/collections/10-minute-in-situ-meteorological-observations-update', function () {
@@ -10527,14 +10672,9 @@ 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;
+
 /**
  * Renders a legendgraphic image based on a WMImage.
  *
@@ -10559,21 +10699,25 @@ var renderLegendGraphic = function renderLegendGraphic(wmImage, ctx, width, heig
       ctx.fillText('error :(', 10, 10);
     } else {
       /* All OK, just draw the legend image */
+
       ctx.drawImage(wmImage.getElement(), 0, 0, Math.min(wmImage.getElement().width, width), Math.min(wmImage.getElement().height, height));
     }
   }
 };
 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 */
   // eslint-disable-next-line react/hook-use-state
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     setState = _useState2[1];
   var layerId = layer === null || layer === void 0 ? void 0 : layer.id;
+
   /* The canvas listens to the size of its container. We will update it according to the image size. */
   var _useState3 = useState(defaultCanvasWidth),
     _useState4 = _slicedToArray(_useState3, 2),
@@ -10589,6 +10733,7 @@ var Legend = function Legend(_ref) {
     t = _useWebmapReactTransl.t;
   var legendPrefix = t('webmap-react-legend');
   var legendNoImageText = t('webmap-react-legend-no-image');
+
   /* Register callback to legendImagestore to trigger rerender when image is loaded. */
   useEffect(function () {
     legendImageStore.addImageEventCallback(function (image, id, imageEventType) {
@@ -10600,6 +10745,7 @@ var Legend = function Legend(_ref) {
       legendImageStore.removeEventCallback("".concat(legendPrefix, "_").concat(layerId));
     };
   }, [layerId, legendPrefix]);
+
   /* Should not do anything if no layer is given */
   if (!layer) {
     return null;
@@ -10609,27 +10755,33 @@ var Legend = function Legend(_ref) {
     return null;
   }
   var layerOpacity = layer.opacity ? layer.opacity : 1;
-  /* Get the wmLayer, it has more detailed info about the WMS service,
+
+  /* Get the wmLayer, it has more detailed info about the WMS service, 
   like a title and the WMS legendgraphic url */
   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;
-  return jsx(LegendLayout, {
-    dimensions: layer === null || layer === void 0 ? void 0 : layer.dimensions,
+
+  /* Custom legend toggle for layer */
+  var toggleLayerLegendVisibility = function toggleLayerLegendVisibility(showLegend) {
+    return onToggleLayerLegendVisibility(layerId, showLegend);
+  };
+  return /*#__PURE__*/jsx(LegendLayout, {
     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, {
+    children: /*#__PURE__*/jsx(CanvasComponent, {
       onRenderCanvas: function onRenderCanvas(ctx, width, height) {
-        /*
+        /* 
           Check if the wmLayer is available, this happens when the WMS GetCapabilities is loaded and parsed.
           Note that we cannot use the wmLayer variable above, as this one could contain a non initialized WMJSLayer.
         */
         var legendWmLayer = webmapUtils.getWMLayerById(layer.id);
         var legendUrl = getLegendGraphicURLForLayer(legendWmLayer);
         var image = legendImageStore.getImage(legendUrl);
+
         // for edr a legend is generated based on chosen style
         if (layer.style && isEdrLayer) {
           var style = layer.style,
@@ -10659,14 +10811,17 @@ var Legend = function Legend(_ref) {
           if (image && !image.hasError() && !image.isLoaded() && !image.isLoading()) {
             image.load(); /* Will eventually trigger the callback used in the useEffect */
           }
+
           /* If the image is ready, we can show it in the component, store it in our ref, otherwise we keep the previous image to prevent flickering */
           if (image !== null && image !== void 0 && image.isLoaded()) {
             previousLegendImage.current = image;
+
             /* Set the canvas container to the same size as the image */
             imageHeight = image.getHeight();
             setCanvasContainerHeight(imageHeight);
             imageWidth = image.getWidth();
             setCanvasContainerWidth(imageWidth);
+
             /* Give the canvas a white background before adding the image */
             ctx.fillStyle = '#fff';
             ctx.rect(0, 0, width, height);
@@ -10682,6 +10837,24 @@ var Legend = function Legend(_ref) {
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var LegendDialog = function LegendDialog(_ref) {
   var layers = _ref.layers,
     isOpen = _ref.isOpen,
@@ -10694,11 +10867,12 @@ 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();
-  return jsx(ToolContainerDraggable, {
+  return /*#__PURE__*/jsx(ToolContainerDraggable, {
     bounds: "parent",
     "data-testid": "moveable-legend",
     initialMaxHeight: 440,
@@ -10713,26 +10887,31 @@ var LegendDialog = function LegendDialog(_ref) {
       top: 50
     },
     title: showMapId ? "".concat(t('webmap-react-legend'), " ").concat(mapId) : t('webmap-react-legend'),
-    children: jsx(Box, {
+    children: /*#__PURE__*/jsx(Box, {
       sx: {
         padding: 0.5
       },
-      children: layers && layers.length > 0 ? jsx(Box, {
+      children: layers && layers.length > 0 ? /*#__PURE__*/jsx(Box, {
         "data-testid": "LegendList",
         ref: stopWheelEventPropagationRef,
         sx: {
           display: 'flex',
           flexDirection: 'column',
+          padding: '0 16px',
           '&>div:last-child': {
             marginBottom: 0
+          },
+          '&>div:first-of-type': {
+            marginTop: '8px'
           }
         },
         children: layers.map(function (layer) {
-          return jsx(Legend, {
-            layer: layer
+          return /*#__PURE__*/jsx(Legend, {
+            layer: layer,
+            onToggleLayerLegendVisibility: onToggleLayerLegendVisibility
           }, layer.id);
         })
-      }) : jsx(Typography, {
+      }) : /*#__PURE__*/jsx(Typography, {
         "data-testid": "NoLayers",
         style: {
           fontWeight: 500,
@@ -10755,7 +10934,7 @@ var MapControlButton = function MapControlButton(_ref) {
     _ref$isActive = _ref.isActive,
     isActive = _ref$isActive === void 0 ? false : _ref$isActive,
     props = _objectWithoutProperties(_ref, _excluded$2);
-  return jsx(CustomIconButton, _objectSpread2(_objectSpread2({
+  return /*#__PURE__*/jsx(CustomIconButton, _objectSpread2(_objectSpread2({
     isSelected: isActive,
     onClick: onClick,
     tooltipProps: {
@@ -10768,28 +10947,46 @@ var MapControlButton = function MapControlButton(_ref) {
   }));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2020 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var ZoomControls = function ZoomControls(_ref) {
   var onZoomIn = _ref.onZoomIn,
     onZoomOut = _ref.onZoomOut,
     onZoomReset = _ref.onZoomReset;
   var _useWebmapReactTransl = useWebmapReactTranslation(),
     t = _useWebmapReactTransl.t;
-  return jsxs(Fragment, {
-    children: [jsx(MapControlButton, {
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(MapControlButton, {
       "data-testid": "zoom-reset",
       onClick: onZoomReset,
       title: t('webmap-react-zoom-reset'),
-      children: jsx(Home, {})
-    }), jsx(MapControlButton, {
+      children: /*#__PURE__*/jsx(Home, {})
+    }), /*#__PURE__*/jsx(MapControlButton, {
       "data-testid": "zoom-in",
       onClick: onZoomIn,
       title: t('webmap-react-zoom-in'),
-      children: jsx(Add, {})
-    }), jsx(MapControlButton, {
+      children: /*#__PURE__*/jsx(Add, {})
+    }), /*#__PURE__*/jsx(MapControlButton, {
       "data-testid": "zoom-out",
       onClick: onZoomOut,
       title: t('webmap-react-zoom-out'),
-      children: jsx(Minus, {})
+      children: /*#__PURE__*/jsx(Minus, {})
     })]
   });
 };
@@ -10798,7 +10995,7 @@ var _excluded$1 = ["children"];
 var MapControls = function MapControls(_ref) {
   var children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded$1);
-  return jsx(Box, _objectSpread2(_objectSpread2({
+  return /*#__PURE__*/jsx(Box, _objectSpread2(_objectSpread2({
     sx: {
       position: 'absolute',
       overflow: 'visible',
@@ -10810,7 +11007,7 @@ var MapControls = function MapControls(_ref) {
       userSelect: 'none'
     }
   }, props), {}, {
-    children: jsx(Grid, {
+    children: /*#__PURE__*/jsx(Grid, {
       container: true,
       direction: "column",
       sx: {
@@ -10823,6 +11020,24 @@ var MapControls = function MapControls(_ref) {
   }));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var LegendButton = function LegendButton(_ref) {
   var openLegendDialog = _ref.openLegendDialog,
     isOpen = _ref.isOpen;
@@ -10831,15 +11046,33 @@ var LegendButton = function LegendButton(_ref) {
   var onClickButton = function onClickButton() {
     return openLegendDialog();
   };
-  return jsx(MapControlButton, {
+  return /*#__PURE__*/jsx(MapControlButton, {
     "data-testid": "open-Legend",
     isActive: isOpen,
     onClick: onClickButton,
     title: t('webmap-react-legend'),
-    children: jsx(List, {})
+    children: /*#__PURE__*/jsx(List, {})
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var getTimeDimension = function getTimeDimension(dimensions) {
   return dimensions.find(function (dimension) {
     return dimension.name === 'time' && dimension.currentValue !== undefined;
@@ -10858,7 +11091,7 @@ var MapTime = function MapTime(_ref) {
     return null;
   }
   var mapTime = formatTime(timeDimension.currentValue, timeFormat);
-  return jsx(Box, {
+  return /*#__PURE__*/jsx(Box, {
     "data-testid": "map-time",
     sx: {
       zIndex: 10,
@@ -10866,8 +11099,8 @@ var MapTime = function MapTime(_ref) {
       bottom: '12px',
       position: 'absolute'
     },
-    children: jsx(Box, {
-      children: jsx(Typography, {
+    children: /*#__PURE__*/jsx(Box, {
+      children: /*#__PURE__*/jsx(Typography, {
         sx: {
           fontWeight: 500
         },
@@ -10878,6 +11111,23 @@ var MapTime = function MapTime(_ref) {
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
 var MapWarningProperties = function MapWarningProperties(_ref) {
   var _selectedFeaturePrope, _selectedFeaturePrope2, _selectedFeaturePrope3, _selectedFeaturePrope4, _selectedFeaturePrope5;
   var selectedFeatureProperties = _ref.selectedFeatureProperties,
@@ -10887,7 +11137,7 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
   var newWidth = parentSize ? parentSize - 100 : 350;
   var _useWebmapReactTransl = useWebmapReactTranslation(),
     t = _useWebmapReactTransl.t;
-  return jsx("div", {
+  return /*#__PURE__*/jsx("div", {
     style: {
       position: 'fixed',
       width: "".concat(newWidth, "px"),
@@ -10898,7 +11148,7 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
       top: '70px',
       zIndex: 10
     },
-    children: jsxs("div", {
+    children: /*#__PURE__*/jsxs("div", {
       "data-testid": "map-warning-properties",
       style: {
         marginTop: '50px',
@@ -10909,22 +11159,22 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
         fontSize: '11px',
         backgroundColor: '#CCCCCCC0'
       },
-      children: [jsx("h1", {
+      children: [/*#__PURE__*/jsx("h1", {
         "data-testid": "map-warning-properties-title",
         children: (_selectedFeaturePrope = selectedFeatureProperties.languages) === null || _selectedFeaturePrope === void 0 ? void 0 : _selectedFeaturePrope[language].areaDesc
-      }), !!((_selectedFeaturePrope2 = selectedFeatureProperties.languages) !== null && _selectedFeaturePrope2 !== void 0 && _selectedFeaturePrope2[language].areaDesc) && jsxs("pre", {
+      }), !!((_selectedFeaturePrope2 = selectedFeatureProperties.languages) !== null && _selectedFeaturePrope2 !== void 0 && _selectedFeaturePrope2[language].areaDesc) && /*#__PURE__*/jsxs("pre", {
         "data-testid": "map-warning-properties-row",
         children: [t('webmap-react-event'), ' ', (_selectedFeaturePrope3 = selectedFeatureProperties.languages) === null || _selectedFeaturePrope3 === void 0 ? void 0 : _selectedFeaturePrope3[language].event]
-      }), !!selectedFeatureProperties.onset && jsxs("pre", {
+      }), !!selectedFeatureProperties.onset && /*#__PURE__*/jsxs("pre", {
         "data-testid": "map-warning-properties-row",
         children: [t('webmap-react-sent'), ' ', dateUtils.dateToString(dateUtils.utc(selectedFeatureProperties.onset), dateUtils.DATE_FORMAT_NAME_OF_MONTH), ' ', t('webmap-react-utc')]
-      }), !!selectedFeatureProperties.expires && jsxs("pre", {
+      }), !!selectedFeatureProperties.expires && /*#__PURE__*/jsxs("pre", {
         "data-testid": "map-warning-properties-row",
         children: [t('webmap-react-expires'), ' ', dateUtils.dateToString(dateUtils.utc(selectedFeatureProperties.expires), dateUtils.DATE_FORMAT_NAME_OF_MONTH), ' ', t('webmap-react-utc')]
-      }), !!((_selectedFeaturePrope4 = selectedFeatureProperties.languages) !== null && _selectedFeaturePrope4 !== void 0 && _selectedFeaturePrope4[language].senderName) && jsxs("pre", {
+      }), !!((_selectedFeaturePrope4 = selectedFeatureProperties.languages) !== null && _selectedFeaturePrope4 !== void 0 && _selectedFeaturePrope4[language].senderName) && /*#__PURE__*/jsxs("pre", {
         "data-testid": "map-warning-properties-row",
         children: [t('webmap-react-sender'), ' ', (_selectedFeaturePrope5 = selectedFeatureProperties.languages) === null || _selectedFeaturePrope5 === void 0 ? void 0 : _selectedFeaturePrope5[language].senderName]
-      }), !!selectedFeatureProperties.identifier && jsxs("pre", {
+      }), !!selectedFeatureProperties.identifier && /*#__PURE__*/jsxs("pre", {
         "data-testid": "map-warning-properties-row",
         children: [t('webmap-react-identifier'), ' ', selectedFeatureProperties.identifier]
       })]
@@ -10932,6 +11182,24 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var dimensionConfig = function dimensionConfig(t) {
   return [{
     name: 'elevation',
@@ -10985,6 +11253,24 @@ var marksByDimension = function marksByDimension(t, dim) {
   return marks;
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var DimensionSelectButton = function DimensionSelectButton(_ref) {
   var dimension = _ref.dimension,
     onClickDimensionButton = _ref.onClickDimensionButton,
@@ -10998,15 +11284,33 @@ var DimensionSelectButton = function DimensionSelectButton(_ref) {
   });
   var Icon = getDimensionIcon$1((dimConfig === null || dimConfig === void 0 ? void 0 : dimConfig.iconType) || 'IconLevels');
   var title = "".concat(showPrefix, " ").concat(dimConfig ? dimConfig.label.toLowerCase() : dimension.toLowerCase());
-  return jsx(MapControlButton, {
+  return /*#__PURE__*/jsx(MapControlButton, {
     "data-testid": "dimensionMapBtn-".concat(dimension),
     isActive: isActive,
     onClick: onClickDimensionButton,
     title: title,
-    children: jsx(Icon, {})
+    children: /*#__PURE__*/jsx(Icon, {})
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var DimensionSelectDialog = function DimensionSelectDialog(_ref) {
   var isOpen = _ref.isOpen,
     _ref$order = _ref.order,
@@ -11026,7 +11330,8 @@ var DimensionSelectDialog = function DimensionSelectDialog(_ref) {
   });
   var title = dimConfig ? dimConfig.label : dimensionName;
   var topPos = index * 32 + 164; // index * btn height + offset top of window
-  return jsx(ToolContainerDraggable, {
+
+  return /*#__PURE__*/jsx(ToolContainerDraggable, {
     bounds: "parent",
     "data-testid": "multidimensionContent-".concat(title),
     isOpen: isOpen,
@@ -11040,11 +11345,11 @@ var DimensionSelectDialog = function DimensionSelectDialog(_ref) {
       top: topPos
     },
     title: title,
-    children: jsx("div", {
+    children: /*#__PURE__*/jsx("div", {
       style: {
         padding: 4
       },
-      children: jsx(Grid, {
+      children: /*#__PURE__*/jsx(Grid, {
         container: true,
         direction: "row",
         children: children
@@ -11103,8 +11408,8 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
       event.preventDefault();
     }
   };
-  return jsxs(Fragment, {
-    children: [jsx(Box, {
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Box, {
       "data-testid": "slider-dimensionSelect",
       sx: {
         height: '320px',
@@ -11113,12 +11418,12 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
         minWidth: 120,
         fontSize: '90%'
       },
-      children: jsx(Box, {
+      children: /*#__PURE__*/jsx(Box, {
         component: "span",
         sx: {
           margin: 1
         },
-        children: jsx(SmallFontSlider, {
+        children: /*#__PURE__*/jsx(SmallFontSlider, {
           "aria-labelledby": "vertical-slider",
           "data-testid": "verticalSlider",
           disabled: isDisabled,
@@ -11142,9 +11447,9 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
           value: sliderValue
         })
       })
-    }), jsx(CustomTooltip, {
+    }), /*#__PURE__*/jsx(CustomTooltip, {
       title: layerTitle,
-      children: jsx(Typography, {
+      children: /*#__PURE__*/jsx(Typography, {
         sx: {
           paddingLeft: '10px',
           maxWidth: 130,
@@ -11160,9 +11465,9 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
 
 var Icon = function Icon(_ref) {
   var isLayerDimensionSynced = _ref.isLayerDimensionSynced;
-  return isLayerDimensionSynced ? jsx(Link, {
+  return isLayerDimensionSynced ? /*#__PURE__*/jsx(Link, {
     "data-testid": "syncIcon"
-  }) : jsx(LinkOff, {
+  }) : /*#__PURE__*/jsx(LinkOff, {
     "data-testid": "syncDisIcon"
   });
 };
@@ -11218,11 +11523,11 @@ var MapDimensionSelect = function MapDimensionSelect(_ref2) {
   var marks = marksByDimension(t, wmsDimension);
   var isLayerDimensionSynced = layerDimension.synced !== undefined && layerDimension.synced;
   var tooltipTitle = isLayerDimensionSynced ? t('webmap-react-click-disconnect') : t('webmap-react-click-connect');
-  return jsxs(Grid, {
+  return /*#__PURE__*/jsxs(Grid, {
     size: {
       xs: 'auto'
     },
-    children: [jsx(CustomIconButton, {
+    children: [/*#__PURE__*/jsx(CustomIconButton, {
       "data-testid": "syncButton",
       onClick: function onClick() {
         return handleSyncChanged(layerId, dimensionName, layerDimension.currentValue, !layerDimension.synced);
@@ -11231,10 +11536,10 @@ var MapDimensionSelect = function MapDimensionSelect(_ref2) {
         margin: '5px'
       },
       tooltipTitle: tooltipTitle,
-      children: jsx(Icon, {
+      children: /*#__PURE__*/jsx(Icon, {
         isLayerDimensionSynced: isLayerDimensionSynced
       })
-    }), jsx(DimensionSelectSlider, {
+    }), /*#__PURE__*/jsx(DimensionSelectSlider, {
       isDisabled: false,
       layerTitle: layerTitle,
       managedValue: Number(layerDimension.currentValue) || layerDimension.currentValue,
@@ -11253,7 +11558,7 @@ var LayerInfoButton = function LayerInfoButton(_ref) {
   var isActive = _ref.isActive,
     onClick = _ref.onClick,
     props = _objectWithoutProperties(_ref, _excluded);
-  return jsx(CustomIconButton, _objectSpread2(_objectSpread2({
+  return /*#__PURE__*/jsx(CustomIconButton, _objectSpread2(_objectSpread2({
     "aria-label": "layer info",
     className: "layerInfoButton",
     "data-testid": "layerInfoButton",
@@ -11262,7 +11567,7 @@ var LayerInfoButton = function LayerInfoButton(_ref) {
     onClick: onClick,
     variant: "flat"
   }, props), {}, {
-    children: jsx(Info, {})
+    children: /*#__PURE__*/jsx(Info, {})
   }));
 };
 
@@ -11277,12 +11582,12 @@ var textStyleWithMargin = _objectSpread2(_objectSpread2({}, textStyle), {}, {
 var LayerInfoText = function LayerInfoText(_ref) {
   var label = _ref.label,
     value = _ref.value;
-  return jsxs(Fragment, {
-    children: [jsx(Typography$1, {
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Typography$1, {
       sx: textStyle,
       variant: "subtitle2",
       children: label
-    }), jsx(Typography$1, {
+    }), /*#__PURE__*/jsx(Typography$1, {
       sx: textStyleWithMargin,
       variant: "body2",
       children: value
@@ -11290,26 +11595,61 @@ var LayerInfoText = function LayerInfoText(_ref) {
   });
 };
 
-var LayerInfoLegend = function LayerInfoLegend(_ref) {
-  var title = _ref.title,
-    name = _ref.name,
-    dimensions = _ref.dimensions,
-    legendURL = _ref.legendURL;
-  var _useWebmapReactTransl = useWebmapReactTranslation(),
-    t = _useWebmapReactTransl.t;
-  return jsxs(Fragment, {
-    children: [jsx(Typography$1, {
-      sx: textStyleWithMargin,
-      variant: "subtitle2",
-      children: t('webmap-react-legend')
-    }), jsx(LegendLayout, {
-      dimensions: dimensions,
-      name: name,
-      title: title,
-      children: legendURL ? jsx("img", {
-        alt: title,
-        src: legendURL
-      }) : '-'
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
+var LayerInfoLegend = function LayerInfoLegend(_ref) {
+  var title = _ref.title,
+    legendURL = _ref.legendURL,
+    showLayerLegend = _ref.showLayerLegend,
+    onToggleLayerLegendVisibility = _ref.onToggleLayerLegendVisibility;
+  var _useWebmapReactTransl = useWebmapReactTranslation(),
+    t = _useWebmapReactTransl.t;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs(Box, {
+      sx: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        width: '100%'
+      },
+      children: [/*#__PURE__*/jsx(Typography$1, {
+        sx: textStyleWithMargin,
+        variant: "subtitle2",
+        children: t('webmap-react-legend')
+      }), /*#__PURE__*/jsx(FormGroup, {
+        children: /*#__PURE__*/jsx(FormControlLabel, {
+          control: /*#__PURE__*/jsx(Checkbox, {
+            checked: showLayerLegend,
+            onChange: function onChange() {
+              onToggleLayerLegendVisibility(!showLayerLegend);
+            }
+          }),
+          label: t('webmap-react-show-layer-legend'),
+          sx: textStyleWithMargin
+        })
+      })]
+    }), /*#__PURE__*/jsx(LegendLayout, {
+      title: title,
+      children: legendURL ? /*#__PURE__*/jsx("img", {
+        alt: title,
+        src: legendURL
+      }) : '-'
     })]
   });
 };
@@ -11320,41 +11660,41 @@ var valueStyle = _objectSpread2(_objectSpread2({}, textStyle), {}, {
 var LayerInfoList = function LayerInfoList(_ref) {
   var label = _ref.label,
     list = _ref.list;
-  return jsxs(Fragment, {
-    children: [jsx(Typography$1, {
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Typography$1, {
       sx: textStyle,
       variant: "subtitle2",
       children: label
-    }), list.length === 0 ? jsx(Typography$1, {
+    }), list.length === 0 ? /*#__PURE__*/jsx(Typography$1, {
       sx: textStyleWithMargin,
       variant: "body2",
       children: "-"
-    }) : jsx(Grid, {
+    }) : /*#__PURE__*/jsx(Grid, {
       container: true,
       direction: "column",
       children: list.map(function (item) {
-        return jsxs("div", {
-          children: [jsxs(Grid, {
+        return /*#__PURE__*/jsxs("div", {
+          children: [/*#__PURE__*/jsxs(Grid, {
             container: true,
             direction: "row",
-            children: [item.icon, jsx(Grid, {
+            children: [item.icon, /*#__PURE__*/jsx(Grid, {
               sx: {
                 marginLeft: '10px'
               },
-              children: jsxs(Typography$1, {
+              children: /*#__PURE__*/jsxs(Typography$1, {
                 sx: textStyle,
                 variant: "body2",
                 children: [item.label, ":"]
               })
             })]
-          }), jsx(Grid, {
+          }), /*#__PURE__*/jsx(Grid, {
             container: true,
             direction: "row",
             sx: {
               marginBottom: 1,
               paddingLeft: '34px'
             },
-            children: jsx(Typography$1, {
+            children: /*#__PURE__*/jsx(Typography$1, {
               sx: valueStyle,
               variant: "body2",
               children: item.value
@@ -11366,6 +11706,24 @@ var LayerInfoList = function LayerInfoList(_ref) {
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var getLayerStyles = function getLayerStyles(layer) {
   if (!layer.styles) {
     return '-';
@@ -11406,13 +11764,13 @@ var getDimensionIcon = function getDimensionIcon(name, dimensions) {
   }
   switch (dimension.name.toLowerCase()) {
     case 'time':
-      return jsx(DimensionsTime, {});
+      return /*#__PURE__*/jsx(DimensionsTime, {});
     case 'reference_time':
-      return jsx(DimensionsRefTime, {});
+      return /*#__PURE__*/jsx(DimensionsRefTime, {});
     case 'elevation':
-      return jsx(DimensionsElevation, {});
+      return /*#__PURE__*/jsx(DimensionsElevation, {});
     default:
-      return jsx(DimensionsOther, {});
+      return /*#__PURE__*/jsx(DimensionsOther, {});
   }
 };
 var getDimensionLabel = function getDimensionLabel(name) {
@@ -11435,10 +11793,12 @@ var getDimensionsList = function getDimensionsList(dimensions) {
       icon: icon
     });
   });
+
   // sort alphabetically so other dimensions are sorted
   result.sort(function (compA, compB) {
     return compA.label.localeCompare(compB.label);
   });
+
   // sort by fixed order
   var preferredOrder = ['Time', 'Reference time', 'Elevation'];
   // using reverse ordering to make sure the other dimensions come last
@@ -11449,6 +11809,24 @@ var getDimensionsList = function getDimensionsList(dimensions) {
   return result;
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var LayerInfoDialog = function LayerInfoDialog(_ref) {
   var _layer$styles, _layer$styles2, _layer$path, _layer$keywords;
   var onClose = _ref.onClose,
@@ -11468,7 +11846,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(),
@@ -11476,10 +11856,10 @@ 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, {
+  return /*#__PURE__*/jsx(ToolContainerDraggable, {
     isOpen: isOpen,
     onClose: onClose,
     onMouseDown: onMouseDown,
@@ -11491,44 +11871,44 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
       height: dialogHeight || 650
     },
     title: t('webmap-react-layer-info'),
-    children: jsxs(Box$1, {
+    children: /*#__PURE__*/jsxs(Box$1, {
       sx: {
         padding: 2
       },
-      children: [jsx(LayerInfoText, {
+      children: [/*#__PURE__*/jsx(LayerInfoText, {
         label: t('webmap-react-title'),
         value: layer.title
-      }), jsx(LayerInfoText, {
+      }), /*#__PURE__*/jsx(LayerInfoText, {
         label: t('webmap-react-name'),
         value: layer.name
-      }), jsx(LayerInfoText, {
+      }), /*#__PURE__*/jsx(LayerInfoText, {
         label: t('webmap-react-service'),
         value: serviceName
-      }), jsx(LayerInfoText, {
+      }), /*#__PURE__*/jsx(LayerInfoText, {
         label: t('webmap-react-service-url'),
         value: serviceUrl || '-'
-      }), jsx(LayerInfoText, {
+      }), /*#__PURE__*/jsx(LayerInfoText, {
         label: t('webmap-react-abstract'),
         value: layer["abstract"] || '-'
-      }), jsx(LayerInfoList, {
+      }), /*#__PURE__*/jsx(LayerInfoList, {
         label: t('webmap-react-dimensions'),
         list: dimensions
-      }), jsx(LayerInfoText, {
+      }), /*#__PURE__*/jsx(LayerInfoText, {
         label: t('webmap-react-styles'),
         value: styles
-      }), jsx(LayerInfoText, {
+      }), /*#__PURE__*/jsx(LayerInfoText, {
         label: t('webmap-react-bounding-box'),
         value: bbox
-      }), jsx(LayerInfoText, {
+      }), /*#__PURE__*/jsx(LayerInfoText, {
         label: t('webmap-react-groups'),
         value: ((_layer$path = layer.path) === null || _layer$path === void 0 ? void 0 : _layer$path.join('/')) || '-'
-      }), jsx(LayerInfoText, {
+      }), /*#__PURE__*/jsx(LayerInfoText, {
         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,
+      }), /*#__PURE__*/jsx(LayerInfoLegend, {
         legendURL: legendURL,
-        name: layer.name,
+        onToggleLayerLegendVisibility: onToggleLayerLegendVisibility,
+        showLayerLegend: showLayerLegend,
         title: layer.title
       })]
     })
@@ -11552,6 +11932,7 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
  * Copyright 2024 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var MapContext = /*#__PURE__*/createContext({});
 
 var HoldShiftToZoomMessage = function HoldShiftToZoomMessage() {
@@ -11577,7 +11958,7 @@ var HoldShiftToZoomMessage = function HoldShiftToZoomMessage() {
       window.removeEventListener('wheel', updateScroll);
     };
   }, [showMessage, setShowMessage, timerRef]);
-  return jsx("div", {
+  return /*#__PURE__*/jsx("div", {
     style: {
       position: 'absolute',
       "float": 'left',
@@ -11588,7 +11969,7 @@ var HoldShiftToZoomMessage = function HoldShiftToZoomMessage() {
       padding: '0 40%',
       color: 'white'
     },
-    children: !!showMessage && jsx("div", {
+    children: !!showMessage && /*#__PURE__*/jsx("div", {
       style: {
         padding: '5px 20px',
         display: 'block',
@@ -11655,16 +12036,16 @@ var MapMousePosition = function MapMousePosition() {
     };
   }, [map, projection]);
   if (mousePosition) {
-    return jsx(Box, {
+    return /*#__PURE__*/jsx(Box, {
       "data-testid": "map-mouse-position",
       sx: {
         zIndex: 10,
         justifySelf: 'center',
-        bottom: '36px',
+        bottom: '26px',
         left: '6px',
         position: 'absolute'
       },
-      children: jsxs(Typography, {
+      children: /*#__PURE__*/jsxs(Typography, {
         "data-testid": "map-mouse-position-typography",
         sx: {
           fontSize: 9,
@@ -11674,7 +12055,7 @@ var MapMousePosition = function MapMousePosition() {
           px: 0.5,
           py: 0.25
         },
-        children: [mousePosition === null || mousePosition === void 0 ? void 0 : mousePosition.projection, ": ", mousePosition === null || mousePosition === void 0 ? void 0 : mousePosition.mousePosition, jsx("br", {}), "lonlat: ".concat(mousePosition === null || mousePosition === void 0 ? void 0 : mousePosition.mousePositionLatLon)]
+        children: [mousePosition === null || mousePosition === void 0 ? void 0 : mousePosition.projection, ": ", mousePosition === null || mousePosition === void 0 ? void 0 : mousePosition.mousePosition, /*#__PURE__*/jsx("br", {}), "lonlat: ".concat(mousePosition === null || mousePosition === void 0 ? void 0 : mousePosition.mousePositionLatLon)]
       })
     });
   }
@@ -11698,6 +12079,7 @@ var MapMousePosition = function MapMousePosition() {
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var OPENLAYERS_MOUSEWHEEL_DURATION = 50;
 var OPENLAYERS_MOUSEWHEEL_TIMEOUT = 50;
 
@@ -11747,6 +12129,7 @@ var OpenLayersMapView = function OpenLayersMapView(_ref) {
       mapObject.setTarget(undefined);
     };
   }, [mapRef, passiveMap]);
+
   // Propagate key events to the DIV containing OpenLayers
   React.useEffect(function () {
     if (!isFocused) {
@@ -11800,9 +12183,9 @@ var OpenLayersMapView = function OpenLayersMapView(_ref) {
       map: map
     };
   }, [map]);
-  return jsx(MapContext.Provider, {
+  return /*#__PURE__*/jsx(MapContext.Provider, {
     value: memoizedMapContext,
-    children: jsxs("div", {
+    children: /*#__PURE__*/jsxs("div", {
       "aria-label": "map",
       "data-testid": "openlayers-mapview",
       id: "mapcontainer_".concat(mapId),
@@ -11813,7 +12196,7 @@ var OpenLayersMapView = function OpenLayersMapView(_ref) {
         height: '100%',
         position: 'relative'
       },
-      children: [children, jsx(MapMousePosition, {}), !!holdShiftToScroll && !!isMouseWheelZoomEnabled && jsx(HoldShiftToZoomMessage, {})]
+      children: [children, /*#__PURE__*/jsx(MapMousePosition, {}), !!holdShiftToScroll && !!isMouseWheelZoomEnabled && /*#__PURE__*/jsx(HoldShiftToZoomMessage, {})]
     })
   });
 };
@@ -11827,6 +12210,7 @@ var initializeOpenLayersProjections = function initializeOpenLayersProjections()
   });
   register(proj4);
 };
+
 /**
  * Returns a preferred projection to use with a particular layer. It will search the layer props for
  * a supported srs that either matches the current view srs or an srs that geoweb has reprojection math
@@ -11898,6 +12282,7 @@ var useProjection = function useProjection() {
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var setMapCenter = function setMapCenter(map, lon, lat, zoomLevel) {
   var center = fromLonLat([lon, lat], map.getView().getProjection());
   map.getView().setCenter(center);
@@ -11923,6 +12308,7 @@ var setMapCenter = function setMapCenter(map, lon, lat, zoomLevel) {
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var FEATURE_DRAW_FILL_COLOR_TRANSPARENT = '#186DFF18';
 var FEATURE_DRAW_FILL_COLOR = '#186DFF';
 var FEATURE_DRAW_STROKE_COLOR = '#186DFF';
@@ -11946,6 +12332,7 @@ var FEATURE_DRAW_SECONDARY_STROKE_COLOR = '#6e1e91';
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var DEFAULT_GEOJSON_STYLE_FILL_OPACITY = 0.1;
 var defaultGeoJSONStyleProperties = {
   fill: FEATURE_DRAW_FILL_COLOR,
@@ -12016,8 +12403,10 @@ var lineStringCollection = {
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 // Cache for for storing and reusing Proj4 instances
 var projectorCache = {};
+
 // Ensure that you have a proj4 object, pulling from the cache if necessary
 var getProj4 = function getProj4(projection) {
   // Duck typing: check for the 'forward' and 'inverse' methods which are present on proj4 projection objects
@@ -12074,6 +12463,7 @@ var addFeatureProperties = function addFeatureProperties(geojson, featurePropert
     }
   });
 };
+
 /**
  * Checks if the geometry of the feature is empty as defined per GeoJSON spec.
  * According to the specification, an empty geometry is type 'Polygon' and coordinates
@@ -12103,6 +12493,7 @@ var getGeoJSONPropertyValue = function getGeoJSONPropertyValue(property, propert
   // otherwise get values from default properties
   return defaultProperties === null || defaultProperties === void 0 ? void 0 : defaultProperties[property];
 };
+
 /**
  * moves geoJSON feature as new feature. Mutates newGeoJSON
  * @constructor
@@ -12157,6 +12548,7 @@ var moveFeature = function moveFeature(currentGeoJSON, newGeoJSON, featureLayerI
   }
   return undefined;
 };
+
 /**
  * Returns the intersection of two point features. In case of a polygon, only the first feature is used.
  * @param intersectA Feature A
@@ -12193,6 +12585,7 @@ var intersectPointGeoJSONS = function intersectPointGeoJSONS(intersectA, interse
     }] : [featureA]
   }, geoJSONProperties);
 };
+
 // Helper functions for projection matching
 function makeProjectorsFromCode(epsg) {
   if (!epsg || epsg === 'EPSG:4326') {
@@ -12204,6 +12597,7 @@ function makeProjectorsFromCode(epsg) {
       unproject: id
     };
   }
+
   // 3857-variants
   if (['EPSG:3857', 'EPSG:3785', 'EPSG:900913', 'EPSG:102100'].includes(epsg)) {
     return {
@@ -12216,6 +12610,7 @@ function makeProjectorsFromCode(epsg) {
     };
   }
   var fwd = proj4('EPSG:4326', epsg); // WGS84 -> target SRS
+
   var project = function project(feat) {
     var out = cloneDeep(feat);
     coordEach(out, function (coords) {
@@ -12251,12 +12646,14 @@ function makeProjectorsFromCode(epsg) {
     unproject: unproject
   };
 }
+
 /**
  * Returns the intersection of two (multi) polygon features. In case of a polygon, only the first feature is used.
  * @param intersectA Feature A
  * @param intersectB Feature B
  * @returns The intersection of the two features.
  */
+
 function intersectPolygonGeoJSONS(intersectA,
 // drawn polygon (WGS84)
 intersectB) {
@@ -12271,12 +12668,14 @@ intersectB) {
   // Pull geometry
   var drawnPolygon = intersectA.features[0];
   var firPolygon = intersectB.features[0];
+
   // Projector based on active map projection
   var _makeProjectorsFromCo = makeProjectorsFromCode(projectionCode),
     project = _makeProjectorsFromCo.project,
     unproject = _makeProjectorsFromCo.unproject;
   var drawnInMap = project(drawnPolygon);
   var firInMap = project(firPolygon);
+
   // Intersect in map projection
   var pair = {
     type: 'FeatureCollection',
@@ -12298,6 +12697,7 @@ intersectB) {
       }]
     }, geoJSONProperties);
   }
+
   // Back to WGS84 for rendering
   var intersectionWgs84 = unproject(intersectionInMapProj);
   var intersectionWgs84Cleaned = cleanCoords(intersectionWgs84);
@@ -12309,11 +12709,13 @@ intersectB) {
 var isPointFeatureCollection = function isPointFeatureCollection(geojson) {
   return geojson.features[0].geometry.type === 'Point';
 };
+
 /**
  * Adds the intersectionStart and intersectionEnd properties to the GeoJSONS structure
  * @param geoJSONs
  * @returns GeoJSONS extend with intersections
  */
+
 var createInterSections = function createInterSections(geojson, otherGeoJSON) {
   var geoJSONproperties = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
     stroke: '#f24a00',
@@ -12391,6 +12793,7 @@ var getFeatureCollection = function getFeatureCollection(geoJSONFeature, shouldA
     features: [geoJSONFeature]
   });
 };
+
 // check if geoJSON has same selectionType in properties as passed selectionType
 var isGeoJSONFeatureCreatedByTool = function isGeoJSONFeatureCreatedByTool(existingJSON, selectionType) {
   var _existingJSON$feature;
@@ -12404,7 +12807,8 @@ var isGeoJSONFeatureCreatedByTool = function isGeoJSONFeatureCreatedByTool(exist
 var rewindGeometry = function rewindGeometry(geoJSON) {
   return produce(geoJSON, function (geoJSONDraft) {
     if (geoJSONDraft && geoJSONDraft.features.length > 0 && geoJSONDraft.features[0].geometry.type === 'Polygon' && geoJSONDraft.features[0].geometry.coordinates[0].length > 1) {
-      var geometry = geoJSON.features[0].geometry;
+      var _ref = geoJSON.features[0],
+        geometry = _ref.geometry;
       var lineString = polygonToLine(geometry);
       if (booleanClockwise(lineString.geometry.coordinates)) {
         // eslint-disable-next-line no-param-reassign
@@ -12466,6 +12870,7 @@ var getDrawModeIdFromSelectionType = function getDrawModeIdFromSelectionType(sel
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 initializeOpenLayersProjections();
 var setViewFromExtent = function setViewFromExtent(view, bbox) {
   if (!bbox || !Number(bbox.left) || !isFinite(bbox.left) || isNaN(bbox.left)) {
@@ -12511,6 +12916,7 @@ var privateWmsGetCapabilities = privateWebMapUtils.privateWmsGetCapabilities,
   privateWmsFlattenLayerTree = privateWebMapUtils.privateWmsFlattenLayerTree,
   privateWmtsGetCapabilities = privateWebMapUtils.privateWmtsGetCapabilities,
   QUERYWMS_GETCAPABILITIES = privateWebMapUtils.QUERYWMS_GETCAPABILITIES;
+
 /**
  * Queries the WMS GetCapabilities. This is the base TanStack hook for the other hooks in this file.
  *
@@ -12540,6 +12946,7 @@ var useQueryGetWMSGetCapabilities = function useQueryGetWMSGetCapabilities(servi
     }()
   });
 };
+
 /**
  * Returns details about the WMS service
  *
@@ -12562,6 +12969,7 @@ var useQueryGetWMSServiceInfo = function useQueryGetWMSServiceInfo(serviceUrl) {
   }, [serviceUrl, getCapabilitiesJSON]);
   return serviceInfo;
 };
+
 /**
  * Gets the layer tree in hierarchical order for a WMS service. Cached by TanStack. Uses the same store as in queryWMSGetCapabilities.
  *
@@ -12584,6 +12992,7 @@ var useQueryGetWMSLayersTree = function useQueryGetWMSLayersTree(serviceUrl) {
   }, [serviceUrl, getCapabilitiesJSON]);
   return layerTree;
 };
+
 /**
  * Gets the flat layer list (without hierarchy) for a WMS service. Cached by TanStack. Uses the same store as in queryWMSGetCapabilities.
  *
@@ -12611,6 +13020,7 @@ var useQueryGetWMSLayers = function useQueryGetWMSLayers(serviceUrl) {
   }, [serviceUrl, getCapabilitiesJSON]);
   return layers;
 };
+
 /**
  * Returns specific layer from the WMS service
  *
@@ -12631,6 +13041,7 @@ var useQueryGetWMSLayer = function useQueryGetWMSLayer(serviceUrl, name) {
   }, [layers, name]);
   return layer;
 };
+
 /**
  * Returns a stylelist for given layer in a service
  *
@@ -12642,6 +13053,7 @@ var useGetWMSLayerStyleList = function useGetWMSLayerStyleList(serviceUrl, name)
   var _useQueryGetWMSLayer;
   return ((_useQueryGetWMSLayer = useQueryGetWMSLayer(serviceUrl, name)) === null || _useQueryGetWMSLayer === void 0 ? void 0 : _useQueryGetWMSLayer.styles) || null;
 };
+
 /**
  * Returns a WMLayer instance. If the layerType is LayerType.mapLayer or LayerType.wmtsMapLayer, the layer will detect the right type and will contain the parsed dimensions and styles.
  *
@@ -12665,6 +13077,7 @@ var useGetWMLayerInstance = function useGetWMLayerInstance(layerFoundation) {
   var layerId = refId.current;
   var _useContext = useContext(TimeContext),
     refTimeDimensionModes = _useContext.refTimeDimensionModes;
+
   // Check if the layer is already registered
   var tmpWMLayer = webmapUtils.getWMLayerById(layerId);
   var layerIdChanged = id && id !== (tmpWMLayer === null || tmpWMLayer === void 0 ? void 0 : tmpWMLayer.id);
@@ -12703,6 +13116,7 @@ var useGetWMLayerInstance = function useGetWMLayerInstance(layerFoundation) {
     errorMessage: errorMessage
   };
 };
+
 /**
  * Used for querying WMTS GetCapabilities documents
  * @param serviceUrl
@@ -12787,6 +13201,7 @@ var ShowTimeAwareLayerInfo = function ShowTimeAwareLayerInfo(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     render = _useState2[0],
     setRender = _useState2[1];
+
   // Sets a timer
   useEffect(function () {
     intervalIdRef.current = setInterval(function () {
@@ -12814,7 +13229,7 @@ var ShowTimeAwareLayerInfo = function ShowTimeAwareLayerInfo(_ref) {
       var top = requestedStepIsOutsideRange ? '5px' : '2px';
       var left = "calc(25% + ".concat(index * itemWidth, "px)");
       var opacity = isSelectedStep ? 1 : 0.8;
-      return jsx("span", {
+      return /*#__PURE__*/jsx("span", {
         style: {
           background: isSelectedStep ? '#C0FF50' : colorLayerIsOutsideRange,
           display: 'block',
@@ -12834,16 +13249,16 @@ var ShowTimeAwareLayerInfo = function ShowTimeAwareLayerInfo(_ref) {
   var dimsInfo = wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.dimensions.map(function (wmLayerDimension) {
     return getDimensionInfo(wmLayerDimension);
   });
-  var tooltipText = jsxs("span", {
-    children: [wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.title, ": ", jsx("br", {}), wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.dimensions.map(function (dim, index) {
-      return jsxs("span", {
-        children: [dim.name, ": ", formatDimensionVal(dim.name, dim.currentValue), index < dimsInfo.length - 1 && jsx("br", {})]
+  var tooltipText = /*#__PURE__*/jsxs("span", {
+    children: [wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.title, ": ", /*#__PURE__*/jsx("br", {}), wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.dimensions.map(function (dim, index) {
+      return /*#__PURE__*/jsxs("span", {
+        children: [dim.name, ": ", formatDimensionVal(dim.name, dim.currentValue), index < dimsInfo.length - 1 && /*#__PURE__*/jsx("br", {})]
       }, "".concat(dim.name, "-").concat(dim.currentValue));
     })]
   });
-  return jsx(CustomTooltip, {
+  return /*#__PURE__*/jsx(CustomTooltip, {
     title: tooltipText,
-    children: jsxs("div", {
+    children: /*#__PURE__*/jsxs("div", {
       "data-testid": "debug-info",
       style: {
         position: 'relative',
@@ -12853,14 +13268,14 @@ var ShowTimeAwareLayerInfo = function ShowTimeAwareLayerInfo(_ref) {
         marginTop: '12px',
         marginBottom: '-10px'
       },
-      children: [jsx("div", {
+      children: [/*#__PURE__*/jsx("div", {
         style: {
           width: '100%'
         },
-        children: jsx("div", {
+        children: /*#__PURE__*/jsx("div", {
           children: items
         })
-      }), jsxs("div", {
+      }), /*#__PURE__*/jsxs("div", {
         style: {
           left: '10px',
           paddingTop: '3px',
@@ -12869,7 +13284,7 @@ var ShowTimeAwareLayerInfo = function ShowTimeAwareLayerInfo(_ref) {
           opacity: 0.85,
           width: '100%'
         },
-        children: [jsx("span", {
+        children: [/*#__PURE__*/jsx("span", {
           style: {
             display: 'inline-block',
             verticalAlign: 'top',
@@ -12885,14 +13300,14 @@ var ShowTimeAwareLayerInfo = function ShowTimeAwareLayerInfo(_ref) {
             borderRadius: 2
           },
           children: wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.title
-        }), jsx("span", {
+        }), /*#__PURE__*/jsx("span", {
           style: {
             display: 'inline-block',
             width: '75%',
             opacity: '0.7'
           },
           children: dimsInfo.map(function (dimension) {
-            return jsx("span", {
+            return /*#__PURE__*/jsx("span", {
               style: {
                 margin: '0 0 0 0px',
                 padding: '1px 5px',
@@ -12934,6 +13349,7 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     layer = _useState2[0],
     setLayer = _useState2[1];
+
   // get a wmLayer instance
   var _useGetWMLayerInstanc = useGetWMLayerInstance({
       service: getCapsURL,
@@ -12948,23 +13364,26 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
   }
   // dimensionsValues is a key/value dictionary with dimension names specifically for WMS GetMap requests
   var dimensionsValues = getDimensionParamsForWMS(dimensions, wmLayer);
+
   // This string can be used safely in a useEffect or other React hook to check if the contents changed
   var dimensionsValuesEffectCheck = dimensionsValues && Object.entries(dimensionsValues).map(function (dimensionNameAndCurrentValue) {
     return "".concat(dimensionNameAndCurrentValue[0], ":").concat(dimensionNameAndCurrentValue[1]);
   }).join(',');
   var prefetchListEffectCheck = (prefetchList !== null && prefetchList !== void 0 ? prefetchList : []).join(',');
+
   // Make a TimeawareImageSource and add it to the map, add and remove should only be done when the map changes, layer id changes, visibility changes or dimensionsValues get defined.
   useEffect(function () {
     if (!map || !wmLayer || !visible || !dimensionsValues) {
       return function () {};
     }
+
     // When this component mounts, an ImageLayer is added to the map. Once it unmounts, this layer is removed from the map.
     var olLayer = new ImageLayer({
       source: new TimeawareImageSource({
         wmsUrl: wmLayer.getmapURL,
         layerName: wmLayer.name,
         layerId: layerId || '',
-        styleName: styleName,
+        styleName: styleName && styleName !== 'default' ? styleName : '',
         dimProps: dimensionsValues,
         timeStampsToPrefetch: [],
         visible: visible
@@ -12981,12 +13400,14 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
       map.removeLayer(olLayer);
       olLayer.dispose();
     };
+
     // The dependency list should only contain the map, wmLayer, visible and dimensionValues. Other prop changes are handled by other effects.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [map, wmLayer, visible, dimensionsValues === undefined]);
   useEffect(function () {
     onLayerReady && wmLayer && layerId && onLayerReady(layerId);
   }, [layerId, wmLayer, onLayerReady]);
+
   // Initialize layer for GeoWeb, call onInitializeLayer
   useEffect(function () {
     var initializeLayer = /*#__PURE__*/function () {
@@ -13019,8 +13440,10 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
                 firstRefTime = refTimeDim === null || refTimeDim === void 0 ? void 0 : refTimeDim.getClosestValue(refTimeToFind, true);
                 firstRefTime && refTimeDim && (wmTimeDim === null || wmTimeDim === void 0 ? void 0 : wmTimeDim.setTimeValuesForReferenceTime(firstRefTime, refTimeDim));
               }
+
               // Make sure style is set in wmLayer as well
               styleName && wmLayer.setStyle(styleName);
+
               // Make sure we have the latest dimension values before initializing
               _context.next = 10;
               return wmLayer.parseLayer();
@@ -13055,9 +13478,11 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
       return window.console.error(e);
     });
     return function () {};
+
     // Effect array should only contain wmLayer and layerName
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [wmLayer, layerName]);
+
   // Layer opacity and zIndex useEffect
   useEffect(function () {
     if (!layerOptions || !layer) {
@@ -13071,33 +13496,38 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [layer, layerOptions === null || layerOptions === void 0 ? void 0 : layerOptions.zIndex, layerOptions === null || layerOptions === void 0 ? void 0 : layerOptions.opacity]);
+
   // Layer visible useEffect
   useEffect(function () {
     layer === null || layer === void 0 || layer.setVisible(visible);
   }, [layer, visible]);
+
   // Layer styleName properties useEffect
   useEffect(function () {
     if (wmLayer) {
       var _styles$, _layer$getSource;
       var styles = wmLayer.getStyles();
-      var style = styleName && styles.some(function (style) {
+      var style = styleName && styleName !== 'default' && styles.some(function (style) {
         return style.name === styleName;
-      }) ? styleName : ((_styles$ = styles[0]) === null || _styles$ === void 0 ? void 0 : _styles$.name) || '';
-      wmLayer.setStyle(style);
+      }) ? styleName : '';
+      wmLayer.setStyle(style || ((_styles$ = styles[0]) === null || _styles$ === void 0 ? void 0 : _styles$.name) || '');
       layer === null || layer === void 0 || (_layer$getSource = layer.getSource()) === null || _layer$getSource === void 0 || _layer$getSource.setStyle(style);
     }
   }, [layer, styleName, wmLayer]);
+
   // layerName  useEffect
   useEffect(function () {
     var _layer$getSource2;
     layer === null || layer === void 0 || (_layer$getSource2 = layer.getSource()) === null || _layer$getSource2 === void 0 || _layer$getSource2.setLayerName(layerName);
   }, [layer, layerName]);
+
   // Layer dim values useEffect,
   useEffect(function () {
     var _layer$getSource3;
     dimensionsValues && (layer === null || layer === void 0 || (_layer$getSource3 = layer.getSource()) === null || _layer$getSource3 === void 0 ? void 0 : _layer$getSource3.setDimProps(dimensionsValues));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [layer, dimensionsValuesEffectCheck]);
+
   // Prefetch useEffect
   useEffect(function () {
     var _wmLayer$dimensions3;
@@ -13125,11 +13555,12 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
     // - dimensionsValuesEffectCheck,
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [layer, wmLayer, prefetchListEffectCheck, layerName, styleName, dimensionsValuesEffectCheck]);
+
   // Only show debug info for data layers with time dimension
   var hasTimeDim = (_wmLayer$dimensions$f = wmLayer === null || wmLayer === void 0 || (_wmLayer$dimensions4 = wmLayer.dimensions) === null || _wmLayer$dimensions4 === void 0 ? void 0 : _wmLayer$dimensions4.findIndex(function (dimension) {
     return dimension.name === 'time';
   })) !== null && _wmLayer$dimensions$f !== void 0 ? _wmLayer$dimensions$f : -1;
-  return debugMode && hasTimeDim !== -1 ? jsx(ShowTimeAwareLayerInfo, {
+  return debugMode && hasTimeDim !== -1 ? /*#__PURE__*/jsx(ShowTimeAwareLayerInfo, {
     layer: layer,
     stepsToCheck: prefetchList,
     visible: visible,
@@ -13155,6 +13586,7 @@ var WMSLayer = function WMSLayer(_ref) {
     setProjection = _useState4[1];
   var layerInformation = useQueryGetWMSLayer(url, layerName);
   var mapProjection = useProjection();
+
   // Listen to changes in the map projection
   useEffect(function () {
     var _map$getView;
@@ -13173,6 +13605,7 @@ var WMSLayer = function WMSLayer(_ref) {
       unByKey(eventKey);
     };
   }, [map, layerInformation, mapProjection]);
+
   // Set up layer
   useEffect(function () {
     if (!map || !layerName || !projection) {
@@ -13199,6 +13632,7 @@ var WMSLayer = function WMSLayer(_ref) {
       setLayer(undefined);
     };
   }, [map, url, projection, layerName, styleName]);
+
   // Update layer options
   useEffect(function () {
     if (!layerOptions || !layer) {
@@ -13216,6 +13650,7 @@ var WMSLayer = function WMSLayer(_ref) {
       return;
     }
     layer.setVisible(!!layerProps.enabled);
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [layer, layerProps === null || layerProps === void 0 ? void 0 : layerProps.enabled]);
   return null;
@@ -13238,6 +13673,7 @@ var WMSLayer = function WMSLayer(_ref) {
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var WMTSDimensionsFromDimensions = function WMTSDimensionsFromDimensions(dimensions) {
   return dimensions.map(function (item) {
     return item.name ? _defineProperty({}, item.name[0].toUpperCase() + item.name.slice(1).toLowerCase(), item.currentValue) : {};
@@ -13318,6 +13754,7 @@ var WMTSLayer = function WMTSLayer(_ref) {
       return;
     }
     layer.setVisible(!!layerProps.enabled);
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [layer, layerProps === null || layerProps === void 0 ? void 0 : layerProps.enabled]);
   return null;
@@ -13370,6 +13807,7 @@ var XYZLayer = function XYZLayer(_ref) {
       return;
     }
     layer.setVisible(!!layerProps.enabled);
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [layer, layerProps === null || layerProps === void 0 ? void 0 : layerProps.enabled]);
   return null;
@@ -13392,6 +13830,7 @@ var XYZLayer = function XYZLayer(_ref) {
  * Copyright 2024 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var useSetIntervalWhenVisible = function useSetIntervalWhenVisible(autoUpdate, refetchInterval) {
   var shouldAutoFetch = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   var intervalIdRef = useRef();
@@ -13409,6 +13848,7 @@ var useSetIntervalWhenVisible = function useSetIntervalWhenVisible(autoUpdate, r
       refetch();
     }
   }, [refetch, refetchInterval]);
+
   // Triggers when document becomes visible
   useLayoutEffect(function () {
     var onVisibilityChange = function onVisibilityChange() {
@@ -13420,6 +13860,7 @@ var useSetIntervalWhenVisible = function useSetIntervalWhenVisible(autoUpdate, r
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [refetchInterval, shouldAutoFetch]);
+
   // Sets a timer
   useEffect(function () {
     intervalIdRef.current = setInterval(refetch, refetchInterval);
@@ -13447,6 +13888,7 @@ var useSetIntervalWhenVisible = function useSetIntervalWhenVisible(autoUpdate, r
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 initializeOpenLayersProjections();
 var useViewFromLayer = function useViewFromLayer(layerProps) {
   var baseView = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
@@ -13639,11 +14081,30 @@ var TiledWMSLayer = function TiledWMSLayer(_ref) {
       return;
     }
     layer.setVisible(!!layerProps.enabled);
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [layer, layerProps === null || layerProps === void 0 ? void 0 : layerProps.enabled]);
   return null;
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var layerOptions = {
   zIndex: 1,
   opacity: 1
@@ -13651,18 +14112,18 @@ var layerOptions = {
 var layerProps = {
   enabled: true
 };
-var BaseLayerType;
-(function (BaseLayerType) {
+var BaseLayerType = /*#__PURE__*/function (BaseLayerType) {
   BaseLayerType[BaseLayerType["LIGHT_GREY_CANVAS"] = 0] = "LIGHT_GREY_CANVAS";
   BaseLayerType[BaseLayerType["WORLD_TOPO"] = 1] = "WORLD_TOPO";
-})(BaseLayerType || (BaseLayerType = {}));
+  return BaseLayerType;
+}({});
 var DefaultBaseLayers = function DefaultBaseLayers(_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? BaseLayerType.LIGHT_GREY_CANVAS : _ref$type;
   var getBase = function getBase() {
     switch (type) {
       case BaseLayerType.WORLD_TOPO:
-        return jsx(WMTSLayer, {
+        return /*#__PURE__*/jsx(WMTSLayer, {
           getCapsURL: "https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/WMTS?SERVICE=WMTS&REQUEST=GetCapabilities",
           layerName: "World_Topo_Map",
           layerOptions: layerOptions,
@@ -13671,15 +14132,15 @@ var DefaultBaseLayers = function DefaultBaseLayers(_ref) {
         });
       case BaseLayerType.LIGHT_GREY_CANVAS:
       default:
-        return jsx(XYZLayer, {
+        return /*#__PURE__*/jsx(XYZLayer, {
           layerOptions: layerOptions,
           layerProps: layerProps,
           urlTemplate: "https://geoweb-maps-assets.pmc.knmi.cloud/WorldMap_Light_Grey_Canvas/EPSG3857/{z}/{x}/{y}.png"
         });
     }
   };
-  return jsxs(Fragment, {
-    children: [getBase(), jsx(TiledWMSLayer, {
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [getBase(), /*#__PURE__*/jsx(TiledWMSLayer, {
       layerName: "countryborders",
       layerOptions: {
         zIndex: 999,
@@ -13757,6 +14218,7 @@ var FeatureLayer = function FeatureLayer(_ref) {
       (_layerRef$current2 = layerRef.current) === null || _layerRef$current2 === void 0 || _layerRef$current2.setOpacity(opacity);
     }
   }, [opacity]);
+
   // Layer visible useEffect
   useEffect(function () {
     var _layerRef$current3;
@@ -13833,11 +14295,30 @@ var FeatureLayer = function FeatureLayer(_ref) {
   return null;
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var defaultLegend = makeLegendFromColorMap({
   colors: colorMaps.temperatureLegendColorsWoW,
   min: -18,
   max: 38
 });
+
 // Style needs to be optional to match the other layers. Therefore a default style is made here once.
 var defaultStyle = function defaultStyle(feature) {
   return makeFeatureStyleDisc(feature, defaultLegend);
@@ -13870,11 +14351,12 @@ var OpenLayersFeatureLayer = function OpenLayersFeatureLayer(_ref) {
       features.current = formatter.readFeatures(featureCollection);
     }
   }
+
   // If no featureCollection is given, e.g. in edit mode of a polygon, the feature should not be displayed.
   if (!featureCollection) {
     return null;
   }
-  return jsx(FeatureLayer, {
+  return /*#__PURE__*/jsx(FeatureLayer, {
     clickOnFeature: clickOnFeature,
     declutter: declutter,
     features: features.current,
@@ -13887,6 +14369,24 @@ var OpenLayersFeatureLayer = function OpenLayersFeatureLayer(_ref) {
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var TimeAwareEDRLocationLayer = function TimeAwareEDRLocationLayer(_ref) {
   var _wmLayer$getDimension, _wmLayer$getDimension2;
   var edrBaseUrl = _ref.edrBaseUrl,
@@ -13902,6 +14402,7 @@ var TimeAwareEDRLocationLayer = function TimeAwareEDRLocationLayer(_ref) {
     onInitializeLayer = _ref.onInitializeLayer;
   // get a wmLayer instance
   var wmLayer = useEDRWMLayer(edrBaseUrl, parameter, layerId, onInitializeLayer);
+
   // dimensionsValues is a key/value dictionary with dimension names specifically for WMS GetMap requests. We re-use it here for EDR.
   var dimensionsValues = getDimensionParamsForWMS(dimensions, wmLayer);
   var timeValue = dimensionsValues === null || dimensionsValues === void 0 ? void 0 : dimensionsValues['TIME'];
@@ -13910,14 +14411,16 @@ var TimeAwareEDRLocationLayer = function TimeAwareEDRLocationLayer(_ref) {
     featurePoints = _useEDRGetParameterDa.data,
     isFetching = _useEDRGetParameterDa.isFetching;
   var loadingStyle = parameter !== null && parameter !== void 0 && parameter.includes(',') ? makeFeatureStyleMultiParamLoading : makeFeatureStyleLoading;
+
   // Send empty collection if no API result yet
   var featureCollection = featurePoints !== null && featurePoints !== void 0 ? featurePoints : {
     features: [],
     type: 'FeatureCollection'
   };
+
   // Don't show anything if no parameter is selected
   var isVisible = visible && parameter.length > 0;
-  return jsx(OpenLayersFeatureLayer, {
+  return /*#__PURE__*/jsx(OpenLayersFeatureLayer, {
     declutter: true,
     featureCollection: featureCollection,
     opacity: opacity,
@@ -13944,6 +14447,7 @@ var TimeAwareEDRLocationLayer = function TimeAwareEDRLocationLayer(_ref) {
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var fetchStacCollection = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(stacBaseUrlWithCollection) {
     return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -14011,6 +14515,7 @@ var fetchStacItems = /*#__PURE__*/function () {
 }();
 
 var DEFAULT_STALE_TIME = 60000; // One minute
+
 var useStacCollection = function useStacCollection(stacBaseUrlWithCollection) {
   var instanceId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   var enabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
@@ -14116,6 +14621,7 @@ var GeoTIFFLayer = function GeoTIFFLayer(_ref) {
   var _useFetchGeoTIFFBlob = useFetchGeoTIFFBlob(url),
     blob = _useFetchGeoTIFFBlob.data,
     isSuccess = _useFetchGeoTIFFBlob.isSuccess;
+
   // Only create the layer once
   useEffect(function () {
     if (!map || !layerName || layerRef.current || !isSuccess || !blob || !shouldRender) {
@@ -14141,6 +14647,7 @@ var GeoTIFFLayer = function GeoTIFFLayer(_ref) {
       setInitialized(false);
     };
   }, [map, layerName, blob, isSuccess, projection, shouldRender]);
+
   // Update layer options
   useEffect(function () {
     var layer = layerRef.current;
@@ -14154,6 +14661,7 @@ var GeoTIFFLayer = function GeoTIFFLayer(_ref) {
       layer.setZIndex(layerOptions.zIndex);
     }
   }, [layerOptions, initialized]);
+
   // Update visibility
   useEffect(function () {
     var layer = layerRef.current;
@@ -14192,6 +14700,7 @@ var useGetStacGeoTIFFWMLayerInstance = function useGetStacGeoTIFFWMLayerInstance
       });
       webmapUtils.registerWMLayer(_wmLayer, layerId);
     }
+
     // Set the name and parse the layer
     var wmLayer = webmapUtils.getWMLayerById(layerId);
     wmLayer.setName(name).then(function () {
@@ -14313,6 +14822,7 @@ var TimeAwareGeoTIFFLayer = function TimeAwareGeoTIFFLayer(_ref) {
   var _useStacItems = useStacItems(stacCollectionUrl, startDate, endDate),
     items = _useStacItems.data,
     isLoading = _useStacItems.isLoading;
+
   // Find the closest item index for the selected time
   var closestIndex = React.useMemo(function () {
     if (!items || !timeValue) {
@@ -14334,6 +14844,7 @@ var TimeAwareGeoTIFFLayer = function TimeAwareGeoTIFFLayer(_ref) {
     });
     return idx;
   }, [items, timeValue]);
+
   // Window of 101 images: 50 before, 50 after
   // This allows animation to play without fetching each new frame
   var _React$useMemo3 = React.useMemo(function () {
@@ -14350,13 +14861,13 @@ var TimeAwareGeoTIFFLayer = function TimeAwareGeoTIFFLayer(_ref) {
   if (!items || isLoading) {
     return null;
   }
-  return jsx(Fragment, {
+  return /*#__PURE__*/jsx(Fragment, {
     children: items.map(function (item, actualIdx) {
       var isClosest = actualIdx === closestIndex;
       // Draw 5 images before and after with 0 opacity for smoother animation
       var isWithinRange = Math.abs(actualIdx - closestIndex) <= 5;
       var inWindow = actualIdx >= startIdx && actualIdx < endIdx;
-      return jsx(GeoTIFFLayer, {
+      return /*#__PURE__*/jsx(GeoTIFFLayer, {
         layerName: item.id,
         layerOptions: {
           opacity: isClosest ? opacity : 0,
@@ -14402,6 +14913,7 @@ var TimeAwareWMTSLayer = function TimeAwareWMTSLayer(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     source = _useState4[0],
     setSource = _useState4[1];
+
   // get a wmLayer instance
   var _useGetWMLayerInstanc = useGetWMLayerInstance({
       service: getCapsURL,
@@ -14414,8 +14926,10 @@ var TimeAwareWMTSLayer = function TimeAwareWMTSLayer(_ref) {
   if (errorMessage && onLayerError) {
     onLayerError(layerId || '', errorMessage);
   }
+
   // dimensionsValues is a key/value dictionary with dimension names specifically for WMS GetMap requests
   var dimensionsValues = getDimensionParamsForWMS(dimensions, wmLayer);
+
   // This string can be used safely in a useEffect or other React hook to check if the contents changed
   var dimensionsValuesEffectCheck = dimensionsValues && Object.entries(dimensionsValues).map(function (dimensionNameAndCurrentValue) {
     return "".concat(dimensionNameAndCurrentValue[0], ":").concat(dimensionNameAndCurrentValue[1]);
@@ -14455,6 +14969,7 @@ var TimeAwareWMTSLayer = function TimeAwareWMTSLayer(_ref) {
                 firstRefTime = refTimeDim === null || refTimeDim === void 0 ? void 0 : refTimeDim.getClosestValue(refTimeToFind, true);
                 firstRefTime && refTimeDim && (wmTimeDim === null || wmTimeDim === void 0 ? void 0 : wmTimeDim.setTimeValuesForReferenceTime(firstRefTime, refTimeDim));
               }
+
               // Make sure we have the latest dimension values before initializing
               _context.next = 9;
               return wmLayer.parseLayer();
@@ -14489,6 +15004,7 @@ var TimeAwareWMTSLayer = function TimeAwareWMTSLayer(_ref) {
       return onLayerError === null || onLayerError === void 0 ? void 0 : onLayerError(layerId, e.message);
     });
     return function () {};
+
     // Effect array should only contain wmLayer and layerName
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [wmLayer, layerName]);
@@ -14569,6 +15085,7 @@ var TimeAwareWMTSLayer = function TimeAwareWMTSLayer(_ref) {
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var baseLayerGrey = {
   id: webmapUtils.generateLayerId(),
   name: 'WorldMap_Light_Grey_Canvas',
@@ -14610,6 +15127,7 @@ var defaultLayers = /*#__PURE__*/Object.freeze({
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var DWD = {
   name: 'DWD',
   url: 'https://maps.dwd.de/geoserver/ows?',
@@ -14740,6 +15258,7 @@ var publicServices = /*#__PURE__*/Object.freeze({
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var baseLayer = {
   name: 'arcGisSat',
   title: 'arcGisSat',
@@ -14748,7 +15267,9 @@ var baseLayer = {
   enabled: true,
   id: webmapUtils.generateLayerId()
 };
+
 // Base Layers List
+
 var baseLayerOpenStreetMapNL = {
   id: 'base-layer-2',
   name: 'OpenStreetMap_NL',
@@ -14777,7 +15298,9 @@ var baseLayerHeiGit = {
   name: 'osm_auto:all',
   layerType: LayerType.baseLayer
 };
+
 // KNMI msgcpp List
+
 var msgCppLayer = {
   // doesn't work with https
   service: KNMImsgcpp.url,
@@ -14788,7 +15311,9 @@ var msgCppLayer = {
   id: webmapUtils.generateLayerId(),
   layerType: LayerType.mapLayer
 };
+
 // Nederlandse Nationaal Georegister Layers list
+
 var veiligheidsRegiosGebiedsIndelingenLabels = {
   service: nationaalgeoregister.url,
   name: 'cbsgebiedsindelingen:cbs_veiligheidsregio_2020_labelpoint',
@@ -14803,7 +15328,9 @@ var veiligheidsRegiosGebiedsIndelingen = {
   enabled: false,
   layerType: LayerType.mapLayer
 };
+
 // KNMI Geoservices Layers List
+
 var radarLayer = {
   service: KNMIgeoservicesRadar.url,
   name: 'RAD_NL25_PCP_CM',
@@ -14907,7 +15434,9 @@ var klimaatAtlasTG3 = {
   id: webmapUtils.generateLayerId(),
   layerType: LayerType.mapLayer
 };
+
 // DWD Layers List
+
 var dwdWarningLayer = {
   service: DWDWarnings.url,
   name: 'Warnungen_Gemeinden_vereinigt',
@@ -14925,6 +15454,7 @@ var dwdRadarLayer = {
   id: webmapUtils.generateLayerId(),
   layerType: LayerType.mapLayer
 };
+
 // this needs authentication to work
 var dwdObservationsWetterLayer = {
   service: DWDObservations.url,
@@ -14949,6 +15479,7 @@ var dwdObservationsWetterLayerWithHeader = {
     value: 'Basic aW50cmFuZXQtdXNlcjpDQnMjMTEh'
   }]
 };
+
 // this needs authentication to work
 var dwdObservationsWindLayer = {
   service: DWDObservations.url,
@@ -14959,7 +15490,9 @@ var dwdObservationsWindLayer = {
   id: webmapUtils.generateLayerId(),
   layerType: LayerType.mapLayer
 };
+
 // FMI open wms Layers List
+
 var FMITemp = {
   service: FMIopenwms.url,
   name: 'temperature-forecast',
@@ -14968,7 +15501,9 @@ var FMITemp = {
   id: webmapUtils.generateLayerId(),
   layerType: LayerType.mapLayer
 };
+
 // Met Norway Layers List
+
 var MetNoTemp = {
   service: MetNorwayService.url,
   name: 'thredds_meps_latest_wind',
@@ -15138,7 +15673,7 @@ var OpenLayersLayer = function OpenLayersLayer(layerProps) {
   if (!isOverlay && !isBaseLayer) {
     switch (layerType) {
       case LayerType.mapLayer:
-        return jsx(TimeawareImageSourceWMSLayer, {
+        return /*#__PURE__*/jsx(TimeawareImageSourceWMSLayer, {
           debugMode: debugMode,
           dimensions: dimensions,
           getCapsURL: service,
@@ -15152,7 +15687,7 @@ var OpenLayersLayer = function OpenLayersLayer(layerProps) {
           visible: !!(enabled !== false)
         });
       case LayerType.wmtsMapLayer:
-        return jsx(TimeAwareWMTSLayer, {
+        return /*#__PURE__*/jsx(TimeAwareWMTSLayer, {
           debugMode: debugMode,
           dimensions: dimensions,
           getCapsURL: service,
@@ -15170,7 +15705,7 @@ var OpenLayersLayer = function OpenLayersLayer(layerProps) {
           var parameterNames = (options === null || options === void 0 ? void 0 : options.parameterNames.join(',')) || '';
           var multiParam = Array.isArray(options === null || options === void 0 ? void 0 : options.parameterNames) && options.parameterNames.length > 1;
           var styleLike = style !== undefined ? styleNameToStyleLike(style, multiParam) : undefined;
-          return jsx(TimeAwareEDRLocationLayer, {
+          return /*#__PURE__*/jsx(TimeAwareEDRLocationLayer, {
             dimensions: dimensions,
             edrBaseUrl: service,
             layerId: id,
@@ -15184,7 +15719,7 @@ var OpenLayersLayer = function OpenLayersLayer(layerProps) {
         }
       case LayerType.stacGeoTIFFLayer:
         {
-          return jsx(TimeAwareGeoTIFFLayer, {
+          return /*#__PURE__*/jsx(TimeAwareGeoTIFFLayer, {
             dimensions: dimensions,
             layerId: id,
             layerName: id,
@@ -15199,6 +15734,7 @@ var OpenLayersLayer = function OpenLayersLayer(layerProps) {
         return null;
     }
   }
+
   // Check the other layers
   if (isBaseLayer || isOverlay) {
     var type = layerProps.type,
@@ -15235,7 +15771,7 @@ var OpenLayersLayer = function OpenLayersLayer(layerProps) {
         if (!urlTemplate) {
           console.warn("Tile server type ".concat(tileServerType, " not supported"), tileServerSettings, tileServer);
         }
-        return jsx(XYZLayer, {
+        return /*#__PURE__*/jsx(XYZLayer, {
           layerOptions: _objectSpread2(_objectSpread2({}, layerOptions), {}, {
             minZoom: tileSettingForCRS === null || tileSettingForCRS === void 0 ? void 0 : tileSettingForCRS.minLevel,
             maxZoom: tileSettingForCRS === null || tileSettingForCRS === void 0 ? void 0 : tileSettingForCRS.maxLevel
@@ -15248,7 +15784,7 @@ var OpenLayersLayer = function OpenLayersLayer(layerProps) {
         });
       }
     } else if (_name && _service) {
-      return jsx(WMSLayer, {
+      return /*#__PURE__*/jsx(WMSLayer, {
         layerName: _name,
         layerOptions: layerOptions,
         layerProps: layerProps,
@@ -15256,12 +15792,30 @@ var OpenLayersLayer = function OpenLayersLayer(layerProps) {
         url: _service
       });
     } else if (baseLayer) {
-      return jsx(DefaultBaseLayers, {});
+      return /*#__PURE__*/jsx(DefaultBaseLayers, {});
     }
   }
-  return jsx("div", {});
+  return /*#__PURE__*/jsx("div", {});
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var OpenLayersGetFeatureInfo = function OpenLayersGetFeatureInfo(_ref) {
   var displayMapPin = _ref.displayMapPin,
     disableMapPin = _ref.disableMapPin,
@@ -15290,7 +15844,7 @@ var OpenLayersGetFeatureInfo = function OpenLayersGetFeatureInfo(_ref) {
     return [new Feature(new Point(coords))];
   }, [mapPinLocation, map]);
   useEffect(function () {
-    if (!displayMapPin || !map) {
+    if (disableMapPin || !map) {
       return function () {};
     }
     var key = map.on('click', function (e) {
@@ -15309,17 +15863,35 @@ var OpenLayersGetFeatureInfo = function OpenLayersGetFeatureInfo(_ref) {
     return function () {
       unByKey(key);
     };
-  }, [map, displayMapPin, selectLocation]);
+  }, [map, disableMapPin, selectLocation]);
   if (!displayMapPin) {
     return null;
   }
-  return jsx(FeatureLayer, {
+  return /*#__PURE__*/jsx(FeatureLayer, {
     features: features,
     style: style,
     zIndex: 9000
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var OpenLayersZoomControl = function OpenLayersZoomControl(_ref) {
   var homeExtent = _ref.homeExtent;
   var _useContext = useContext(MapContext),
@@ -15332,7 +15904,7 @@ var OpenLayersZoomControl = function OpenLayersZoomControl(_ref) {
     return (map === null || map === void 0 || (_map$getView = map.getView()) === null || _map$getView === void 0 ? void 0 : _map$getView.getZoom()) !== undefined ? map.getView() : undefined;
   };
   var duration = OPENLAYERS_MOUSEWHEEL_DURATION;
-  return jsx(ZoomControls, {
+  return /*#__PURE__*/jsx(ZoomControls, {
     onZoomIn: function onZoomIn() {
       var view = getView();
       view === null || view === void 0 || view.animate({
@@ -15363,15 +15935,15 @@ var OpenLayersZoomControl = function OpenLayersZoomControl(_ref) {
   });
 };
 
-var MapFeatureClass;
-(function (MapFeatureClass) {
+var MapFeatureClass = /*#__PURE__*/function (MapFeatureClass) {
   MapFeatureClass["MyLocation"] = "MyLocation";
   MapFeatureClass["GenericMarker"] = "GenericMarker";
   MapFeatureClass["ObservationStation"] = "ObservationStation";
   MapFeatureClass["EDRFeature"] = "EDRFeature";
   MapFeatureClass["EDRMultiPolygon"] = "EDRMultiPolygon";
   MapFeatureClass["default"] = "default";
-})(MapFeatureClass || (MapFeatureClass = {}));
+  return MapFeatureClass;
+}({});
 var FEATURE_FILL = new Fill({
   color: FEATURE_DRAW_FILL_COLOR_TRANSPARENT
 });
@@ -15438,6 +16010,7 @@ var ICON_LOCATIONMARKER_MODIFY = createIconStyle(locationPath, {
     anchor: [0.5, 1]
   }
 });
+
 // Pre-rendered canvas for the rotate icon so we can create
 // dynamically rotated instances that follow the box orientation.
 var ROTATE_ICON_SIZE = [24, 24];
@@ -15452,10 +16025,12 @@ var ROTATE_ICON_CANVAS = typeof document !== 'undefined' ? function () {
     return undefined;
   }
   var path = new Path2D(rotatePath);
+
   // Draw a white outline behind the rotate icon for better contrast
   ctx.lineWidth = 1.5;
   ctx.strokeStyle = 'rgba(255, 255, 255, 1)';
   ctx.stroke(path);
+
   // Fill the actual rotate icon
   ctx.fillStyle = '#051039';
   ctx.fill(path);
@@ -15589,6 +16164,7 @@ var FEATURE_MY_LOCATION = new Style$1({
       pixelRatio = state.pixelRatio;
     var coord = pixelCoordinates;
     ctx.save();
+
     // Draw outer circle with shadow
     ctx.strokeStyle = '#fff';
     ctx.fillStyle = '#fff';
@@ -15598,11 +16174,13 @@ var FEATURE_MY_LOCATION = new Style$1({
     ctx.arc(coord[0], coord[1], 12 * pixelRatio, 0, 2 * Math.PI);
     ctx.fill();
     ctx.shadowBlur = 0;
+
     // Draw inner circle
     ctx.fillStyle = '#186dff';
     ctx.beginPath();
     ctx.arc(coord[0], coord[1], 9 * pixelRatio, 0, 2 * Math.PI);
     ctx.fill();
+
     // Reset transformations
     ctx.restore();
   }
@@ -15614,6 +16192,7 @@ var getFeaturePointStyle = function getFeaturePointStyle(fillColor, fillOpacity)
         pixelRatio = state.pixelRatio;
       var coord = pixelCoordinates;
       ctx.save();
+
       // Use provided fillColor and fillOpacity, or fallback to default
       ctx.fillStyle = fillColor ? geowebColorToOpenLayersColor(fillColor, fillOpacity || 1) : FEATURE_DRAW_FILL_COLOR;
       ctx.shadowColor = '#fff';
@@ -15668,6 +16247,7 @@ var labelOptions = {
 var labelBaseStyle = new Style$1({
   text: new Text(labelOptions)
 });
+
 // Multi-polygons need separate handling to only draw single label
 var multiPolygonLabelBaseStyle = new Style$1({
   text: new Text(labelOptions),
@@ -15679,6 +16259,7 @@ var multiPolygonLabelBaseStyle = new Style$1({
     return largestPolygon.getInteriorPoint();
   }
 });
+
 // MultiLineStrings need separate handling to only draw single label
 var multiLineStringLabelBaseStyle = new Style$1({
   text: new Text(labelOptions),
@@ -15857,6 +16438,7 @@ var geowebColorToOpenLayersColor = function geowebColorToOpenLayersColor(color,
   var opacityNumber = Math.min(Math.max(0, Number.parseFloat("".concat(opacity))), 255 / 256);
   var bitsPerColor = color.length - 1 >= 6 ? 8 : 4;
   var resultingColor = color.split('');
+
   // Remove existing opacity bits if set
   if (bitsPerColor === 8 && resultingColor.length > 6 + 1) {
     resultingColor.splice(6 + 1);
@@ -15916,6 +16498,7 @@ var genericOpenLayersFeatureStyle = function genericOpenLayersFeatureStyle(featu
     if (geom instanceof LineString) {
       var coords = geom.getCoordinates();
       var smoothed = catmullRomSpline(coords, 16);
+
       // Smoothed line
       return new Style$1({
         geometry: new LineString(smoothed),
@@ -15928,6 +16511,7 @@ var genericOpenLayersFeatureStyle = function genericOpenLayersFeatureStyle(featu
     return undefined;
   }
   var shouldHighlight = geometry && geometry.getType() !== 'Point' && mapFeatureClass !== MapFeatureClass.ObservationStation && !showNameOnHover && selectionType !== 'fir';
+
   // Highlight map polygons on hover
   if (hover && shouldHighlight) {
     return new Style$1({
@@ -15961,6 +16545,7 @@ var genericOpenLayersFeatureStyle = function genericOpenLayersFeatureStyle(featu
   var styleOrFunction = stylesByMapFeatureClass[mapFeatureClass || MapFeatureClass["default"]];
   return typeof styleOrFunction === 'function' ? styleOrFunction(feature, resolution) : styleOrFunction;
 };
+
 // Used for polygons, boxes and linestrings
 var drawPolygonLikeFeatureStyle = function drawPolygonLikeFeatureStyle(feature) {
   var _feature$getGeometry;
@@ -15969,6 +16554,7 @@ var drawPolygonLikeFeatureStyle = function drawPolygonLikeFeatureStyle(feature)
       fill: FEATURE_FILL
     })];
   }
+
   // LineStrings, this includes Polygons being drawn (OL Draw has them as LineStrings until the Polygon is ready)
   return [
   // Style for the line
@@ -15988,6 +16574,7 @@ var drawPolygonLikeFeatureStyle = function drawPolygonLikeFeatureStyle(feature)
     }
   })];
 };
+
 // Simple Catmull-Rom spline smoothing
 var catmullRomSpline = function catmullRomSpline(points) {
   var numPoints = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;
@@ -16001,6 +16588,7 @@ var catmullRomSpline = function catmullRomSpline(points) {
     var p1 = points[i];
     var p2 = points[i + 1];
     var p3 = (_points2 = points[i + 2]) !== null && _points2 !== void 0 ? _points2 : p2;
+
     // always include the control point
     result.push(p1);
     for (var pointIndex = 1; pointIndex < numPoints; pointIndex += 1) {
@@ -16012,6 +16600,7 @@ var catmullRomSpline = function catmullRomSpline(points) {
       result.push([x, y]);
     }
   }
+
   // include the very last control point
   result.push(points[points.length - 1]);
   return result;
@@ -16053,6 +16642,7 @@ new Style$1({
 }),
 // Vertices
 FEATURE_VERTICES_EDIT_HANDLES];
+
 // This function creates a box out of a modified polygon. It detects which corner was moved by comparing vertices between the two geometries. Then it draws a new box based on the moved vertice and the opposing vertice.
 // For squares the box scales uniformly around the fixed center.
 // For rectangles the diagonal opposite corner does not change, the other two corners are recomputed.
@@ -16065,6 +16655,7 @@ var createBoxBasedOnModifiedVertex = function createBoxBasedOnModifiedVertex(mod
   if (!originalRing || !modifiedRing || originalRing.length < 4) {
     return originalGeometry;
   }
+
   // Strip closing coordinate if present so we only work with the four corners.
   var stripClose = function stripClose(ring) {
     if (ring.length > 4 && ring[0][0] === ring[ring.length - 1][0] && ring[0][1] === ring[ring.length - 1][1]) {
@@ -16077,6 +16668,7 @@ var createBoxBasedOnModifiedVertex = function createBoxBasedOnModifiedVertex(mod
   if (originalCorners.length < 4 || modifiedCorners.length < 4) {
     return originalGeometry;
   }
+
   // Detect which corner was dragged by comparing original vs modified
   var draggedCornerIndex = originalCorners.findIndex(function (orig, idx) {
     var mod = modifiedCorners[idx];
@@ -16087,6 +16679,7 @@ var createBoxBasedOnModifiedVertex = function createBoxBasedOnModifiedVertex(mod
     return originalGeometry;
   }
   var dragged = modifiedCorners[draggedCornerIndex];
+
   // Compute center of the original box
   var centerX = originalCorners.reduce(function (sum, _ref) {
     var _ref2 = _slicedToArray(_ref, 1),
@@ -16098,6 +16691,7 @@ var createBoxBasedOnModifiedVertex = function createBoxBasedOnModifiedVertex(mod
       y = _ref4[1];
     return sum + y;
   }, 0) / originalCorners.length;
+
   // Derive local axes from the original box so we can preserve its
   // rotation. Use the edges from corner 0 to its two neighbours.
   var p0 = originalCorners[0];
@@ -16117,6 +16711,7 @@ var createBoxBasedOnModifiedVertex = function createBoxBasedOnModifiedVertex(mod
   var uy = edgeUy / edgeUlength;
   var vx = edgeVx / edgeVlenght;
   var vy = edgeVy / edgeVlenght;
+
   // Remember which corner is which
   var cornerSigns = [{
     sx: -1,
@@ -16132,6 +16727,7 @@ var createBoxBasedOnModifiedVertex = function createBoxBasedOnModifiedVertex(mod
     sy: 1
   }];
   var minSize = 1e-6;
+
   // Squares keep their center fixed and scale uniformly from the
   // dragged corner.
   if (keepSquare) {
@@ -16158,32 +16754,40 @@ var createBoxBasedOnModifiedVertex = function createBoxBasedOnModifiedVertex(mod
     newCorners.push(newCorners[0]);
     return new Polygon([newCorners]);
   }
+
   // Rectangles (non-squares) should resize using the dragged
   // corner while keeping the diagonal opposite anchored. The two remaining
   // corners adjust accordingly, and the overall rotation is kept. When the
   // dragged corner crosses past the center, the rectangle is allowed to
   // "flip" instead of bouncing back.
+
   // Diagonal corner relative to the dragged one in the 4-corner ring
   var anchorIndex = (draggedCornerIndex + 2) % originalCorners.length;
   var anchor = originalCorners[anchorIndex];
+
   // Vector from anchored corner to dragged corner, in world space
   var deltaWx = dragged[0] - anchor[0];
   var deltaWy = dragged[1] - anchor[1];
+
   // Express that vector in the local (u, v) frame
   var deltaLocalX = deltaWx * ux + deltaWy * uy;
   var deltaLocalY = deltaWx * vx + deltaWy * vy;
+
   // Half-sizes in local coordinates. We keep the sign so that when the
   // dragged corner crosses past the anchor along either axis, the
   // rectangle flips instead of being clamped.
   var halfWidth = deltaLocalX / 2;
   var halfHeight = deltaLocalY / 2;
+
   // Center in local coordinates is halfway between anchor (0,0) and
   // dragged (deltaLocalX, deltaLocalY).
   var centerLocalX = halfWidth;
   var centerLocalY = halfHeight;
+
   // Convert center back to world coordinates.
   var centerXNew = anchor[0] + centerLocalX * ux + centerLocalY * vx;
   var centerYNew = anchor[1] + centerLocalX * uy + centerLocalY * vy;
+
   // Rebuild the four corners in local coordinates around the new center.
   var localCorners = [[-halfWidth, -halfHeight], [halfWidth, -halfHeight], [halfWidth, halfHeight], [-halfWidth, halfHeight]];
   var newCornersWorld = localCorners.map(function (_ref5) {
@@ -16194,6 +16798,7 @@ var createBoxBasedOnModifiedVertex = function createBoxBasedOnModifiedVertex(mod
     var worldY = centerYNew + lx * uy + ly * vy;
     return [worldX, worldY];
   });
+
   // Normalise corner order so index 0..3 always correspond to
   // bottom-left, bottom-right, top-right, top-left in the box's
   // local frame. This keeps rotate-handle orientation and
@@ -16226,6 +16831,7 @@ var createBoxBasedOnModifiedVertex = function createBoxBasedOnModifiedVertex(mod
     return corner.qx === -1 && corner.qy === 1;
   })) === null || _classified$find4 === void 0 ? void 0 : _classified$find4.corner;
   var orderedCorners = bl && br && tr && tl ? [bl, br, tr, tl] : newCornersWorld;
+
   // Close the ring
   orderedCorners.push(orderedCorners[0]);
   return new Polygon([orderedCorners]);
@@ -16240,8 +16846,10 @@ var getBoxRotateHandlePoints = function getBoxRotateHandlePoints(feature, resolu
   if (ring.length < 4) {
     return undefined;
   }
+
   // First four coordinates are the corners of the box (possibly rotated)
   var corners = ring.slice(0, 4);
+
   // Compute box center as the average of the corners
   var centerX = corners.reduce(function (sum, _ref7) {
     var _ref8 = _slicedToArray(_ref7, 1),
@@ -16253,6 +16861,7 @@ var getBoxRotateHandlePoints = function getBoxRotateHandlePoints(feature, resolu
       y = _ref0[1];
     return sum + y;
   }, 0) / corners.length;
+
   // Place the rotate handle at a nearly constant distance from the
   // corner in screen space, independent of how large the box is.
   // We move a fixed number of pixels along the outward diagonal
@@ -16295,6 +16904,7 @@ var boxModificationStyle = function boxModificationStyle(feature, resolution) {
   var handlePoints = getBoxRotateHandlePoints(feature, resolution);
   var activeIndexRaw = feature.get('activeRotateHandleIndex');
   var activeIndex = typeof activeIndexRaw === 'number' && activeIndexRaw >= 0 && activeIndexRaw < 4 ? activeIndexRaw : undefined;
+
   // While the box is being modified (corner drag), hide the rotate
   // handle so only sizing handles are visible.
   var suppressRotateHandle = feature.get('suppressRotateHandle');
@@ -16304,8 +16914,10 @@ var boxModificationStyle = function boxModificationStyle(feature, resolution) {
       h1 = _handlePoints[1],
       h2 = _handlePoints[2],
       h3 = _handlePoints[3];
+
     // Base angle: along the edge between first two corner handles.
     var baseAngle = Math.atan2(h1[1] - h0[1], h1[0] - h0[0]);
+
     // Assign per-corner offsets.
     var handleConfigs = [{
       point: h0,
@@ -16344,6 +16956,7 @@ var boxModificationStyle = function boxModificationStyle(feature, resolution) {
 var circleFeatureStyle = function circleFeatureStyle(feature, resolution) {
   // use OL default styles to keep circle edge tracking
   var styles = createDefaultStyle(feature, resolution);
+
   // modify stroke + fill
   styles.forEach(function (style) {
     if (style.getStroke()) {
@@ -16355,6 +16968,7 @@ var circleFeatureStyle = function circleFeatureStyle(feature, resolution) {
   });
   return styles;
 };
+
 // Create an ellipse geometry from center + two drag points
 var createEllipsePolygon = function createEllipsePolygon(center, last) {
   // Radii along x and y
@@ -16362,10 +16976,12 @@ var createEllipsePolygon = function createEllipsePolygon(center, last) {
   var ry = Math.abs(last[1] - center[1]);
   var points = [];
   var steps = 64; // smoothness
+
   for (var i = 0; i < steps; i += 1) {
     var theta = i / steps * 2 * Math.PI;
     points.push([center[0] + rx * Math.cos(theta), center[1] + ry * Math.sin(theta)]);
   }
+
   // Ensure the ring is closed
   if (points.length > 0) {
     points.push(points[0]);
@@ -16431,8 +17047,8 @@ var modifyStyles = {
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
-var DRAWMODE;
-(function (DRAWMODE) {
+
+var DRAWMODE = /*#__PURE__*/function (DRAWMODE) {
   DRAWMODE["POLYGON"] = "POLYGON";
   DRAWMODE["BOX"] = "BOX";
   DRAWMODE["MULTIPOINT"] = "MULTIPOINT";
@@ -16445,7 +17061,10 @@ var DRAWMODE;
   DRAWMODE["LOCATION"] = "LOCATION";
   DRAWMODE["FREEHANDLINE"] = "FREEHANDLINE";
   DRAWMODE["ROTATABLEBOX"] = "ROTATABLEBOX";
-})(DRAWMODE || (DRAWMODE = {}));
+  return DRAWMODE;
+}({});
+
+// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
 
 var createDrawOperation = function createDrawOperation(type) {
   switch (type) {
@@ -16533,6 +17152,7 @@ var selectionTypeToDrawModeValue = function selectionTypeToDrawModeValue(selecti
       return DRAWMODE.POLYGON;
   }
 };
+
 /**
  * Integrates with OpenLayers Draw and Modify (+Snap) interactions, to implement feature drawing
  * and modification behaviour.
@@ -16628,6 +17248,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
       if (obj.geometry && 'coordinates' in obj.geometry) {
         obj.geometry.coordinates = roundCoordinates(obj.geometry.coordinates);
       }
+
       // copy properties
       obj.properties = _objectSpread2({}, selectedFeature === null || selectedFeature === void 0 ? void 0 : selectedFeature.properties);
       var newGeoJson = _objectSpread2(_objectSpread2({}, geojson), {}, {
@@ -16635,12 +17256,14 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
       });
       updateGeojson === null || updateGeojson === void 0 || updateGeojson(newGeoJson, NEW_FEATURE_CREATED);
     };
+
     // Draw functionality, for drawing new polygons/linestrings/boxes/markers
     var draw = new Draw(_objectSpread2({
       source: source,
       style: drawStyle
     }, drawOperation));
     var drawingFinishedBy = 'escaped'; // default
+
     draw.on('drawabort', function () {
       exitDrawModeCallback === null || exitDrawModeCallback === void 0 || exitDrawModeCallback('escaped');
     });
@@ -16674,6 +17297,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
     draw.on('drawstart', function () {
       map.getViewport().addEventListener('click', handleClickNearPolygonStartPoint);
     });
+
     // Handle doubleClick instead of shiftClick
     var handleDoubleClickToClosePolygon = function handleDoubleClickToClosePolygon(event) {
       if (event.detail === 2 && event.button === 0) {
@@ -16709,6 +17333,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
         });
         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.
@@ -16726,6 +17351,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
         } else {
           var coord = map.getEventCoordinate(event);
           var threshold = 18 * resolution; // enlarge hover hit area for rotate handle
+
           var closestIndex = -1;
           var closestDist = Infinity;
           handlePoints.forEach(function (_ref2, idx) {
@@ -16766,6 +17392,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
     var isSquare = actualDrawMode === DRAWMODE.SQUARE;
     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,
@@ -16776,6 +17403,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
       // Box is a special case:
       // - Use a custom style to present the user with a box when dragging (even though the temp polygon is changing against box conditions)
       // - When modification is done, define the box using the dragged corner and its opposite corner
+
       modify.on('modifystart', function (evt) {
         var _feature$getGeometry2;
         var feature = evt.features.getArray()[0];
@@ -16792,6 +17420,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
         var feature = evt.features.getArray()[0];
         var boxPolygon = createBoxBasedOnModifiedVertex(feature.getGeometry(), feature.get('originalGeometry'), isSquare);
         feature.setGeometry(boxPolygon);
+
         // Re-enable rotate handle visibility after modifying.
         feature.unset('suppressRotateHandle', true);
         var viewport = map.getViewport();
@@ -16821,12 +17450,14 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
     translate.on('translateend', function (evt) {
       updateFeature(evt.features.getArray()[0]);
     });
+
     // Rotation handling for boxes and squares using the visual rotate handles
     var isRotating = false;
     var rotationCenter = null;
     var rotationStartAngle = 0;
     var originalRing = null;
     var disabledDragPans = [];
+
     // Track when the user has pressed down near a resize corner so we can
     // immediately show a grabbing cursor on mousedown (before any movement).
     var isPointerDownNearCorner = false;
@@ -16894,6 +17525,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
       if (!ring || ring.length < 4) {
         return;
       }
+
       // Exclude possible closing coordinate
       var ringWithoutClose = ring.length > 4 && ring[0][0] === ring[ring.length - 1][0] && ring[0][1] === ring[ring.length - 1][1] ? ring.slice(0, ring.length - 1) : ring;
       var clickCoord = map.getEventCoordinate(event);
@@ -16901,6 +17533,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
       if (!resolution) {
         return;
       }
+
       // Use the same helper for handle locations as the style code,
       // so visual position and click area are consistent.
       var handlePoints = getBoxRotateHandlePoints(featureToRotate, resolution);
@@ -16908,6 +17541,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
         return;
       }
       var threshold = 12 * resolution; // enlarge click hit area for rotate handle
+
       // Determine which handle was clicked (nearest within threshold)
       var closestIndex = -1;
       var closestDist = Infinity;
@@ -16926,6 +17560,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
       if (closestIndex === -1 || closestDist > threshold) {
         return;
       }
+
       // Lock the active rotate handle index so its icon stays visible
       var handleFeature = editFeatureCollection.item(0);
       if (handleFeature) {
@@ -16933,6 +17568,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
         layer.changed();
       }
       isRotating = true;
+
       // Temporarily disable map panning while rotating so the
       // underlying map does not move when dragging the rotate handle.
       disabledDragPans = [];
@@ -16974,11 +17610,13 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
           y = _ref1[1];
         return [x, y];
       });
+
       // While rotating, show a grabbing cursor on the map viewport
       var viewport = map.getViewport();
       if (viewport !== null && viewport !== void 0 && viewport.style) {
         viewport.style.cursor = 'grabbing';
       }
+
       // While rotating, disable modify/translate to avoid conflicts
       modify.setActive(false);
       translate.setActive(false);
@@ -17030,12 +17668,14 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
       rotationCenter = null;
       rotationStartAngle = 0;
       originalRing = null;
+
       // Re-enable any drag-pan interactions we disabled when rotation
       // started so normal map panning works again.
       disabledDragPans.forEach(function (interaction) {
         return interaction.setActive(true);
       });
       disabledDragPans = [];
+
       // Restore the default cursor when rotation stops
       var viewport = map.getViewport();
       if (viewport !== null && viewport !== void 0 && viewport.style) {
@@ -17080,6 +17720,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
       viewport.addEventListener('pointerdown', startRotateIfOnHandle);
       viewport.addEventListener('pointermove', rotateOnPointerMove);
       viewport.addEventListener('pointerup', endRotate);
+
       // Ensure the grabbing cursor appears immediately when pressing on a
       // resize corner, not only after the pointer starts moving.
       viewport.addEventListener('pointerdown', handlePointerDownNearCorner);
@@ -17131,6 +17772,7 @@ var emptyPoint = _objectSpread2(_objectSpread2({}, featurePoint), {}, {
 var emptyPolygon = _objectSpread2(_objectSpread2({}, featurePolygon), {}, {
   properties: defaultGeoJSONStyleProperties
 });
+
 // TODO: improve this: without a feature, the custom shape does not work on first click
 var emptyIntersectionShape = _objectSpread2(_objectSpread2({}, emptyGeoJSON), {}, {
   features: [featurePolygon]
@@ -17138,28 +17780,28 @@ var emptyIntersectionShape = _objectSpread2(_objectSpread2({}, emptyGeoJSON), {}
 var getIcon = function getIcon(selectionType) {
   switch (selectionType) {
     case 'point':
-      return jsx(DrawToolPoint, {});
+      return /*#__PURE__*/jsx(DrawToolPoint, {});
     case 'poly':
-      return jsx(DrawToolPolygon, {});
+      return /*#__PURE__*/jsx(DrawToolPolygon, {});
     case 'box':
     case 'rotatable-box':
-      return jsx(DrawToolRectangle, {});
+      return /*#__PURE__*/jsx(DrawToolRectangle, {});
     case 'linestring':
-      return jsx(DrawToolLineString, {});
+      return /*#__PURE__*/jsx(DrawToolLineString, {});
     case 'delete':
-      return jsx(Delete, {});
+      return /*#__PURE__*/jsx(Delete, {});
     case 'square':
-      return jsx(DrawToolSquare, {});
+      return /*#__PURE__*/jsx(DrawToolSquare, {});
     case 'circle':
-      return jsx(DrawToolCircle, {});
+      return /*#__PURE__*/jsx(DrawToolCircle, {});
     case 'oval':
-      return jsx(DrawToolOval, {});
+      return /*#__PURE__*/jsx(DrawToolOval, {});
     case 'freehand-line':
-      return jsx(DrawToolFreehand, {});
+      return /*#__PURE__*/jsx(DrawToolFreehand, {});
     case 'smooth-line':
-      return jsx(DrawToolSmoothLine, {});
+      return /*#__PURE__*/jsx(DrawToolSmoothLine, {});
     case 'location':
-      return jsx(Location, {});
+      return /*#__PURE__*/jsx(Location, {});
     default:
       return null;
   }
@@ -17289,6 +17931,7 @@ var useMapDrawTool = function useMapDrawTool(_ref) {
     return mode.value === 'DELETE';
   }) || defaultDelete;
   drawModesWithDeleteLast.push(deleteOption);
+
   // geoJSON feature collections
   var _React$useState = React.useState(defaultGeoJSON),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -17349,6 +17992,7 @@ var useMapDrawTool = function useMapDrawTool(_ref) {
       return;
     }
     setActiveTool(newMode.isSelectable ? newMode.drawModeId : '');
+
     // add shape and update feature layer index
     var isNewSelectedTool = !isGeoJSONFeatureCreatedByTool(geoJSON, newMode.selectionType, featureLayerIndex);
     var shouldAddNewShape = !geoJSON.features.length || isNewSelectedTool || !newMode.isSelectable || shouldAllowMultipleShapes;
@@ -17356,6 +18000,7 @@ var useMapDrawTool = function useMapDrawTool(_ref) {
       var updatedGeoJSON = changeGeoJSON(addSelectionTypeToGeoJSON(newMode.shape, newMode.selectionType))[0];
       setFeatureLayerIndex(updatedGeoJSON.features.length - 1);
     }
+
     // handle modes
     setDrawMode(newMode.value);
     setIsInEditMode(!!newMode.value && newMode.isSelectable);
@@ -17439,6 +18084,7 @@ var useMapDrawTool = function useMapDrawTool(_ref) {
         selectedFeatureIndex: featureLayerIndex
       };
     }
+
     // intersections
     return {
       id: layerId,
@@ -17492,12 +18138,12 @@ var GeoJSONTextField = function GeoJSONTextField(_ref) {
       setIsValid(false);
     }
   };
-  return jsx(Grid, {
+  return /*#__PURE__*/jsx(Grid, {
     size: {
       xs: 12
     },
     sx: sx,
-    children: jsx(TextField, {
+    children: /*#__PURE__*/jsx(TextField, {
       disabled: !onChangeGeoJSON,
       error: !isValid,
       label: !isValid ? 'GeoJSON not valid' : title,
@@ -17521,6 +18167,24 @@ var GeoJSONTextField = function GeoJSONTextField(_ref) {
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var FeatureLayers = function FeatureLayers(_ref) {
   var geojson = _ref.geojson,
     onChangeLayerIndex = _ref.onChangeLayerIndex,
@@ -17534,20 +18198,20 @@ var FeatureLayers = function FeatureLayers(_ref) {
       label: "".concat(index + 1, ": ").concat(geojson.features[index].geometry.type)
     };
   }) : [];
-  return jsx(Grid, {
+  return /*#__PURE__*/jsx(Grid, {
     size: {
       sm: 12
     },
-    children: jsxs(FormControl, {
+    children: /*#__PURE__*/jsxs(FormControl, {
       disabled: !featureLayerList.length,
       sx: {
         width: '100%'
       },
       variant: "filled",
-      children: [jsx(InputLabel, {
+      children: [/*#__PURE__*/jsx(InputLabel, {
         id: "demo-feature-number",
         children: "Features"
-      }), jsx(Select, {
+      }), /*#__PURE__*/jsx(Select, {
         labelId: "demo-feature-type",
         onChange: function onChange(event) {
           var featureNr = parseInt(event.target.value, 10);
@@ -17560,9 +18224,9 @@ var FeatureLayers = function FeatureLayers(_ref) {
         },
         value: (featureLayerList.length ? activeFeatureLayerIndex : '').toString(),
         children: featureLayerList.map(function (listItem) {
-          return jsxs(MenuItem, {
+          return /*#__PURE__*/jsxs(MenuItem, {
             value: listItem.index,
-            children: [jsx(Icon$2, {
+            children: [/*#__PURE__*/jsx(Icon$2, {
               sx: {
                 transform: 'scale(0.9)'
               },
@@ -17575,28 +18239,46 @@ var FeatureLayers = function FeatureLayers(_ref) {
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var EditModeButton = function EditModeButton(_ref) {
   var isInEditMode = _ref.isInEditMode,
     drawMode = _ref.drawMode,
     onToggleEditMode = _ref.onToggleEditMode;
-  return jsx(Grid, {
+  return /*#__PURE__*/jsx(Grid, {
     size: {
       xs: 12
     },
-    children: jsx(CustomTooltip, {
+    children: /*#__PURE__*/jsx(CustomTooltip, {
       title: "Switch mode",
-      children: jsxs("span", {
-        children: [jsx(FormLabel, {
+      children: /*#__PURE__*/jsxs("span", {
+        children: [/*#__PURE__*/jsx(FormLabel, {
           children: "View"
-        }), jsx(Switch, {
+        }), /*#__PURE__*/jsx(Switch, {
           checked: isInEditMode,
           "data-testid": "switchMode",
           onClick: function onClick() {
             return onToggleEditMode(!isInEditMode);
           }
-        }), jsx(FormLabel, {
+        }), /*#__PURE__*/jsx(FormLabel, {
           children: "Edit"
-        }), !!drawMode && jsx(Typography, {
+        }), !!drawMode && /*#__PURE__*/jsx(Typography, {
           component: "span",
           sx: {
             display: 'inline-block',
@@ -17629,6 +18311,7 @@ var EditModeButton = function EditModeButton(_ref) {
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var simplePolygonGeoJSON = {
   type: 'FeatureCollection',
   features: [{
@@ -18100,11 +18783,29 @@ var useGeoJSON = function useGeoJSON() {
   };
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var StoryLayoutGrid = function StoryLayoutGrid(_ref) {
   var mapComponent = _ref.mapComponent,
     children = _ref.children;
-  return jsx(Paper, {
-    children: jsxs(Box, {
+  return /*#__PURE__*/jsx(Paper, {
+    children: /*#__PURE__*/jsxs(Box, {
       sx: {
         display: 'grid',
         gridTemplateColumns: '70% 30%',
@@ -18113,21 +18814,21 @@ var StoryLayoutGrid = function StoryLayoutGrid(_ref) {
         width: '100%',
         height: '100vh'
       },
-      children: [jsx(Box, {
+      children: [/*#__PURE__*/jsx(Box, {
         sx: {
           gridArea: 'map',
           width: '100%',
           height: '100%'
         },
         children: mapComponent
-      }), jsx(Box, {
+      }), /*#__PURE__*/jsx(Box, {
         sx: {
           gridArea: 'controls',
           width: '100%',
           height: '100%',
           padding: 2
         },
-        children: jsx(Grid, {
+        children: /*#__PURE__*/jsx(Grid, {
           container: true,
           spacing: 2,
           children: children
@@ -18137,6 +18838,24 @@ var StoryLayoutGrid = function StoryLayoutGrid(_ref) {
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var SelectField = function SelectField(_ref) {
   var label = _ref.label,
     value = _ref.value,
@@ -18156,20 +18875,20 @@ var SelectField = function SelectField(_ref) {
   var getLabel = function getLabel(currentValue) {
     return "".concat(currentValue).concat(labelSuffix);
   };
-  return jsxs(FormControl, {
+  return /*#__PURE__*/jsxs(FormControl, {
     sx: {
       width: width
     },
     variant: "filled",
-    children: [jsx(InputLabel, {
+    children: [/*#__PURE__*/jsx(InputLabel, {
       children: label
-    }), jsx(Select, {
+    }), /*#__PURE__*/jsx(Select, {
       onChange: onChange,
       value: value,
       children: options.map(function (value) {
-        return jsx(MenuItem, {
+        return /*#__PURE__*/jsx(MenuItem, {
           value: value,
-          children: showValueAsColor ? jsx(Box, {
+          children: showValueAsColor ? /*#__PURE__*/jsx(Box, {
             sx: {
               backgroundColor: value,
               width: 20,
@@ -18191,19 +18910,19 @@ var IntersectionSelect = function IntersectionSelect(_ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     activeIntersection = _React$useState2[0],
     setActiveIntersection = _React$useState2[1];
-  return jsx(Grid, {
+  return /*#__PURE__*/jsx(Grid, {
     size: {
       sm: 12
     },
-    children: jsxs(FormControl, {
+    children: /*#__PURE__*/jsxs(FormControl, {
       sx: {
         width: '100%'
       },
       variant: "filled",
-      children: [jsx(InputLabel, {
+      children: [/*#__PURE__*/jsx(InputLabel, {
         id: "demo-intersection",
         children: "Intersection shapes"
-      }), jsx(Select, {
+      }), /*#__PURE__*/jsx(Select, {
         disabled: isDisabled,
         labelId: "demo-intersection",
         onChange: function onChange(event) {
@@ -18216,7 +18935,7 @@ var IntersectionSelect = function IntersectionSelect(_ref) {
         },
         value: activeIntersection.toString(),
         children: intersections.map(function (listItem, index) {
-          return jsx(MenuItem, {
+          return /*#__PURE__*/jsx(MenuItem, {
             value: index,
             children: listItem.title
           }, listItem.title);
@@ -18235,13 +18954,14 @@ var getToolIcon = function getToolIcon(selectionType) {
     return defaultIcon;
   }
   if (selectionType === shapeButtonNL$2.selectionType) {
-    return jsx(DrawFIRLand, {});
+    return /*#__PURE__*/jsx(DrawFIRLand, {});
   }
   if (selectionType === customLineButton.selectionType) {
-    return jsx(ArrowUp, {});
+    return /*#__PURE__*/jsx(ArrowUp, {});
   }
-  return jsx("div", {});
+  return /*#__PURE__*/jsx("div", {});
 };
+
 // custom buttons
 var shapeButtonNL$2 = {
   drawModeId: 'tool-fir',
@@ -18441,17 +19161,18 @@ var getIntersectionToolIcon = function getIntersectionToolIcon(selectionType) {
     return defaultIcon;
   }
   if (selectionType === shapeButtonNL$1.selectionType) {
-    return jsx(DrawFIRLand, {});
+    return /*#__PURE__*/jsx(DrawFIRLand, {});
   }
   if (selectionType === shapeButtonBE$1.selectionType) {
-    return jsx(DrawFIRLand, {
+    return /*#__PURE__*/jsx(DrawFIRLand, {
       sx: {
         transform: "scaleY(-1)"
       }
     });
   }
-  return jsx(DrawFIRLand, {});
+  return /*#__PURE__*/jsx(DrawFIRLand, {});
 };
+
 // custom buttons
 var shapeButtonNL$1 = {
   drawModeId: 'tool-fir',
@@ -18559,6 +19280,7 @@ var exampleIntersectionWithShapeOptions = {
 };
 
 var firSelectionType = 'fir';
+
 // styles and shapes
 var featurePropertiesStart = defaultGeoJSONStyleProperties;
 var featurePropertiesEnd = {
@@ -18587,6 +19309,7 @@ var intersectionShapeBE = {
     properties: _objectSpread2({}, geoJSONIntersectionBoundsStyle)
   })]
 };
+
 // custom buttons
 var shapeButtonNL = {
   drawModeId: 'fir-tool-NL',
@@ -18614,13 +19337,13 @@ var getDoubleControlToolIcon = function getDoubleControlToolIcon(drawMode) {
     return defaultIcon;
   }
   if (selectionType === firSelectionType) {
-    return jsx(DrawFIRLand, {
+    return /*#__PURE__*/jsx(DrawFIRLand, {
       sx: _objectSpread2({}, drawMode.title === shapeButtonBE.title && {
         transform: "scaleY(-1)"
       })
     });
   }
-  return jsx(DrawFIRLand, {});
+  return /*#__PURE__*/jsx(DrawFIRLand, {});
 };
 var getEditModes = function getEditModes(geoJSONProperties) {
   return [_objectSpread2(_objectSpread2({}, defaultPoint), {}, {
@@ -18661,6 +19384,7 @@ var updateEditModeButtonsWithFir = function updateEditModeButtonsWithFir(drawMod
     return mode;
   });
 };
+
 // example configs
 var startToolExampleConfig = {
   defaultGeoJSONIntersectionBounds: intersectionShapeNL,
@@ -18751,7 +19475,7 @@ var ClickOnMapTool = function ClickOnMapTool(_ref) {
       map.removeEventListener('click', clickHandler);
     };
   }, [map, isActive, pointSelected]);
-  return jsx(FeatureLayer, {
+  return /*#__PURE__*/jsx(FeatureLayer, {
     features: features,
     style: isVisible ? pointStyle : [],
     zIndex: layerZIndex
@@ -18770,6 +19494,7 @@ var metersToNauticalMiles = function metersToNauticalMiles(meters) {
   }
   return meters / METERS_PER_NAUTICAL_MILE;
 };
+
 /**
  * Converts two points to a bearing in degrees, relative to geographic north.
  * The input coordinates are in the map projection.
@@ -18780,6 +19505,7 @@ var metersToNauticalMiles = function metersToNauticalMiles(meters) {
  */
 var getBearingDegrees = function getBearingDegrees(p1, p2, projection) {
   var sourceProjection = projection !== null && projection !== void 0 ? projection : 'EPSG:4326';
+
   // Transform from the map projection to geographic lon/lat
   try {
     var _transform = transform(p1, sourceProjection, 'EPSG:4326'),
@@ -18808,6 +19534,7 @@ var getBearingDegrees = function getBearingDegrees(p1, p2, projection) {
     return NaN;
   }
 };
+
 /**
  * Format measurements output.
  * @param {LineString} line The line.
@@ -18859,6 +19586,7 @@ var makeToolTipOverlay = function makeToolTipOverlay() {
   measureTooltipElement.style.position = 'relative';
   measureTooltipElement.style.overflow = 'visible';
   measureTooltipElement.style.pointerEvents = 'none';
+
   // Arrow pointing at the overlay position
   var arrowElement = document.createElement('div');
   arrowElement.style.position = 'absolute';
@@ -18901,6 +19629,7 @@ var makeHelpTooltip = function makeHelpTooltip(tooltipMsg) {
   });
   return overlay;
 };
+
 /**
  * Adds the measure line interaction to the map.
  * @param map
@@ -19062,8 +19791,7 @@ var MapMeasure = function MapMeasure(_ref) {
 //   NOVEMBER = 'timeslider-november',
 //   DECEMBER = 'timeslider-december',
 // }
-var DaysOfWeek;
-(function (DaysOfWeek) {
+var DaysOfWeek = /*#__PURE__*/function (DaysOfWeek) {
   DaysOfWeek["SUNDAY"] = "Sun";
   DaysOfWeek["MONDAY"] = "Mon";
   DaysOfWeek["TUESDAY"] = "Tue";
@@ -19071,9 +19799,9 @@ var DaysOfWeek;
   DaysOfWeek["THURSDAY"] = "Thu";
   DaysOfWeek["FRIDAY"] = "Fri";
   DaysOfWeek["SATURDAY"] = "Sat";
-})(DaysOfWeek || (DaysOfWeek = {}));
-var MonthsOfTheYear;
-(function (MonthsOfTheYear) {
+  return DaysOfWeek;
+}(DaysOfWeek || {});
+var MonthsOfTheYear = /*#__PURE__*/function (MonthsOfTheYear) {
   MonthsOfTheYear["JANUARY"] = "Jan";
   MonthsOfTheYear["FEBRUARY"] = "Feb";
   MonthsOfTheYear["MARCH"] = "Mar";
@@ -19086,7 +19814,8 @@ var MonthsOfTheYear;
   MonthsOfTheYear["OCTOBER"] = "Oct";
   MonthsOfTheYear["NOVEMBER"] = "Nov";
   MonthsOfTheYear["DECEMBER"] = "Dec";
-})(MonthsOfTheYear || (MonthsOfTheYear = {}));
+  return MonthsOfTheYear;
+}(MonthsOfTheYear || {});
 var dateToManualFormatString = function dateToManualFormatString(inDate) {
   if (!inDate) {
     return 'Date not available';
@@ -19099,84 +19828,142 @@ var dateToManualFormatString = function dateToManualFormatString(inDate) {
   return "".concat(EEE, " ").concat(dd, " ").concat(MMM, " ").concat(HH, ":").concat(mm, " UTC");
 };
 
-/**
- * Format a date to a string
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
  *
- * Expects the following props:
- * @param {Date} inDate - date to be formatted
+ *     http://www.apache.org/licenses/LICENSE-2.0
  *
- */
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
+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 /*#__PURE__*/jsx(ThemeProvider, {
+    theme: darkTheme,
+    children: /*#__PURE__*/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: [/*#__PURE__*/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: /*#__PURE__*/jsx(CustomIconButton, {
+          "aria-label": title,
+          onClick: onToggleClock,
+          size: buttonSize,
+          tooltipTitle: title,
+          variant: "boxed",
+          children: /*#__PURE__*/jsx(ChevronRight, {
+            sx: {
+              width: iconSize,
+              height: iconSize
+            }
           })
         })
-      })
-    }), jsx(Grid, {
-      children: jsx(Typography, {
+      }), /*#__PURE__*/jsx(Grid, {
+        children: /*#__PURE__*/jsx(Typography, {
+          sx: {
+            whiteSpace: 'nowrap',
+            fontSize: fontSize,
+            color: 'geowebColors.timeSlider.playerTimeText.color'
+          },
+          variant: "subtitle2",
+          children: currentDateString
+        })
+      }), /*#__PURE__*/jsx(Grid, {
         sx: {
-          whiteSpace: 'nowrap',
-          fontSize: fontSize,
-          color: '#fff'
+          marginLeft: '12px',
+          marginRight: '12px'
         },
-        variant: "subtitle2",
-        children: currentDateString
-      })
-    })]
+        children: /*#__PURE__*/jsx(CustomIconButton, {
+          "aria-label": optionsTitle,
+          isSelected: isOptionsMenuVisible,
+          onClick: onToggleOptions,
+          ref: optionsElement,
+          size: buttonSize,
+          tooltipTitle: optionsTitle,
+          variant: "boxed",
+          children: /*#__PURE__*/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,
@@ -19191,7 +19978,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);
@@ -19204,6 +19994,7 @@ var Clock = function Clock(_ref2) {
     _useState4 = _slicedToArray(_useState3, 2),
     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) {
@@ -19215,8 +20006,11 @@ var Clock = function Clock(_ref2) {
   var setSize = function setSize(size) {
     onSetSize === null || onSetSize === void 0 || onSetSize(size);
   };
-  return jsx(Fragment, {
-    children: !isClockVisible ? jsx(CustomIconButton, {
+  var toggleOptions = function toggleOptions() {
+    onToggleOptions === null || onToggleOptions === void 0 || onToggleOptions();
+  };
+  return /*#__PURE__*/jsx(Fragment, {
+    children: !isClockVisible ? /*#__PURE__*/jsx(CustomIconButton, {
       "aria-label": t('clock-show'),
       onClick: function onClick() {
         toggleClock(true);
@@ -19229,8 +20023,8 @@ var Clock = function Clock(_ref2) {
       },
       tooltipTitle: t('clock-show'),
       variant: "boxed",
-      children: jsx(Clock$1, {})
-    }) : jsx(Draggable, {
+      children: /*#__PURE__*/jsx(Clock$1, {})
+    }) : /*#__PURE__*/jsx(Draggable, {
       bounds: "parent",
       cancel: ".MuiButtonBase-root",
       nodeRef: clockElement,
@@ -19241,29 +20035,19 @@ var Clock = function Clock(_ref2) {
         });
       },
       position: position,
-      children: jsx("div", {
-        ref: function ref(_ref3) {
-          clockElement.current = _ref3;
-        },
+      children: /*#__PURE__*/jsx("div", {
+        ref: clockElement,
         style: {
           position: 'absolute',
           zIndex: 1001,
           top: '10px',
           right: '10px'
         },
-        children: jsx(Resizable, {
+        children: /*#__PURE__*/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;
@@ -19285,11 +20069,14 @@ var Clock = function Clock(_ref2) {
             });
           },
           size: size,
-          children: jsx(ClockContainer, {
+          children: /*#__PURE__*/jsx(ClockContainer, {
             fontSize: fontSize,
-            onButtonClick: function onButtonClick() {
+            isOptionsMenuVisible: isOptionsMenuVisible,
+            onToggleClock: function onToggleClock() {
               toggleClock(false);
             },
+            onToggleOptions: toggleOptions,
+            optionsElement: optionsElement,
             time: time
           })
         })
@@ -19315,6 +20102,7 @@ var Clock = function Clock(_ref2) {
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 function getIsInsideAcceptanceTime(acceptanceTimeInMinutes, mapDimensions, layerDimensions) {
   var _mapDimensions$find, _layerDimensions$find;
   var mapCurrentTime = mapDimensions === null || mapDimensions === void 0 || (_mapDimensions$find = mapDimensions.find(function (dimension) {