@opengeoweb/webmap-react 9.19.1 → 9.20.2

package/index.esm.js

@@ -1,3 +1,4 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useRef, useState, useEffect } from 'react';
 import { legendImageStore, WMImageEventType, webmapUtils, getLegendGraphicURLForLayer, LayerType, getWMJSMapById, debugLogger, DebugType, WMLayer, registerWMLayer, WMBBOX, getWMLayerById, WMJSMap, tilesettings } from '@opengeoweb/webmap';
@@ -7,9 +8,9 @@ import { initReactI18next, useTranslation } from 'react-i18next';
 import { Paper, Box, Typography, Grid, TextField, FormControl, InputLabel, Select, MenuItem, Icon as Icon$1, FormLabel, Switch, styled, Slider } from '@mui/material';
 import { Home, Add, Minus, List, Delete, Edit, DrawRegion, DrawPolygon, Location, DrawFIRLand, ArrowUp, Equalizer, DimensionsElevation, Link, LinkOff, Info, DimensionsOther, DimensionsRefTime, DimensionsTime } from '@opengeoweb/theme';
 import _, { cloneDeep } from 'lodash';
-import proj4 from 'proj4';
 import * as turf from '@turf/turf';
 import { polygonToLineString, booleanClockwise, rewind } from '@turf/turf';
+import proj4 from 'proj4';
 import { produce } from 'immer';
 import { debounce } from 'throttle-debounce';
 import { useResizeDetector } from 'react-resize-detector';
@@ -326,7 +327,9 @@ var store$3 = sharedStore.exports = globalThis$1[SHARED] || defineGlobalProperty
   source: 'https://github.com/zloirock/core-js'
 });
 
-var store$2 = sharedStore.exports;
+var sharedStoreExports = sharedStore.exports;
+
+var store$2 = sharedStoreExports;
 
 var shared$4 = function (key, value) {
   return store$2[key] || (store$2[key] = value || {});
@@ -984,7 +987,7 @@ var global$f = global$n;
 var isObject$8 = isObject$d;
 var createNonEnumerableProperty$7 = createNonEnumerableProperty$8;
 var hasOwn$9 = hasOwnProperty_1;
-var shared$1 = sharedStore.exports;
+var shared$1 = sharedStoreExports;
 var sharedKey$1 = sharedKey$3;
 var hiddenKeys$1 = hiddenKeys$4;
 
@@ -1113,7 +1116,7 @@ var functionName = {
 
 var uncurryThis$j = functionUncurryThis;
 var isCallable$g = isCallable$n;
-var store = sharedStore.exports;
+var store = sharedStoreExports;
 
 var functionToString = uncurryThis$j(Function.toString);
 
@@ -1181,9 +1184,11 @@ Function.prototype.toString = makeBuiltIn$2(function toString() {
   return isCallable$f(this) && getInternalState$2(this).source || inspectSource$2(this);
 }, 'toString');
 
+var makeBuiltInExports = makeBuiltIn$3.exports;
+
 var isCallable$e = isCallable$n;
 var definePropertyModule$1 = objectDefineProperty;
-var makeBuiltIn$1 = makeBuiltIn$3.exports;
+var makeBuiltIn$1 = makeBuiltInExports;
 var defineGlobalProperty$1 = defineGlobalProperty$3;
 
 var defineBuiltIn$7 = function (O, key, value, options) {
@@ -1666,6 +1671,73 @@ if (DESCRIPTORS$5 && values.name !== 'values') try {
   defineProperty$3(values, 'name', { value: 'values' });
 } catch (error) { /* empty */ }
 
+var DESCRIPTORS$4 = descriptors;
+var uncurryThis$f = functionUncurryThis;
+var call$d = functionCall;
+var fails$f = fails$q;
+var objectKeys = objectKeys$2;
+var getOwnPropertySymbolsModule = objectGetOwnPropertySymbols;
+var propertyIsEnumerableModule = objectPropertyIsEnumerable;
+var toObject$4 = toObject$7;
+var IndexedObject$1 = indexedObject;
+
+// eslint-disable-next-line es/no-object-assign -- safe
+var $assign = Object.assign;
+// eslint-disable-next-line es/no-object-defineproperty -- required for testing
+var defineProperty$2 = Object.defineProperty;
+var concat = uncurryThis$f([].concat);
+
+// `Object.assign` method
+// https://tc39.es/ecma262/#sec-object.assign
+var objectAssign = !$assign || fails$f(function () {
+  // should have correct order of operations (Edge bug)
+  if (DESCRIPTORS$4 && $assign({ b: 1 }, $assign(defineProperty$2({}, 'a', {
+    enumerable: true,
+    get: function () {
+      defineProperty$2(this, 'b', {
+        value: 3,
+        enumerable: false
+      });
+    }
+  }), { b: 2 })).b !== 1) return true;
+  // should work with symbols and should have deterministic property order (V8 bug)
+  var A = {};
+  var B = {};
+  // eslint-disable-next-line es/no-symbol -- safe
+  var symbol = Symbol('assign detection');
+  var alphabet = 'abcdefghijklmnopqrst';
+  A[symbol] = 7;
+  alphabet.split('').forEach(function (chr) { B[chr] = chr; });
+  return $assign({}, A)[symbol] !== 7 || objectKeys($assign({}, B)).join('') !== alphabet;
+}) ? function assign(target, source) { // eslint-disable-line no-unused-vars -- required for `.length`
+  var T = toObject$4(target);
+  var argumentsLength = arguments.length;
+  var index = 1;
+  var getOwnPropertySymbols = getOwnPropertySymbolsModule.f;
+  var propertyIsEnumerable = propertyIsEnumerableModule.f;
+  while (argumentsLength > index) {
+    var S = IndexedObject$1(arguments[index++]);
+    var keys = getOwnPropertySymbols ? concat(objectKeys(S), getOwnPropertySymbols(S)) : objectKeys(S);
+    var length = keys.length;
+    var j = 0;
+    var key;
+    while (length > j) {
+      key = keys[j++];
+      if (!DESCRIPTORS$4 || call$d(propertyIsEnumerable, S, key)) T[key] = S[key];
+    }
+  } return T;
+} : $assign;
+
+var $$h = _export;
+var assign = objectAssign;
+
+// `Object.assign` method
+// https://tc39.es/ecma262/#sec-object.assign
+// eslint-disable-next-line es/no-object-assign -- required for testing
+$$h({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }, {
+  assign: assign
+});
+
 // iterable DOM collections
 // flag - `iterable` interface - 'entries', 'keys', 'values', 'forEach' methods
 var domIterables = {
@@ -1747,73 +1819,6 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
-var DESCRIPTORS$4 = descriptors;
-var uncurryThis$f = functionUncurryThis;
-var call$d = functionCall;
-var fails$f = fails$q;
-var objectKeys = objectKeys$2;
-var getOwnPropertySymbolsModule = objectGetOwnPropertySymbols;
-var propertyIsEnumerableModule = objectPropertyIsEnumerable;
-var toObject$4 = toObject$7;
-var IndexedObject$1 = indexedObject;
-
-// eslint-disable-next-line es/no-object-assign -- safe
-var $assign = Object.assign;
-// eslint-disable-next-line es/no-object-defineproperty -- required for testing
-var defineProperty$2 = Object.defineProperty;
-var concat = uncurryThis$f([].concat);
-
-// `Object.assign` method
-// https://tc39.es/ecma262/#sec-object.assign
-var objectAssign = !$assign || fails$f(function () {
-  // should have correct order of operations (Edge bug)
-  if (DESCRIPTORS$4 && $assign({ b: 1 }, $assign(defineProperty$2({}, 'a', {
-    enumerable: true,
-    get: function () {
-      defineProperty$2(this, 'b', {
-        value: 3,
-        enumerable: false
-      });
-    }
-  }), { b: 2 })).b !== 1) return true;
-  // should work with symbols and should have deterministic property order (V8 bug)
-  var A = {};
-  var B = {};
-  // eslint-disable-next-line es/no-symbol -- safe
-  var symbol = Symbol('assign detection');
-  var alphabet = 'abcdefghijklmnopqrst';
-  A[symbol] = 7;
-  alphabet.split('').forEach(function (chr) { B[chr] = chr; });
-  return $assign({}, A)[symbol] !== 7 || objectKeys($assign({}, B)).join('') !== alphabet;
-}) ? function assign(target, source) { // eslint-disable-line no-unused-vars -- required for `.length`
-  var T = toObject$4(target);
-  var argumentsLength = arguments.length;
-  var index = 1;
-  var getOwnPropertySymbols = getOwnPropertySymbolsModule.f;
-  var propertyIsEnumerable = propertyIsEnumerableModule.f;
-  while (argumentsLength > index) {
-    var S = IndexedObject$1(arguments[index++]);
-    var keys = getOwnPropertySymbols ? concat(objectKeys(S), getOwnPropertySymbols(S)) : objectKeys(S);
-    var length = keys.length;
-    var j = 0;
-    var key;
-    while (length > j) {
-      key = keys[j++];
-      if (!DESCRIPTORS$4 || call$d(propertyIsEnumerable, S, key)) T[key] = S[key];
-    }
-  } return T;
-} : $assign;
-
-var $$h = _export;
-var assign = objectAssign;
-
-// `Object.assign` method
-// https://tc39.es/ecma262/#sec-object.assign
-// eslint-disable-next-line es/no-object-assign -- required for testing
-$$h({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }, {
-  assign: assign
-});
-
 const WEBMAP_REACT_NAMESPACE = 'webmapreact';
 i18n.use(initReactI18next).init({
   lng: 'en',
@@ -1850,7 +1855,7 @@ const LegendLayout = ({
   width,
   minWidth
 }) => {
-  return /*#__PURE__*/React__default.createElement(Paper, {
+  return jsxs(Paper, Object.assign({
     "data-testid": "legend",
     sx: {
       padding: '10px',
@@ -1859,46 +1864,62 @@ const LegendLayout = ({
       overflow: 'hidden',
       marginBottom: 0.5
     }
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    "data-testid": "legend-title"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    sx: {
-      fontFamily: 'Roboto, Helvetica, Arial',
-      fontSize: '10px',
-      minWidth: '100%',
-      wordWrap: 'break-word',
-      color: 'common.black',
-      whiteSpace: 'nowrap'
-    },
-    variant: "h3"
-  }, title)), /*#__PURE__*/React__default.createElement(CustomTooltip, {
-    title: title || 'loading',
-    placement: "top"
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      margin: '10px 0px 10px 0px',
-      height: `${height}px`,
-      width: `${width}px`
-    }
-  }, children)), /*#__PURE__*/React__default.createElement(Box, {
-    "data-testid": "legend-info",
-    sx: Object.assign({
-      fontFamily: 'Roboto, Helvetica, Arial',
-      fontSize: 10,
-      color: 'common.black',
-      overflowX: 'hidden',
-      wordWrap: 'break-word',
-      whiteSpace: 'nowrap'
-    }, minWidth && {
-      minWidth: `${minWidth}px`
-    })
-  }, dimensions && dimensions.map(dim => ( /*#__PURE__*/React__default.createElement(Box, {
-    key: name + dim.name
-  }, dim.name === 'time' ? `${dim.currentValue}` : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
-    style: {
-      fontWeight: 500
-    }
-  }, dim.name, ":"), dim.currentValue, " ", dim.units)))))));
+  }, {
+    children: [jsx(Box, Object.assign({
+      "data-testid": "legend-title"
+    }, {
+      children: jsx(Typography, Object.assign({
+        sx: {
+          fontFamily: 'Roboto, Helvetica, Arial',
+          fontSize: '10px',
+          minWidth: '100%',
+          wordWrap: 'break-word',
+          color: 'common.black',
+          whiteSpace: 'nowrap'
+        },
+        variant: "h3"
+      }, {
+        children: title
+      }))
+    })), jsx(CustomTooltip, Object.assign({
+      title: title || 'loading',
+      placement: "top"
+    }, {
+      children: jsx(Box, Object.assign({
+        sx: {
+          margin: '10px 0px 10px 0px',
+          height: `${height}px`,
+          width: `${width}px`
+        }
+      }, {
+        children: children
+      }))
+    })), jsx(Box, Object.assign({
+      "data-testid": "legend-info",
+      sx: Object.assign({
+        fontFamily: 'Roboto, Helvetica, Arial',
+        fontSize: 10,
+        color: 'common.black',
+        overflowX: 'hidden',
+        wordWrap: 'break-word',
+        whiteSpace: 'nowrap'
+      }, minWidth && {
+        minWidth: `${minWidth}px`
+      })
+    }, {
+      children: dimensions && dimensions.map(dim => jsx(Box, {
+        children: dim.name === 'time' ? `${dim.currentValue}` : jsxs(Fragment, {
+          children: [jsxs(Box, Object.assign({
+            style: {
+              fontWeight: 500
+            }
+          }, {
+            children: [dim.name, ":"]
+          })), dim.currentValue, " ", dim.units]
+        })
+      }, name + dim.name))
+    }))]
+  }));
 };
 
 const defaultCanvasWidth = 150;
