@opengeoweb/core 6.1.1 → 7.0.0

package/index.esm.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import React__default, { forwardRef, useContext, useCallback, useEffect, createElement, PureComponent, useState, cloneElement, useRef, isValidElement, createRef, useLayoutEffect } from 'react';
+import React__default, { forwardRef, useContext, useCallback, useEffect, createElement, PureComponent, useState, useRef, useLayoutEffect } from 'react';
 import { Grid, Box as Box$2, MenuItem, Typography, useTheme as useTheme$2, Button, Popper, ListItemText, ListItemIcon, FormControl, InputLabel, Paper, List, ListItemButton, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, LinearProgress, Backdrop, ListItem, ListItemSecondaryAction, Checkbox, Switch, styled as styled$1, Slider, Menu, Card, IconButton, Select, CardContent, RadioGroup, FormControlLabel, Radio, ToggleButtonGroup, ToggleButton, Divider, Tooltip, ButtonGroup, Snackbar } from '@mui/material';
 import { CustomIconButton, TooltipSelect, AlertIcon, useControlledTooltip, CustomTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, AlertBanner, CustomAccordion, ToolContainerDraggable, calculateDialogSizeAndPosition, CustomToggleButton, SearchHighlight, dateUtils, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
-import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Add, MapAdd, Filter, Search, Clear, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Close, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateInActive, Speed, Clock, Now, Animation, Options, Pause, Play, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, Location, DrawPolygon, DrawRegion, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
+import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Add, MapAdd, Filter, Search, Clear, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Close, Layers, Equalizer, Link, LinkOff, AutoUpdateInActive, Speed, Clock, Now, Animation, Options, Pause, Play, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, Location, DrawPolygon, DrawRegion, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import { useDispatch, useSelector, connect, Provider } from 'react-redux';
-import { uiTypes, uiSelectors, uiActions, layerTypes, layerUtils, layerActions, layerSelectors, serviceSelectors, serviceActions, mapSelectors, mapActions, mapEnums, mapConstants, filterLayers, getUserAddedServices, layerSelectSelectors, layerSelectActions, storeUtils, snackbarActions, layerSelectTypes, mapUtils, genericActions, syncConstants, drawSelectors, drawActions, defaultLayers, syncGroupsSelectors, syncGroupsSelector, snackbarModuleConfig, snackbarSelectors, coreModuleConfig, routerUtils, routerModuleConfig, appModuleConfig, appActions } from '@opengeoweb/store';
+import { uiTypes, uiSelectors, uiActions, layerTypes, layerUtils, layerActions, layerSelectors, serviceSelectors, serviceActions, mapSelectors, mapActions, mapEnums, mapConstants, filterLayers, getUserAddedServices, layerSelectSelectors, layerSelectActions, storeUtils, snackbarActions, layerSelectTypes, mapUtils, genericActions, syncConstants, drawActions, mapStoreActions, drawSelectors, defaultLayers, syncGroupsSelectors, syncGroupsSelector, snackbarModuleConfig, snackbarSelectors, coreModuleConfig, routerUtils, routerModuleConfig, appModuleConfig, appActions } from '@opengeoweb/store';
 import { ReactSortable } from 'react-sortablejs';
 import { webmapUtils, WMGetServiceFromStore, getCapabilities, LayerType, clearImageCache, WMLayer } from '@opengeoweb/webmap';
 import { jsx } from 'react/jsx-runtime';
@@ -12,13 +12,11 @@ import _, { isEqual as isEqual$1, debounce, groupBy, throttle as throttle$1, cla
 import Box$3 from '@mui/material/Box';
 import Typography$1 from '@mui/material/Typography';
 import Grid$1 from '@mui/material/Grid';
-import { LegendLayout, CanvasComponent, ReactMapView, MapViewLayer, Legend, defaultStyleProperties, lineString, featurePoint, featurePolygon, emptyGeoJSON, DRAWMODE, addFeatureProperties, isGeoJSONFeatureCreatedByTool, getFeatureCollection, getGeoJson, createInterSections } from '@opengeoweb/webmap-react';
+import { LegendLayout, MapControlButton, ZoomControls, CanvasComponent, MapView, MapViewLayer, LegendDialog, defaultStyleProperties, lineString, featurePoint, featurePolygon, emptyGeoJSON, DRAWMODE, addFeatureProperties, isGeoJSONFeatureCreatedByTool, getFeatureCollection, getGeoJson, createInterSections, MapControls, publicLayers } from '@opengeoweb/webmap-react';
 import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField, ReactHookFormSelect, ReactHookFormHiddenInput } from '@opengeoweb/form-fields';
 import moment from 'moment';
-import { findDOMNode, flushSync } from 'react-dom';
-import debounce$1 from 'lodash/debounce';
-import throttle$2 from 'lodash/throttle';
 import Draggable from 'react-draggable';
+import { flushSync } from 'react-dom';
 import axios from 'axios';
 import { useDebounce } from '@opengeoweb/api';
 import { createStore } from '@redux-eggs/redux-toolkit';
@@ -5386,7 +5384,7 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 
-function __rest$1(s, e) {
+function __rest(s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -10535,7 +10533,7 @@ var CustomDimensionSelectConnect = function CustomDimensionSelectConnect(_a) {
     mapId = _a.mapId,
     dimensionsToShow = _a.dimensionsToShow,
     SingleValueComponent = _a.SingleValueComponent,
-    props = __rest$1(_a, ["layerId", "mapId", "dimensionsToShow", "SingleValueComponent"]);
+    props = __rest(_a, ["layerId", "mapId", "dimensionsToShow", "SingleValueComponent"]);
   var _useLayerDimensions = useLayerDimensions(layerId, mapId),
     layerDimensions = _useLayerDimensions.layerDimensions,
     isLayerEnabled = _useLayerDimensions.isLayerEnabled,
@@ -15701,7 +15699,7 @@ var ServicePopup = function ServicePopup(_ref2) {
   }, "save")))));
 };
 var ServicePopupWrapper = function ServicePopupWrapper(_a) {
-  var props = __rest$1(_a, []);
+  var props = __rest(_a, []);
   return /*#__PURE__*/React.createElement(ReactHookFormProvider, {
     options: Object.assign(Object.assign({}, defaultFormOptions), {
       defaultValues: {
@@ -15866,162 +15864,6 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
   }), /*#__PURE__*/React.createElement(LayerInfoDialogConnect, null), /*#__PURE__*/React.createElement(ServicePopupConnect, null));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * */
-var MapControlButton = function MapControlButton(_a) {
-  var onClick = _a.onClick,
-    children = _a.children,
-    title = _a.title,
-    _a$placement = _a.placement,
-    placement = _a$placement === void 0 ? 'right' : _a$placement,
-    _a$isActive = _a.isActive,
-    isActive = _a$isActive === void 0 ? false : _a$isActive,
-    props = __rest$1(_a, ["onClick", "children", "title", "placement", "isActive"]);
-  return /*#__PURE__*/React.createElement(CustomIconButton, Object.assign({
-    variant: "tool",
-    tooltipProps: {
-      placement: placement,
-      title: title
-    },
-    onClick: onClick,
-    isSelected: isActive
-  }, props), 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)
- * */
-var ZoomControls = function ZoomControls(_ref) {
-  var onZoomIn = _ref.onZoomIn,
-    onZoomOut = _ref.onZoomOut,
-    onZoomReset = _ref.onZoomReset;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MapControlButton, {
-    title: "Reset zoom",
-    "data-testid": "zoom-reset",
-    onClick: onZoomReset
-  }, /*#__PURE__*/React.createElement(Home, null)), /*#__PURE__*/React.createElement(MapControlButton, {
-    title: "Zoom in",
-    "data-testid": "zoom-in",
-    onClick: onZoomIn
-  }, /*#__PURE__*/React.createElement(Add, null)), /*#__PURE__*/React.createElement(MapControlButton, {
-    title: "Zoom out",
-    "data-testid": "zoom-out",
-    onClick: onZoomOut
-  }, /*#__PURE__*/React.createElement(Minus, null)));
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var ZoomControlConnect = function ZoomControlConnect(_ref) {
-  var mapId = _ref.mapId;
-  var isVisible = useSelector(function (store) {
-    return mapSelectors.isZoomControlsVisible(store, mapId);
-  });
-  var adagucRef = React.useRef(null);
-  React.useEffect(function () {
-    adagucRef.current = webmapUtils.getWMJSMapById(mapId);
-  }, [mapId]);
-  var onZoomIn = function onZoomIn() {
-    return adagucRef.current.zoomIn(undefined);
-  };
-  var onZoomOut = function onZoomOut() {
-    return adagucRef.current.zoomOut();
-  };
-  var onZoomReset = function onZoomReset() {
-    return adagucRef.current.zoomToLayer(adagucRef.current.getActiveLayer());
-  };
-  if (!isVisible) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(ZoomControls, {
-    onZoomIn: onZoomIn,
-    onZoomOut: onZoomOut,
-    onZoomReset: onZoomReset
-  });
-};
-
-/* *
- * 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)
- * */
-var MapControls = function MapControls(_a) {
-  var children = _a.children,
-    props = __rest$1(_a, ["children"]);
-  return /*#__PURE__*/React.createElement(Box$2, Object.assign({
-    sx: {
-      position: 'absolute',
-      overflow: 'visible',
-      display: 'block',
-      left: 0,
-      margin: 1,
-      zIndex: 50,
-      top: '96px',
-      userSelect: 'none'
-    }
-  }, props), /*#__PURE__*/React.createElement(Grid, {
-    sx: {
-      '& > button': {
-        marginBottom: 1
-      }
-    },
-    container: true,
-    direction: "column"
-  }, children));
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -16625,6 +16467,50 @@ var MultiMapMultiDimensionSelectConnect = function MultiMapMultiDimensionSelectC
   }));
 };
 