@@ -1971,78 +1992,64 @@ const Legend = ({
   /* Get the wmLayer, it has more detailed info about the WMS service,
   like a title and the WMS legendgraphic url */
   const wmLayer = webmapUtils.getWMLayerById(layer.id);
-  return /*#__PURE__*/React__default.createElement(LegendLayout, {
+  return jsx(LegendLayout, Object.assign({
     title: wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.title,
     name: wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.name,
     dimensions: layer === null || layer === void 0 ? void 0 : layer.dimensions,
     height: canvasContainerHeight,
     width: canvasContainerWidth,
     minWidth: defaultCanvasWidth
-  }, /*#__PURE__*/React__default.createElement(CanvasComponent, {
-    redrawInterval: 500,
-    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.
-           */
-      const legendWmLayer = webmapUtils.getWMLayerById(layer.id);
-      const legendUrl = getLegendGraphicURLForLayer(legendWmLayer);
-      const image = legendImageStore.getImage(legendUrl);
-      /* If there is no image for the given URL, we do not want to display a legend image (e.g. outside range) */
-      if (!image) {
-        previousLegendImage.current = null;
-        setCanvasContainerWidth(defaultCanvasWidth);
-        setCanvasContainerHeight(defaultCanvasHeight);
-        ctx.beginPath();
-        ctx.fillStyle = '#fff';
-        ctx.rect(0, 0, width, height);
-        ctx.fill();
-        ctx.fillStyle = 'black';
-        if (!legendUrl) {
-          ctx.fillText('No legend graphic available', 5, 16);
-        }
-      } else {
-        /* If there is an image for the given url, and has no error, but it is not yet loading or loaded, start loading it! */
-        if (image && image.hasError() === false && image.isLoaded() === false && image.isLoading() === false) {
-          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 && 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 */
+  }, {
+    children: jsx(CanvasComponent, {
+      redrawInterval: 500,
+      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.
+             */
+        const legendWmLayer = webmapUtils.getWMLayerById(layer.id);
+        const legendUrl = getLegendGraphicURLForLayer(legendWmLayer);
+        const image = legendImageStore.getImage(legendUrl);
+        /* If there is no image for the given URL, we do not want to display a legend image (e.g. outside range) */
+        if (!image) {
+          previousLegendImage.current = null;
+          setCanvasContainerWidth(defaultCanvasWidth);
+          setCanvasContainerHeight(defaultCanvasHeight);
+          ctx.beginPath();
           ctx.fillStyle = '#fff';
           ctx.rect(0, 0, width, height);
           ctx.fill();
-          /* Set the opacity used in the layer */
-          ctx.globalAlpha = layerOpacity;
+          ctx.fillStyle = 'black';
+          if (!legendUrl) {
+            ctx.fillText('No legend graphic available', 5, 16);
+          }
+        } else {
+          /* If there is an image for the given url, and has no error, but it is not yet loading or loaded, start loading it! */
+          if (image && image.hasError() === false && image.isLoaded() === false && image.isLoading() === false) {
+            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 && 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);
+            ctx.fill();
+            /* Set the opacity used in the layer */
+            ctx.globalAlpha = layerOpacity;
+          }
+          renderLegendGraphic(previousLegendImage.current, ctx, imageWidth, imageHeight);
         }
-        renderLegendGraphic(previousLegendImage.current, ctx, imageWidth, imageHeight);
       }
-    }
+    })
   }));
 };
 
-/* *
- * 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)
- * */
 const LegendDialog = ({
   layers,
   isOpen,
@@ -2056,7 +2063,7 @@ const LegendDialog = ({
   const {
     t
   } = useWebmapReactTranslation();
-  return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
+  return jsx(ToolContainerDraggable, Object.assign({
     startPosition: {
       right: 20,
       top: 50
@@ -2071,30 +2078,37 @@ const LegendDialog = ({
     onMouseDown: _onMouseDown,
     order: _order,
     source: _source
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      padding: 0.5
-    }
-  }, layers && layers.length > 0 ? ( /*#__PURE__*/React.createElement(Box, {
-    "data-testid": "LegendList",
-    sx: {
-      display: 'flex',
-      flexDirection: 'column',
-      '&>div:last-child': {
-        marginBottom: 0
+  }, {
+    children: jsx(Box, Object.assign({
+      sx: {
+        padding: 0.5
       }
-    }
-  }, layers.map(layer => ( /*#__PURE__*/React.createElement(Legend, {
-    key: layer.id,
-    layer: layer
-  }))))) : ( /*#__PURE__*/React.createElement(Typography, {
-    "data-testid": "NoLayers",
-    variant: "body1",
-    style: {
-      fontWeight: 500,
-      fontSize: 14
-    }
-  }, t('webmap-react-no-layers')))));
+    }, {
+      children: layers && layers.length > 0 ? jsx(Box, Object.assign({
+        "data-testid": "LegendList",
+        sx: {
+          display: 'flex',
+          flexDirection: 'column',
+          '&>div:last-child': {
+            marginBottom: 0
+          }
+        }
+      }, {
+        children: layers.map(layer => jsx(Legend, {
+          layer: layer
+        }, layer.id))
+      })) : jsx(Typography, Object.assign({
+        "data-testid": "NoLayers",
+        variant: "body1",
+        style: {
+          fontWeight: 500,
+          fontSize: 14
+        }
+      }, {
+        children: t('webmap-react-no-layers')
+      }))
+    }))
+  }));
 };
 
 /******************************************************************************
@@ -2111,6 +2125,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
 
 function __rest(s, e) {
     var t = {};
@@ -2148,7 +2164,7 @@ const MapControlButton = _a => {
       isActive = false
     } = _a,
     props = __rest(_a, ["onClick", "children", "title", "placement", "isActive"]);
-  return /*#__PURE__*/React.createElement(CustomIconButton, Object.assign({
+  return jsx(CustomIconButton, Object.assign({
     variant: "tool",
     tooltipProps: {
       placement,
@@ -2156,25 +2172,11 @@ const MapControlButton = _a => {
     },
     onClick: onClick,
     isSelected: isActive
-  }, props), children);
+  }, props, {
+    children: children
+  }));
 };
 
-/* *
- * 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)
- * */
 const ZoomControls = ({
   onZoomIn,
   onZoomOut,
@@ -2183,19 +2185,27 @@ const ZoomControls = ({
   const {
     t
   } = useWebmapReactTranslation();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MapControlButton, {
-    title: t('webmap-react-zoom-reset'),
-    "data-testid": "zoom-reset",
-    onClick: onZoomReset
-  }, /*#__PURE__*/React.createElement(Home, null)), /*#__PURE__*/React.createElement(MapControlButton, {
-    title: t('webmap-react-zoom-in'),
-    "data-testid": "zoom-in",
-    onClick: onZoomIn
-  }, /*#__PURE__*/React.createElement(Add, null)), /*#__PURE__*/React.createElement(MapControlButton, {
-    title: t('webmap-react-zoom-out'),
-    "data-testid": "zoom-out",
-    onClick: onZoomOut
-  }, /*#__PURE__*/React.createElement(Minus, null)));
+  return jsxs(Fragment, {
+    children: [jsx(MapControlButton, Object.assign({
+      title: t('webmap-react-zoom-reset'),
+      "data-testid": "zoom-reset",
+      onClick: onZoomReset
+    }, {
+      children: jsx(Home, {})
+    })), jsx(MapControlButton, Object.assign({
+      title: t('webmap-react-zoom-in'),
+      "data-testid": "zoom-in",
+      onClick: onZoomIn
+    }, {
+      children: jsx(Add, {})
+    })), jsx(MapControlButton, Object.assign({
+      title: t('webmap-react-zoom-out'),
+      "data-testid": "zoom-out",
+      onClick: onZoomOut
+    }, {
+      children: jsx(Minus, {})
+    }))]
+  });
 };
 
 const MapControls = _a => {
@@ -2203,7 +2213,7 @@ const MapControls = _a => {
       children
     } = _a,
     props = __rest(_a, ["children"]);
-  return /*#__PURE__*/React.createElement(Box, Object.assign({
+  return jsx(Box, Object.assign({
     sx: {
       position: 'absolute',
       overflow: 'visible',
@@ -2214,33 +2224,21 @@ const MapControls = _a => {
       top: '96px',
       userSelect: 'none'
     }
-  }, props), /*#__PURE__*/React.createElement(Grid, {
-    sx: {
-      '& > button': {
-        marginBottom: 1
-      }
-    },
-    container: true,
-    direction: "column"
-  }, children));
+  }, props, {
+    children: jsx(Grid, Object.assign({
+      sx: {
+        '& > button': {
+          marginBottom: 1
+        }
+      },
+      container: true,
+      direction: "column"
+    }, {
+      children: children
+    }))
+  }));
 };
 
-/* *
- * 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)
- * */
 const LegendButton = ({
   openLegendDialog,
   isOpen
@@ -2249,12 +2247,14 @@ const LegendButton = ({
     t
   } = useWebmapReactTranslation();
   const onClickButton = () => openLegendDialog();
-  return /*#__PURE__*/React.createElement(MapControlButton, {
+  return jsx(MapControlButton, Object.assign({
     title: t('webmap-react-legend'),
     "data-testid": "open-Legend",
     onClick: onClickButton,
     isActive: isOpen
-  }, /*#__PURE__*/React.createElement(List, null));
+  }, {
+    children: jsx(List, {})
+  }));
 };
 
 var wellKnownSymbol$a = wellKnownSymbol$h;
@@ -2720,19 +2720,111 @@ if (NOT_GENERIC || INCORRECT_NAME) {
   }, { unsafe: true });
 }
 
-/* Function which calculates the distance between two points */
-const distance = (a, b) => {
-  return Math.sqrt((a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y));
-};
-const checkHoverVertice = (feature, mouseX, mouseY, convertGeoCoordsToScreenCoords, ignoreCoordinateIndexInFeature) => {
-  const maxDistance = 20;
-  if (feature.geometry.type === 'Point') {
-    const featureCoords = feature.geometry.coordinates;
-    /* Get all vertexes */
-    const XYCoords = convertGeoCoordsToScreenCoords([featureCoords]);
-    if (XYCoords.length > 0 && distance(XYCoords[0], {
-      x: mouseX,
-      y: mouseY
+const Proj4js = proj4;
+// Cache for for storing and reusing Proj4 instances
+const projectorCache = {};
+// Ensure that you have a Proj4 object, pulling from the cache if necessary
+const getProj4 = projection => {
+  if (projection instanceof Proj4js.Proj) {
+    return projection;
+  }
+  if (typeof projection === 'string' && projection in projectorCache) {
+    return projectorCache[projection];
+  }
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  projectorCache[projection] = new Proj4js.Proj(projection);
+  return projectorCache[projection];
+};
+/* Function which calculates the distance between two points */
+const distance = (a, b) => {
+  return Math.sqrt((a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y));
+};
+/* Function which calculates if a point is between two other points */
+const isBetween = (a, c, b) => {
+  const da = distance(a, c) + distance(c, b);
+  const db = distance(a, b);
+  return Math.abs(da - db) < 1;
+};
+const convertGeoCoordsToScreenCoords = (featureCoords, mapId) => {
+  const webmapjs = webmapUtils.getWMJSMapById(mapId);
+  const XYCoords = [];
+  for (const featureCoord of featureCoords) {
+    if (featureCoord.length < 2) {
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+    const coord = webmapjs.getPixelCoordFromLatLong({
+      x: featureCoord[0],
+      y: featureCoord[1]
+    });
+    XYCoords.push(coord);
+  }
+  return XYCoords;
+};
+const getPixelCoordFromGeoCoord = (featureCoords, mapId) => {
+  const webmapjs = webmapUtils.getWMJSMapById(mapId);
+  const {
+    width,
+    height
+  } = webmapjs.getSize();
+  const bbox = webmapjs.getBBOX();
+  const proj = webmapjs.getProj4();
+  const XYCoords = [];
+  const from = getProj4(proj.lonlat);
+  const to = getProj4(proj.crs);
+  for (const featureCoord of featureCoords) {
+    if (featureCoord.length < 2) {
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+    let coordinates = {
+      x: featureCoord[0],
+      y: featureCoord[1]
+    };
+    coordinates = proj.proj4.transform(from, to, coordinates);
+    const x = width * (coordinates.x - bbox.left) / (bbox.right - bbox.left);
+    const y = height * (coordinates.y - bbox.top) / (bbox.bottom - bbox.top);
+    XYCoords.push({
+      x,
+      y
+    });
+  }
+  return XYCoords;
+};
+const findClosestCoords = (positions, mouseX, mouseY) => {
+  const thresholds = {
+    max: 150,
+    min: 0.5
+  };
+  let closestIndexes = [];
+  let closestDist = Infinity;
+  positions.forEach((position, index) => {
+    const currentDist = distance(position, {
+      x: mouseX,
+      y: mouseY
+    });
+    if (currentDist < thresholds.min || currentDist > thresholds.max) {
+      return;
+    }
+    if (currentDist < closestDist) {
+      closestDist = currentDist;
+      closestIndexes = [index];
+    } else if (currentDist === closestDist) {
+      closestIndexes.push(index);
+    }
+  });
+  return closestIndexes;
+};
+const checkHoverVertice = (feature, mouseX, mouseY, convertGeoCoordsToScreenCoords, ignoreCoordinateIndexInFeature) => {
+  const maxDistance = 20;
+  if (feature.geometry.type === 'Point') {
+    const featureCoords = feature.geometry.coordinates;
+    /* Get all vertexes */
+    const XYCoords = convertGeoCoordsToScreenCoords([featureCoords]);
+    if (XYCoords.length > 0 && distance(XYCoords[0], {
+      x: mouseX,
+      y: mouseY
     }) < maxDistance) {
       return {
         coordinateIndexInFeature: 0
@@ -2931,41 +3023,26 @@ const featureBox = {
   }
 };
 const lineString = {
+  type: 'Feature',
+  properties: {
+    stroke: '#66F',
+    'stroke-width': 5,
+    'stroke-opacity': '1'
+  },
+  geometry: {
+    type: 'LineString',
+    coordinates: [[]]
+  }
+};
+const lineStringCollection = {
   type: 'FeatureCollection',
-  features: [{
-    type: 'Feature',
-    properties: {
-      stroke: '#66F',
-      'stroke-width': 5,
-      'stroke-opacity': '1'
-    },
-    geometry: {
-      type: 'LineString',
-      coordinates: [[]]
-    }
-  }]
+  features: [lineString]
 };
 
 const colors = {
   main: '#ff7800',
   vertice: '#000'
 };
-const Proj4js = proj4;
-// Cache for for storing and reusing Proj4 instances
-const projectorCache = {};
-// Ensure that you have a Proj4 object, pulling from the cache if necessary
-const getProj4 = projection => {
-  if (projection instanceof Proj4js.Proj) {
-    return projection;
-  }
-  if (typeof projection === 'string' && projection in projectorCache) {
-    return projectorCache[projection];
-  }
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  projectorCache[projection] = new Proj4js.Proj(projection);
-  return projectorCache[projection];
-};
 var EDITMODE;
 (function (EDITMODE) {
   EDITMODE["EMPTY"] = "EMPTY";
@@ -3023,14 +3100,15 @@ class MapDraw extends React.PureComponent {
   constructor(props) {
     super(props);
     this.handleGeoJSONUpdate = newGeoJSON => {
+      var _a;
       const {
         selectedFeatureIndex,
         mapId
       } = this.props;
       this.geojson = cloneDeep(newGeoJSON);
       /* Ensure that this.snappedPolygonIndex is still within the coordinates array */
-      if (this.geojson && this.geojson.features && selectedFeatureIndex < this.geojson.features.length) {
-        const feature = this.geojson.features[selectedFeatureIndex];
+      if (((_a = this.geojson) === null || _a === void 0 ? void 0 : _a.features) && selectedFeatureIndex < this.geojson.features.length) {
+        const feature = this.getSelectedFeature();
         if (feature.geometry) {
           const {
             coordinates
@@ -3041,33 +3119,39 @@ class MapDraw extends React.PureComponent {
         }
       }
       const webmapjs = webmapUtils.getWMJSMapById(mapId);
-      webmapjs && webmapjs.draw('MapDraw::handleGeoJSONUpdate');
+      webmapjs === null || webmapjs === void 0 ? void 0 : webmapjs.draw('MapDraw::handleGeoJSONUpdate');
     };
     this.handleExitDrawMode = (reason = 'escaped') => {
       const {
-        exitDrawModeCallback,
-        selectedFeatureIndex
+        exitDrawModeCallback
       } = this.props;
       // remove last vertice when pressing ESC while drawing a polygon
-      if (this.myDrawMode === DRAWMODE.POLYGON && this.myEditMode === EDITMODE.ADD_FEATURE && reason === 'escaped') {
-        const currentFeature = this.geojson.features[selectedFeatureIndex];
+      if (this.myDrawMode === DRAWMODE.POLYGON && this.myEditMode === EDITMODE.ADD_FEATURE) {
+        const currentFeature = this.getSelectedFeature();
         const currentGeometry = currentFeature.geometry;
         const coordinates = currentGeometry.coordinates[0];
         if (currentGeometry.type === 'Polygon') {
-          coordinates.splice(coordinates.length - 1, 1);
+          const firstElement = coordinates[0];
+          coordinates[this.mouseIsOverVertexNr] = cloneDeep(firstElement);
         }
       }
       if (exitDrawModeCallback && (this.myEditMode === EDITMODE.EMPTY || this.myEditMode === EDITMODE.DELETE_FEATURES)) {
-        exitDrawModeCallback(reason);
+        exitDrawModeCallback(reason, this.geojson);
       }
       this.cancelEdit(this.myDrawMode !== DRAWMODE.BOX);
       if (this.myDrawMode === DRAWMODE.POLYGON && exitDrawModeCallback) {
-        exitDrawModeCallback(reason);
+        exitDrawModeCallback(reason, this.geojson);
       }
       if (this.myDrawMode === DRAWMODE.LINESTRING && exitDrawModeCallback) {
-        exitDrawModeCallback(reason);
+        exitDrawModeCallback(reason, this.geojson);
       }
     };
+    this.getSelectedFeature = () => {
+      const {
+        selectedFeatureIndex
+      } = this.props;
+      return this.geojson.features[selectedFeatureIndex];
+    };
     this.myEditMode = EDITMODE.EMPTY;
     this.myDrawMode = DRAWMODE.POLYGON;
     this.beforeDraw = this.beforeDraw.bind(this);
@@ -3076,8 +3160,6 @@ class MapDraw extends React.PureComponent {
     this.deleteFeature = this.deleteFeature.bind(this);
     this.mouseUp = this.mouseUp.bind(this);
     this.cancelEdit = this.cancelEdit.bind(this);
-    this.distance = this.distance.bind(this);
-    this.isBetween = this.isBetween.bind(this);
     this.checkDist = this.checkDist.bind(this);
     this.hoverEdge = this.hoverEdge.bind(this);
     this.drawPolygon = this.drawPolygon.bind(this);
@@ -3100,6 +3182,7 @@ class MapDraw extends React.PureComponent {
     this.checkIfFeatureIsBox = this.checkIfFeatureIsBox.bind(this);
     this.handleGeoJSONUpdate = this.handleGeoJSONUpdate.bind(this);
     this.handleNewFeatureIndex = this.handleNewFeatureIndex.bind(this);
+    this.getSelectedFeature = this.getSelectedFeature.bind(this);
     this.handleDrawMode(props.drawMode);
     this.textPositions = [];
     this.mouseOverPolygonCoordinates = [];
@@ -3209,19 +3292,24 @@ class MapDraw extends React.PureComponent {
     this.componentCleanup();
   }
   handleKeyDown(event) {
+    const {
+      isInEditMode
+    } = this.props;
     const ESCAPE_KEY = 27;
     if (event.keyCode === ESCAPE_KEY) {
       this.handleExitDrawMode('escaped');
     }
+    if (isInEditMode && (event.key === 'Delete' || event.key === 'Backspace')) {
+      this.deleteFeature();
+    }
   }
   handleNewFeatureIndex() {
     var _a;
     // Another feature was selected. The mouseIsOverVertexNr should be updated
     const {
-      selectedFeatureIndex,
       mapId
     } = this.props;
-    const feature = this.geojson.features[selectedFeatureIndex];
+    const feature = this.getSelectedFeature();
     if (feature) {
       const featureCoords = feature.geometry.coordinates;
       this.mouseIsOverVertexNr = featureCoords.length - 1;
@@ -3249,47 +3337,17 @@ class MapDraw extends React.PureComponent {
       }
     }
   }
-  getPixelCoordFromGeoCoord(featureCoords) {
+  hoverVertex(feature, mouseX, mouseY) {
     const {
       mapId
     } = this.props;
-    const webmapjs = webmapUtils.getWMJSMapById(mapId);
-    const {
-      width,
-      height
-    } = webmapjs.getSize();
-    const bbox = webmapjs.getBBOX();
-    const proj = webmapjs.getProj4();
-    const XYCoords = [];
-    const from = getProj4(proj.lonlat);
-    const to = getProj4(proj.crs);
-    for (const featureCoord of featureCoords) {
-      if (featureCoord.length < 2) {
-        // eslint-disable-next-line no-continue
-        continue;
-      }
-      let coordinates = {
-        x: featureCoord[0],
-        y: featureCoord[1]
-      };
-      coordinates = proj.proj4.transform(from, to, coordinates);
-      const x = width * (coordinates.x - bbox.left) / (bbox.right - bbox.left);
-      const y = height * (coordinates.y - bbox.top) / (bbox.bottom - bbox.top);
-      XYCoords.push({
-        x,
-        y
-      });
-    }
-    return XYCoords;
-  }
-  hoverVertex(feature, mouseX, mouseY) {
     let foundVertex = VERTEX.NONE;
     this.mouseIsOverVertexNr = VERTEX.NONE;
     if (feature.geometry.type === 'Point') {
       this.snappedPolygonIndex = SNAPPEDFEATURE.NONE;
       const featureCoords = feature.geometry.coordinates;
       /* Get all vertexes */
-      const XYCoords = this.convertGeoCoordsToScreenCoords([featureCoords]);
+      const XYCoords = convertGeoCoordsToScreenCoords([featureCoords], mapId);
       if (XYCoords.length > 0 && this.checkDist(XYCoords[0], 0, mouseX, mouseY)) {
         this.mouseIsOverVertexNr = 0;
         return;
@@ -3304,7 +3362,7 @@ class MapDraw extends React.PureComponent {
           continue;
         }
         /* Get all vertexes */
-        const XYCoords = this.convertGeoCoordsToScreenCoords([featureCoords]);
+        const XYCoords = convertGeoCoordsToScreenCoords([featureCoords], mapId);
         if (XYCoords.length > 0 && this.checkDist(XYCoords[0], polygonIndex, mouseX, mouseY)) {
           this.mouseIsOverVertexNr = polygonIndex;
           return;
@@ -3319,7 +3377,7 @@ class MapDraw extends React.PureComponent {
           continue;
         }
         /* Get all vertexes */
-        const XYCoords = this.convertGeoCoordsToScreenCoords(featureCoords);
+        const XYCoords = convertGeoCoordsToScreenCoords(featureCoords, mapId);
         const middle = {
           x: 0,
           y: 0
@@ -3351,7 +3409,7 @@ class MapDraw extends React.PureComponent {
       const lineStringIndex = 0;
       const featureCoords = feature.geometry.coordinates;
       /* Get all vertexes */
-      const XYCoords = this.convertGeoCoordsToScreenCoords(featureCoords);
+      const XYCoords = convertGeoCoordsToScreenCoords(featureCoords, mapId);
       /* Snap to the vertex closer than specified pixels */
       for (let j = 0; j < XYCoords.length; j += 1) {
         const coord = XYCoords[j];
@@ -3367,10 +3425,10 @@ class MapDraw extends React.PureComponent {
   mouseMove(event) {
     const {
       isInEditMode,
-      selectedFeatureIndex,
-      onHoverFeature
+      onHoverFeature,
+      mapId
     } = this.props;
-    if (event && event.rightButton === true) {
+    if ((event === null || event === void 0 ? void 0 : event.rightButton) === true) {
       return undefined;
     }
     /* mouseMove is an event callback function which is triggered when the mouse moves over the map
@@ -3387,7 +3445,7 @@ class MapDraw extends React.PureComponent {
     if (onHoverFeature) {
       const handleMouseStoppedTimer = () => {
         const result = checkHoverFeatures(this.geojson, this.mouseX, this.mouseY, coordinates => {
-          return this.convertGeoCoordsToScreenCoords(coordinates);
+          return convertGeoCoordsToScreenCoords(coordinates, mapId);
         });
         if (result) {
           this.featureEvent = {
@@ -3402,9 +3460,6 @@ class MapDraw extends React.PureComponent {
         } else {
           this.featureEvent = undefined;
         }
-        const {
-          mapId
-        } = this.props;
         const webmapjs = webmapUtils.getWMJSMapById(mapId);
         webmapjs && webmapjs.draw('MapDraw::onHoverFeature');
       };
@@ -3414,13 +3469,10 @@ class MapDraw extends React.PureComponent {
     if (isInEditMode === false) {
       return undefined;
     }
-    const feature = this.geojson.features[selectedFeatureIndex];
+    const feature = this.getSelectedFeature();
     if (!feature) {
       return undefined;
     }
-    const {
-      mapId
-    } = this.props;
     const webmapjs = webmapUtils.getWMJSMapById(mapId);
     this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
       x: mouseX,
@@ -3515,8 +3567,7 @@ class MapDraw extends React.PureComponent {
       mouseY
     } = event;
     const {
-      mapId,
-      selectedFeatureIndex
+      mapId
     } = this.props;
     const webmapjs = webmapUtils.getWMJSMapById(mapId);
     if (this.myDrawMode === DRAWMODE.POLYGON) {
@@ -3525,7 +3576,7 @@ class MapDraw extends React.PureComponent {
           x: mouseX,
           y: mouseY
         });
-        const feature = this.geojson.features[selectedFeatureIndex];
+        const feature = this.getSelectedFeature();
         if (this.checkIfFeatureIsBox(feature)) {
           return false;
         }
@@ -3545,7 +3596,7 @@ class MapDraw extends React.PureComponent {
           x: mouseX,
           y: mouseY
         });
-        const feature = this.geojson.features[selectedFeatureIndex];
+        const feature = this.getSelectedFeature();
         if (this.checkIfFeatureIsBox(feature)) {
           return false;
         }
@@ -3581,7 +3632,7 @@ class MapDraw extends React.PureComponent {
       if (!this.geojson.features[selectedFeatureIndex]) {
         this.geojson.features[selectedFeatureIndex] = getNewFeature(this.myDrawMode);
       }
-      const feature = this.geojson.features[selectedFeatureIndex];
+      const feature = this.getSelectedFeature();
       this.initializeFeatureCoordinates(feature, this.myDrawMode);
       this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
         x: mouseX,
@@ -3590,16 +3641,12 @@ class MapDraw extends React.PureComponent {
       if (this.myDrawMode === DRAWMODE.POINT || this.myDrawMode === DRAWMODE.MULTIPOINT) {
         /* Create points */
         const pointGeometry = feature.geometry;
-        if (pointGeometry) {
-          if (pointGeometry.coordinates === undefined) {
-            pointGeometry.coordinates = [];
-          }
+        if ((pointGeometry === null || pointGeometry === void 0 ? void 0 : pointGeometry.coordinates) === undefined) {
+          pointGeometry.coordinates = [];
         }
         const multiPointGeometry = feature.geometry;
-        if (multiPointGeometry) {
-          if (multiPointGeometry.coordinates === undefined) {
-            multiPointGeometry.coordinates = [[]];
-          }
+        if ((multiPointGeometry === null || multiPointGeometry === void 0 ? void 0 : multiPointGeometry.coordinates) === undefined) {
+          multiPointGeometry.coordinates = [[]];
         }
         if (this.myDrawMode === DRAWMODE.POINT) {
           const featureCoords = pointGeometry.coordinates;
@@ -3630,18 +3677,17 @@ class MapDraw extends React.PureComponent {
       if (this.myDrawMode === DRAWMODE.POLYGON || this.myDrawMode === DRAWMODE.BOX) {
         /* Create poly's and boxes */
         this.myEditMode = EDITMODE.ADD_FEATURE;
-        if (feature.geometry) {
-          if (feature.geometry.coordinates === undefined) {
-            feature.geometry.coordinates = [[]];
-          }
+        const polygonGeometry = feature.geometry;
+        if ((polygonGeometry === null || polygonGeometry === void 0 ? void 0 : polygonGeometry.coordinates) === undefined) {
+          polygonGeometry.coordinates = [[]];
         }
-        if (feature.geometry.coordinates[0] === undefined || feature.geometry.coordinates[0].length === 0) {
-          feature.geometry.coordinates[0] = []; /* Used to create the first polygon */
+        if (polygonGeometry.coordinates[0] === undefined || polygonGeometry.coordinates[0].length === 0) {
+          polygonGeometry.coordinates[0] = []; /* Used to create the first polygon */
         } else {
-          feature.geometry.coordinates.push([]); /* Used to create extra polygons in the same feature */
+          polygonGeometry.coordinates.push([]); /* Used to create extra polygons in the same feature */
         }
-        this.snappedPolygonIndex = feature.geometry.coordinates.length - 1;
-        const featureCoords = feature.geometry.coordinates[this.snappedPolygonIndex];
+        this.snappedPolygonIndex = polygonGeometry.coordinates.length - 1;
+        const featureCoords = polygonGeometry.coordinates[this.snappedPolygonIndex];
         featureCoords.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
         featureCoords.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
         /* This is triggered when a bounding box is created. Five points are added at once */
@@ -3689,8 +3735,7 @@ class MapDraw extends React.PureComponent {
       mouseY
     } = event;
     const {
-      mapId,
-      selectedFeatureIndex
+      mapId
     } = this.props;
     const webmapjs = webmapUtils.getWMJSMapById(mapId);
     if (this.myDrawMode === DRAWMODE.MULTIPOINT) {
@@ -3699,12 +3744,14 @@ class MapDraw extends React.PureComponent {
           x: mouseX,
           y: mouseY
         });
-        const feature = this.geojson.features[selectedFeatureIndex];
-        const featureCoords = feature.geometry.coordinates;
-        featureCoords.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
-        this.featureHasChanged('point added to multipoint');
-        this.mouseIsOverVertexNr = VERTEX.NONE;
-        this.mouseMove(event);
+        const feature = this.getSelectedFeature();
+        if (feature.geometry.type === 'MultiPoint') {
+          const featureCoords = feature.geometry.coordinates;
+          featureCoords.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
+          this.featureHasChanged('point added to multipoint');
+          this.mouseIsOverVertexNr = VERTEX.NONE;
+          this.mouseMove(event);
+        }
         return false;
       }
     }
@@ -3716,8 +3763,7 @@ class MapDraw extends React.PureComponent {
       mouseY
     } = event;
     const {
-      mapId,
-      selectedFeatureIndex
+      mapId
     } = this.props;
     const webmapjs = webmapUtils.getWMJSMapById(mapId);
     if (this.myDrawMode === DRAWMODE.POLYGON) {
@@ -3726,12 +3772,14 @@ class MapDraw extends React.PureComponent {
           x: mouseX,
           y: mouseY
         });
-        const feature = this.geojson.features[selectedFeatureIndex];
-        const featureCoords = feature.geometry.coordinates[this.snappedPolygonIndex];
-        featureCoords.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
-        this.featureHasChanged('vertex added to polygon');
-        this.mouseIsOverVertexNr = featureCoords.length - 1;
-        this.mouseMove(event);
+        const feature = this.getSelectedFeature();
+        if (feature.geometry.type === 'Polygon') {
+          const featureCoords = feature.geometry.coordinates[this.snappedPolygonIndex];
+          featureCoords.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
+          this.featureHasChanged('vertex added to polygon');
+          this.mouseIsOverVertexNr = featureCoords.length - 1;
+          this.mouseMove(event);
+        }
         return false;
       }
     }
@@ -3743,8 +3791,7 @@ class MapDraw extends React.PureComponent {
       mouseY
     } = event;
     const {
-      mapId,
-      selectedFeatureIndex
+      mapId
     } = this.props;
     const webmapjs = webmapUtils.getWMJSMapById(mapId);
     if (this.myDrawMode === DRAWMODE.LINESTRING) {
@@ -3753,7 +3800,7 @@ class MapDraw extends React.PureComponent {
           x: mouseX,
           y: mouseY
         });
-        const feature = this.geojson.features[selectedFeatureIndex];
+        const feature = this.getSelectedFeature();
         const featureCoords = feature.geometry.coordinates;
         featureCoords.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
         this.featureHasChanged('vertex added to LineString');
@@ -3768,7 +3815,7 @@ class MapDraw extends React.PureComponent {
     const {
       isInEditMode
     } = this.props;
-    if (event && event.rightButton === true) {
+    if ((event === null || event === void 0 ? void 0 : event.rightButton) === true) {
       return;
     }
     if (isInEditMode === false) {
@@ -3817,10 +3864,9 @@ class MapDraw extends React.PureComponent {
   }
   deletePolygon(index) {
     const {
-      selectedFeatureIndex,
       deletePolygonCallback
     } = this.props;
-    const feature = this.geojson.features[selectedFeatureIndex];
+    const feature = this.getSelectedFeature();
     feature.geometry.coordinates.splice(index, 1);
     if (deletePolygonCallback) {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -3835,43 +3881,45 @@ class MapDraw extends React.PureComponent {
       selectedFeatureIndex
     } = this.props;
     const webmapjs = webmapUtils.getWMJSMapById(mapId);
-    if (this.mouseIsOverVertexNr === VERTEX.NONE) {
-      return;
-    }
-    const feature = this.geojson.features[selectedFeatureIndex];
-    const featureCoords = feature.geometry.coordinates[this.snappedPolygonIndex];
+    const feature = this.geojson.features[selectedFeatureIndex]; // Not actually necessarily a polygon
+    const polygonIndex =
+    // This allows us to delete nodes even while not hovering them
+    (feature === null || feature === void 0 ? void 0 : feature.geometry.coordinates.length) === 1 ? 0 : this.snappedPolygonIndex;
+    const featureCoords = feature === null || feature === void 0 ? void 0 : feature.geometry.coordinates[polygonIndex];
     if (featureCoords === undefined) {
       return;
     }
-    if (this.mouseIsOverVertexNr !== VERTEX.MIDDLE_POINT_OF_FEATURE) {
+    if (this.mouseIsOverVertexNr !== VERTEX.MIDDLE_POINT_OF_FEATURE && Array.isArray(featureCoords)) {
       /* Remove edge of polygon */
-      if (featureCoords.length <= 3) {
+      if (featureCoords.length <= 4) {
         /* Remove the polygon completely if it can not have an area */
-        this.deletePolygon(this.snappedPolygonIndex);
+        this.deletePolygon(polygonIndex);
       } else {
+        const closestCoords = findClosestCoords(convertGeoCoordsToScreenCoords(featureCoords, mapId), this.mouseX, this.mouseY);
+        const newLength = featureCoords.length - closestCoords.length;
         /* Remove edge of polygon */
-        // eslint-disable-next-line no-lonely-if
-        if (!this.checkIfFeatureIsBox(feature)) {
-          if (Array.isArray(featureCoords) && typeof this.mouseIsOverVertexNr === 'number') {
-            featureCoords.splice(this.mouseIsOverVertexNr, 1);
-          }
+        closestCoords.sort().reverse().forEach(index => {
+          featureCoords.splice(index, 1);
+        });
+        if (closestCoords.length > 1) {
+          featureCoords.push(cloneDeep(featureCoords[0]));
         }
+        this.mouseIsOverVertexNr = newLength - 1;
       }
     } else {
       /* Remove the polygon completely */
-      this.deletePolygon(this.snappedPolygonIndex);
+      this.deletePolygon(polygonIndex);
     }
     this.featureHasChanged('deleteFeature');
-    this.selectedEdge = EDGE.NONE;
-    this.mouseIsOverVertexNr = VERTEX.NONE;
     webmapjs.draw('MapDraw::deletefeatures');
   }
   mouseUp(event) {
     const {
       isInEditMode,
-      onClickFeature
+      onClickFeature,
+      mapId
     } = this.props;
-    if (event && event.rightButton === true) {
+    if ((event === null || event === void 0 ? void 0 : event.rightButton) === true) {
       return;
     }
     if (onClickFeature) {
@@ -3881,7 +3929,7 @@ class MapDraw extends React.PureComponent {
       } = event;
       const ignoreCoordinateIndexInFeature = true;
       const result = checkHoverFeatures(this.geojson, mouseX, mouseY, coordinates => {
-        return this.convertGeoCoordsToScreenCoords(coordinates);
+        return convertGeoCoordsToScreenCoords(coordinates, mapId);
       }, ignoreCoordinateIndexInFeature);
       if (result) {
         const featureEvent = {
@@ -3923,14 +3971,11 @@ class MapDraw extends React.PureComponent {
   cancelEdit(cancelLastPoint) {
     const {
       isInEditMode,
-      selectedFeatureIndex
+      mapId
     } = this.props;
     if (isInEditMode === false) {
       return;
     }
-    const {
-      mapId
-    } = this.props;
     const webmapjs = webmapUtils.getWMJSMapById(mapId);
     /* When in addpolygon mode, finish the polygon */
     if (this.myEditMode === EDITMODE.ADD_FEATURE) {
@@ -3939,7 +3984,7 @@ class MapDraw extends React.PureComponent {
         if (this.snappedPolygonIndex === SNAPPEDFEATURE.NONE) {
           return;
         }
-        const feature = this.geojson.features[selectedFeatureIndex];
+        const feature = this.getSelectedFeature();
         const {
           coordinates
         } = feature.geometry;
@@ -3961,7 +4006,7 @@ class MapDraw extends React.PureComponent {
         }
       }
       if (this.myDrawMode === DRAWMODE.LINESTRING) {
-        const feature = this.geojson.features[selectedFeatureIndex];
+        const feature = this.getSelectedFeature();
         const featureCoords = feature.geometry.coordinates;
         featureCoords.pop();
       }
@@ -4129,13 +4174,11 @@ class MapDraw extends React.PureComponent {
     }
   }
   validatePolys(fixPolys) {
-    if (!this.geojson || !this.geojson.features || !this.geojson.features.length) {
+    var _a, _b;
+    if (!((_b = (_a = this.geojson) === null || _a === void 0 ? void 0 : _a.features) === null || _b === void 0 ? void 0 : _b.length)) {
       return;
     }
     for (const geoJsonFeature of this.geojson.features) {
-      if (!this.geojson.features) {
-        this.geojson.features = [];
-      }
       const feature = geoJsonFeature;
       this.validateFeature(feature);
       const featureType = feature.geometry.type;
@@ -4144,30 +4187,6 @@ class MapDraw extends React.PureComponent {
         const polygonGeometry = feature.geometry;
         for (const polyCoordinates of polygonGeometry.coordinates) {
           let featureCoords = polyCoordinates;
-          /* Remove duplicates */
-          if (!this.checkIfFeatureIsBox(feature)) {
-            for (let coordIndex = featureCoords.length - 2; coordIndex >= 0; coordIndex -= 1) {
-              const _startCoord = featureCoords[coordIndex];
-              const _endCoord = featureCoords[coordIndex + 1];
-              if (_startCoord && _endCoord) {
-                if (_startCoord[0] === _endCoord[0] && _startCoord[1] === _endCoord[1]) {
-                  featureCoords.splice(coordIndex, 1);
-                }
-              }
-            }
-            /* Add begin to end to make closed polygon */
-            const startCoord = featureCoords[0];
-            const endCoord = featureCoords[featureCoords.length - 1];
-            if (startCoord && endCoord) {
-              if (startCoord[0] !== endCoord[0] || startCoord[1] !== endCoord[1]) {
-                featureCoords.push(cloneDeep(startCoord));
-                if (this.mouseIsOverVertexNr !== VERTEX.NONE && this.mouseIsOverVertexNr !== VERTEX.MIDDLE_POINT_OF_FEATURE) {
-                  /* This means that our selected vertex is one lower */
-                  this.mouseIsOverVertexNr -= 1;
-                }
-              }
-            }
-          }
           /* Sort clockwise */
           if (fixPolys) {
             if (this.checkIfFeatureIsBox(feature)) {
@@ -4218,11 +4237,13 @@ class MapDraw extends React.PureComponent {
      just before viewer will flip the back canvas buffer to the front.
      You are free to draw anything you like on the canvas.
     */
+    var _a, _b, _c, _d, _e;
     const {
       selectedFeatureIndex,
-      isInEditMode
+      isInEditMode,
+      mapId
     } = this.props;
-    if (!this.geojson || !this.geojson.features || !this.geojson.features.length) {
+    if (!((_b = (_a = this.geojson) === null || _a === void 0 ? void 0 : _a.features) === null || _b === void 0 ? void 0 : _b.length)) {
       return;
     }
     this.textPositions = [];
@@ -4239,7 +4260,7 @@ class MapDraw extends React.PureComponent {
       };
       if (featureType === 'Point') {
         const featureCoords = feature.geometry.coordinates;
-        const XYCoords = this.getPixelCoordFromGeoCoord([featureCoords]);
+        const XYCoords = getPixelCoordFromGeoCoord([featureCoords], mapId);
         if (XYCoords.length === 0) {
           // eslint-disable-next-line no-continue
           continue;
@@ -4250,7 +4271,7 @@ class MapDraw extends React.PureComponent {
       }
       if (featureType === 'MultiPoint') {
         const featureCoords = feature.geometry.coordinates;
-        const XYCoords = this.getPixelCoordFromGeoCoord(featureCoords);
+        const XYCoords = getPixelCoordFromGeoCoord(featureCoords, mapId);
         if (XYCoords.length === 0) {
           // eslint-disable-next-line no-continue
           continue;
@@ -4264,7 +4285,7 @@ class MapDraw extends React.PureComponent {
         for (const multiPoly of multiPolygonGeometry.coordinates) {
           for (let polygonIndex = 0; polygonIndex < multiPoly.length; polygonIndex += 1) {
             const featureCoords = multiPoly[polygonIndex];
-            const XYCoords = this.getPixelCoordFromGeoCoord(featureCoords);
+            const XYCoords = getPixelCoordFromGeoCoord(featureCoords, mapId);
             /* Only draw if there is stuff to show */
             if (XYCoords.length === 0) {
               // eslint-disable-next-line no-continue
@@ -4291,7 +4312,7 @@ class MapDraw extends React.PureComponent {
         if (totalmiddle.nr > 0) {
           const mx = totalmiddle.x / totalmiddle.nr;
           const my = totalmiddle.y / totalmiddle.nr;
-          if (feature.properties && feature.properties.text) {
+          if ((_c = feature.properties) === null || _c === void 0 ? void 0 : _c.text) {
             this.textPositions.push({
               x: mx,
               y: my,
@@ -4305,14 +4326,14 @@ class MapDraw extends React.PureComponent {
         /* Loop through all polygons of the same feature */
         for (let polygonIndex = 0; polygonIndex < polygonGeometry.coordinates.length; polygonIndex += 1) {
           const featureCoords = polygonGeometry.coordinates[polygonIndex];
-          const XYCoords = this.getPixelCoordFromGeoCoord(featureCoords);
+          const XYCoords = getPixelCoordFromGeoCoord(featureCoords, mapId);
           /* Only draw if there is stuff to show */
           if (XYCoords.length === 0) {
             // eslint-disable-next-line no-continue
             continue;
           }
           const middle = this.drawPolygon(ctx, XYCoords, featureIndex, polygonIndex);
-          if (middle && feature.properties && feature.properties.text) {
+          if (middle && ((_d = feature.properties) === null || _d === void 0 ? void 0 : _d.text)) {
             this.textPositions.push({
               x: middle.x,
               y: middle.y,
@@ -4341,14 +4362,14 @@ class MapDraw extends React.PureComponent {
           // eslint-disable-next-line no-continue
           continue;
         }
-        const XYCoords = this.getPixelCoordFromGeoCoord(featureCoords);
+        const XYCoords = getPixelCoordFromGeoCoord(featureCoords, mapId);
         /* Only draw if there is stuff to show */
         if (XYCoords.length === 0) {
           // eslint-disable-next-line no-continue
           continue;
         }
         const middle = this.drawLine(ctx, XYCoords, featureIndex, 0);
-        if (middle && feature.properties && feature.properties.text) {
+        if (middle && ((_e = feature.properties) === null || _e === void 0 ? void 0 : _e.text)) {
           this.textPositions.push({
             x: middle.x,
             y: middle.y,
@@ -4365,7 +4386,7 @@ class MapDraw extends React.PureComponent {
     }
     /* Higlight polygon with mousehover */
     if (isInEditMode === true && this.mouseOverPolygonFeatureIndex === selectedFeatureIndex && this.mouseIsOverVertexNr === VERTEX.NONE && this.snappedPolygonIndex === SNAPPEDFEATURE.NONE && this.selectedEdge === EDGE.NONE || this.mouseIsOverVertexNr === VERTEX.MIDDLE_POINT_OF_FEATURE) {
-      const feature = this.geojson.features[selectedFeatureIndex];
+      const feature = this.getSelectedFeature();
       const featureProperties = feature.properties;
       if (this.mouseOverPolygonCoordinates.length >= 2) {
         ctx.beginPath();
@@ -4397,20 +4418,9 @@ class MapDraw extends React.PureComponent {
       ctx.fillText(text, x, y);
     }
   }
-  /* Function which calculates the distance between two points */
-  // eslint-disable-next-line class-methods-use-this
-  distance(a, b) {
-    return Math.sqrt((a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y));
-  }
-  /* Function which calculates if a point is between two other points */
-  isBetween(a, c, b) {
-    const da = this.distance(a, c) + this.distance(c, b);
-    const db = this.distance(a, b);
-    return Math.abs(da - db) < 1;
-  }
   /* Checks if mouse is in proximity of given coordinate */
   checkDist(coord, polygonIndex, mouseX, mouseY) {
-    const VERTEX = this.distance(coord, {
+    const VERTEX = distance(coord, {
       x: mouseX,
       y: mouseY
     });
@@ -4422,6 +4432,9 @@ class MapDraw extends React.PureComponent {
     return false;
   }
   hoverEdge(geometry, mouseX, mouseY) {
+    const {
+      mapId
+    } = this.props;
     const {
       coordinates,
       type
@@ -4434,11 +4447,11 @@ class MapDraw extends React.PureComponent {
           continue;
         }
         /* Get all vertexes */
-        const XYCoords = this.convertGeoCoordsToScreenCoords(featureCoords);
+        const XYCoords = convertGeoCoordsToScreenCoords(featureCoords, mapId);
         for (let j = 0; j < XYCoords.length; j += 1) {
           const startV = XYCoords[j];
           const stopV = XYCoords[(j + 1) % XYCoords.length];
-          if (this.isBetween(startV, {
+          if (isBetween(startV, {
             x: mouseX,
             y: mouseY
           }, stopV)) {
@@ -4463,11 +4476,11 @@ class MapDraw extends React.PureComponent {
         };
       }
       /* Get all vertexes */
-      const XYCoords = this.convertGeoCoordsToScreenCoords(featureCoords);
+      const XYCoords = convertGeoCoordsToScreenCoords(featureCoords, mapId);
       for (let j = 0; j < XYCoords.length - 1; j += 1) {
         const startV = XYCoords[j];
         const stopV = XYCoords[(j + 1) % XYCoords.length];
-        if (this.isBetween(startV, {
+        if (isBetween(startV, {
           x: mouseX,
           y: mouseY
         }, stopV)) {
@@ -4527,7 +4540,7 @@ class MapDraw extends React.PureComponent {
     const {
       properties: featureProperties
     } = feature;
-    if (featureProperties && featureProperties.imageURL) {
+    if (featureProperties === null || featureProperties === void 0 ? void 0 : featureProperties.imageURL) {
       this.drawIcon(ctx, _coord, featureProperties);
     }
     const drawStyledMarker = featureProperties ? featureProperties.stroke || featureProperties['stroke-width'] || featureProperties.fill : null;
@@ -4625,7 +4638,7 @@ class MapDraw extends React.PureComponent {
       selectedFeatureIndex
     } = this.props;
     const feature = this.geojson.features[featureIndex];
-    if (!feature || !feature.geometry) {
+    if (!(feature === null || feature === void 0 ? void 0 : feature.geometry)) {
       return;
     }
     if (feature.geometry.type !== 'LineString') {
@@ -4699,7 +4712,7 @@ class MapDraw extends React.PureComponent {
       selectedFeatureIndex
     } = this.props;
     const feature = this.geojson.features[featureIndex];
-    if (!feature || !feature.geometry) {
+    if (!(feature === null || feature === void 0 ? void 0 : feature.geometry)) {
       return;
     }
     if (feature.geometry.type !== 'Polygon' && feature.geometry.type !== 'MultiPolygon') {
@@ -4768,25 +4781,6 @@ class MapDraw extends React.PureComponent {
     middle.nr = XYCoords.length - 1;
     return middle;
   }
-  convertGeoCoordsToScreenCoords(featureCoords) {
-    const {
-      mapId
-    } = this.props;
-    const webmapjs = webmapUtils.getWMJSMapById(mapId);
-    const XYCoords = [];
-    for (const featureCoord of featureCoords) {
-      if (featureCoord.length < 2) {
-        // eslint-disable-next-line no-continue
-        continue;
-      }
-      const coord = webmapjs.getPixelCoordFromLatLong({
-        x: featureCoord[0],
-        y: featureCoord[1]
-      });
-      XYCoords.push(coord);
-    }
-    return XYCoords;
-  }
   initializeFeatureCoordinates(feature, type) {
     this.validateFeature(feature);
     // eslint-disable-next-line no-underscore-dangle
@@ -4829,7 +4823,8 @@ class MapDraw extends React.PureComponent {
   }
   // eslint-disable-next-line class-methods-use-this
   checkIfFeatureIsBox(feature) {
-    if (!feature || !feature.properties || !feature.properties._type) {
+    var _a;
+    if (!((_a = feature === null || feature === void 0 ? void 0 : feature.properties) === null || _a === void 0 ? void 0 : _a._type)) {
       return false;
     }
     return feature.properties._type === 'box';
@@ -4846,7 +4841,7 @@ class MapDraw extends React.PureComponent {
     }
   }
   render() {
-    return /*#__PURE__*/React.createElement("div", null);
+    return jsx("div", {});
   }
 }
 // eslint-disable-next-line react/static-property-placement
@@ -4860,42 +4855,45 @@ MapDraw.defaultProps = {
 const MapDrawContainer = ({
   featureLayers,
   mapId
-}) => ( /*#__PURE__*/React.createElement(React.Fragment, null, featureLayers.map(layer => {
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": `featureLayer-${layer.id}`,
-    key: layer.id,
-    style: {
-      display: 'none'
-    }
-  }, /*#__PURE__*/React.createElement(MapDraw, {
-    geojson: layer.geojson,
-    isInEditMode: layer.isInEditMode,
-    isInDeleteMode: layer.isInDeleteMode,
-    drawMode: layer.drawMode,
-    mapId: mapId,
-    onHoverFeature: hoverInfo => {
-      if (layer.onHoverFeature) {
-        layer.onHoverFeature(hoverInfo);
-      }
-    },
-    onClickFeature: hoverInfo => {
-      if (layer.onClickFeature) {
-        layer.onClickFeature(hoverInfo);
-      }
-    },
-    updateGeojson: (geojson, reason) => {
-      if (layer.updateGeojson) {
-        layer.updateGeojson(geojson, reason);
-      }
-    },
-    exitDrawModeCallback: reason => {
-      if (layer.exitDrawModeCallback) {
-        layer.exitDrawModeCallback(reason);
+}) => jsx(Fragment, {
+  children: featureLayers.map(layer => {
+    return jsx("div", Object.assign({
+      "data-testid": `featureLayer-${layer.id}`,
+      style: {
+        display: 'none'
       }
-    },
-    selectedFeatureIndex: parseInt(layer.selectedFeatureIndex || '0', 10)
-  }));
-})));
+    }, {
+      children: jsx(MapDraw, {
+        geojson: layer.geojson,
+        isInEditMode: layer.isInEditMode,
+        isInDeleteMode: layer.isInDeleteMode,
+        drawMode: layer.drawMode,
+        mapId: mapId,
+        onHoverFeature: hoverInfo => {
+          if (layer.onHoverFeature) {
+            layer.onHoverFeature(hoverInfo);
+          }
+        },
+        onClickFeature: hoverInfo => {
+          if (layer.onClickFeature) {
+            layer.onClickFeature(hoverInfo);
+          }
+        },
+        updateGeojson: (geojson, reason) => {
+          if (layer.updateGeojson) {
+            layer.updateGeojson(geojson, reason);
+          }
+        },
+        exitDrawModeCallback: (reason, newGeoJSON) => {
+          if (layer.exitDrawModeCallback) {
+            layer.exitDrawModeCallback(reason, newGeoJSON);
+          }
+        },
+        selectedFeatureIndex: parseInt(layer.selectedFeatureIndex || '0', 10)
+      })
+    }), layer.id);
+  })
+});
 
 var NATIVE_BIND$1 = functionBindNative;
 
@@ -5028,30 +5026,32 @@ const GeoJSONTextField = ({
       setValidity(false);
     }
   };
-  return /*#__PURE__*/React__default.createElement(Grid, {
+  return jsx(Grid, Object.assign({
     item: true,
     xs: 12,
     sx: sx
-  }, /*#__PURE__*/React__default.createElement(TextField, {
-    sx: {
-      padding: 0,
-      border: 'none',
-      width: '100%',
-      height: '100%',
-      fontSize: '10px',
-      '.MuiInputBase-root': {
+  }, {
+    children: jsx(TextField, {
+      sx: {
+        padding: 0,
+        border: 'none',
+        width: '100%',
         height: '100%',
-        alignItems: 'baseline'
-      }
-    },
-    multiline: true,
-    error: !isValid,
-    maxRows: _maxRows,
-    label: !isValid ? 'GeoJSON not valid' : _title,
-    variant: "filled",
-    onChange: onChange,
-    value: JSON.stringify(geoJSON, null, 2),
-    disabled: !onChangeGeoJSON
+        fontSize: '10px',
+        '.MuiInputBase-root': {
+          height: '100%',
+          alignItems: 'baseline'
+        }
+      },
+      multiline: true,
+      error: !isValid,
+      maxRows: _maxRows,
+      label: !isValid ? 'GeoJSON not valid' : _title,
+      variant: "filled",
+      onChange: onChange,
+      value: JSON.stringify(geoJSON, null, 2),
+      disabled: !onChangeGeoJSON
+    })
   }));
 };
 
@@ -5069,81 +5069,88 @@ const FeatureLayers = ({
       label: `${index + 1}: ${geojson.features[index].geometry.type}`
     };
   }) : [];
-  return /*#__PURE__*/React__default.createElement(Grid, {
+  return jsx(Grid, Object.assign({
     item: true,
     sm: 12
-  }, /*#__PURE__*/React__default.createElement(FormControl, {
-    disabled: !featureLayerList.length,
-    variant: "filled",
-    sx: {
-      width: '100%'
-    }
-  }, /*#__PURE__*/React__default.createElement(InputLabel, {
-    id: "demo-feature-number"
-  }, "Features"), /*#__PURE__*/React__default.createElement(Select, {
-    labelId: "demo-feature-type",
-    value: (featureLayerList.length ? activeFeatureLayerIndex : '').toString(),
-    onChange: event => {
-      const featureNr = parseInt(event.target.value, 10);
-      onChangeLayerIndex(featureNr, geojson.features[featureNr]);
-    },
-    sx: {
-      '.MuiSelect-select': {
-        display: 'flex'
-      }
-    }
-  }, featureLayerList.map(listItem => {
-    return /*#__PURE__*/React__default.createElement(MenuItem, {
-      key: listItem.index,
-      value: listItem.index
-    }, /*#__PURE__*/React__default.createElement(Icon$1, {
+  }, {
+    children: jsxs(FormControl, Object.assign({
+      disabled: !featureLayerList.length,
+      variant: "filled",
       sx: {
-        transform: 'scale(0.9)'
+        width: '100%'
       }
-    }, getToolIcon(listItem.value)), listItem.label);
-  }))));
-};
-
-/* *
- * 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)
- * */
-const EditModeButton = ({
-  isInEditMode,
-  drawMode,
-  onToggleEditMode
-}) => {
-  return /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 12
-  }, /*#__PURE__*/React__default.createElement(CustomTooltip, {
-    title: "Switch mode"
-  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(FormLabel, null, "View"), /*#__PURE__*/React__default.createElement(Switch, {
-    "data-testid": "switchMode",
-    checked: isInEditMode,
-    onClick: () => onToggleEditMode(!isInEditMode)
-  }), /*#__PURE__*/React__default.createElement(FormLabel, null, "Edit"), drawMode && ( /*#__PURE__*/React__default.createElement(Typography, {
-    component: "span",
-    sx: {
-      display: 'inline-block',
-      marginLeft: 2,
-      top: -1,
-      position: 'relative',
-      fontSize: 14
-    }
-  }, "press ESC to exit draw mode")))));
+    }, {
+      children: [jsx(InputLabel, Object.assign({
+        id: "demo-feature-number"
+      }, {
+        children: "Features"
+      })), jsx(Select, Object.assign({
+        labelId: "demo-feature-type",
+        value: (featureLayerList.length ? activeFeatureLayerIndex : '').toString(),
+        onChange: event => {
+          const featureNr = parseInt(event.target.value, 10);
+          onChangeLayerIndex(featureNr, geojson.features[featureNr]);
+        },
+        sx: {
+          '.MuiSelect-select': {
+            display: 'flex'
+          }
+        }
+      }, {
+        children: featureLayerList.map(listItem => {
+          return jsxs(MenuItem, Object.assign({
+            value: listItem.index
+          }, {
+            children: [jsx(Icon$1, Object.assign({
+              sx: {
+                transform: 'scale(0.9)'
+              }
+            }, {
+              children: getToolIcon(listItem.value)
+            })), listItem.label]
+          }), listItem.index);
+        })
+      }))]
+    }))
+  }));
+};
+
+const EditModeButton = ({
+  isInEditMode,
+  drawMode,
+  onToggleEditMode
+}) => {
+  return jsx(Grid, Object.assign({
+    item: true,
+    xs: 12
+  }, {
+    children: jsx(CustomTooltip, Object.assign({
+      title: "Switch mode"
+    }, {
+      children: jsxs("span", {
+        children: [jsx(FormLabel, {
+          children: "View"
+        }), jsx(Switch, {
+          "data-testid": "switchMode",
+          checked: isInEditMode,
+          onClick: () => onToggleEditMode(!isInEditMode)
+        }), jsx(FormLabel, {
+          children: "Edit"
+        }), drawMode && jsx(Typography, Object.assign({
+          component: "span",
+          sx: {
+            display: 'inline-block',
+            marginLeft: 2,
+            top: -1,
+            position: 'relative',
+            fontSize: 14
+          }
+        }, {
+          children: "press ESC to exit draw mode"
+        }))]
+      })
+    }))
+  }));
 };
 
 /* *
@@ -5521,7 +5528,7 @@ const useGeoJSON = () => {
     value: 'LineString'
   }];
   const [isInEditMode, setEditMode] = useState(false);
-  const [geojson, setGeojson] = useState(lineString);
+  const [geojson, setGeojson] = useState(lineStringCollection);
   const [geojsonText, setGeojsonText] = useState('');
   const [drawMode, setDrawMode] = useState('LINESTRING');
   const [currentFeatureNrToEdit, setCurrentFeatureNrToEdit] = useState(0);
@@ -5536,8 +5543,8 @@ const useGeoJSON = () => {
       setGeojsonText(JSON.stringify(simpleBoxGeoJSON, null, 2));
     }
     if (selectedKey === 'LINESTRING') {
-      setGeojson(lineString);
-      setGeojsonText(JSON.stringify(lineString, null, 2));
+      setGeojson(lineStringCollection);
+      setGeojsonText(JSON.stringify(lineStringCollection, null, 2));
     }
     if (selectedKey === 'POINT' || selectedKey === 'MULTIPOINT') {
       setGeojson(simplePointsGeojson);
@@ -5559,52 +5566,46 @@ const 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)
- * */
 const StoryLayoutGrid = ({
   mapComponent,
   children
 }) => {
-  return /*#__PURE__*/React__default.createElement(Paper, null, /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      display: 'grid',
-      gridTemplateColumns: '70% 30%',
-      gridTemplateRows: '150px 1fr',
-      gridTemplateAreas: "'map controls'\n'map textarea'",
-      width: '100%',
-      height: '100vh'
-    }
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      gridArea: 'map',
-      width: '100%',
-      height: '100%'
-    }
-  }, mapComponent), /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      gridArea: 'controls',
-      width: '100%',
-      height: '100%',
-      padding: 2
-    }
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    spacing: 2,
-    container: true
-  }, children))));
+  return jsx(Paper, {
+    children: jsxs(Box, Object.assign({
+      sx: {
+        display: 'grid',
+        gridTemplateColumns: '70% 30%',
+        gridTemplateRows: '150px 1fr',
+        gridTemplateAreas: "'map controls'\n'map textarea'",
+        width: '100%',
+        height: '100vh'
+      }
+    }, {
+      children: [jsx(Box, Object.assign({
+        sx: {
+          gridArea: 'map',
+          width: '100%',
+          height: '100%'
+        }
+      }, {
+        children: mapComponent
+      })), jsx(Box, Object.assign({
+        sx: {
+          gridArea: 'controls',
+          width: '100%',
+          height: '100%',
+          padding: 2
+        }
+      }, {
+        children: jsx(Grid, Object.assign({
+          spacing: 2,
+          container: true
+        }, {
+          children: children
+        }))
+      }))]
+    }))
+  });
 };
 
 const SelectField = ({
@@ -5623,24 +5624,31 @@ const SelectField = ({
     onChangeValue(value);
   };
   const getLabel = currentValue => `${currentValue}${_labelSuffix}`;
-  return /*#__PURE__*/React__default.createElement(FormControl, {
+  return jsxs(FormControl, Object.assign({
     variant: "filled",
     sx: {
       width: _width
     }
-  }, /*#__PURE__*/React__default.createElement(InputLabel, null, label), /*#__PURE__*/React__default.createElement(Select, {
-    value: value,
-    onChange: onChange
-  }, _options.map(value => ( /*#__PURE__*/React__default.createElement(MenuItem, {
-    value: value,
-    key: value
-  }, _showValueAsColor ? ( /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      backgroundColor: value,
-      width: 20,
-      height: 20
-    }
-  })) : getLabel(value.toString()))))));
+  }, {
+    children: [jsx(InputLabel, {
+      children: label
+    }), jsx(Select, Object.assign({
+      value: value,
+      onChange: onChange
+    }, {
+      children: _options.map(value => jsx(MenuItem, Object.assign({
+        value: value
+      }, {
+        children: _showValueAsColor ? jsx(Box, {
+          sx: {
+            backgroundColor: value,
+            width: 20,
+            height: 20
+          }
+        }) : getLabel(value.toString())
+      }), value))
+    }))]
+  }));
 };
 
 const IntersectionSelect = ({
@@ -5649,35 +5657,44 @@ const IntersectionSelect = ({
   isDisabled: _isDisabled = false
 }) => {
   const [activeIntersection, setActiveIntersection] = React__default.useState(0);
-  return /*#__PURE__*/React__default.createElement(Grid, {
+  return jsx(Grid, Object.assign({
     item: true,
     sm: 12
-  }, /*#__PURE__*/React__default.createElement(FormControl, {
-    variant: "filled",
-    sx: {
-      width: '100%'
-    }
-  }, /*#__PURE__*/React__default.createElement(InputLabel, {
-    id: "demo-intersection"
-  }, "Intersection shapes"), /*#__PURE__*/React__default.createElement(Select, {
-    labelId: "demo-intersection",
-    value: activeIntersection.toString(),
-    onChange: event => {
-      const featureIndex = parseInt(event.target.value, 10);
-      setActiveIntersection(featureIndex);
-      const {
-        geojson,
-        title
-      } = intersections[featureIndex];
-      onChangeIntersection(geojson, title);
-    },
-    disabled: _isDisabled
-  }, intersections.map((listItem, index) => {
-    return /*#__PURE__*/React__default.createElement(MenuItem, {
-      key: listItem.title,
-      value: index
-    }, listItem.title);
-  }))));
+  }, {
+    children: jsxs(FormControl, Object.assign({
+      variant: "filled",
+      sx: {
+        width: '100%'
+      }
+    }, {
+      children: [jsx(InputLabel, Object.assign({
+        id: "demo-intersection"
+      }, {
+        children: "Intersection shapes"
+      })), jsx(Select, Object.assign({
+        labelId: "demo-intersection",
+        value: activeIntersection.toString(),
+        onChange: event => {
+          const featureIndex = parseInt(event.target.value, 10);
+          setActiveIntersection(featureIndex);
+          const {
+            geojson,
+            title
+          } = intersections[featureIndex];
+          onChangeIntersection(geojson, title);
+        },
+        disabled: _isDisabled
+      }, {
+        children: intersections.map((listItem, index) => {
+          return jsx(MenuItem, Object.assign({
+            value: index
+          }, {
+            children: listItem.title
+          }), listItem.title);
+        })
+      }))]
+    }))
+  }));
 };
 
 /**
@@ -5974,7 +5991,7 @@ const getFeatureExtent = geoJSON => {
 const defaultIntersectionStyleProperties = Object.assign(Object.assign({}, defaultGeoJSONStyleProperties), {
   'fill-opacity': 0.5
 });
-const emptyLineString = Object.assign(Object.assign({}, lineString.features[0]), {
+const emptyLineString = Object.assign(Object.assign({}, lineString), {
   properties: defaultGeoJSONStyleProperties
 });
 const emptyPoint = Object.assign(Object.assign({}, featurePoint), {
@@ -5993,15 +6010,15 @@ const emptyIntersectionShape = Object.assign(Object.assign({}, emptyGeoJSON), {
 const getIcon = selectionType => {
   switch (selectionType) {
     case 'point':
-      return /*#__PURE__*/React__default.createElement(Location, null);
+      return jsx(Location, {});
     case 'poly':
-      return /*#__PURE__*/React__default.createElement(DrawPolygon, null);
+      return jsx(DrawPolygon, {});
     case 'box':
-      return /*#__PURE__*/React__default.createElement(DrawRegion, null);
+      return jsx(DrawRegion, {});
     case 'linestring':
-      return /*#__PURE__*/React__default.createElement(Edit, null);
+      return jsx(Edit, {});
     case 'delete':
-      return /*#__PURE__*/React__default.createElement(Delete, null);
+      return jsx(Delete, {});
     default:
       return null;
   }
@@ -6099,7 +6116,7 @@ const useMapDrawTool = ({
     const isNewSelectedTool = !isGeoJSONFeatureCreatedByTool(geoJSON, newMode.selectionType, featureLayerIndex);
     const shouldUpdateShape = !geoJSON.features.length || isNewSelectedTool || !newMode.isSelectable;
     if (shouldUpdateShape) {
-      const updatedGeoJSON = changeGeoJSON(addSelectionTypeToGeoJSON(newMode.shape, newMode.selectionType));
+      const updatedGeoJSON = changeGeoJSON(addSelectionTypeToGeoJSON(newMode.shape, newMode.selectionType))[0];
       setFeatureLayerIndex(updatedGeoJSON.features.length - 1);
     }
     // handle modes and update feature layer index
@@ -6119,9 +6136,11 @@ const useMapDrawTool = ({
     }
     setGeoJSON(newGeoJSON);
     if (geoJSONIntersectionBounds) {
-      setGeoJSONIntersection(createInterSections(newGeoJSON, geoJSONIntersectionBounds, _defaultGeoJSONIntersectionProperties));
+      const newIntersection = createInterSections(newGeoJSON, geoJSONIntersectionBounds, _defaultGeoJSONIntersectionProperties);
+      setGeoJSONIntersection(newIntersection);
+      return [newGeoJSON, newIntersection];
     }
-    return newGeoJSON;
+    return [newGeoJSON];
   };
   const onSetGeoJSONIntersectionBounds = newGeoJSON => {
     setGeoJSONIntersectionBounds(newGeoJSON);
@@ -6213,12 +6232,12 @@ const getToolIcon = selectionType => {
     return defaultIcon;
   }
   if (selectionType === shapeButtonNL$2.selectionType) {
-    return /*#__PURE__*/React__default.createElement(DrawFIRLand, null);
+    return jsx(DrawFIRLand, {});
   }
   if (selectionType === customLineButton.selectionType) {
-    return /*#__PURE__*/React__default.createElement(ArrowUp, null);
+    return jsx(ArrowUp, {});
   }
-  return /*#__PURE__*/React__default.createElement("div", null);
+  return jsx("div", {});
 };
 // custom buttons
 const shapeButtonNL$2 = {
@@ -6426,16 +6445,16 @@ const getIntersectionToolIcon = selectionType => {
     return defaultIcon;
   }
   if (selectionType === shapeButtonNL$1.selectionType) {
-    return /*#__PURE__*/React__default.createElement(DrawFIRLand, null);
+    return jsx(DrawFIRLand, {});
   }
   if (selectionType === shapeButtonBE$1.selectionType) {
-    return /*#__PURE__*/React__default.createElement(DrawFIRLand, {
+    return jsx(DrawFIRLand, {
       sx: {
         transform: `scaleY(-1)`
       }
     });
   }
-  return /*#__PURE__*/React__default.createElement(DrawFIRLand, null);
+  return jsx(DrawFIRLand, {});
 };
 // custom buttons
 const shapeButtonNL$1 = {
@@ -6605,13 +6624,13 @@ const getDoubleControlToolIcon = drawMode => {
     return defaultIcon;
   }
   if (selectionType === firSelectionType) {
-    return /*#__PURE__*/React__default.createElement(DrawFIRLand, {
+    return jsx(DrawFIRLand, {
       sx: Object.assign({}, drawMode.title === shapeButtonBE.title && {
         transform: `scaleY(-1)`
       })
     });
   }
-  return /*#__PURE__*/React__default.createElement(DrawFIRLand, null);
+  return jsx(DrawFIRLand, {});
 };
 const getEditModes = geoJSONProperties => [Object.assign(Object.assign({}, defaultPoint), {
   shape: Object.assign(Object.assign({}, defaultPoint.shape), {
@@ -7881,27 +7900,11 @@ var radarGetCapabilities_spec = {
 	WMS_Capabilities: WMS_Capabilities
 };
 
-/* *
- * 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)
- * */
 const ReactMapViewLayer = props => {
   const {
     id
   } = props;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", Object.assign({
     style: {
       width: '100%',
       padding: '2px',
@@ -7913,7 +7916,11 @@ const ReactMapViewLayer = props => {
       background: 'rgba(255, 255, 255, 0.5)',
       display: 'none'
     }
-  }, /*#__PURE__*/React.createElement("div", null, id));
+  }, {
+    children: jsx("div", {
+      children: id
+    })
+  }));
 };
 
 var defineProperty$1 = objectDefineProperty.f;
@@ -8263,7 +8270,7 @@ $$8({ target: 'Array', proto: true, arity: 1, forced: FORCED }, {
   }
 });
 
-var makeBuiltIn = makeBuiltIn$3.exports;
+var makeBuiltIn = makeBuiltInExports;
 var defineProperty = objectDefineProperty;
 
 var defineBuiltInAccessor$1 = function (target, name, descriptor) {
@@ -10154,7 +10161,7 @@ class ReactMapView extends React.Component {
         wmFeatureLayer.geojson = featureLayer.geojson;
       }
     });
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", Object.assign({
       className: "MapView",
       style: {
         height: '100%',
@@ -10163,60 +10170,69 @@ class ReactMapView extends React.Component {
         display: 'block',
         overflow: 'hidden'
       }
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: this.adagucContainerRef,
-      style: {
-        minWidth: 'inherit',
-        minHeight: 'inherit',
-        width: 'inherit',
-        height: 'inherit',
-        overflow: 'hidden',
-        display: 'block',
-        border: 'none'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "MapViewComponent",
-      style: {
-        position: 'absolute',
-        overflow: 'hidden',
-        display: 'block',
-        padding: '0',
-        margin: '0',
-        zIndex: 10
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      role: "application",
-      "aria-label": "map",
-      ref: this.adagucWebMapJSRef
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        position: 'absolute',
-        overflow: 'hidden',
-        display: 'block',
-        padding: '0',
-        margin: '0',
-        zIndex: 100
-      }
-    }, /*#__PURE__*/React.createElement("div", null, children), adagucInitialised && featureLayers && featureLayers.length ? ( /*#__PURE__*/React.createElement(MapDrawContainer, {
-      featureLayers: featureLayers,
-      mapId: mapId
-    })) : null), passiveMap && (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/control-has-associated-label, jsx-a11y/interactive-supports-focus
-    React.createElement("div", {
-      style: {
-        position: 'absolute',
-        overflow: 'hidden',
-        display: 'block',
-        padding: '0',
-        margin: '0',
-        zIndex: 100,
-        width: '100%',
-        height: '100%'
-      },
-      onClick: onClick,
-      role: "button"
-    }))));
+    }, {
+      children: jsxs("div", Object.assign({
+        ref: this.adagucContainerRef,
+        style: {
+          minWidth: 'inherit',
+          minHeight: 'inherit',
+          width: 'inherit',
+          height: 'inherit',
+          overflow: 'hidden',
+          display: 'block',
+          border: 'none'
+        }
+      }, {
+        children: [jsx("div", Object.assign({
+          className: "MapViewComponent",
+          style: {
+            position: 'absolute',
+            overflow: 'hidden',
+            display: 'block',
+            padding: '0',
+            margin: '0',
+            zIndex: 10
+          }
+        }, {
+          children: jsx("div", {
+            role: "application",
+            "aria-label": "map",
+            ref: this.adagucWebMapJSRef
+          })
+        })), jsxs("div", Object.assign({
+          style: {
+            position: 'absolute',
+            overflow: 'hidden',
+            display: 'block',
+            padding: '0',
+            margin: '0',
+            zIndex: 100
+          }
+        }, {
+          children: [jsx("div", {
+            children: children
+          }), adagucInitialised && featureLayers && featureLayers.length ? jsx(MapDrawContainer, {
+            featureLayers: featureLayers,
+            mapId: mapId
+          }) : null]
+        })), passiveMap &&
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/control-has-associated-label, jsx-a11y/interactive-supports-focus
+        jsx("div", {
+          style: {
+            position: 'absolute',
+            overflow: 'hidden',
+            display: 'block',
+            padding: '0',
+            margin: '0',
+            zIndex: 100,
+            width: '100%',
+            height: '100%'
+          },
+          onClick: onClick,
+          role: "button"
+        })]
+      }))
+    }));
   }
 }
 ReactMapView.defaultProps = {
@@ -10243,22 +10259,6 @@ ReactMapView.defaultProps = {
   }
 };
 
-/* *
- * 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)
- * */
 const getTimeDimension = dimensions => dimensions.find(dimension => dimension.name === 'time' && dimension.currentValue !== undefined);
 const formatTime = (time, timeFormat) => dateUtils.dateToString(dateUtils.utc(time), timeFormat);
 const defaultTimeFormat = "EEE dd MMM yyyy HH:mm 'UTC'";
@@ -10271,7 +10271,7 @@ const MapTime = ({
     return null;
   }
   const mapTime = formatTime(timeDimension.currentValue, _timeFormat);
-  return /*#__PURE__*/React.createElement(Box, {
+  return jsx(Box, Object.assign({
     "data-testid": "map-time",
     sx: {
       zIndex: 10,
@@ -10279,12 +10279,18 @@ const MapTime = ({
       bottom: '12px',
       position: 'absolute'
     }
-  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Typography, {
-    variant: "caption",
-    sx: {
-      fontWeight: 500
-    }
-  }, mapTime)));
+  }, {
+    children: jsx(Box, {
+      children: jsx(Typography, Object.assign({
+        variant: "caption",
+        sx: {
+          fontWeight: 500
+        }
+      }, {
+        children: mapTime
+      }))
+    })
+  }));
 };
 
 /* *
@@ -10544,7 +10550,7 @@ const MapView = _a => {
   const reactMapViewProps = Object.assign(Object.assign({}, props), {
     mapId
   });
-  return /*#__PURE__*/React.createElement(Box, {
+  return jsxs(Box, Object.assign({
     ref: ref,
     sx: {
       display: 'grid',
@@ -10553,92 +10559,70 @@ const MapView = _a => {
       position: 'relative',
       overflow: 'hidden'
     }
-  }, controls && controls.zoomControls && ( /*#__PURE__*/React.createElement(MapControls, {
-    style: {
-      top: 0,
-      position: 'absolute'
-    }
-  }, /*#__PURE__*/React.createElement(ProfileAxis, {
-    mapId: mapId
-  }), /*#__PURE__*/React.createElement(ZoomControls, {
-    onZoomIn: () => {
-      const wmjsMap = webmapUtils.getWMJSMapById(mapId);
-      wmjsMap.zoomIn(undefined);
-    },
-    onZoomOut: () => {
-      const wmjsMap = webmapUtils.getWMJSMapById(mapId);
-      wmjsMap.zoomOut();
-    },
-    onZoomReset: () => {
-      const wmjsMap = webmapUtils.getWMJSMapById(mapId);
-      wmjsMap.zoomToLayer(wmjsMap.getActiveLayer());
-    }
-  }))), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      gridColumnStart: 1,
-      gridRowStart: 1
-    }
-  }, /*#__PURE__*/React.createElement(ReactMapView, Object.assign({}, reactMapViewProps, {
-    showLegend: false,
-    displayTimeInMap: false,
-    onWMJSMount: id => {
-      wmjsMapRef.current = webmapUtils.getWMJSMapById(id);
-      if (onWMJSMount) {
-        onWMJSMount(id);
+  }, {
+    children: [controls && controls.zoomControls && jsxs(MapControls, Object.assign({
+      style: {
+        top: 0,
+        position: 'absolute'
       }
-    }
-  }), children)), displayTimeInMap && dimensions && /*#__PURE__*/React.createElement(MapTime, {
-    dimensions: dimensions
+    }, {
+      children: [jsx(ProfileAxis, {
+        mapId: mapId
+      }), jsx(ZoomControls, {
+        onZoomIn: () => {
+          const wmjsMap = webmapUtils.getWMJSMapById(mapId);
+          wmjsMap.zoomIn(undefined);
+        },
+        onZoomOut: () => {
+          const wmjsMap = webmapUtils.getWMJSMapById(mapId);
+          wmjsMap.zoomOut();
+        },
+        onZoomReset: () => {
+          const wmjsMap = webmapUtils.getWMJSMapById(mapId);
+          wmjsMap.zoomToLayer(wmjsMap.getActiveLayer());
+        }
+      })]
+    })), jsx(Box, Object.assign({
+      sx: {
+        gridColumnStart: 1,
+        gridRowStart: 1
+      }
+    }, {
+      children: jsx(ReactMapView, Object.assign({}, reactMapViewProps, {
+        showLegend: false,
+        displayTimeInMap: false,
+        onWMJSMount: id => {
+          wmjsMapRef.current = webmapUtils.getWMJSMapById(id);
+          if (onWMJSMount) {
+            onWMJSMount(id);
+          }
+        }
+      }, {
+        children: children
+      }))
+    })), displayTimeInMap && dimensions && jsx(MapTime, {
+      dimensions: dimensions
+    })]
   }));
 };
 
-/* *
- * 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)
- * */
 const MapViewLayer = props => {
   // TODO: This component should not do anything, but just return null: https://gitlab.com/opengeoweb/opengeoweb/-/issues/4579
   const {
     id
   } = props;
   return React.useMemo(() => {
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", Object.assign({
       "data-testid": "mapViewLayer",
       style: {
         display: 'none'
       }
-    }, id);
+    }, {
+      children: id
+    }));
   }, [id]);
 };
 
-/* *
- * 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)
- * */
 const MapWarningProperties = ({
   selectedFeatureProperties,
   languageIndex,
@@ -10649,7 +10633,7 @@ const MapWarningProperties = ({
   const {
     t
   } = useWebmapReactTranslation();
-  return /*#__PURE__*/React__default.createElement("div", {
+  return jsx("div", Object.assign({
     style: {
       position: 'fixed',
       width: `${newWidth}px`,
@@ -10658,30 +10642,46 @@ const MapWarningProperties = ({
       justifyContent: 'center',
       left: '50px'
     }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    "data-testid": "map-warning-properties",
-    style: {
-      marginTop: '50px',
-      width: '350px',
-      height: '190px',
-      padding: '0px 20px 20px',
-      overflow: 'auto',
-      fontSize: '11px',
-      backgroundColor: '#CCCCCCC0'
-    }
-  }, /*#__PURE__*/React__default.createElement("h1", {
-    "data-testid": "map-warning-properties-title"
-  }, selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].areaDesc), selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].areaDesc && ( /*#__PURE__*/React__default.createElement("pre", {
-    "data-testid": "map-warning-properties-row"
-  }, t('webmap-react-event'), ' ', selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].event)), selectedFeatureProperties.onset && ( /*#__PURE__*/React__default.createElement("pre", {
-    "data-testid": "map-warning-properties-row"
-  }, t('webmap-react-sent'), ' ', dateUtils.dateToString(dateUtils.utc(selectedFeatureProperties.onset), dateUtils.DATE_FORMAT_NAME_OF_MONTH), ' ', t('webmap-react-utc'))), selectedFeatureProperties.expires && ( /*#__PURE__*/React__default.createElement("pre", {
-    "data-testid": "map-warning-properties-row"
-  }, t('webmap-react-expires'), ' ', dateUtils.dateToString(dateUtils.utc(selectedFeatureProperties.expires), dateUtils.DATE_FORMAT_NAME_OF_MONTH), ' ', t('webmap-react-utc'))), selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].senderName && ( /*#__PURE__*/React__default.createElement("pre", {
-    "data-testid": "map-warning-properties-row"
-  }, t('webmap-react-sender'), ' ', selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].senderName)), selectedFeatureProperties.identifier && ( /*#__PURE__*/React__default.createElement("pre", {
-    "data-testid": "map-warning-properties-row"
-  }, t('webmap-react-identifier'), ' ', selectedFeatureProperties.identifier))));
+  }, {
+    children: jsxs("div", Object.assign({
+      "data-testid": "map-warning-properties",
+      style: {
+        marginTop: '50px',
+        width: '350px',
+        height: '190px',
+        padding: '0px 20px 20px',
+        overflow: 'auto',
+        fontSize: '11px',
+        backgroundColor: '#CCCCCCC0'
+      }
+    }, {
+      children: [jsx("h1", Object.assign({
+        "data-testid": "map-warning-properties-title"
+      }, {
+        children: selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].areaDesc
+      })), selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].areaDesc && jsxs("pre", Object.assign({
+        "data-testid": "map-warning-properties-row"
+      }, {
+        children: [t('webmap-react-event'), ' ', selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].event]
+      })), selectedFeatureProperties.onset && jsxs("pre", Object.assign({
+        "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", Object.assign({
+        "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')]
+      })), selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].senderName && jsxs("pre", Object.assign({
+        "data-testid": "map-warning-properties-row"
+      }, {
+        children: [t('webmap-react-sender'), ' ', selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].senderName]
+      })), selectedFeatureProperties.identifier && jsxs("pre", Object.assign({
+        "data-testid": "map-warning-properties-row"
+      }, {
+        children: [t('webmap-react-identifier'), ' ', selectedFeatureProperties.identifier]
+      }))]
+    }))
+  }));
 };
 
 const dimensionConfig = [{
@@ -10733,22 +10733,6 @@ const marksByDimension = 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)
- * */
 const DimensionSelectButton = ({
   dimension,
   onClickDimensionButton,
@@ -10761,30 +10745,16 @@ const DimensionSelectButton = ({
   const dimConfig = dimensionConfig.find(cnf => cnf.name === dimension);
   const Icon = getDimensionIcon$1(dimConfig && dimConfig.iconType || 'IconLevels');
   const title = `${showPrefix} ${dimConfig ? dimConfig.label.toLowerCase() : dimension.toLowerCase()}`;
-  return /*#__PURE__*/React.createElement(MapControlButton, {
+  return jsx(MapControlButton, Object.assign({
     title: title,
     "data-testid": `dimensionMapBtn-${dimension}`,
     onClick: onClickDimensionButton,
     isActive: _isActive
-  }, /*#__PURE__*/React.createElement(Icon, null));
+  }, {
+    children: 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)
- * */
 const DimensionSelectDialog = ({
   isOpen,
   order: _order = 0,
@@ -10798,7 +10768,7 @@ const DimensionSelectDialog = ({
   const dimConfig = dimensionConfig.find(cnf => cnf.name === dimensionName);
   const title = dimConfig ? dimConfig.label : dimensionName;
   const topPos = _index * 32 + 164; // index * btn height + offset top of window
-  return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
+  return jsx(ToolContainerDraggable, Object.assign({
     startPosition: {
       left: 50,
       top: topPos
@@ -10812,14 +10782,20 @@ const DimensionSelectDialog = ({
     onMouseDown: onMouseDown,
     order: _order,
     source: _source
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      padding: 4
-    }
-  }, /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    direction: "row"
-  }, children)));
+  }, {
+    children: jsx("div", Object.assign({
+      style: {
+        padding: 4
+      }
+    }, {
+      children: jsx(Grid, Object.assign({
+        container: true,
+        direction: "row"
+      }, {
+        children: children
+      }))
+    }))
+  }));
 };
 
 const SmallFontSlider = styled(Slider)(() => ({
@@ -10857,74 +10833,68 @@ const DimensionSelectSlider = ({
       event.preventDefault();
     }
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-    "data-testid": "slider-dimensionSelect",
-    sx: {
-      height: '320px',
-      margin: '10px',
-      marginLeft: '-5px',
-      minWidth: 120,
-      fontSize: '90%'
-    }
-  }, /*#__PURE__*/React.createElement(Box, {
-    component: "span",
-    m: 1
-  }, /*#__PURE__*/React.createElement(SmallFontSlider, {
-    "data-testid": "verticalSlider",
-    orientation: "vertical",
-    "aria-labelledby": "vertical-slider",
-    step: null,
-    min: 0,
-    max: indexLabelMarks.length - 1,
-    marks: indexLabelMarks,
-    style: !_validSelection ? {
-      color: _alertColor
-    } : {},
-    disabled: _isDisabled,
-    value: sliderValue,
-    onKeyDown: upDownNavigation,
-    onChange: (e, val) => {
-      onChangeDimensionValue(values[val].toString());
-      if (!_managedValue) {
-        setCurrentIndex(val);
-      }
-    }
-  }))), /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: layerTitle
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "body2",
-    sx: {
-      paddingLeft: '10px',
-      maxWidth: 130,
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    }
-  }, layerTitle)));
+  return jsxs(Fragment, {
+    children: [jsx(Box, Object.assign({
+      "data-testid": "slider-dimensionSelect",
+      sx: {
+        height: '320px',
+        margin: '10px',
+        marginLeft: '-5px',
+        minWidth: 120,
+        fontSize: '90%'
+      }
+    }, {
+      children: jsx(Box, Object.assign({
+        component: "span",
+        m: 1
+      }, {
+        children: jsx(SmallFontSlider, {
+          "data-testid": "verticalSlider",
+          orientation: "vertical",
+          "aria-labelledby": "vertical-slider",
+          step: null,
+          min: 0,
+          max: indexLabelMarks.length - 1,
+          marks: indexLabelMarks,
+          style: !_validSelection ? {
+            color: _alertColor
+          } : {},
+          disabled: _isDisabled,
+          value: sliderValue,
+          onKeyDown: upDownNavigation,
+          onChange: (e, val) => {
+            onChangeDimensionValue(values[val].toString());
+            if (!_managedValue) {
+              setCurrentIndex(val);
+            }
+          }
+        })
+      }))
+    })), jsx(CustomTooltip, Object.assign({
+      title: layerTitle
+    }, {
+      children: jsx(Typography, Object.assign({
+        variant: "body2",
+        sx: {
+          paddingLeft: '10px',
+          maxWidth: 130,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis'
+        }
+      }, {
+        children: layerTitle
+      }))
+    }))]
+  });
 };
 
-/* *
- * 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)
- * */
 const Icon = ({
   isLayerDimensionSynced
-}) => isLayerDimensionSynced ? ( /*#__PURE__*/React.createElement(Link, {
+}) => isLayerDimensionSynced ? jsx(Link, {
   "data-testid": "syncIcon"
-})) : ( /*#__PURE__*/React.createElement(LinkOff, {
+}) : jsx(LinkOff, {
   "data-testid": "syncDisIcon"
-}));
+});
 const MapDimensionSelect = ({
   layerId,
   dimensionName,
@@ -10949,30 +10919,33 @@ const MapDimensionSelect = ({
     t
   } = useWebmapReactTranslation();
   const tooltipTitle = isLayerDimensionSynced ? t('webmap-react-click-disconnect') : t('webmap-react-click-connect');
-  return /*#__PURE__*/React.createElement(Grid, {
-    key: layerId,
+  return jsxs(Grid, Object.assign({
     item: true,
     xs: "auto"
-  }, /*#__PURE__*/React.createElement(CustomIconButton, {
-    tooltipTitle: tooltipTitle,
-    onClick: () => handleSyncChanged(layerId, dimensionName, layerDimension.currentValue, !layerDimension.synced),
-    sx: {
-      margin: '5px'
-    },
-    "data-testid": "syncButton"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    isLayerDimensionSynced: isLayerDimensionSynced
-  })), /*#__PURE__*/React.createElement(DimensionSelectSlider, {
-    marks: marks,
-    layerTitle: layerTitle,
-    reverse: dimConfig ? dimConfig.reversed : false,
-    managedValue: Number(layerDimension.currentValue) || layerDimension.currentValue,
-    onChangeDimensionValue: value => {
-      handleDimensionValueChanged(layerId, dimensionName, value);
-    },
-    isDisabled: false,
-    validSelection: layerDimension.synced === false || !(layerDimension.validSyncSelection !== undefined && layerDimension.validSyncSelection === false)
-  }));
+  }, {
+    children: [jsx(CustomIconButton, Object.assign({
+      tooltipTitle: tooltipTitle,
+      onClick: () => handleSyncChanged(layerId, dimensionName, layerDimension.currentValue, !layerDimension.synced),
+      sx: {
+        margin: '5px'
+      },
+      "data-testid": "syncButton"
+    }, {
+      children: jsx(Icon, {
+        isLayerDimensionSynced: isLayerDimensionSynced
+      })
+    })), jsx(DimensionSelectSlider, {
+      marks: marks,
+      layerTitle: layerTitle,
+      reverse: dimConfig ? dimConfig.reversed : false,
+      managedValue: Number(layerDimension.currentValue) || layerDimension.currentValue,
+      onChangeDimensionValue: value => {
+        handleDimensionValueChanged(layerId, dimensionName, value);
+      },
+      isDisabled: false,
+      validSelection: layerDimension.synced === false || !(layerDimension.validSyncSelection !== undefined && layerDimension.validSyncSelection === false)
+    })]
+  }), layerId);
 };
 
 const LayerInfoButton = _a => {
@@ -10981,7 +10954,7 @@ const LayerInfoButton = _a => {
       onClick
     } = _a,
     props = __rest(_a, ["isActive", "onClick"]);
-  return /*#__PURE__*/React__default.createElement(CustomIconButton, Object.assign({
+  return jsx(CustomIconButton, Object.assign({
     variant: "flat",
     isSelected: isActive,
     onClick: onClick,
@@ -10989,7 +10962,9 @@ const LayerInfoButton = _a => {
     "data-testid": "layerInfoButton",
     "aria-label": "layer info",
     className: "layerInfoButton"
-  }, props), /*#__PURE__*/React__default.createElement(Info, null));
+  }, props, {
+    children: jsx(Info, {})
+  }));
 };
 
 const textStyle = {
@@ -11003,13 +10978,19 @@ const LayerInfoText = ({
   label,
   value
 }) => {
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography$1, {
-    variant: "subtitle2",
-    sx: textStyle
-  }, label), /*#__PURE__*/React__default.createElement(Typography$1, {
-    variant: "body2",
-    sx: textStyleWithMargin
-  }, value));
+  return jsxs(Fragment, {
+    children: [jsx(Typography$1, Object.assign({
+      variant: "subtitle2",
+      sx: textStyle
+    }, {
+      children: label
+    })), jsx(Typography$1, Object.assign({
+      variant: "body2",
+      sx: textStyleWithMargin
+    }, {
+      children: value
+    }))]
+  });
 };
 
 const valueStyle = Object.assign(Object.assign({}, textStyle), {
@@ -11019,59 +11000,61 @@ const LayerInfoList = ({
   label,
   list
 }) => {
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography$1, {
-    variant: "subtitle2",
-    sx: textStyle
-  }, label), list.length === 0 ? ( /*#__PURE__*/React__default.createElement(Typography$1, {
-    variant: "body2",
-    sx: textStyleWithMargin
-  }, "-")) : ( /*#__PURE__*/React__default.createElement(Grid$1, {
-    container: true,
-    direction: "column"
-  }, list.map(item => ( /*#__PURE__*/React__default.createElement("div", {
-    key: item.label
-  }, /*#__PURE__*/React__default.createElement(Grid$1, {
-    item: true,
-    container: true,
-    direction: "row"
-  }, item.icon, /*#__PURE__*/React__default.createElement(Grid$1, {
-    item: true,
-    sx: {
-      marginLeft: '10px'
-    }
-  }, /*#__PURE__*/React__default.createElement(Typography$1, {
-    variant: "body2",
-    sx: textStyle
-  }, item.label, ":"))), /*#__PURE__*/React__default.createElement(Grid$1, {
-    item: true,
-    container: true,
-    direction: "row",
-    sx: {
-      marginBottom: 1,
-      paddingLeft: '34px'
-    }
-  }, /*#__PURE__*/React__default.createElement(Typography$1, {
-    variant: "body2",
-    sx: valueStyle
-  }, item.value))))))));
+  return jsxs(Fragment, {
+    children: [jsx(Typography$1, Object.assign({
+      variant: "subtitle2",
+      sx: textStyle
+    }, {
+      children: label
+    })), list.length === 0 ? jsx(Typography$1, Object.assign({
+      variant: "body2",
+      sx: textStyleWithMargin
+    }, {
+      children: "-"
+    })) : jsx(Grid$1, Object.assign({
+      container: true,
+      direction: "column"
+    }, {
+      children: list.map(item => jsxs("div", {
+        children: [jsxs(Grid$1, Object.assign({
+          item: true,
+          container: true,
+          direction: "row"
+        }, {
+          children: [item.icon, jsx(Grid$1, Object.assign({
+            item: true,
+            sx: {
+              marginLeft: '10px'
+            }
+          }, {
+            children: jsxs(Typography$1, Object.assign({
+              variant: "body2",
+              sx: textStyle
+            }, {
+              children: [item.label, ":"]
+            }))
+          }))]
+        })), jsx(Grid$1, Object.assign({
+          item: true,
+          container: true,
+          direction: "row",
+          sx: {
+            marginBottom: 1,
+            paddingLeft: '34px'
+          }
+        }, {
+          children: jsx(Typography$1, Object.assign({
+            variant: "body2",
+            sx: valueStyle
+          }, {
+            children: item.value
+          }))
+        }))]
+      }, item.label))
+    }))]
+  });
 };
 
-/* *
- * 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)
- * */
 const LayerInfoLegend = ({
   title,
   name,
@@ -11081,17 +11064,23 @@ const LayerInfoLegend = ({
   const {
     t
   } = useWebmapReactTranslation();
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography$1, {
-    variant: "subtitle2",
-    sx: textStyleWithMargin
-  }, t('webmap-react-legend')), /*#__PURE__*/React__default.createElement(LegendLayout, {
-    title: title,
-    name: name,
-    dimensions: dimensions
-  }, legendURL ? /*#__PURE__*/React__default.createElement("img", {
-    alt: title,
-    src: legendURL
-  }) : '-'));
+  return jsxs(Fragment, {
+    children: [jsx(Typography$1, Object.assign({
+      variant: "subtitle2",
+      sx: textStyleWithMargin
+    }, {
+      children: t('webmap-react-legend')
+    })), jsx(LegendLayout, Object.assign({
+      title: title,
+      name: name,
+      dimensions: dimensions
+    }, {
+      children: legendURL ? jsx("img", {
+        alt: title,
+        src: legendURL
+      }) : '-'
+    }))]
+  });
 };
 
 var fails$4 = fails$q;
@@ -11561,13 +11550,13 @@ const getDimensionIcon = (name, dimensions) => {
   }
   switch (dimension.name.toLowerCase()) {
     case 'time':
-      return /*#__PURE__*/React__default.createElement(DimensionsTime, null);
+      return jsx(DimensionsTime, {});
     case 'reference_time':
-      return /*#__PURE__*/React__default.createElement(DimensionsRefTime, null);
+      return jsx(DimensionsRefTime, {});
     case 'elevation':
-      return /*#__PURE__*/React__default.createElement(DimensionsElevation, null);
+      return jsx(DimensionsElevation, {});
     default:
-      return /*#__PURE__*/React__default.createElement(DimensionsOther, null);
+      return jsx(DimensionsOther, {});
   }
 };
 const getDimensionLabel = name => {
@@ -11601,22 +11590,6 @@ const 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)
- * */
 const LayerInfoDialog = ({
   onClose,
   layer,
@@ -11634,7 +11607,7 @@ const LayerInfoDialog = ({
   const {
     t
   } = useWebmapReactTranslation();
-  return /*#__PURE__*/React__default.createElement(ToolContainerDraggable, {
+  return jsx(ToolContainerDraggable, Object.assign({
     onClose: onClose,
     startSize: {
       width: 288,
@@ -11649,43 +11622,47 @@ const LayerInfoDialog = ({
     onMouseDown: _onMouseDown,
     order: _order,
     source: _source
-  }, /*#__PURE__*/React__default.createElement(Box$1, {
-    sx: {
-      padding: 2
-    }
-  }, /*#__PURE__*/React__default.createElement(LayerInfoText, {
-    label: t('webmap-react-title'),
-    value: layer.title
-  }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
-    label: t('webmap-react-name'),
-    value: layer.name
-  }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
-    label: t('webmap-react-service'),
-    value: serviceName
-  }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
-    label: t('webmap-react-abstract'),
-    value: layer.abstract || '-'
-  }), /*#__PURE__*/React__default.createElement(LayerInfoList, {
-    label: t('webmap-react-dimensions'),
-    list: dimensions
-  }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
-    label: t('webmap-react-styles'),
-    value: styles
-  }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
-    label: t('webmap-react-bounding-box'),
-    value: bbox
-  }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
-    label: t('webmap-react-groups'),
-    value: ((_a = layer.path) === null || _a === void 0 ? void 0 : _a.join('/')) || '-'
-  }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
-    label: t('webmap-react-keywords'),
-    value: ((_b = layer.keywords) === null || _b === void 0 ? void 0 : _b.join(', ')) || '-'
-  }), /*#__PURE__*/React__default.createElement(LayerInfoLegend, {
-    title: layer.title,
-    name: layer.name,
-    dimensions: layer.dimensions,
-    legendURL: ((_c = layer.styles) === null || _c === void 0 ? void 0 : _c.length) ? layer.styles[0].legendURL : undefined
-  })));
+  }, {
+    children: jsxs(Box$1, Object.assign({
+      sx: {
+        padding: 2
+      }
+    }, {
+      children: [jsx(LayerInfoText, {
+        label: t('webmap-react-title'),
+        value: layer.title
+      }), jsx(LayerInfoText, {
+        label: t('webmap-react-name'),
+        value: layer.name
+      }), jsx(LayerInfoText, {
+        label: t('webmap-react-service'),
+        value: serviceName
+      }), jsx(LayerInfoText, {
+        label: t('webmap-react-abstract'),
+        value: layer.abstract || '-'
+      }), jsx(LayerInfoList, {
+        label: t('webmap-react-dimensions'),
+        list: dimensions
+      }), jsx(LayerInfoText, {
+        label: t('webmap-react-styles'),
+        value: styles
+      }), jsx(LayerInfoText, {
+        label: t('webmap-react-bounding-box'),
+        value: bbox
+      }), jsx(LayerInfoText, {
+        label: t('webmap-react-groups'),
+        value: ((_a = layer.path) === null || _a === void 0 ? void 0 : _a.join('/')) || '-'
+      }), jsx(LayerInfoText, {
+        label: t('webmap-react-keywords'),
+        value: ((_b = layer.keywords) === null || _b === void 0 ? void 0 : _b.join(', ')) || '-'
+      }), jsx(LayerInfoLegend, {
+        title: layer.title,
+        name: layer.name,
+        dimensions: layer.dimensions,
+        legendURL: ((_c = layer.styles) === null || _c === void 0 ? void 0 : _c.length) ? layer.styles[0].legendURL : undefined
+      })]
+    }))
+  }));
 };
 
 /* *
@@ -11845,25 +11822,25 @@ const MeteoCanada = {
 
 var publicServices = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  ArcGisCanvas: ArcGisCanvas,
   DWD: DWD,
-  nationaalgeoregister: nationaalgeoregister,
-  KNMImsgcpp: KNMImsgcpp,
+  DWDObservations: DWDObservations,
+  DWDWXProdukt: DWDWXProdukt,
+  DWDWarnings: DWDWarnings,
+  ECMWFPublicService: ECMWFPublicService,
+  EUMETSAT: EUMETSAT,
+  FMIopenwms: FMIopenwms,
   HeiGit: HeiGit,
-  ArcGisCanvas: ArcGisCanvas,
-  KNMIgeoservicesRadar: KNMIgeoservicesRadar,
-  KNMIgeoservicesObs: KNMIgeoservicesObs,
-  KNMIgeoservicesKlimaatAtlas: KNMIgeoservicesKlimaatAtlas,
   KNMIgeoservicesHarmonie: KNMIgeoservicesHarmonie,
   KNMIgeoservicesHarmonieMLService: KNMIgeoservicesHarmonieMLService,
+  KNMIgeoservicesKlimaatAtlas: KNMIgeoservicesKlimaatAtlas,
+  KNMIgeoservicesObs: KNMIgeoservicesObs,
+  KNMIgeoservicesRadar: KNMIgeoservicesRadar,
+  KNMImsgcpp: KNMImsgcpp,
   MetNorwayService: MetNorwayService,
-  FMIopenwms: FMIopenwms,
-  DWDObservations: DWDObservations,
-  DWDWarnings: DWDWarnings,
-  DWDWXProdukt: DWDWXProdukt,
-  EUMETSAT: EUMETSAT,
+  MeteoCanada: MeteoCanada,
   eumetviewEUMETSAT: eumetviewEUMETSAT,
-  ECMWFPublicService: ECMWFPublicService,
-  MeteoCanada: MeteoCanada
+  nationaalgeoregister: nationaalgeoregister
 });
 
 /* *
@@ -12204,48 +12181,48 @@ const msgNaturalEUMETSAT = {
 
 var publicLayers = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  defaultLayers: defaultLayers,
+  FMITemp: FMITemp,
+  MetNoTemp: MetNoTemp,
   baseLayer: baseLayer,
-  baseLayerOpenStreetMapNL: baseLayerOpenStreetMapNL,
   baseLayerArcGisCanvas: baseLayerArcGisCanvas,
-  baseLayerWorldMap: baseLayerWorldMap,
   baseLayerHeiGit: baseLayerHeiGit,
-  msgCppLayer: msgCppLayer,
-  veiligheidsRegiosGebiedsIndelingenLabels: veiligheidsRegiosGebiedsIndelingenLabels,
-  veiligheidsRegiosGebiedsIndelingen: veiligheidsRegiosGebiedsIndelingen,
-  radarLayer: radarLayer,
-  radarLayerWithError: radarLayerWithError,
-  obsAirTemperature: obsAirTemperature,
-  obsWind: obsWind,
-  obsAirPressureAtSeaLevel: obsAirPressureAtSeaLevel,
-  obsRelativeHumidity: obsRelativeHumidity,
-  obsGlobalSolarRadiation: obsGlobalSolarRadiation,
-  obsPrecipitationIntensityPWS: obsPrecipitationIntensityPWS,
-  harmonieRelativeHumidityPl: harmonieRelativeHumidityPl,
-  harmonieWindPl: harmonieWindPl,
+  baseLayerOpenStreetMapNL: baseLayerOpenStreetMapNL,
+  baseLayerWorldMap: baseLayerWorldMap,
+  defaultLayers: defaultLayers,
+  dwdObservationsWetterLayer: dwdObservationsWetterLayer,
+  dwdObservationsWetterLayerWithHeader: dwdObservationsWetterLayerWithHeader,
+  dwdObservationsWindLayer: dwdObservationsWindLayer,
+  dwdRadarLayer: dwdRadarLayer,
+  dwdWarningLayer: dwdWarningLayer,
   harmonieAirTemperature: harmonieAirTemperature,
   harmoniePrecipitation: harmoniePrecipitation,
   harmoniePressure: harmoniePressure,
+  harmonieRelativeHumidityPl: harmonieRelativeHumidityPl,
   harmonieWindFlags: harmonieWindFlags,
+  harmonieWindPl: harmonieWindPl,
   klimaatAtlasTG3: klimaatAtlasTG3,
-  dwdWarningLayer: dwdWarningLayer,
-  dwdRadarLayer: dwdRadarLayer,
-  dwdObservationsWetterLayer: dwdObservationsWetterLayer,
-  dwdObservationsWetterLayerWithHeader: dwdObservationsWetterLayerWithHeader,
-  dwdObservationsWindLayer: dwdObservationsWindLayer,
-  FMITemp: FMITemp,
-  MetNoTemp: MetNoTemp,
+  metNorwayLatestT: metNorwayLatestT,
+  metNorwaySalinaty: metNorwaySalinaty,
   metNorwayWind1: metNorwayWind1,
   metNorwayWind2: metNorwayWind2,
   metNorwayWind3: metNorwayWind3,
-  metNorwayLatestT: metNorwayLatestT,
-  metNorwaySalinaty: metNorwaySalinaty,
-  msgFesEUMETSAT: msgFesEUMETSAT,
-  msgNaturalenhncdEUMETSAT: msgNaturalenhncdEUMETSAT,
   msgAshEUMETSAT: msgAshEUMETSAT,
+  msgCppLayer: msgCppLayer,
   msgCthEUMETSAT: msgCthEUMETSAT,
+  msgFesEUMETSAT: msgFesEUMETSAT,
   msgFogEUMETSAT: msgFogEUMETSAT,
-  msgNaturalEUMETSAT: msgNaturalEUMETSAT
+  msgNaturalEUMETSAT: msgNaturalEUMETSAT,
+  msgNaturalenhncdEUMETSAT: msgNaturalenhncdEUMETSAT,
+  obsAirPressureAtSeaLevel: obsAirPressureAtSeaLevel,
+  obsAirTemperature: obsAirTemperature,
+  obsGlobalSolarRadiation: obsGlobalSolarRadiation,
+  obsPrecipitationIntensityPWS: obsPrecipitationIntensityPWS,
+  obsRelativeHumidity: obsRelativeHumidity,
+  obsWind: obsWind,
+  radarLayer: radarLayer,
+  radarLayerWithError: radarLayerWithError,
+  veiligheidsRegiosGebiedsIndelingen: veiligheidsRegiosGebiedsIndelingen,
+  veiligheidsRegiosGebiedsIndelingenLabels: veiligheidsRegiosGebiedsIndelingenLabels
 });
 
-export { DRAWMODE, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EDITMODE, EditModeButton as EditModeButtonField, FeatureLayers, GeoJSONTextField, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MINUTE_TO_MILLISECOND, MapControlButton, MapControls, MapDimensionSelect, MapDrawContainer, MapTime, MapView, MapViewLayer, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, radarGetCapabilities_spec as RadarGetCapabilities, ReactMapView, ReactMapViewLayer, SelectField, StoryLayoutGrid, WEBMAP_REACT_NAMESPACE, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, addWMLayerPropsBasedOnChildProps, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, checkHoverFeatures, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, dimensionConfig, distance, drawPolyStoryStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, firSelectionType, formatTime, getCurrentDimensionValue, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getDrawFunctionFromStore, getFeatureCollection, getFeatureExtent, getFeatureLayers, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getTimeDimension, getToolIcon, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isAGeoJSONLayer, isAMapLayer, isGeoJSONFeatureCreatedByTool, isPointFeatureCollection, lineString, makeLayerPropListFromChildren, marksByDimension, moveFeature, opacityOptions, orderLayers, parseWMJSLayer, publicLayers, publicServices, registerDrawFunction, removeWMLayerFromMap, rewindGeometry, setWMLayerPropsBasedOnChildProps, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useGeoJSON, useMapDrawTool, webmapReactTranslations };
+export { DRAWMODE, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EDITMODE, EditModeButton as EditModeButtonField, FeatureLayers, GeoJSONTextField, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MINUTE_TO_MILLISECOND, MapControlButton, MapControls, MapDimensionSelect, MapDrawContainer, MapTime, MapView, MapViewLayer, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, Proj4js, radarGetCapabilities_spec as RadarGetCapabilities, ReactMapView, ReactMapViewLayer, SelectField, StoryLayoutGrid, WEBMAP_REACT_NAMESPACE, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, addWMLayerPropsBasedOnChildProps, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, checkHoverFeatures, convertGeoCoordsToScreenCoords, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, dimensionConfig, distance, drawPolyStoryStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, findClosestCoords, firSelectionType, formatTime, getCurrentDimensionValue, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getDrawFunctionFromStore, getFeatureCollection, getFeatureExtent, getFeatureLayers, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getPixelCoordFromGeoCoord, getProj4, getTimeDimension, getToolIcon, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isAGeoJSONLayer, isAMapLayer, isBetween, isGeoJSONFeatureCreatedByTool, isPointFeatureCollection, lineString, lineStringCollection, makeLayerPropListFromChildren, marksByDimension, moveFeature, opacityOptions, orderLayers, parseWMJSLayer, projectorCache, publicLayers, publicServices, registerDrawFunction, removeWMLayerFromMap, rewindGeometry, setWMLayerPropsBasedOnChildProps, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useGeoJSON, useMapDrawTool, webmapReactTranslations };