+/* *
+ * 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)
+ * */
+var ZoomControlConnect = function ZoomControlConnect(_ref) {
+  var mapId = _ref.mapId;
+  var isVisible = useSelector(function (store) {
+    return mapSelectors.isZoomControlsVisible(store, mapId);
+  });
+  var adagucRef = React.useRef(null);
+  React.useEffect(function () {
+    adagucRef.current = webmapUtils.getWMJSMapById(mapId);
+  }, [mapId]);
+  var onZoomIn = function onZoomIn() {
+    return adagucRef.current.zoomIn(undefined);
+  };
+  var onZoomOut = function onZoomOut() {
+    return adagucRef.current.zoomOut();
+  };
+  var onZoomReset = function onZoomReset() {
+    return adagucRef.current.zoomToLayer(adagucRef.current.getActiveLayer());
+  };
+  if (!isVisible) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ZoomControls, {
+    onZoomIn: onZoomIn,
+    onZoomOut: onZoomOut,
+    onZoomReset: onZoomReset
+  });
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20104,511 +19990,47 @@ var TimeSliderConnect = function TimeSliderConnect(_ref) {
   });
 };
 
-/* global Reflect, Promise */
-
-var extendStatics = function(d, b) {
-    extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return extendStatics(d, b);
-};
-
-function __extends$2(d, b) {
-    extendStatics(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-
-var __assign$2 = function() {
-    __assign$2 = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign$2.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}var patchResizeCallback = function (resizeCallback, refreshMode, refreshRate, refreshOptions) {
-    switch (refreshMode) {
-        case 'debounce':
-            return debounce$1(resizeCallback, refreshRate, refreshOptions);
-        case 'throttle':
-            return throttle$2(resizeCallback, refreshRate, refreshOptions);
-        default:
-            return resizeCallback;
-    }
-};
-var isFunction = function (fn) { return typeof fn === 'function'; };
-var isSSR = function () { return typeof window === 'undefined'; };
-var isDOMElement = function (element) {
-    return element instanceof Element || element instanceof HTMLDocument;
-};/** @class */ ((function (_super) {
-    __extends$2(ResizeDetector, _super);
-    function ResizeDetector(props) {
-        var _this = _super.call(this, props) || this;
-        _this.cancelHandler = function () {
-            if (_this.resizeHandler && _this.resizeHandler.cancel) {
-                // cancel debounced handler
-                _this.resizeHandler.cancel();
-                _this.resizeHandler = null;
-            }
-        };
-        _this.attachObserver = function () {
-            var _a = _this.props, targetRef = _a.targetRef, observerOptions = _a.observerOptions;
-            if (isSSR()) {
-                return;
-            }
-            if (targetRef && targetRef.current) {
-                _this.targetRef.current = targetRef.current;
-            }
-            var element = _this.getElement();
-            if (!element) {
-                // can't find element to observe
-                return;
-            }
-            if (_this.observableElement && _this.observableElement === element) {
-                // element is already observed
-                return;
-            }
-            _this.observableElement = element;
-            _this.resizeObserver.observe(element, observerOptions);
-        };
-        _this.getElement = function () {
-            var _a = _this.props, querySelector = _a.querySelector, targetDomEl = _a.targetDomEl;
-            if (isSSR())
-                return null;
-            // in case we pass a querySelector
-            if (querySelector)
-                return document.querySelector(querySelector);
-            // in case we pass a DOM element
-            if (targetDomEl && isDOMElement(targetDomEl))
-                return targetDomEl;
-            // in case we pass a React ref using React.createRef()
-            if (_this.targetRef && isDOMElement(_this.targetRef.current))
-                return _this.targetRef.current;
-            // the worse case when we don't receive any information from the parent and the library doesn't add any wrappers
-            // we have to use a deprecated `findDOMNode` method in order to find a DOM element to attach to
-            var currentElement = findDOMNode(_this);
-            if (!currentElement)
-                return null;
-            var renderType = _this.getRenderType();
-            switch (renderType) {
-                case 'renderProp':
-                    return currentElement;
-                case 'childFunction':
-                    return currentElement;
-                case 'child':
-                    return currentElement;
-                case 'childArray':
-                    return currentElement;
-                default:
-                    return currentElement.parentElement;
-            }
-        };
-        _this.createResizeHandler = function (entries) {
-            var _a = _this.props, _b = _a.handleWidth, handleWidth = _b === void 0 ? true : _b, _c = _a.handleHeight, handleHeight = _c === void 0 ? true : _c, onResize = _a.onResize;
-            if (!handleWidth && !handleHeight)
-                return;
-            var notifyResize = function (_a) {
-                var width = _a.width, height = _a.height;
-                if (_this.state.width === width && _this.state.height === height) {
-                    // skip if dimensions haven't changed
-                    return;
-                }
-                if ((_this.state.width === width && !handleHeight) || (_this.state.height === height && !handleWidth)) {
-                    // process `handleHeight/handleWidth` props
-                    return;
-                }
-                onResize === null || onResize === void 0 ? void 0 : onResize(width, height);
-                _this.setState({ width: width, height: height });
-            };
-            entries.forEach(function (entry) {
-                var _a = (entry && entry.contentRect) || {}, width = _a.width, height = _a.height;
-                var shouldSetSize = !_this.skipOnMount && !isSSR();
-                if (shouldSetSize) {
-                    notifyResize({ width: width, height: height });
-                }
-                _this.skipOnMount = false;
-            });
-        };
-        _this.getRenderType = function () {
-            var _a = _this.props, render = _a.render, children = _a.children;
-            if (isFunction(render)) {
-                // DEPRECATED. Use `Child Function Pattern` instead
-                return 'renderProp';
-            }
-            if (isFunction(children)) {
-                return 'childFunction';
-            }
-            if (isValidElement(children)) {
-                return 'child';
-            }
-            if (Array.isArray(children)) {
-                // DEPRECATED. Wrap children with a single parent
-                return 'childArray';
-            }
-            // DEPRECATED. Use `Child Function Pattern` instead
-            return 'parent';
-        };
-        var skipOnMount = props.skipOnMount, refreshMode = props.refreshMode, _a = props.refreshRate, refreshRate = _a === void 0 ? 1000 : _a, refreshOptions = props.refreshOptions;
-        _this.state = {
-            width: undefined,
-            height: undefined
-        };
-        _this.sizeRef = {
-            current: _this.state
-        };
-        _this.skipOnMount = skipOnMount;
-        _this.targetRef = createRef();
-        _this.observableElement = null;
-        if (isSSR()) {
-            return _this;
-        }
-        _this.resizeHandler = patchResizeCallback(_this.createResizeHandler, refreshMode, refreshRate, refreshOptions);
-        _this.resizeObserver = new window.ResizeObserver(_this.resizeHandler);
-        return _this;
-    }
-    ResizeDetector.prototype.componentDidMount = function () {
-        this.attachObserver();
-    };
-    ResizeDetector.prototype.componentDidUpdate = function () {
-        this.attachObserver();
-        this.sizeRef.current = this.state;
-    };
-    ResizeDetector.prototype.componentWillUnmount = function () {
-        if (isSSR()) {
-            return;
-        }
-        this.observableElement = null;
-        this.resizeObserver.disconnect();
-        this.cancelHandler();
-    };
-    ResizeDetector.prototype.render = function () {
-        var _a = this.props, render = _a.render, children = _a.children, _b = _a.nodeType, WrapperTag = _b === void 0 ? 'div' : _b;
-        var _c = this.state, width = _c.width, height = _c.height;
-        var childProps = { width: width, height: height, targetRef: this.targetRef };
-        var renderType = this.getRenderType();
-        switch (renderType) {
-            case 'renderProp':
-                return render === null || render === void 0 ? void 0 : render(childProps);
-            case 'childFunction': {
-                var childFunction = children;
-                return childFunction === null || childFunction === void 0 ? void 0 : childFunction(childProps);
-            }
-            case 'child': {
-                // @TODO bug prone logic
-                var child = children;
-                if (child.type && typeof child.type === 'string') {
-                    // child is a native DOM elements such as div, span etc
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    childProps.targetRef; var nativeProps = __rest(childProps, ["targetRef"]);
-                    return cloneElement(child, nativeProps);
-                }
-                // class or functional component otherwise
-                return cloneElement(child, childProps);
-            }
-            case 'childArray': {
-                var childArray = children;
-                return childArray.map(function (el) { return !!el && cloneElement(el, childProps); });
-            }
-            default:
-                return React__default.createElement(WrapperTag, null);
-        }
-    };
-    return ResizeDetector;
-})(PureComponent));function useResizeDetector(_a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.skipOnMount, skipOnMount = _c === void 0 ? false : _c, refreshMode = _b.refreshMode, _d = _b.refreshRate, refreshRate = _d === void 0 ? 1000 : _d, refreshOptions = _b.refreshOptions, _e = _b.handleWidth, handleWidth = _e === void 0 ? true : _e, _f = _b.handleHeight, handleHeight = _f === void 0 ? true : _f, targetRef = _b.targetRef, observerOptions = _b.observerOptions, onResize = _b.onResize;
-    var skipResize = useRef(skipOnMount);
-    var _g = useState({
-        width: undefined,
-        height: undefined
-    }), size = _g[0], setSize = _g[1];
-    // we are going to use this ref to store the last element that was passed to the hook
-    var _h = useState((targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) || null), refElement = _h[0], setRefElement = _h[1];
-    // if targetRef is passed, we need to update the refElement
-    // we have to use setTimeout because ref get assigned after the hook is called
-    // in the future releases we are going to remove targetRef and force users to use ref returned by the hook
-    if (targetRef) {
-        setTimeout(function () {
-            if (targetRef.current !== refElement) {
-                setRefElement(targetRef.current);
-            }
-        }, 0);
-    }
-    // this is a callback that will be called every time the ref is changed
-    // we call setState inside to trigger rerender
-    var onRefChange = useCallback(function (node) {
-        if (node !== refElement) {
-            setRefElement(node);
-        }
-    }, [refElement]);
-    // adding `current` to make it compatible with useRef shape
-    onRefChange.current = refElement;
-    useEffect(function () {
-        return function () {
-            // component is unmounted
-            // clear ref to avoid memory leaks
-            setRefElement(null);
-            onRefChange.current = null;
-        };
-    }, []);
-    var shouldSetSize = useCallback(function (prevSize, nextSize) {
-        if (prevSize.width === nextSize.width && prevSize.height === nextSize.height) {
-            // skip if dimensions haven't changed
-            return false;
-        }
-        if ((prevSize.width === nextSize.width && !handleHeight) ||
-            (prevSize.height === nextSize.height && !handleWidth)) {
-            // process `handleHeight/handleWidth` props
-            return false;
-        }
-        return true;
-    }, [handleWidth, handleHeight]);
-    var resizeCallback = useCallback(function (entries) {
-        if (!handleWidth && !handleHeight)
-            return;
-        if (skipResize.current) {
-            skipResize.current = false;
-            return;
-        }
-        entries.forEach(function (entry) {
-            var _a = (entry === null || entry === void 0 ? void 0 : entry.contentRect) || {}, width = _a.width, height = _a.height;
-            setSize(function (prevSize) {
-                if (!shouldSetSize(prevSize, { width: width, height: height }))
-                    return prevSize;
-                return { width: width, height: height };
-            });
-        });
-    }, [handleWidth, handleHeight, skipResize, shouldSetSize]);
-    var resizeHandler = useCallback(patchResizeCallback(resizeCallback, refreshMode, refreshRate, refreshOptions), [
-        resizeCallback,
-        refreshMode,
-        refreshRate,
-        refreshOptions
-    ]);
-    // on refElement change
-    useEffect(function () {
-        var resizeObserver;
-        if (refElement) {
-            resizeObserver = new window.ResizeObserver(resizeHandler);
-            resizeObserver.observe(refElement, observerOptions);
-        }
-        else {
-            if (size.width || size.height) {
-                setSize({ width: undefined, height: undefined });
-            }
-        }
-        return function () {
-            var _a, _b, _c;
-            (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
-            (_c = (_b = resizeHandler).cancel) === null || _c === void 0 ? void 0 : _c.call(_b);
-        };
-    }, [resizeHandler, refElement]);
-    useEffect(function () {
-        onResize === null || onResize === void 0 ? void 0 : onResize(size.width, size.height);
-    }, [size]);
-    return __assign$2({ ref: onRefChange }, size);
-}
-
-/* *
- * 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)
- * */
-var getTimeDimension = function getTimeDimension(dimensions) {
-  return dimensions.find(function (dimension) {
-    return dimension.name === 'time' && dimension.currentValue !== undefined;
-  });
-};
-var formatTime = function formatTime(time, timeFormat) {
-  return dateUtils.dateToString(dateUtils.utc(time), timeFormat);
-};
-var defaultTimeFormat = "EEE dd MMM yyyy HH:mm 'UTC'";
-var MapTime = function MapTime(_ref) {
-  var dimensions = _ref.dimensions,
-    _ref$timeFormat = _ref.timeFormat,
-    timeFormat = _ref$timeFormat === void 0 ? defaultTimeFormat : _ref$timeFormat;
-  var timeDimension = getTimeDimension(dimensions);
-  if (!timeDimension) {
-    return null;
-  }
-  var mapTime = formatTime(timeDimension.currentValue, timeFormat);
-  return /*#__PURE__*/React.createElement(Box$2, {
-    "data-testid": "map-time",
-    sx: {
-      zIndex: 10,
-      justifySelf: 'center',
-      bottom: '12px',
-      position: 'absolute'
-    }
-  }, /*#__PURE__*/React.createElement(Box$2, null, /*#__PURE__*/React.createElement(Typography, {
-    variant: "caption",
-    sx: {
-      fontWeight: 500
-    }
-  }, mapTime)));
-};
-
-/* *
- * 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)
- * */
-var MapView = function MapView(_a) {
-  var children = _a.children,
-    _a$controls = _a.controls,
-    controls = _a$controls === void 0 ? {
-      zoomControls: true
-    } : _a$controls,
-    _a$displayTimeInMap = _a.displayTimeInMap,
-    displayTimeInMap = _a$displayTimeInMap === void 0 ? true : _a$displayTimeInMap,
-    _onWMJSMount = _a.onWMJSMount,
-    props = __rest$1(_a, ["children", "controls", "displayTimeInMap", "onWMJSMount"]);
-  var dimensions = props.dimensions,
-    mapIdProp = props.mapId;
-  var wmjsMapRef = React.useRef(null);
-  var mapId = React.useRef(mapIdProp).current;
-  if (mapIdProp !== mapId) {
-    console.warn("Warning, MapId ".concat(mapId, " has been updated to ").concat(mapIdProp, " on an already mounted component. Keeping ").concat(mapId));
-  }
-  var _useResizeDetector = useResizeDetector(),
-    ref = _useResizeDetector.ref,
-    height = _useResizeDetector.height,
-    width = _useResizeDetector.width;
-  React.useEffect(function () {
-    if (wmjsMapRef.current && !!width && !!height) {
-      var _wmjsMapRef$current$g = wmjsMapRef.current.getSize(),
-        mapHeight = _wmjsMapRef$current$g.height,
-        mapWidth = _wmjsMapRef$current$g.width;
-      if (width !== mapWidth || height !== mapHeight) {
-        wmjsMapRef.current.setSize(Math.ceil(width), Math.ceil(height));
-      }
-    }
-  }, [width, height]);
-  var reactMapViewProps = Object.assign(Object.assign({}, props), {
-    mapId: mapId
-  });
-  return /*#__PURE__*/React.createElement(Box$2, {
-    ref: ref,
-    sx: {
-      display: 'grid',
-      width: '100%',
-      height: '100%',
-      position: 'relative',
-      overflow: 'hidden'
-    }
-  }, controls && controls.zoomControls && /*#__PURE__*/React.createElement(MapControls, {
-    style: {
-      top: 0,
-      position: 'absolute'
-    }
-  }, /*#__PURE__*/React.createElement(ZoomControls, {
-    onZoomIn: function onZoomIn() {
-      var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-      wmjsMap.zoomIn(undefined);
-    },
-    onZoomOut: function onZoomOut() {
-      var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-      wmjsMap.zoomOut();
-    },
-    onZoomReset: function onZoomReset() {
-      var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-      wmjsMap.zoomToLayer(wmjsMap.getActiveLayer());
-    }
-  })), /*#__PURE__*/React.createElement(Box$2, {
-    sx: {
-      gridColumnStart: 1,
-      gridRowStart: 1
-    }
-  }, /*#__PURE__*/React.createElement(ReactMapView, Object.assign({}, reactMapViewProps, {
-    showLegend: false,
-    displayTimeInMap: false,
-    onWMJSMount: function onWMJSMount(id) {
-      wmjsMapRef.current = webmapUtils.getWMJSMapById(id);
-      if (_onWMJSMount) {
-        _onWMJSMount(id);
-      }
-    }
-  }), children)), displayTimeInMap && dimensions && /*#__PURE__*/React.createElement(MapTime, {
-    dimensions: dimensions
-  }));
-};
-
-var useTouchZoomPan = function useTouchZoomPan(mapIsActive, mapId) {
-  var _React$useState = React.useState(0),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    firstTouchX = _React$useState2[0],
-    setFirstTouchX = _React$useState2[1];
-  var _React$useState3 = React.useState(0),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    firstTouchY = _React$useState4[0],
-    setFirstTouchY = _React$useState4[1];
-  var _React$useState5 = React.useState(0),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    secondTouchX = _React$useState6[0],
-    setSecondTouchX = _React$useState6[1];
-  var _React$useState7 = React.useState(0),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    secondTouchY = _React$useState8[0],
-    setSecondTouchY = _React$useState8[1];
-  var _React$useState9 = React.useState(0),
-    _React$useState10 = _slicedToArray(_React$useState9, 2),
-    prevDist = _React$useState10[0],
-    setPrevDist = _React$useState10[1];
-  var isPanning = function isPanning(touches) {
-    return (touches === null || touches === void 0 ? void 0 : touches.length) === 1;
-  };
-  var isZooming = function isZooming(touches) {
-    return (touches === null || touches === void 0 ? void 0 : touches.length) === 2;
-  };
-  var isCanvasElement = React.useCallback(function (event) {
-    var target = event.target;
-    return target.tagName === 'CANVAS';
-  }, []);
-  var distance = function distance(x1, y1, x2, y2) {
-    var dx = x1 - x2;
-    var dy = y1 - y2;
-    return Math.sqrt(dx * dx + dy * dy);
-  };
-  var isMatchingWebMapNumbers = function isMatchingWebMapNumbers(firstStr, secondStr) {
-    // Returns true if the same web map (id) number were encountered in both given strings, false otherwise.
-    var webMapNumberBaseFormat = 'WebMapJSMapNo_';
-    if (!firstStr.includes(webMapNumberBaseFormat) || !secondStr.includes(webMapNumberBaseFormat)) {
-      return false;
+var useTouchZoomPan = function useTouchZoomPan(mapIsActive, mapId) {
+  var _React$useState = React.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    firstTouchX = _React$useState2[0],
+    setFirstTouchX = _React$useState2[1];
+  var _React$useState3 = React.useState(0),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    firstTouchY = _React$useState4[0],
+    setFirstTouchY = _React$useState4[1];
+  var _React$useState5 = React.useState(0),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    secondTouchX = _React$useState6[0],
+    setSecondTouchX = _React$useState6[1];
+  var _React$useState7 = React.useState(0),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    secondTouchY = _React$useState8[0],
+    setSecondTouchY = _React$useState8[1];
+  var _React$useState9 = React.useState(0),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    prevDist = _React$useState10[0],
+    setPrevDist = _React$useState10[1];
+  var isPanning = function isPanning(touches) {
+    return (touches === null || touches === void 0 ? void 0 : touches.length) === 1;
+  };
+  var isZooming = function isZooming(touches) {
+    return (touches === null || touches === void 0 ? void 0 : touches.length) === 2;
+  };
+  var isCanvasElement = React.useCallback(function (event) {
+    var target = event.target;
+    return target.tagName === 'CANVAS';
+  }, []);
+  var distance = function distance(x1, y1, x2, y2) {
+    var dx = x1 - x2;
+    var dy = y1 - y2;
+    return Math.sqrt(dx * dx + dy * dy);
+  };
+  var isMatchingWebMapNumbers = function isMatchingWebMapNumbers(firstStr, secondStr) {
+    // Returns true if the same web map (id) number were encountered in both given strings, false otherwise.
+    var webMapNumberBaseFormat = 'WebMapJSMapNo_';
+    if (!firstStr.includes(webMapNumberBaseFormat) || !secondStr.includes(webMapNumberBaseFormat)) {
+      return false;
     }
     var numberMatcher = /\d+/;
     var firstNumber = firstStr.match(numberMatcher)[0];
@@ -20809,7 +20231,7 @@ var ORIGIN_REACTMAPVIEWCONNECT_ONMAPCHANGEDIMENSION = 'ORIGIN_REACTMAPVIEWCONNEC
 var MapViewConnect = function MapViewConnect(_a) {
   var mapId = _a.mapId,
     children = _a.children,
-    props = __rest$1(_a, ["mapId", "children"]);
+    props = __rest(_a, ["mapId", "children"]);
   var mapDimensions = useSelector(function (store) {
     return mapSelectors.getMapDimensions(store, mapId);
   });
@@ -21022,78 +20444,6 @@ var MapViewConnect = function MapViewConnect(_a) {
   }), 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
-var LegendDialog = function LegendDialog(_ref) {
-  var layers = _ref.layers,
-    isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
-    _ref$onMouseDown = _ref.onMouseDown,
-    onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
-    mapId = _ref.mapId,
-    _ref$showMapId = _ref.showMapId,
-    showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId,
-    _ref$order = _ref.order,
-    order = _ref$order === void 0 ? 0 : _ref$order,
-    _ref$source = _ref.source,
-    source = _ref$source === void 0 ? 'app' : _ref$source;
-  return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
-    startPosition: {
-      right: 20,
-      top: 50
-    },
-    minWidth: 100,
-    onClose: onClose,
-    title: showMapId ? "Legend ".concat(mapId) : 'Legend',
-    initialMaxHeight: 440,
-    isOpen: isOpen,
-    "data-testid": "moveable-legend",
-    bounds: "parent",
-    onMouseDown: onMouseDown,
-    order: order,
-    source: source
-  }, /*#__PURE__*/React.createElement(Box$2, {
-    sx: {
-      padding: 0.5
-    }
-  }, layers && layers.length > 0 ? /*#__PURE__*/React.createElement(Box$2, {
-    "data-testid": "LegendList",
-    sx: {
-      display: 'flex',
-      flexDirection: 'column',
-      '&>div:last-child': {
-        marginBottom: 0
-      }
-    }
-  }, layers.map(function (layer) {
-    return /*#__PURE__*/React.createElement(Legend, {
-      key: layer.id,
-      layer: layer
-    });
-  })) : /*#__PURE__*/React.createElement(Typography, {
-    "data-testid": "NoLayers",
-    variant: "body1",
-    style: {
-      fontWeight: 500,
-      fontSize: 14
-    }
-  }, "No layers")));
-};
-
 var LegendConnectComponent = function LegendConnectComponent(_ref) {
   var _ref$showMapId = _ref.showMapId,
     showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId,
@@ -21191,7 +20541,7 @@ var LegendConnectComponent = function LegendConnectComponent(_ref) {
 var LegendConnect = function LegendConnect(_a) {
   var _a$showMapId = _a.showMapId,
     showMapId = _a$showMapId === void 0 ? false : _a$showMapId,
-    props = __rest$1(_a, ["showMapId"]);
+    props = __rest(_a, ["showMapId"]);
   return /*#__PURE__*/React.createElement(LegendConnectComponent, Object.assign({
     showMapId: showMapId
   }, props));
@@ -24818,41 +24168,138 @@ function useMapDrawContext() {
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
+var areaDialogType$1 = uiTypes.DialogTypes.AreaManager;
+var useAreaDrawDialogAction = function useAreaDrawDialogAction(_ref) {
+  var mapId = _ref.mapId,
+    source = _ref.source;
+  var dispatch = useDispatch();
+  var drawingDialogType = "".concat(uiTypes.DialogTypes.DockedDrawingTool, "-").concat(mapId);
+  var geoJSONLayerId = "".concat(mapId, "-geosjon");
+  var currentLayer = useSelector(function (store) {
+    return layerSelectors.getLayerById(store, geoJSONLayerId);
+  });
+  var openAreaDialog = React__default.useCallback(function () {
+    dispatch(uiActions.setActiveMapIdForDialog({
+      type: areaDialogType$1,
+      mapId: mapId,
+      setOpen: true,
+      source: source
+    }));
+  }, [dispatch, mapId, source]);
+  var openDrawDialog = React__default.useCallback(function () {
+    dispatch(uiActions.setActiveMapIdForDialog({
+      type: drawingDialogType,
+      mapId: mapId,
+      setOpen: true,
+      source: source
+    }));
+  }, [dispatch, mapId, source, drawingDialogType]);
+  var closeDrawDialog = React__default.useCallback(function () {
+    dispatch(drawActions.setDrawValues({
+      mapId: mapId,
+      area: undefined,
+      areaName: '',
+      id: ''
+    }));
+    dispatch(uiActions.setActiveMapIdForDialog({
+      type: drawingDialogType,
+      mapId: mapId,
+      setOpen: false,
+      source: source
+    }));
+  }, [dispatch, mapId, drawingDialogType, source]);
+  var closeAreaDialog = React__default.useCallback(function () {
+    if (currentLayer) {
+      dispatch(mapStoreActions.layerDelete({
+        layerId: geoJSONLayerId,
+        mapId: mapId,
+        layerIndex: 0
+      }));
+    }
+    dispatch(uiActions.setActiveMapIdForDialog({
+      type: areaDialogType$1,
+      mapId: mapId,
+      setOpen: false,
+      source: source
+    }));
+    dispatch(drawActions.setDrawValues({
+      mapId: mapId,
+      area: undefined,
+      areaName: '',
+      id: ''
+    }));
+  }, [dispatch, mapId, source, currentLayer, geoJSONLayerId]);
+  return {
+    closeDrawDialog: closeDrawDialog,
+    closeAreaDialog: closeAreaDialog,
+    openAreaDialog: openAreaDialog,
+    openDrawDialog: openDrawDialog
+  };
+};
+
+/* *
+ * 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)
+ * */
+var areaDialogType = uiTypes.DialogTypes.AreaManager;
 var DrawingToolMapButtonConnect = function DrawingToolMapButtonConnect(_ref) {
   var mapId = _ref.mapId,
     _ref$source = _ref.source,
     source = _ref$source === void 0 ? 'app' : _ref$source;
-  var dispatch = useDispatch();
   var _useMapDrawContext = useMapDrawContext(),
     deactivateTool = _useMapDrawContext.deactivateTool;
   // TODO: Re-enable when we put back in the floating version when drawing tools become available: https://gitlab.com/opengeoweb/opengeoweb/-/issues/3872
-  var dialogType = "".concat(uiTypes.DialogTypes.DockedDrawingTool, "-").concat(mapId);
-  // const dialogType = isMultiMap
+  var drawingDialogType = "".concat(uiTypes.DialogTypes.DockedDrawingTool, "-").concat(mapId);
+  // const drawingDialogType = isMultiMap
   //   ? `${uiTypes.DialogTypes.DrawingTool}-${mapId}`
   //   : uiTypes.DialogTypes.DrawingTool;
+  var _useAreaDrawDialogAct = useAreaDrawDialogAction({
+      mapId: mapId,
+      source: source
+    }),
+    closeAreaDialog = _useAreaDrawDialogAct.closeAreaDialog,
+    openDrawDialog = _useAreaDrawDialogAct.openDrawDialog,
+    closeDrawDialog = _useAreaDrawDialogAct.closeDrawDialog;
   var currentActiveMapId = useSelector(function (store) {
-    return uiSelectors.getDialogMapId(store, dialogType);
+    return uiSelectors.getDialogMapId(store, drawingDialogType);
   });
-  var isOpenInStore = useSelector(function (store) {
-    return uiSelectors.getisDialogOpen(store, dialogType);
+  var isDrawDialogOpen = useSelector(function (store) {
+    return uiSelectors.getisDialogOpen(store, drawingDialogType);
   });
-  var openDrawingToolDialog = React.useCallback(function () {
-    var shouldOpen = currentActiveMapId !== mapId ? true : !isOpenInStore;
-    if (!shouldOpen) {
-      deactivateTool();
+  var isAreaDialogOpen = useSelector(function (store) {
+    return uiSelectors.getisDialogOpen(store, areaDialogType);
+  });
+  var openDrawingDialog = React.useCallback(function () {
+    if (isAreaDialogOpen) {
+      closeAreaDialog();
     }
-    dispatch(uiActions.setActiveMapIdForDialog({
-      type: dialogType,
-      mapId: mapId,
-      setOpen: shouldOpen,
-      source: source
-    }));
-  }, [currentActiveMapId, dialogType, dispatch, isOpenInStore, mapId, source, deactivateTool]);
-  var isOpen = currentActiveMapId === mapId && isOpenInStore;
+    openDrawDialog();
+  }, [isAreaDialogOpen, closeAreaDialog, openDrawDialog]);
+  var closeDrawingDialog = React.useCallback(function () {
+    deactivateTool();
+    closeDrawDialog();
+  }, [deactivateTool, closeDrawDialog]);
+  var onClick = React.useCallback(function () {
+    var shouldOpen = currentActiveMapId !== mapId ? true : !isDrawDialogOpen;
+    shouldOpen ? openDrawingDialog() : closeDrawingDialog();
+  }, [currentActiveMapId, isDrawDialogOpen, mapId, closeDrawingDialog, openDrawingDialog]);
+  var isOpen = currentActiveMapId === mapId && isDrawDialogOpen;
   return /*#__PURE__*/React.createElement(MapControlButton, {
     title: "Drawing Toolbox",
     "data-testid": "drawingToolButton",
-    onClick: openDrawingToolDialog,
+    onClick: onClick,
     isActive: isOpen
   }, /*#__PURE__*/React.createElement(DrawPolygon, null));
 };
@@ -24992,7 +24439,8 @@ var opacityOptions = [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0];
 var getAreaName = function getAreaName(areaName) {
   return areaName || "".concat(dateUtils.dateToString(new Date(), 'dd/MM/yyyy HH:mm', true), " UTC");
 };
-var SAVE_AREA_BUTTON = 'Save area';
+var SAVE_AREA_BUTTON = 'Save new area';
+var UPDATE_AREA_BUTTON = 'Update area';
 var INPUT_AREA = 'Area name';
 var INPUT_OPACITY = 'Opacity';
 var DRAW_EXIT_MODE_MESSAGE = 'press ESC to exit draw mode';
@@ -25020,7 +24468,7 @@ var DrawingToolForm = function DrawingToolForm(_ref) {
     handleSubmit(function (formValues) {
       // remove unneeded properties
       formValues.opacity;
-        var allFormValues = __rest$1(formValues, ["opacity"]);
+        var allFormValues = __rest(formValues, ["opacity"]);
       onSubmitForm(Object.assign(Object.assign({}, allFormValues), {
         area: geoJSON,
         id: id
@@ -25168,11 +24616,14 @@ var DrawingToolForm = function DrawingToolForm(_ref) {
     variant: "primary",
     onClick: onSubmit,
     sx: {
-      width: '100%'
+      width: '100%',
+      textTransform: 'none'
     },
     "data-testid": "saveDrawingFormButton",
-    disabled: isLoading || hasErrors
-  }, SAVE_AREA_BUTTON))));
+    // TODO: re-enable for: https://gitlab.com/opengeoweb/opengeoweb/-/issues/4080
+    // disabled={isLoading || hasErrors}
+    disabled: isLoading || id !== '' || hasErrors
+  }, id !== '' ? UPDATE_AREA_BUTTON : SAVE_AREA_BUTTON))));
 };
 var Wrapper = function Wrapper(props) {
   var _props$id = props.id,
@@ -25217,24 +24668,13 @@ var DrawingToolFormConnect = function DrawingToolFormConnect(_ref) {
     return uiSelectors.getDialogIsLoading(store, "".concat(uiTypes.DialogTypes.DockedDrawingTool, "-").concat(mapId));
   });
   var onSubmitForm = function onSubmitForm(formValues) {
-    dispatch(drawActions.submitDrawValues(Object.assign({
-      mapId: mapId
-    }, formValues)));
-  };
-  var onUnMount = function onUnMount() {
-    dispatch(drawActions.setDrawValues({
+    dispatch(drawActions.submitDrawValues({
       mapId: mapId,
-      area: undefined,
-      areaName: '',
-      id: ''
+      area: formValues.area,
+      name: formValues.areaName,
+      scope: 'user'
     }));
   };
-  React.useEffect(function () {
-    return function () {
-      onUnMount();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   return /*#__PURE__*/React.createElement(Wrapper, {
     id: drawing === null || drawing === void 0 ? void 0 : drawing.id,
     onSubmitForm: onSubmitForm,
@@ -25283,7 +24723,6 @@ var DrawingToolConnect = function DrawingToolConnect(_ref) {
     isDocked = _ref$isDocked === void 0 ? false : _ref$isDocked,
     _ref$source = _ref.source,
     source = _ref$source === void 0 ? 'app' : _ref$source;
-  // const dispatch = useDispatch();
   var dialogType = getDialogType(initialMapId, isMultiMap, isDocked);
   var _useMapDrawContext = useMapDrawContext(),
     deactivateTool = _useMapDrawContext.deactivateTool;
@@ -25293,10 +24732,14 @@ var DrawingToolConnect = function DrawingToolConnect(_ref) {
   // In case of a docked drawing toolbox or multimap, use the map id that is passed
   // For floating drawingtoolbox, use the currently active, selected mapid
   var mapId = initialMapId || activeMapId;
+  var _useAreaDrawDialogAct = useAreaDrawDialogAction({
+      mapId: mapId,
+      source: source
+    }),
+    closeDrawDialog = _useAreaDrawDialogAct.closeDrawDialog;
   var _useSetupDialog = useSetupDialog(dialogType, source),
     dialogOrder = _useSetupDialog.dialogOrder,
     setDialogOrder = _useSetupDialog.setDialogOrder,
-    onCloseDialog = _useSetupDialog.onCloseDialog,
     isDialogOpen = _useSetupDialog.isDialogOpen,
     uiSource = _useSetupDialog.uiSource,
     uiIsLoading = _useSetupDialog.uiIsLoading,
@@ -25327,8 +24770,8 @@ var DrawingToolConnect = function DrawingToolConnect(_ref) {
   // };
   var shownTitle = showMapIdInTitle ? "".concat(title, " ").concat(mapId) : title;
   var onClose = function onClose() {
-    onCloseDialog();
     deactivateTool();
+    closeDrawDialog();
   };
   if (!isDialogOpen) {
     return null;
@@ -25417,7 +24860,7 @@ var BaseConfigurableMapConnect = function BaseConfigurableMapConnect(_a) {
     shouldDisplayDrawControls = _a$shouldDisplayDrawC === void 0 ? false : _a$shouldDisplayDrawC,
     mapControls = _a.mapControls,
     children = _a.children,
-    props = __rest$1(_a, ["id", "dockedLayerManagerSize", "title", "layers", "dimensions", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "shouldShowDockedLayerManager", "showClock", "displayGetFeatureInfoButtonInMap", "shouldDisplayDrawControls", "mapControls", "children"]);
+    props = __rest(_a, ["id", "dockedLayerManagerSize", "title", "layers", "dimensions", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "shouldShowDockedLayerManager", "showClock", "displayGetFeatureInfoButtonInMap", "shouldDisplayDrawControls", "mapControls", "children"]);
   var dispatch = useDispatch();
   var mapId = React__default.useRef(id || webmapUtils.generateMapId()).current;
   React__default.useEffect(function () {
@@ -25672,524 +25115,6 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
   }));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var DWD = {
-  name: 'DWD',
-  url: 'https://maps.dwd.de/geoserver/ows?',
-  id: 'dwd'
-};
-var nationaalgeoregister = {
-  name: 'nationaalgeoregister.nl',
-  url: 'https://geodata.nationaalgeoregister.nl/cbsgebiedsindelingen/wms?request=GetCapabilities&service=wms',
-  id: 'nationaalgeoregister'
-};
-var KNMImsgcpp = {
-  name: 'KNMImsgcpp',
-  url: 'https://adaguc-server-msg-cpp-portal.pmc.knmi.cloud/wms?DATASET=msgrt&',
-  id: 'msgcpp-ogc-realtime'
-};
-var HeiGit = {
-  name: 'HeiGit',
-  url: 'https://maps.heigit.org/osm-wms/service',
-  id: 'HeiGit-osm-wms'
-};
-var ArcGisCanvas = {
-  name: 'ArcGisCanvas',
-  url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/',
-  id: 'ArcGisCanvas'
-};
-var KNMIgeoservicesRadar = {
-  name: 'KNMIgeoservicesRadar',
-  url: 'https://geoservices.knmi.nl/wms?dataset=RADAR&',
-  id: 'KNMIgeoservicesRadar'
-};
-var KNMIgeoservicesObs = {
-  name: 'KNMIgeoservicesObs',
-  url: 'https://geoservices.knmi.nl/adagucserver?dataset=OBS',
-  id: 'KNMIgeoservicesObs'
-};
-var KNMIgeoservicesKlimaatAtlas = {
-  name: 'KNMIgeoservicesKlimaatAtlas',
-  url: 'https://geoservices.knmi.nl/wms?DATASET=gsie-dataset&SERVICE=WMS&',
-  id: 'KNMIgeoservicesKlimaatAtlas'
-};
-var KNMIgeoservicesHarmonie = {
-  name: 'KNMIgeoservicesHarmonie',
-  url: 'https://geoservices.knmi.nl/wms?DATASET=HARM_N25&',
-  id: 'KNMIgeoservicesKliKNMIgeoservicesHarmoniemaatAtlas'
-};
-var KNMIgeoservicesHarmonieMLService = {
-  name: 'KNMI Harmonie ML',
-  url: 'https://geoservices.knmi.nl/wms?DATASET=HARM_N25_ML&SERVICE=WMS&',
-  id: 'harmonieML'
-};
-var MetNorwayService = {
-  name: 'MetNorwayService',
-  url: 'https://wms-e1.geoweb.met.no/wms?',
-  id: 'MetNorwayService'
-};
-var FMIopenwms = {
-  name: 'FMIopenwms',
-  url: 'https://openwms.fmi.fi/geoserver/wms?',
-  id: 'FMIopenwms'
-};
-var DWDObservations = {
-  name: 'DWDObservations',
-  url: 'https://maps.dwd.de/geoserver/dwd/Wetter_Beobachtungen/ows?',
-  id: 'DWDObservations'
-};
-var DWDWarnings = {
-  name: 'DWDWarnings',
-  url: 'https://maps.dwd.de/geoserver/dwd/Warnungen_Gemeinden_vereinigt/ows?',
-  id: 'DWDWarnings'
-};
-var DWDWXProdukt = {
-  name: 'DWDWXProdukt',
-  url: 'https://maps.dwd.de/geoserver/dwd/WX-Produkt/ows?',
-  id: 'DWDWXProdukt'
-};
-var EUMETSAT = {
-  name: 'EUMETSAT',
-  url: 'https://view.eumetsat.int/geoserver/wms?',
-  id: 'EUMETSAT'
-};
-var eumetviewEUMETSAT = {
-  name: 'eumetviewEUMETSAT',
-  url: 'https://eumetview.eumetsat.int/geoserv/wms?',
-  id: 'eumetviewEUMETSAT'
-};
-var ECMWFPublicService = {
-  name: 'ECMWF',
-  url: 'https://eccharts.ecmwf.int/wms/?token=public',
-  id: 'ecmwf'
-};
-var MeteoCanada = {
-  name: 'Meteo Canada',
-  url: 'https://geo.weather.gc.ca/geomet/?lang=en&',
-  id: 'MeteoCanada'
-};
-
-var publicServices = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  DWD: DWD,
-  nationaalgeoregister: nationaalgeoregister,
-  KNMImsgcpp: KNMImsgcpp,
-  HeiGit: HeiGit,
-  ArcGisCanvas: ArcGisCanvas,
-  KNMIgeoservicesRadar: KNMIgeoservicesRadar,
-  KNMIgeoservicesObs: KNMIgeoservicesObs,
-  KNMIgeoservicesKlimaatAtlas: KNMIgeoservicesKlimaatAtlas,
-  KNMIgeoservicesHarmonie: KNMIgeoservicesHarmonie,
-  KNMIgeoservicesHarmonieMLService: KNMIgeoservicesHarmonieMLService,
-  MetNorwayService: MetNorwayService,
-  FMIopenwms: FMIopenwms,
-  DWDObservations: DWDObservations,
-  DWDWarnings: DWDWarnings,
-  DWDWXProdukt: DWDWXProdukt,
-  EUMETSAT: EUMETSAT,
-  eumetviewEUMETSAT: eumetviewEUMETSAT,
-  ECMWFPublicService: ECMWFPublicService,
-  MeteoCanada: MeteoCanada
-});
-
-/* *
- * 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)
- * */
-var baseLayer$1 = {
-  name: 'arcGisSat',
-  title: 'arcGisSat',
-  type: 'twms',
-  layerType: LayerType.baseLayer,
-  enabled: true,
-  id: webmapUtils.generateLayerId()
-};
-// Base Layers List
-var baseLayerOpenStreetMapNL$1 = {
-  id: 'base-layer-2',
-  name: 'OpenStreetMap_NL',
-  type: 'twms',
-  layerType: LayerType.baseLayer,
-  enabled: true
-};
-var baseLayerArcGisCanvas$1 = {
-  service: ArcGisCanvas.url,
-  id: webmapUtils.generateLayerId(),
-  name: 'arcGisCanvas',
-  type: 'twms',
-  enabled: true,
-  layerType: LayerType.baseLayer
-};
-var baseLayerWorldMap$1 = {
-  id: webmapUtils.generateLayerId(),
-  name: 'WorldMap',
-  type: 'twms',
-  layerType: LayerType.baseLayer,
-  enabled: true
-};
-var baseLayerHeiGit = {
-  service: HeiGit.url,
-  id: webmapUtils.generateLayerId(),
-  name: 'osm_auto:all',
-  layerType: LayerType.baseLayer
-};
-// KNMI msgcpp List
-var msgCppLayer = {
-  // doesn't work with https
-  service: KNMImsgcpp.url,
-  name: 'lwe_precipitation_rate',
-  format: 'image/png',
-  enabled: true,
-  style: 'precip-transparent/nearest',
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-// Nederlandse Nationaal Georegister Layers list
-var veiligheidsRegiosGebiedsIndelingenLabels = {
-  service: nationaalgeoregister.url,
-  name: 'cbsgebiedsindelingen:cbs_veiligheidsregio_2020_labelpoint',
-  style: 'CBS_Label',
-  enabled: false,
-  layerType: LayerType.mapLayer
-};
-var veiligheidsRegiosGebiedsIndelingen = {
-  service: nationaalgeoregister.url,
-  name: 'cbsgebiedsindelingen:cbs_veiligheidsregio_2020_gegeneraliseerd',
-  style: 'CBS_Gebiedsindeling',
-  enabled: false,
-  layerType: LayerType.mapLayer
-};
-// KNMI Geoservices Layers List
-var radarLayer$1 = {
-  service: KNMIgeoservicesRadar.url,
-  name: 'RAD_NL25_PCP_CM',
-  format: 'image/png',
-  enabled: true,
-  style: 'radar/nearest',
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var radarLayerWithError = {
-  service: KNMIgeoservicesRadar.url,
-  name: 'radarLayer',
-  format: 'image/png',
-  enabled: true,
-  style: 'knmiradar/nearest',
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var obsAirTemperature = {
-  service: KNMIgeoservicesObs.url,
-  name: '10M/ta',
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var obsWind = {
-  service: KNMIgeoservicesObs.url,
-  name: '10M/wind',
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var obsAirPressureAtSeaLevel = {
-  service: KNMIgeoservicesObs.url,
-  name: '10M/pp',
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var obsRelativeHumidity = {
-  service: KNMIgeoservicesObs.url,
-  name: '10M/rh',
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var obsGlobalSolarRadiation = {
-  service: KNMIgeoservicesObs.url,
-  name: '10M/qg',
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var obsPrecipitationIntensityPWS = {
-  service: KNMIgeoservicesObs.url,
-  name: '10M/pg',
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var harmonieRelativeHumidityPl = {
-  service: KNMIgeoservicesHarmonie.url,
-  name: 'relative_humidity__at_pl',
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer,
-  enabled: true
-};
-var harmonieWindPl = {
-  service: KNMIgeoservicesHarmonie.url,
-  name: 'wind__at_pl',
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer,
-  enabled: true
-};
-var harmonieAirTemperature = {
-  service: KNMIgeoservicesHarmonie.url,
-  name: 'air_temperature__at_2m',
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer,
-  enabled: true
-};
-var harmoniePrecipitation = {
-  service: KNMIgeoservicesHarmonie.url,
-  name: 'precipitation_flux',
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer,
-  enabled: true
-};
-var harmoniePressure = {
-  service: KNMIgeoservicesHarmonie.url,
-  name: 'air_pressure_at_sea_level',
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer,
-  enabled: true
-};
-var harmonieWindFlags = {
-  service: KNMIgeoservicesHarmonie.url,
-  name: 'wind__at_10m',
-  enabled: true,
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var klimaatAtlasTG3 = {
-  service: KNMIgeoservicesKlimaatAtlas.url,
-  name: 'TG3',
-  enabled: true,
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-// DWD Layers List
-var dwdWarningLayer = {
-  service: DWDWarnings.url,
-  name: 'Warnungen_Gemeinden_vereinigt',
-  format: 'image/png',
-  // style: 'warnungen_gemeinden_vereinigt_event_seamless_param',
-  enabled: true,
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var dwdRadarLayer = {
-  service: DWDWXProdukt.url,
-  name: 'WX-Produkt',
-  format: 'image/png',
-  enabled: true,
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-// this needs authentication to work
-var dwdObservationsWetterLayer = {
-  service: DWDObservations.url,
-  name: 'Wetter_Beobachtungen',
-  style: 'Wetter_Symbole',
-  format: 'image/png',
-  enabled: true,
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-  // headers: [{ name: 'Authorization', value: 'Basic ...' }]
-};
-
-var dwdObservationsWetterLayerWithHeader = {
-  service: DWDObservations.url,
-  name: 'Wetter_Beobachtungen',
-  style: 'Wetter_Symbole',
-  format: 'image/png',
-  enabled: true,
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer,
-  headers: [{
-    name: 'authorization',
-    value: 'Basic aW50cmFuZXQtdXNlcjpDQnMjMTEh'
-  }]
-};
-// this needs authentication to work
-var dwdObservationsWindLayer = {
-  service: DWDObservations.url,
-  name: 'Wetter_Beobachtungen',
-  style: 'Wetter_Wind',
-  format: 'image/png',
-  enabled: true,
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-// FMI open wms Layers List
-var FMITemp = {
-  service: FMIopenwms.url,
-  name: 'temperature-forecast',
-  format: 'image/png',
-  enabled: true,
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-// Met Norway Layers List
-var MetNoTemp = {
-  service: MetNorwayService.url,
-  name: 'thredds_meps_latest_wind',
-  format: 'image/png',
-  enabled: true,
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var metNorwayWind1 = {
-  service: MetNorwayService.url,
-  name: 'thredds_meps_latest_wind',
-  format: 'image/png',
-  enabled: true,
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var metNorwayWind2 = {
-  service: MetNorwayService.url,
-  name: 'thredds_aromearctic_extracted_t',
-  format: 'image/png',
-  enabled: true,
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var metNorwayWind3 = {
-  service: MetNorwayService.url,
-  name: 'thredds_nk800_temperature',
-  format: 'image/png',
-  enabled: true,
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var metNorwayLatestT = {
-  service: MetNorwayService.url,
-  name: 'thredds_meps_latest_t',
-  format: 'image/png',
-  enabled: true,
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var metNorwaySalinaty = {
-  service: MetNorwayService.url,
-  name: 'thredds_barents_2_5km_1h_salinity',
-  format: 'image/png',
-  enabled: true,
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var msgFesEUMETSAT = {
-  service: EUMETSAT.url,
-  name: 'msg_fes:rgb_eview',
-  enabled: true,
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var msgNaturalenhncdEUMETSAT = {
-  service: eumetviewEUMETSAT.url,
-  name: 'meteosat:msg_naturalenhncd',
-  enabled: true,
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var msgAshEUMETSAT = {
-  service: eumetviewEUMETSAT.url,
-  name: 'meteosat:msg_ash',
-  enabled: true,
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var msgCthEUMETSAT = {
-  service: eumetviewEUMETSAT.url,
-  name: 'meteosat:msg_cth',
-  enabled: true,
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var msgFogEUMETSAT = {
-  service: eumetviewEUMETSAT.url,
-  name: 'meteosat:msg_fog',
-  enabled: true,
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var msgNaturalEUMETSAT = {
-  service: eumetviewEUMETSAT.url,
-  name: 'meteosat:msg_natural',
-  enabled: true,
-  id: webmapUtils.generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-
-var publicLayers = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  defaultLayers: defaultLayers,
-  baseLayer: baseLayer$1,
-  baseLayerOpenStreetMapNL: baseLayerOpenStreetMapNL$1,
-  baseLayerArcGisCanvas: baseLayerArcGisCanvas$1,
-  baseLayerWorldMap: baseLayerWorldMap$1,
-  baseLayerHeiGit: baseLayerHeiGit,
-  msgCppLayer: msgCppLayer,
-  veiligheidsRegiosGebiedsIndelingenLabels: veiligheidsRegiosGebiedsIndelingenLabels,
-  veiligheidsRegiosGebiedsIndelingen: veiligheidsRegiosGebiedsIndelingen,
-  radarLayer: radarLayer$1,
-  radarLayerWithError: radarLayerWithError,
-  obsAirTemperature: obsAirTemperature,
-  obsWind: obsWind,
-  obsAirPressureAtSeaLevel: obsAirPressureAtSeaLevel,
-  obsRelativeHumidity: obsRelativeHumidity,
-  obsGlobalSolarRadiation: obsGlobalSolarRadiation,
-  obsPrecipitationIntensityPWS: obsPrecipitationIntensityPWS,
-  harmonieRelativeHumidityPl: harmonieRelativeHumidityPl,
-  harmonieWindPl: harmonieWindPl,
-  harmonieAirTemperature: harmonieAirTemperature,
-  harmoniePrecipitation: harmoniePrecipitation,
-  harmoniePressure: harmoniePressure,
-  harmonieWindFlags: harmonieWindFlags,
-  klimaatAtlasTG3: klimaatAtlasTG3,
-  dwdWarningLayer: dwdWarningLayer,
-  dwdRadarLayer: dwdRadarLayer,
-  dwdObservationsWetterLayer: dwdObservationsWetterLayer,
-  dwdObservationsWetterLayerWithHeader: dwdObservationsWetterLayerWithHeader,
-  dwdObservationsWindLayer: dwdObservationsWindLayer,
-  FMITemp: FMITemp,
-  MetNoTemp: MetNoTemp,
-  metNorwayWind1: metNorwayWind1,
-  metNorwayWind2: metNorwayWind2,
-  metNorwayWind3: metNorwayWind3,
-  metNorwayLatestT: metNorwayLatestT,
-  metNorwaySalinaty: metNorwaySalinaty,
-  msgFesEUMETSAT: msgFesEUMETSAT,
-  msgNaturalenhncdEUMETSAT: msgNaturalenhncdEUMETSAT,
-  msgAshEUMETSAT: msgAshEUMETSAT,
-  msgCthEUMETSAT: msgCthEUMETSAT,
-  msgFogEUMETSAT: msgFogEUMETSAT,
-  msgNaturalEUMETSAT: msgNaturalEUMETSAT
-});
-
 var useGetLatestReferenceTime = function useGetLatestReferenceTime(inputLayer) {
   var _React$useState = React.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -26261,7 +25186,7 @@ var makeMapPreset = function makeMapPreset(timeIncrement, uniqueId, referenceTim
 };
 var ModelRunInterval = function ModelRunInterval(_ref) {
   var _ref$layers = _ref.layers,
-    layers = _ref$layers === void 0 ? [harmoniePressure, harmonieWindFlags, harmoniePrecipitation] : _ref$layers,
+    layers = _ref$layers === void 0 ? [publicLayers.harmoniePressure, publicLayers.harmonieWindFlags, publicLayers.harmoniePrecipitation] : _ref$layers,
     syncGroupsIds = _ref.syncGroupsIds,
     _ref$interval = _ref.interval,
     interval = _ref$interval === void 0 ? 3 : _ref$interval,
@@ -26836,7 +25761,7 @@ var SubmenuWrapper = function SubmenuWrapper(_a) {
     sx = _a.sx,
     setSubmenu = _a.setSubmenu,
     title = _a.title,
-    props = __rest$1(_a, ["children", "closeButtonIcon", "sx", "setSubmenu", "title"]);
+    props = __rest(_a, ["children", "closeButtonIcon", "sx", "setSubmenu", "title"]);
   return /*#__PURE__*/React__default.createElement(Card, Object.assign({}, props, {
     sx: Object.assign({
       position: 'relative'
@@ -27123,7 +26048,7 @@ var TimeStepSelector = function TimeStepSelector(_a) {
     value = _a.value,
     setValue = _a.setValue,
     defaultTimeStep = _a.defaultTimeStep,
-    props = __rest$1(_a, ["dropdownButtonIcon", "value", "setValue", "defaultTimeStep"]);
+    props = __rest(_a, ["dropdownButtonIcon", "value", "setValue", "defaultTimeStep"]);
   var availableOptions = allOptions.filter(function (option) {
     return Number(option) >= defaultTimeStep;
   });
@@ -27295,7 +26220,7 @@ var CustomSelect = function CustomSelect(_a) {
     itemPostFix = _a.itemPostFix,
     value = _a.value,
     setValue = _a.setValue,
-    props = __rest$1(_a, ["amountOfOptions", "dropdownButtonIcon", "itemPostFix", "value", "setValue"]);
+    props = __rest(_a, ["amountOfOptions", "dropdownButtonIcon", "itemPostFix", "value", "setValue"]);
   var availableOptions = Array.from(Array(amountOfOptions).keys());
   return /*#__PURE__*/React__default.createElement(Select, Object.assign({}, props, {
     "data-testid": "TimeSliderLite-customSelect-".concat(itemPostFix),
@@ -27886,7 +26811,7 @@ var ControlButtonGroup = function ControlButtonGroup(_a) {
   var children = _a.children,
     right = _a.right,
     left = _a.left,
-    props = __rest$1(_a, ["children", "right", "left"]);
+    props = __rest(_a, ["children", "right", "left"]);
   return /*#__PURE__*/React__default.createElement(ButtonGroup, Object.assign({
     orientation: "horizontal",
     fullWidth: true
@@ -28760,7 +27685,7 @@ var TimeSliderLiteConnect = function TimeSliderLiteConnect(_a) {
     isAlwaysVisible = _a$isAlwaysVisible === void 0 ? false : _a$isAlwaysVisible,
     menuSx = _a.menuSx,
     subMenuSx = _a.subMenuSx,
-    timeSliderProps = __rest$1(_a, ["overrideUseTimeRange", "overrideUseTimeStep", "sourceId", "mapId", "isAlwaysVisible", "menuSx", "subMenuSx"]);
+    timeSliderProps = __rest(_a, ["overrideUseTimeRange", "overrideUseTimeStep", "sourceId", "mapId", "isAlwaysVisible", "menuSx", "subMenuSx"]);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     menuOpen = _React$useState2[0],
@@ -29045,7 +27970,7 @@ var SnackbarWrapper = function SnackbarWrapper(_a) {
     isOpen = _a.isOpen,
     onCloseSnackbar = _a.onCloseSnackbar,
     id = _a.id,
-    props = __rest$1(_a, ["children", "isOpen", "onCloseSnackbar", "id"]);
+    props = __rest(_a, ["children", "isOpen", "onCloseSnackbar", "id"]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(Snackbar, Object.assign({
     "data-testid": "snackbarComponent",
     open: isOpen,
@@ -29781,4 +28706,4 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
   }, "Identifier: ", selectedFeatureProperties.identifier)));
 };
 
-export { AppWrapperConnect, ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DrawingToolConnect, DrawingToolMapButtonConnect, HarmonieTempAndPrecipPreset, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LayerSelectConnect, LegendConnect, LegendMapButtonConnect, MapControlButton, MapControls, MapDrawToolProvider, MapView, MapViewConnect, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, RouterWrapperConnect, SnackbarWrapperConnect, SyncGroupViewerConnect, TimeSlider, BackwardForwardStepButtonConnect as TimeSliderBackwardForwardStepButtonConnect, TimeSliderButtonsConnectMemo as TimeSliderButtonsConnect, TimeSliderConnect, TimeSliderLite, TimeSliderLiteConnect, TimeSliderLiteOptionsMenu, OptionsMenuButtonConnect as TimeSliderOptionsMenuButtonConnect, PlayButtonConnect as TimeSliderPlayButtonConnect, ZoomControlConnect, ZoomControls, componentsLookUp, defaultBbox, defaultBox, defaultConfigurations, defaultDelete, defaultIntersectionStyleProperties, defaultPoint, defaultPolygon, drawOptions, filterMapPresets, filterServices, publicLayers, publicServices, store, testLayers, timeSliderUtils, useFetchServices, useMapDrawContext, useMapDrawTool, useSetupDialog };
+export { AppWrapperConnect, ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DrawingToolConnect, DrawingToolMapButtonConnect, HarmonieTempAndPrecipPreset, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LayerSelectConnect, LegendConnect, LegendMapButtonConnect, MapDrawToolProvider, MapViewConnect, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, RouterWrapperConnect, SnackbarWrapperConnect, SyncGroupViewerConnect, TimeSlider, BackwardForwardStepButtonConnect as TimeSliderBackwardForwardStepButtonConnect, TimeSliderButtonsConnectMemo as TimeSliderButtonsConnect, TimeSliderConnect, TimeSliderLite, TimeSliderLiteConnect, TimeSliderLiteOptionsMenu, OptionsMenuButtonConnect as TimeSliderOptionsMenuButtonConnect, PlayButtonConnect as TimeSliderPlayButtonConnect, ZoomControlConnect, componentsLookUp, defaultBbox, defaultBox, defaultConfigurations, defaultDelete, defaultIntersectionStyleProperties, defaultPoint, defaultPolygon, drawOptions, filterMapPresets, filterServices, store, testLayers, timeSliderUtils, useAreaDrawDialogAction, useFetchServices, useMapDrawContext, useMapDrawTool, useSetupDialog };