@opengeoweb/core 6.1.0 → 7.0.0

package/index.esm.js

@@ -1,383 +1,354 @@
 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, WMBBOX, debug, DebugType, WMJSMap, tilesettings, WMLayer } from '@opengeoweb/webmap';
+import { webmapUtils, WMGetServiceFromStore, getCapabilities, LayerType, clearImageCache, WMLayer } from '@opengeoweb/webmap';
 import { jsx } from 'react/jsx-runtime';
 import _, { isEqual as isEqual$1, debounce, groupBy, throttle as throttle$1, clamp as clamp$1, range } from 'lodash';
 import Box$3 from '@mui/material/Box';
 import Typography$1 from '@mui/material/Typography';
 import Grid$1 from '@mui/material/Grid';
-import { LegendLayout, CanvasComponent, MapDrawContainer, 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 { debounce as debounce$2 } from 'throttle-debounce';
 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';
 import { getSagaExtension } from '@redux-eggs/saga-extension';
 
-function _iterableToArrayLimit(arr, i) {
-  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-  if (null != _i) {
-    var _s,
-      _e,
-      _x,
-      _r,
-      _arr = [],
-      _n = !0,
-      _d = !1;
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
     try {
-      if (_x = (_i = _i.call(arr)).next, 0 === i) {
-        if (Object(_i) !== _i) return;
-        _n = !1;
-      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-    } catch (err) {
-      _d = !0, _e = err;
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
     } finally {
       try {
-        if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
       } finally {
-        if (_d) throw _e;
+        if (o) throw n;
       }
     }
-    return _arr;
+    return a;
   }
 }
 function _regeneratorRuntime() {
   _regeneratorRuntime = function () {
-    return exports;
+    return e;
   };
-  var exports = {},
-    Op = Object.prototype,
-    hasOwn = Op.hasOwnProperty,
-    defineProperty = Object.defineProperty || function (obj, key, desc) {
-      obj[key] = desc.value;
+  var t,
+    e = {},
+    r = Object.prototype,
+    n = r.hasOwnProperty,
+    o = Object.defineProperty || function (t, e, r) {
+      t[e] = r.value;
     },
-    $Symbol = "function" == typeof Symbol ? Symbol : {},
-    iteratorSymbol = $Symbol.iterator || "@@iterator",
-    asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
-    toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
-  function define(obj, key, value) {
-    return Object.defineProperty(obj, key, {
-      value: value,
+    i = "function" == typeof Symbol ? Symbol : {},
+    a = i.iterator || "@@iterator",
+    c = i.asyncIterator || "@@asyncIterator",
+    u = i.toStringTag || "@@toStringTag";
+  function define(t, e, r) {
+    return Object.defineProperty(t, e, {
+      value: r,
       enumerable: !0,
       configurable: !0,
       writable: !0
-    }), obj[key];
+    }), t[e];
   }
   try {
     define({}, "");
-  } catch (err) {
-    define = function (obj, key, value) {
-      return obj[key] = value;
+  } catch (t) {
+    define = function (t, e, r) {
+      return t[e] = r;
     };
   }
-  function wrap(innerFn, outerFn, self, tryLocsList) {
-    var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator,
-      generator = Object.create(protoGenerator.prototype),
-      context = new Context(tryLocsList || []);
-    return defineProperty(generator, "_invoke", {
-      value: makeInvokeMethod(innerFn, self, context)
-    }), generator;
+  function wrap(t, e, r, n) {
+    var i = e && e.prototype instanceof Generator ? e : Generator,
+      a = Object.create(i.prototype),
+      c = new Context(n || []);
+    return o(a, "_invoke", {
+      value: makeInvokeMethod(t, r, c)
+    }), a;
   }
-  function tryCatch(fn, obj, arg) {
+  function tryCatch(t, e, r) {
     try {
       return {
         type: "normal",
-        arg: fn.call(obj, arg)
+        arg: t.call(e, r)
       };
-    } catch (err) {
+    } catch (t) {
       return {
         type: "throw",
-        arg: err
+        arg: t
       };
     }
   }
-  exports.wrap = wrap;
-  var ContinueSentinel = {};
+  e.wrap = wrap;
+  var h = "suspendedStart",
+    l = "suspendedYield",
+    f = "executing",
+    s = "completed",
+    y = {};
   function Generator() {}
   function GeneratorFunction() {}
   function GeneratorFunctionPrototype() {}
-  var IteratorPrototype = {};
-  define(IteratorPrototype, iteratorSymbol, function () {
+  var p = {};
+  define(p, a, function () {
     return this;
   });
-  var getProto = Object.getPrototypeOf,
-    NativeIteratorPrototype = getProto && getProto(getProto(values([])));
-  NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype);
-  var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
-  function defineIteratorMethods(prototype) {
-    ["next", "throw", "return"].forEach(function (method) {
-      define(prototype, method, function (arg) {
-        return this._invoke(method, arg);
+  var d = Object.getPrototypeOf,
+    v = d && d(d(values([])));
+  v && v !== r && n.call(v, a) && (p = v);
+  var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
+  function defineIteratorMethods(t) {
+    ["next", "throw", "return"].forEach(function (e) {
+      define(t, e, function (t) {
+        return this._invoke(e, t);
       });
     });
   }
-  function AsyncIterator(generator, PromiseImpl) {
-    function invoke(method, arg, resolve, reject) {
-      var record = tryCatch(generator[method], generator, arg);
-      if ("throw" !== record.type) {
-        var result = record.arg,
-          value = result.value;
-        return value && "object" == typeof value && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) {
-          invoke("next", value, resolve, reject);
-        }, function (err) {
-          invoke("throw", err, resolve, reject);
-        }) : PromiseImpl.resolve(value).then(function (unwrapped) {
-          result.value = unwrapped, resolve(result);
-        }, function (error) {
-          return invoke("throw", error, resolve, reject);
+  function AsyncIterator(t, e) {
+    function invoke(r, o, i, a) {
+      var c = tryCatch(t[r], t, o);
+      if ("throw" !== c.type) {
+        var u = c.arg,
+          h = u.value;
+        return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
+          invoke("next", t, i, a);
+        }, function (t) {
+          invoke("throw", t, i, a);
+        }) : e.resolve(h).then(function (t) {
+          u.value = t, i(u);
+        }, function (t) {
+          return invoke("throw", t, i, a);
         });
       }
-      reject(record.arg);
+      a(c.arg);
     }
-    var previousPromise;
-    defineProperty(this, "_invoke", {
-      value: function (method, arg) {
+    var r;
+    o(this, "_invoke", {
+      value: function (t, n) {
         function callInvokeWithMethodAndArg() {
-          return new PromiseImpl(function (resolve, reject) {
-            invoke(method, arg, resolve, reject);
+          return new e(function (e, r) {
+            invoke(t, n, e, r);
           });
         }
-        return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
+        return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
       }
     });
   }
-  function makeInvokeMethod(innerFn, self, context) {
-    var state = "suspendedStart";
-    return function (method, arg) {
-      if ("executing" === state) throw new Error("Generator is already running");
-      if ("completed" === state) {
-        if ("throw" === method) throw arg;
+  function makeInvokeMethod(e, r, n) {
+    var o = h;
+    return function (i, a) {
+      if (o === f) throw new Error("Generator is already running");
+      if (o === s) {
+        if ("throw" === i) throw a;
         return {
-          value: void 0,
+          value: t,
           done: !0
         };
       }
-      for (context.method = method, context.arg = arg;;) {
-        var delegate = context.delegate;
-        if (delegate) {
-          var delegateResult = maybeInvokeDelegate(delegate, context);
-          if (delegateResult) {
-            if (delegateResult === ContinueSentinel) continue;
-            return delegateResult;
+      for (n.method = i, n.arg = a;;) {
+        var c = n.delegate;
+        if (c) {
+          var u = maybeInvokeDelegate(c, n);
+          if (u) {
+            if (u === y) continue;
+            return u;
           }
         }
-        if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) {
-          if ("suspendedStart" === state) throw state = "completed", context.arg;
-          context.dispatchException(context.arg);
-        } else "return" === context.method && context.abrupt("return", context.arg);
-        state = "executing";
-        var record = tryCatch(innerFn, self, context);
-        if ("normal" === record.type) {
-          if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue;
+        if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
+          if (o === h) throw o = s, n.arg;
+          n.dispatchException(n.arg);
+        } else "return" === n.method && n.abrupt("return", n.arg);
+        o = f;
+        var p = tryCatch(e, r, n);
+        if ("normal" === p.type) {
+          if (o = n.done ? s : l, p.arg === y) continue;
           return {
-            value: record.arg,
-            done: context.done
+            value: p.arg,
+            done: n.done
           };
         }
-        "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg);
+        "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
       }
     };
   }
-  function maybeInvokeDelegate(delegate, context) {
-    var methodName = context.method,
-      method = delegate.iterator[methodName];
-    if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel;
-    var record = tryCatch(method, delegate.iterator, context.arg);
-    if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel;
-    var info = record.arg;
-    return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel);
-  }
-  function pushTryEntry(locs) {
-    var entry = {
-      tryLoc: locs[0]
+  function maybeInvokeDelegate(e, r) {
+    var n = r.method,
+      o = e.iterator[n];
+    if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
+    var i = tryCatch(o, e.iterator, r.arg);
+    if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
+    var a = i.arg;
+    return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
+  }
+  function pushTryEntry(t) {
+    var e = {
+      tryLoc: t[0]
     };
-    1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry);
+    1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
   }
-  function resetTryEntry(entry) {
-    var record = entry.completion || {};
-    record.type = "normal", delete record.arg, entry.completion = record;
+  function resetTryEntry(t) {
+    var e = t.completion || {};
+    e.type = "normal", delete e.arg, t.completion = e;
   }
-  function Context(tryLocsList) {
+  function Context(t) {
     this.tryEntries = [{
       tryLoc: "root"
-    }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0);
-  }
-  function values(iterable) {
-    if (iterable || "" === iterable) {
-      var iteratorMethod = iterable[iteratorSymbol];
-      if (iteratorMethod) return iteratorMethod.call(iterable);
-      if ("function" == typeof iterable.next) return iterable;
-      if (!isNaN(iterable.length)) {
-        var i = -1,
-          next = function next() {
-            for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next;
-            return next.value = undefined, next.done = !0, next;
+    }], t.forEach(pushTryEntry, this), this.reset(!0);
+  }
+  function values(e) {
+    if (e || "" === e) {
+      var r = e[a];
+      if (r) return r.call(e);
+      if ("function" == typeof e.next) return e;
+      if (!isNaN(e.length)) {
+        var o = -1,
+          i = function next() {
+            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
+            return next.value = t, next.done = !0, next;
           };
-        return next.next = next;
+        return i.next = i;
       }
     }
-    throw new TypeError(typeof iterable + " is not iterable");
+    throw new TypeError(typeof e + " is not iterable");
   }
-  return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", {
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
     value: GeneratorFunctionPrototype,
     configurable: !0
-  }), defineProperty(GeneratorFunctionPrototype, "constructor", {
+  }), o(GeneratorFunctionPrototype, "constructor", {
     value: GeneratorFunction,
     configurable: !0
-  }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) {
-    var ctor = "function" == typeof genFun && genFun.constructor;
-    return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name));
-  }, exports.mark = function (genFun) {
-    return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun;
-  }, exports.awrap = function (arg) {
+  }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
+    var e = "function" == typeof t && t.constructor;
+    return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
+  }, e.mark = function (t) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
+  }, e.awrap = function (t) {
     return {
-      __await: arg
+      __await: t
     };
-  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
+  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
     return this;
-  }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) {
-    void 0 === PromiseImpl && (PromiseImpl = Promise);
-    var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl);
-    return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) {
-      return result.done ? result.value : iter.next();
+  }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
+    void 0 === i && (i = Promise);
+    var a = new AsyncIterator(wrap(t, r, n, o), i);
+    return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
+      return t.done ? t.value : a.next();
     });
-  }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () {
+  }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
     return this;
-  }), define(Gp, "toString", function () {
+  }), define(g, "toString", function () {
     return "[object Generator]";
-  }), exports.keys = function (val) {
-    var object = Object(val),
-      keys = [];
-    for (var key in object) keys.push(key);
-    return keys.reverse(), function next() {
-      for (; keys.length;) {
-        var key = keys.pop();
-        if (key in object) return next.value = key, next.done = !1, next;
+  }), e.keys = function (t) {
+    var e = Object(t),
+      r = [];
+    for (var n in e) r.push(n);
+    return r.reverse(), function next() {
+      for (; r.length;) {
+        var t = r.pop();
+        if (t in e) return next.value = t, next.done = !1, next;
       }
       return next.done = !0, next;
     };
-  }, exports.values = values, Context.prototype = {
+  }, e.values = values, Context.prototype = {
     constructor: Context,
-    reset: function (skipTempReset) {
-      if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined);
+    reset: function (e) {
+      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
     },
     stop: function () {
       this.done = !0;
-      var rootRecord = this.tryEntries[0].completion;
-      if ("throw" === rootRecord.type) throw rootRecord.arg;
+      var t = this.tryEntries[0].completion;
+      if ("throw" === t.type) throw t.arg;
       return this.rval;
     },
-    dispatchException: function (exception) {
-      if (this.done) throw exception;
-      var context = this;
-      function handle(loc, caught) {
-        return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught;
-      }
-      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-        var entry = this.tryEntries[i],
-          record = entry.completion;
-        if ("root" === entry.tryLoc) return handle("end");
-        if (entry.tryLoc <= this.prev) {
-          var hasCatch = hasOwn.call(entry, "catchLoc"),
-            hasFinally = hasOwn.call(entry, "finallyLoc");
-          if (hasCatch && hasFinally) {
-            if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
-            if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
-          } else if (hasCatch) {
-            if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
+    dispatchException: function (e) {
+      if (this.done) throw e;
+      var r = this;
+      function handle(n, o) {
+        return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
+      }
+      for (var o = this.tryEntries.length - 1; o >= 0; --o) {
+        var i = this.tryEntries[o],
+          a = i.completion;
+        if ("root" === i.tryLoc) return handle("end");
+        if (i.tryLoc <= this.prev) {
+          var c = n.call(i, "catchLoc"),
+            u = n.call(i, "finallyLoc");
+          if (c && u) {
+            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
+            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
+          } else if (c) {
+            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
           } else {
-            if (!hasFinally) throw new Error("try statement without catch or finally");
-            if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
+            if (!u) throw new Error("try statement without catch or finally");
+            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
           }
         }
       }
     },
-    abrupt: function (type, arg) {
-      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-        var entry = this.tryEntries[i];
-        if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
-          var finallyEntry = entry;
+    abrupt: function (t, e) {
+      for (var r = this.tryEntries.length - 1; r >= 0; --r) {
+        var o = this.tryEntries[r];
+        if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
+          var i = o;
           break;
         }
       }
-      finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null);
-      var record = finallyEntry ? finallyEntry.completion : {};
-      return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record);
+      i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
+      var a = i ? i.completion : {};
+      return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
     },
-    complete: function (record, afterLoc) {
-      if ("throw" === record.type) throw record.arg;
-      return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel;
+    complete: function (t, e) {
+      if ("throw" === t.type) throw t.arg;
+      return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
     },
-    finish: function (finallyLoc) {
-      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-        var entry = this.tryEntries[i];
-        if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel;
+    finish: function (t) {
+      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
+        var r = this.tryEntries[e];
+        if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
       }
     },
-    catch: function (tryLoc) {
-      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-        var entry = this.tryEntries[i];
-        if (entry.tryLoc === tryLoc) {
-          var record = entry.completion;
-          if ("throw" === record.type) {
-            var thrown = record.arg;
-            resetTryEntry(entry);
+    catch: function (t) {
+      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
+        var r = this.tryEntries[e];
+        if (r.tryLoc === t) {
+          var n = r.completion;
+          if ("throw" === n.type) {
+            var o = n.arg;
+            resetTryEntry(r);
           }
-          return thrown;
+          return o;
         }
       }
       throw new Error("illegal catch attempt");
     },
-    delegateYield: function (iterable, resultName, nextLoc) {
+    delegateYield: function (e, r, n) {
       return this.delegate = {
-        iterator: values(iterable),
-        resultName: resultName,
-        nextLoc: nextLoc
-      }, "next" === this.method && (this.arg = undefined), ContinueSentinel;
+        iterator: values(e),
+        resultName: r,
+        nextLoc: n
+      }, "next" === this.method && (this.arg = t), y;
     }
-  }, exports;
-}
-function _typeof$2(obj) {
-  "@babel/helpers - typeof";
-
-  return _typeof$2 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof$2(obj);
-}
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
-  }
-}
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  Object.defineProperty(Constructor, "prototype", {
-    writable: false
-  });
-  return Constructor;
+  }, e;
 }
 function _defineProperty$1(obj, key, value) {
   key = _toPropertyKey(key);
@@ -393,74 +364,6 @@ function _defineProperty$1(obj, key, value) {
   }
   return obj;
 }
-function _inherits(subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function");
-  }
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      writable: true,
-      configurable: true
-    }
-  });
-  Object.defineProperty(subClass, "prototype", {
-    writable: false
-  });
-  if (superClass) _setPrototypeOf$1(subClass, superClass);
-}
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
-function _setPrototypeOf$1(o, p) {
-  _setPrototypeOf$1 = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf$1(o, p);
-}
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
-  try {
-    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-function _assertThisInitialized$1(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-  return self;
-}
-function _possibleConstructorReturn(self, call) {
-  if (call && (typeof call === "object" || typeof call === "function")) {
-    return call;
-  } else if (call !== void 0) {
-    throw new TypeError("Derived constructors may only return object or undefined");
-  }
-  return _assertThisInitialized$1(self);
-}
-function _createSuper(Derived) {
-  var hasNativeReflectConstruct = _isNativeReflectConstruct();
-  return function _createSuperInternal() {
-    var Super = _getPrototypeOf(Derived),
-      result;
-    if (hasNativeReflectConstruct) {
-      var NewTarget = _getPrototypeOf(this).constructor;
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
-    }
-    return _possibleConstructorReturn(this, result);
-  };
-}
 function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -1035,20 +938,20 @@ function _objectSpread2(target) {
   return target;
 }
 
-function _typeof$1(obj) {
+function _typeof(obj) {
   "@babel/helpers - typeof";
 
   if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof$1 = function (obj) {
+    _typeof = function (obj) {
       return typeof obj;
     };
   } else {
-    _typeof$1 = function (obj) {
+    _typeof = function (obj) {
       return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
     };
   }
 
-  return _typeof$1(obj);
+  return _typeof(obj);
 }
 
 function _defineProperty(obj, key, value) {
@@ -2087,7 +1990,7 @@ _detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) {
   var group = {};
   var originalGroup = options.group;
 
-  if (!originalGroup || _typeof$1(originalGroup) != 'object') {
+  if (!originalGroup || _typeof(originalGroup) != 'object') {
     originalGroup = {
       name: originalGroup
     };
@@ -5481,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];
@@ -9068,7 +8971,7 @@ tags.forEach(function (tagName) {
 });
 
 /**
- * @mui/styled-engine v5.13.2
+ * @mui/styled-engine v5.14.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -9723,10 +9626,20 @@ const width = style$3({
 const maxWidth = props => {
   if (props.maxWidth !== undefined && props.maxWidth !== null) {
     const styleFromPropValue = propValue => {
-      var _props$theme;
+      var _props$theme, _props$theme2;
       const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || values[propValue];
+      if (!breakpoint) {
+        return {
+          maxWidth: sizingTransform(propValue)
+        };
+      }
+      if (((_props$theme2 = props.theme) == null || (_props$theme2 = _props$theme2.breakpoints) == null ? void 0 : _props$theme2.unit) !== 'px') {
+        return {
+          maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`
+        };
+      }
       return {
-        maxWidth: breakpoint || sizingTransform(propValue)
+        maxWidth: breakpoint
       };
     };
     return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
@@ -10620,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,
@@ -15786,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: {
@@ -15951,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.
@@ -16710,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.
@@ -20189,1566 +19990,6 @@ var TimeSliderConnect = function TimeSliderConnect(_ref) {
   });
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
-var MapViewLayer = function MapViewLayer(props) {
-  var id = props.id;
-  return /*#__PURE__*/React.createElement(Box$2, {
-    "data-testid": "mapViewLayer",
-    sx: {
-      width: '100%',
-      padding: '2px',
-      margin: 0,
-      wordWrap: 'break-word',
-      border: '1px solid rgba(0, 0, 0, 0.5)',
-      lineHeight: '14px',
-      fontSize: '10px',
-      background: 'rgba(255, 255, 255, 0.5)',
-      display: 'none'
-    }
-  }, /*#__PURE__*/React.createElement("div", null, id), /*#__PURE__*/React.createElement("div", {
-    // eslint-disable-next-line react/no-danger
-    dangerouslySetInnerHTML: {
-      __html: JSON.stringify(props, null, '--').replace(/\n/g, '<br/>')
-    }
-  }));
-};
-
-/* 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * */
-var ReactMapViewLayer = function ReactMapViewLayer(props) {
-  var id = props.id;
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: '100%',
-      padding: '2px',
-      margin: 0,
-      wordWrap: 'break-word',
-      border: '1px solid rgba(0, 0, 0, 0.5)',
-      lineHeight: '14px',
-      fontSize: '10px',
-      background: 'rgba(255, 255, 255, 0.5)',
-      display: 'none'
-    }
-  }, /*#__PURE__*/React.createElement("div", null, id), /*#__PURE__*/React.createElement("div", {
-    // eslint-disable-next-line react/no-danger
-    dangerouslySetInnerHTML: {
-      __html: JSON.stringify(props, null, '--').replace(/\n/g, '<br/>')
-    }
-  }));
-};
-
-/* *
- * 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 setLayerInfo = function setLayerInfo(wmLayer, mapId, onUpdateLayerInformation) {
-  var origin = layerTypes.LayerActionOrigin.ReactMapViewParseLayer;
-  var map = webmapUtils.getWMJSMapById(mapId);
-  /* Update list of layers for service */
-  var updateObject = {
-    origin: origin,
-    layerStyle: {
-      origin: origin,
-      layerId: wmLayer.ReactWMJSLayerId,
-      style: wmLayer.currentStyle
-    },
-    mapDimensions: {
-      mapId: mapId,
-      origin: origin,
-      dimensions: map && map.mapdimensions.map(function (mapdim) {
-        return {
-          units: mapdim.units,
-          currentValue: mapdim.currentValue,
-          name: mapdim.name
-        };
-      }) || []
-    },
-    layerDimensions: {
-      origin: origin,
-      layerId: wmLayer.id,
-      dimensions: wmLayer.dimensions.map(function (dim) {
-        var name = dim.name,
-          units = dim.units,
-          synced = dim.synced;
-        return {
-          name: name,
-          units: units,
-          currentValue: dim.getValue(),
-          minValue: dim.getFirstValue(),
-          maxValue: dim.getLastValue(),
-          timeInterval: dim.getDimInterval(),
-          values: dim.getValues(),
-          synced: synced
-        };
-      })
-    }
-  };
-  onUpdateLayerInformation === null || onUpdateLayerInformation === void 0 ? void 0 : onUpdateLayerInformation(updateObject);
-};
-
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
-}
-
-function requiredArgs(required, args) {
-  if (args.length < required) {
-    throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
-  }
-}
-
-/**
- * @name toDate
- * @category Common Helpers
- * @summary Convert the given argument to an instance of Date.
- *
- * @description
- * Convert the given argument to an instance of Date.
- *
- * If the argument is an instance of Date, the function returns its clone.
- *
- * If the argument is a number, it is treated as a timestamp.
- *
- * If the argument is none of the above, the function returns Invalid Date.
- *
- * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
- *
- * @param {Date|Number} argument - the value to convert
- * @returns {Date} the parsed date in the local time zone
- * @throws {TypeError} 1 argument required
- *
- * @example
- * // Clone the date:
- * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
- * //=> Tue Feb 11 2014 11:30:30
- *
- * @example
- * // Convert the timestamp to date:
- * const result = toDate(1392098430000)
- * //=> Tue Feb 11 2014 11:30:30
- */
-function toDate(argument) {
-  requiredArgs(1, arguments);
-  var argStr = Object.prototype.toString.call(argument);
-
-  // Clone the date
-  if (argument instanceof Date || _typeof(argument) === 'object' && argStr === '[object Date]') {
-    // Prevent the date to lose the milliseconds when passed to new Date() in IE10
-    return new Date(argument.getTime());
-  } else if (typeof argument === 'number' || argStr === '[object Number]') {
-    return new Date(argument);
-  } else {
-    if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {
-      // eslint-disable-next-line no-console
-      console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments");
-      // eslint-disable-next-line no-console
-      console.warn(new Error().stack);
-    }
-    return new Date(NaN);
-  }
-}
-
-/**
- * Days in 1 week.
- *
- * @name daysInWeek
- * @constant
- * @type {number}
- * @default
- */
-
-/**
- * Milliseconds in 1 minute
- *
- * @name millisecondsInMinute
- * @constant
- * @type {number}
- * @default
- */
-var millisecondsInMinute = 60000;
-
-/**
- * @name differenceInMilliseconds
- * @category Millisecond Helpers
- * @summary Get the number of milliseconds between the given dates.
- *
- * @description
- * Get the number of milliseconds between the given dates.
- *
- * @param {Date|Number} dateLeft - the later date
- * @param {Date|Number} dateRight - the earlier date
- * @returns {Number} the number of milliseconds
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // How many milliseconds are between
- * // 2 July 2014 12:30:20.600 and 2 July 2014 12:30:21.700?
- * const result = differenceInMilliseconds(
- *   new Date(2014, 6, 2, 12, 30, 21, 700),
- *   new Date(2014, 6, 2, 12, 30, 20, 600)
- * )
- * //=> 1100
- */
-function differenceInMilliseconds(dateLeft, dateRight) {
-  requiredArgs(2, arguments);
-  return toDate(dateLeft).getTime() - toDate(dateRight).getTime();
-}
-
-var roundingMap = {
-  ceil: Math.ceil,
-  round: Math.round,
-  floor: Math.floor,
-  trunc: function trunc(value) {
-    return value < 0 ? Math.ceil(value) : Math.floor(value);
-  } // Math.trunc is not supported by IE
-};
-
-var defaultRoundingMethod = 'trunc';
-function getRoundingMethod(method) {
-  return method ? roundingMap[method] : roundingMap[defaultRoundingMethod];
-}
-
-/**
- * @name differenceInMinutes
- * @category Minute Helpers
- * @summary Get the number of minutes between the given dates.
- *
- * @description
- * Get the signed number of full (rounded towards 0) minutes between the given dates.
- *
- * @param {Date|Number} dateLeft - the later date
- * @param {Date|Number} dateRight - the earlier date
- * @param {Object} [options] - an object with options.
- * @param {String} [options.roundingMethod='trunc'] - a rounding method (`ceil`, `floor`, `round` or `trunc`)
- * @returns {Number} the number of minutes
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // How many minutes are between 2 July 2014 12:07:59 and 2 July 2014 12:20:00?
- * const result = differenceInMinutes(
- *   new Date(2014, 6, 2, 12, 20, 0),
- *   new Date(2014, 6, 2, 12, 7, 59)
- * )
- * //=> 12
- *
- * @example
- * // How many minutes are between 10:01:59 and 10:00:00
- * const result = differenceInMinutes(
- *   new Date(2000, 0, 1, 10, 0, 0),
- *   new Date(2000, 0, 1, 10, 1, 59)
- * )
- * //=> -1
- */
-function differenceInMinutes(dateLeft, dateRight, options) {
-  requiredArgs(2, arguments);
-  var diff = differenceInMilliseconds(dateLeft, dateRight) / millisecondsInMinute;
-  return getRoundingMethod(options === null || options === void 0 ? void 0 : options.roundingMethod)(diff);
-}
-
-/* *
- * 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)
- * */
-/**
- * Returns filtered list of props with geoJson
- * @param children React.ReactNode, layers with geoJson
- */
-var getFeatureLayers = function getFeatureLayers(children) {
-  return children && Array.isArray(children) ? children
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  .reduce(function (acc, val) {
-    return acc.concat(val);
-  }, []).filter(function (c) {
-    return c && c.props && c.props.geojson;
-  }).map(function (c) {
-    return c.props;
-  }).reverse() : [];
-};
-/**
- * Returns true if this is a maplayer and not a baselayer or overlayer
- * @param layer The layerTypes.Layer object, or the props from the ReactWMJSLayer
- */
-var isAMapLayer = function isAMapLayer(layer) {
-  return layer.layerType === LayerType.mapLayer;
-};
-/**
- * Returns true if this is a geojsonlayer (layer containing geojson field)
- * @param layer The layerTypes.Layer object, or the props from the ReactWMJSLayer
- */
-var isAGeoJSONLayer = function isAGeoJSONLayer(layer) {
-  return layer.geojson !== undefined;
-};
-var getWMJSLayerFromReactLayer = function getWMJSLayerFromReactLayer(mapId, wmLayers, reactWebMapJSLayer, wmLayerIndex) {
-  var _reactWebMapJSLayer$p = reactWebMapJSLayer.props,
-    reactLayerId = _reactWebMapJSLayer$p.id,
-    layerName = _reactWebMapJSLayer$p.name;
-  var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-  /* Some safety checks */
-  if (!wmjsMap || !wmLayers || !reactLayerId || !layerName) {
-    return {
-      layer: null,
-      layerArrayMutated: false
-    };
-  }
-  /* Find the wmlayer by its react layer id */
-  var matchingLayerIndex = wmLayers.findIndex(function (wmLayer) {
-    return wmLayer.id === reactLayerId;
-  });
-  if (matchingLayerIndex === -1) {
-    return {
-      layer: null,
-      layerArrayMutated: false
-    };
-  }
-  /*
-     The layer order in the react children array index is
-     reversed compared to the layer order in the wmLayer array index
-  */
-  var reactLayerIndex = wmLayers.length - 1 - wmLayerIndex;
-  var isMapLayer = isAMapLayer(reactWebMapJSLayer.props);
-  var mapLayerArrayShouldBeMutated = isMapLayer && matchingLayerIndex !== reactLayerIndex;
-  /* It seems that a layer was moved in the layerlist, move it in the wmjsMap too */
-  if (mapLayerArrayShouldBeMutated) {
-    wmjsMap.swapLayers(wmLayers[matchingLayerIndex], wmLayers[reactLayerIndex]);
-    wmjsMap.draw();
-  }
-  return {
-    layer: wmLayers[matchingLayerIndex],
-    layerArrayMutated: mapLayerArrayShouldBeMutated
-  };
-};
-function getIsInsideAcceptanceTime(acceptanceTimeInMinutes, mapDimensions, layerDimensions) {
-  var _a, _b;
-  var mapCurrentTime = (_a = mapDimensions === null || mapDimensions === void 0 ? void 0 : mapDimensions.find(function (dimension) {
-    return dimension.name === 'time';
-  })) === null || _a === void 0 ? void 0 : _a.currentValue;
-  var layerCurrentTime = (_b = layerDimensions === null || layerDimensions === void 0 ? void 0 : layerDimensions.find(function (dimension) {
-    return dimension.name === 'time';
-  })) === null || _b === void 0 ? void 0 : _b.currentValue;
-  if (acceptanceTimeInMinutes === undefined || !mapCurrentTime || !layerCurrentTime) {
-    return true;
-  }
-  var minutesBetween = differenceInMinutes(new Date(mapCurrentTime), new Date(layerCurrentTime));
-  if (Math.abs(minutesBetween) > acceptanceTimeInMinutes) {
-    return false;
-  }
-  return true;
-}
-
-var getDisplayText = function getDisplayText(currentAdagucTime) {
-  var timeFormat = 'eee dd MMM yyyy HH:mm [UTC]';
-  var adagucTime = dateUtils.utc(currentAdagucTime);
-  var adagucTimeFormatted = dateUtils.dateToString(adagucTime, timeFormat);
-  return adagucTimeFormatted;
-};
-var ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION = 'ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION';
-var ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO = 'ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO';
-var ReactMapView = /*#__PURE__*/function (_React$Component) {
-  _inherits(ReactMapView, _React$Component);
-  var _super = _createSuper(ReactMapView);
-  function ReactMapView(props) {
-    var _this;
-    _classCallCheck(this, ReactMapView);
-    _this = _super.call(this, props);
-    _this.adaguc = {
-      initialized: false,
-      baseLayers: [],
-      oldbbox: undefined,
-      currentWidth: -1,
-      currentHeight: -1,
-      currentMapProps: {
-        children: []
-      }
-    };
-    _this.refetchTimer = null;
-    _this.onStartRefetchTimer = function () {
-      /*
-        TODO, Maarten Plieger, 2021-09-02, https://gitlab.com/opengeoweb/opengeoweb/-/issues/1159:
-        This causes many issues, we should improve the update strategy.
-        Certain presets have >20 layers. This causes 20 times parsing the GetCapabilities for a minor update of the store.
-           
-      */
-      _this.clearRefetchTimer();
-      var fetchSpeed = 60000; // 1 minute
-      _this.refetchTimer = setInterval(function () {
-        var mapId = _this.props.mapId;
-        var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-        var layers = wmjsMap.getLayers();
-        layers.forEach(function (layer) {
-          if (layer.enabled !== false) {
-            _this.parseWMJSLayer(layer, true);
-          }
-        });
-      }, fetchSpeed);
-    };
-    _this.clearRefetchTimer = function () {
-      if (_this.refetchTimer) {
-        clearInterval(_this.refetchTimer);
-      }
-    };
-    _this.parseWMJSLayer = function (wmLayer, forceReload, child) {
-      var callback = function callback() {
-        var _this$props = _this.props,
-          onUpdateLayerInformation = _this$props.onUpdateLayerInformation,
-          mapId = _this$props.mapId;
-        try {
-          setLayerInfo(wmLayer, mapId, onUpdateLayerInformation);
-        } catch (e) {
-          /* Provide a hint on what is going wrong */
-          console.error(e);
-        }
-        var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-        if (child) {
-          if (wmLayer.hasError) {
-            if (child.props.onLayerError) {
-              child.props.onLayerError(wmLayer, new Error(wmLayer.lastError), wmjsMap);
-            }
-          } else if (child.props.onLayerReady) {
-            child.props.onLayerReady(wmLayer, wmjsMap);
-          }
-        }
-      };
-      wmLayer.parseLayer(callback, forceReload, 'ReactMapView parseWMJSLayer');
-    };
-    _this.state = {
-      adagucInitialised: false
-    };
-    _this.resize = _this.resize.bind(_assertThisInitialized$1(_this));
-    _this.handleWindowResize = _this.handleWindowResize.bind(_assertThisInitialized$1(_this));
-    _this.drawDebounced = debounce$2(600, _this.drawDebounced);
-    _this.updateWMJSMapProps = _this.updateWMJSMapProps.bind(_assertThisInitialized$1(_this));
-    _this.mountWMJSMap = _this.mountWMJSMap.bind(_assertThisInitialized$1(_this));
-    _this.onAfterSetBBoxListener = _this.onAfterSetBBoxListener.bind(_assertThisInitialized$1(_this));
-    _this.onUpdateBBoxListener = _this.onUpdateBBoxListener.bind(_assertThisInitialized$1(_this));
-    _this.onDimChangeListener = _this.onDimChangeListener.bind(_assertThisInitialized$1(_this));
-    _this.adagucContainerRef = /*#__PURE__*/React.createRef();
-    _this.adagucWebMapJSRef = /*#__PURE__*/React.createRef();
-    return _this;
-  }
-  _createClass(ReactMapView, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props2 = this.props,
-        shouldAutoFetch = _this$props2.shouldAutoFetch,
-        onWMJSMount = _this$props2.onWMJSMount,
-        mapId = _this$props2.mapId;
-      /* If this components re-mounts, make sure that the initialized state is set back to false */
-      this.setState({
-        adagucInitialised: false
-      });
-      window.addEventListener('resize', this.handleWindowResize);
-      this.mountWMJSMap();
-      if (shouldAutoFetch) {
-        this.onStartRefetchTimer();
-      }
-      onWMJSMount(mapId);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      this.updateWMJSMapProps(prevProps, this.props);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var mapId = this.props.mapId;
-      window.removeEventListener('resize', this.handleWindowResize);
-      this.clearRefetchTimer();
-      webmapUtils.unRegisterWMJSMap(mapId);
-      /* Reset adaguc properties */
-      this.adaguc.initialized = false;
-      this.adaguc.currentHeight = -1;
-      this.adaguc.currentWidth = -1;
-      this.adaguc.baseLayers = [];
-      this.adaguc.oldbbox = new WMBBOX();
-      this.adaguc.currentMapProps.children = null;
-    }
-  }, {
-    key: "handleWindowResize",
-    value: function handleWindowResize() {
-      this.resize();
-    }
-  }, {
-    key: "onDimChangeListener",
-    value: function onDimChangeListener() {
-      var _this$props3 = this.props,
-        mapId = _this$props3.mapId,
-        onMapChangeDimension = _this$props3.onMapChangeDimension;
-      var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-      if (wmjsMap) {
-        var timeDimension = wmjsMap.getDimension('time');
-        if (timeDimension) {
-          onMapChangeDimension({
-            mapId: mapId,
-            origin: ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION,
-            dimension: {
-              name: 'time',
-              currentValue: timeDimension.currentValue
-            }
-          });
-        }
-      }
-    }
-  }, {
-    key: "onAfterSetBBoxListener",
-    value: function onAfterSetBBoxListener() {
-      var _this2 = this;
-      /* Update the map after 100 ms */
-      window.setTimeout(function () {
-        var _this2$props = _this2.props,
-          MapViewBBOX = _this2$props.bbox,
-          mapId = _this2$props.mapId,
-          onMapZoomEnd = _this2$props.onMapZoomEnd;
-        var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-        if (!wmjsMap) {
-          return;
-        }
-        var projectionInfo = wmjsMap.getProjection();
-        /* Trigger onMapZoomEnd callback */
-        var mapBBOX = projectionInfo.bbox;
-        if (MapViewBBOX.left !== mapBBOX.left || MapViewBBOX.right !== mapBBOX.right || MapViewBBOX.bottom !== mapBBOX.bottom || MapViewBBOX.top !== mapBBOX.top) {
-          onMapZoomEnd({
-            mapId: mapId,
-            bbox: {
-              left: projectionInfo.bbox.left,
-              bottom: projectionInfo.bbox.bottom,
-              right: projectionInfo.bbox.right,
-              top: projectionInfo.bbox.top
-            },
-            srs: projectionInfo.srs
-          });
-        }
-      }, 100);
-    }
-  }, {
-    key: "onUpdateBBoxListener",
-    value: function onUpdateBBoxListener(newBbox) {
-      var oldbbox = this.adaguc.oldbbox || new WMBBOX(ReactMapView.defaultProps.bbox);
-      if (oldbbox.left !== newBbox.left || oldbbox.right !== newBbox.right || oldbbox.top !== newBbox.top || oldbbox.bottom !== newBbox.bottom) {
-        oldbbox.left = newBbox.left;
-        oldbbox.right = newBbox.right;
-        oldbbox.top = newBbox.top;
-        oldbbox.bottom = newBbox.bottom;
-        this.adaguc.oldbbox = new WMBBOX(oldbbox);
-      }
-    }
-  }, {
-    key: "updateWMJSMapProps",
-    value: function updateWMJSMapProps(prevProps, props) {
-      var _this3 = this;
-      if (!props) {
-        return;
-      }
-      var mapId = props.mapId,
-        children = props.children;
-      if (prevProps && prevProps.mapId !== props.mapId) {
-        console.warn('MapId has changed on an already mounted map!');
-        var prevWMJSMap = webmapUtils.getWMJSMapById(prevProps.mapId);
-        if (prevWMJSMap) {
-          webmapUtils.registerWMJSMap(prevWMJSMap, mapId);
-        }
-      }
-      var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-      if (!wmjsMap) {
-        console.warn("No wmjsMap ".concat(mapId));
-        return;
-      }
-      var needsRedraw = false;
-      /* Check map props */
-      if (!prevProps || prevProps.showLegend !== props.showLegend) {
-        wmjsMap.displayLegendInMap(props.showLegend !== false);
-      }
-      if (!prevProps || prevProps.showScaleBar !== props.showScaleBar) {
-        wmjsMap.displayScaleBarInMap(props.showScaleBar !== false);
-        needsRedraw = true;
-      }
-      /* Check map dimensions */
-      if (!prevProps || prevProps.dimensions !== props.dimensions) {
-        if (props.dimensions) {
-          for (var d = 0; d < props.dimensions.length; d += 1) {
-            var propDimension = props.dimensions[d];
-            var mapDim = wmjsMap.getDimension(propDimension.name);
-            if (mapDim && mapDim.currentValue !== propDimension.currentValue || !mapDim) {
-              wmjsMap.setDimension(propDimension.name, propDimension.currentValue, false, false);
-            }
-            if (props.displayTimeInMap && propDimension.name === 'time' && propDimension.currentValue !== undefined) {
-              needsRedraw = true;
-              var displayText = getDisplayText(propDimension.currentValue);
-              wmjsMap.setTimeOffset(displayText);
-            }
-          }
-        }
-      }
-      /* Check if srs and BBOX is updated */
-      if (!prevProps || prevProps.bbox !== props.bbox) {
-        if (props.bbox.left !== undefined) {
-          var projectionInfo = wmjsMap.getProjection();
-          var mapBBOX = projectionInfo.bbox;
-          if (props.bbox.left !== mapBBOX.left || props.bbox.right !== mapBBOX.right || props.bbox.bottom !== mapBBOX.bottom || props.bbox.top !== mapBBOX.top) {
-            wmjsMap.suspendEvent('onupdatebbox');
-            wmjsMap.setProjection(props.srs, new WMBBOX(props.bbox));
-            wmjsMap.resumeEvent('onupdatebbox');
-            wmjsMap.draw();
-          }
-        }
-      }
-      /* Check display/hide map cursor */
-      if (!prevProps || prevProps.displayMapPin !== props.displayMapPin) {
-        if (props.displayMapPin === true) {
-          wmjsMap.getMapPin().showMapPin();
-        } else if (props.displayMapPin === false) {
-          wmjsMap.getMapPin().hideMapPin();
-        }
-      }
-      /* Set map cursor location */
-      if (!prevProps || prevProps.mapPinLocation !== props.mapPinLocation) {
-        if (props.mapPinLocation) {
-          wmjsMap.getMapPin().positionMapPinByLatLon({
-            x: props.mapPinLocation.lon,
-            y: props.mapPinLocation.lat
-          });
-        }
-      }
-      /* Set disable map pin */
-      if (!prevProps || prevProps.disableMapPin !== props.disableMapPin) {
-        if (props.disableMapPin === true) {
-          wmjsMap.getMapPin().setMapPinDisabled();
-        } else if (props.disableMapPin === false) {
-          wmjsMap.getMapPin().setMapPinEnabled();
-        }
-      }
-      /* Change the animation delay */
-      if (!prevProps || prevProps.animationDelay !== props.animationDelay) {
-        if (props.animationDelay) {
-          if (typeof wmjsMap.setAnimationDelay === 'function') {
-            wmjsMap.setAnimationDelay(props.animationDelay);
-          }
-        }
-      }
-      /* Check if layer metadata should be shown */
-      if (!prevProps || prevProps.showLayerInfo !== props.showLayerInfo) {
-        if (props.showLayerInfo) {
-          wmjsMap.showLayerInfo = props.showLayerInfo;
-        }
-      }
-      if (children !== this.adaguc.currentMapProps.children) {
-        var myChildren = [];
-        var takenIds = new Set();
-        React.Children.forEach(children, function (child) {
-          if (child) {
-            var childProps = child.props;
-            if (childProps && childProps.id) {
-              if (!takenIds.has(childProps.id)) {
-                myChildren.push(child);
-                takenIds.add(childProps.id);
-              } else {
-                childProps.onLayerError(childProps, new Error("Duplicate layer id \"".concat(childProps.id, "\" encountered within this mapTypes.WebMap")), wmjsMap);
-                console.warn('ReactWMJSLayer has a duplicate id', child);
-              }
-            } else {
-              debug(DebugType.Warning, 'ReactElement child ignored: has no props or id', child);
-            }
-          }
-        });
-        myChildren.reverse();
-        var wmjsLayers = wmjsMap.getLayers();
-        /* ReactWMJSLayer Layer Childs: Detect all ReactLayers connected to WMJSLayers, remove WMJSLayer if there is no ReactLayer */
-        var _loop = function _loop(l) {
-            if (myChildren.filter(function (c) {
-              return c && c.props && c.props.id === wmjsLayers[l].ReactWMJSLayerId;
-            }).length === 0) {
-              /* This will call the remove property of the WMJSLayer, which will adjust the layers array of WebMapJS */
-              wmjsLayers[l].remove();
-              /* Trigger update of all map dimensions */
-              var onUpdateLayerInformation = props.onUpdateLayerInformation,
-                _mapId = props.mapId;
-              onUpdateLayerInformation === null || onUpdateLayerInformation === void 0 ? void 0 : onUpdateLayerInformation({
-                origin: ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO,
-                layerStyle: null,
-                layerDimensions: null,
-                mapDimensions: {
-                  origin: origin,
-                  mapId: _mapId,
-                  dimensions: wmjsMap.mapdimensions.map(function (_ref) {
-                    var name = _ref.name,
-                      units = _ref.units,
-                      currentValue = _ref.currentValue,
-                      synced = _ref.synced;
-                    return {
-                      name: name,
-                      units: units,
-                      currentValue: currentValue,
-                      synced: synced
-                    };
-                  })
-                }
-              });
-              _this3.updateWMJSMapProps(prevProps, props);
-              return {
-                v: void 0
-              };
-            }
-          },
-          _ret;
-        for (var l = 0; l < wmjsLayers.length; l += 1) {
-          _ret = _loop(l);
-          if (_ret) return _ret.v;
-        }
-        /* ReactWMJSLayer BaseLayer Childs: For the baseLayers, detect all ReactLayers connected to WMJSLayers, remove WMJSLayer if there is no ReactLayer */
-        var webmapJSBaselayers = wmjsMap.getBaseLayers();
-        var _loop2 = function _loop2(_l) {
-            var wmjsBaseLayers = wmjsMap.getBaseLayers();
-            if (myChildren.filter(function (c) {
-              return c && c.props ? c.props.id === wmjsBaseLayers[_l].ReactWMJSLayerId : false;
-            }).length === 0) {
-              /*  TODO (Maarten Plieger, 2020-03-19):The remove property for the baselayer is not working yet */
-              wmjsBaseLayers.splice(_l, 1);
-              wmjsMap.setBaseLayers(wmjsBaseLayers);
-              wmjsBaseLayers = wmjsMap.getBaseLayers();
-              _this3.updateWMJSMapProps(prevProps, props);
-              return {
-                v: void 0
-              };
-            }
-          },
-          _ret2;
-        for (var _l = 0; _l < webmapJSBaselayers.length; _l += 1) {
-          _ret2 = _loop2(_l);
-          if (_ret2) return _ret2.v;
-        }
-        var adagucWMJSLayerIndex = 0;
-        var adagucWMJSBaseLayerIndex = 0;
-        /* Loop through all React layers and update WMJSLayer properties where needed */
-        var _loop3 = function _loop3() {
-            var child = myChildren[c];
-            if (child && child.type) {
-              /* Check layers */
-              if (_typeof$2(child.type) === _typeof$2(MapViewLayer)) {
-                /* Feature layer (with child.props.geojson), these are handled collectively by the setState commando above. */
-                var isBaselayer = !isAMapLayer(child.props) && !isAGeoJSONLayer(child.props);
-                var adagucWMJSLayers = isBaselayer ? wmjsMap.getBaseLayers() : wmjsMap.getLayers();
-                var obj = getWMJSLayerFromReactLayer(mapId, adagucWMJSLayers, child, isBaselayer ? adagucWMJSBaseLayerIndex : adagucWMJSLayerIndex);
-                if (obj.layerArrayMutated) {
-                  _this3.updateWMJSMapProps(prevProps, props);
-                  return {
-                    v: void 0
-                  };
-                }
-                var wmLayer = obj.layer;
-                if (isBaselayer) {
-                  adagucWMJSBaseLayerIndex += 1;
-                } else {
-                  adagucWMJSLayerIndex += 1;
-                }
-                /* Layer was not yet added */
-                if (wmLayer === null) {
-                  var keepOnTop = child.props.layerType === LayerType.overLayer || false;
-                  var newWMLayer = new WMLayer(Object.assign(Object.assign({}, child.props), {
-                    keepOnTop: keepOnTop
-                  }));
-                  webmapUtils.registerWMLayer(newWMLayer, child.props.id);
-                  newWMLayer.ReactWMJSLayerId = child.props.id;
-                  if (isBaselayer) {
-                    /* Add ADAGUC WebMapJS Baselayer */
-                    _this3.adaguc.baseLayers.push(newWMLayer);
-                    wmjsMap.setBaseLayers(_this3.adaguc.baseLayers.reverse());
-                  } else {
-                    /* Add ADAGUC WebMapJS Layer */
-                    wmjsMap.addLayer(newWMLayer).then(function () {
-                      wmjsMap.draw();
-                    });
-                  }
-                  if (!isBaselayer) {
-                    _this3.parseWMJSLayer(newWMLayer, false, child);
-                  }
-                  needsRedraw = true;
-                } else {
-                  /* Set the name of the ADAGUC WMJSLayer */
-                  if (child.props.name !== undefined && wmLayer.name !== child.props.name) {
-                    wmLayer.setName(child.props.name).then(function () {
-                      _this3.parseWMJSLayer(wmLayer, false, child);
-                    });
-                    needsRedraw = true;
-                  }
-                  /* Set the Opacity of the ADAGUC WMJSLayer */
-                  if (child.props.opacity !== undefined && wmLayer.opacity !== child.props.opacity) {
-                    wmLayer.setOpacity(child.props.opacity);
-                    needsRedraw = false;
-                  }
-                  /* Set the Style of the ADAGUC WMJSLayer */
-                  if (child.props.style !== undefined && wmLayer.currentStyle !== child.props.style) {
-                    wmLayer.setStyle(child.props.style);
-                    needsRedraw = true;
-                  }
-                  var _child$props = child.props,
-                    enabled = _child$props.enabled,
-                    acceptanceTimeInMinutes = _child$props.acceptanceTimeInMinutes,
-                    layerDimensions = _child$props.dimensions;
-                  var isInsideAcceptanceTime = getIsInsideAcceptanceTime(acceptanceTimeInMinutes, props.dimensions, layerDimensions);
-                  if (enabled !== undefined) {
-                    var wmLayerShouldBeShown = isInsideAcceptanceTime && enabled;
-                    if (wmLayerShouldBeShown !== wmLayer.enabled) {
-                      wmLayer.display(wmLayerShouldBeShown);
-                      needsRedraw = true;
-                    }
-                  }
-                  /* Set the dimensions of the ADAGUC WMJSLayer */
-                  if (child.props.dimensions !== undefined) {
-                    for (var _d = 0; _d < child.props.dimensions.length; _d += 1) {
-                      var dim = child.props.dimensions[_d];
-                      var wmjsDim = wmLayer.getDimension(dim.name);
-                      if (wmjsDim) {
-                        if (wmjsDim.currentValue !== dim.currentValue) {
-                          wmLayer.setDimension(dim.name, dim.currentValue, false);
-                          needsRedraw = true;
-                        }
-                        if (wmjsDim.synced !== dim.synced) {
-                          wmjsDim.synced = dim.synced;
-                          needsRedraw = true;
-                        }
-                      } else {
-                        debug(DebugType.Warning, "MapView: Dimension does not exist, skipping ".concat(child.props.name, " :: ").concat(dim.name, " = ").concat(dim.currentValue));
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          },
-          _ret3;
-        for (var c = 0; c < myChildren.length; c += 1) {
-          _ret3 = _loop3();
-          if (_ret3) return _ret3.v;
-        }
-        if (needsRedraw) {
-          wmjsMap.draw();
-        }
-        /* Children have been processed */
-        this.adaguc.currentMapProps.children = children;
-      }
-    }
-  }, {
-    key: "drawDebounced",
-    value: function drawDebounced() {
-      var mapId = this.props.mapId;
-      var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-      wmjsMap.getListener().suspendEvents();
-      wmjsMap.draw();
-      wmjsMap.getListener().resumeEvents();
-    }
-  }, {
-    key: "mountWMJSMap",
-    value: function mountWMJSMap() {
-      var _this4 = this;
-      var _this$props4 = this.props,
-        mapId = _this$props4.mapId,
-        listeners = _this$props4.listeners,
-        srs = _this$props4.srs,
-        bbox = _this$props4.bbox,
-        onMapPinChangeLocation = _this$props4.onMapPinChangeLocation;
-      /* Check if we have something to mount WMJSMap on */
-      if (this.adagucWebMapJSRef.current === null) {
-        console.warn('No this.adagucWebMapJSRef.current  yet ');
-        return null;
-      }
-      /* Check if webmapjs was not already initialized */
-      var existingWMJSMap = webmapUtils.getWMJSMapById(mapId);
-      if (existingWMJSMap) {
-        console.warn("Somehow ".concat(mapId, "webmapUtils.unRegisterWMJSMap already exists"));
-        webmapUtils.unRegisterWMJSMap(mapId);
-      }
-      var wmjsMap = new WMJSMap(this.adagucWebMapJSRef.current);
-      this.adaguc.currentMapProps = {};
-      this.adaguc.currentMapProps.children = null;
-      this.adaguc.baseLayers = [];
-      webmapUtils.registerWMJSMap(wmjsMap, mapId);
-      this.adaguc.initialized = true;
-      /* Enable to show actual layer properties in the map */
-      wmjsMap.showLayerInfo = false;
-      wmjsMap.removeAllLayers();
-      if (srs) {
-        wmjsMap.setProjection(srs, new WMBBOX(bbox));
-      }
-      wmjsMap.setWMTileRendererTileSettings(tilesettings);
-      if (listeners) {
-        listeners.forEach(function (listener) {
-          wmjsMap.addListener(listener.name, function (data) {
-            listener.callbackfunction(wmjsMap, data);
-          }, listener.keep);
-        });
-      }
-      wmjsMap.addListener('ondimchange', function () {
-        _this4.onDimChangeListener();
-      }, true);
-      wmjsMap.addListener('onmapready', function () {
-        _this4.setState({
-          adagucInitialised: true
-        });
-      });
-      wmjsMap.addListener('aftersetbbox', function () {
-        _this4.onAfterSetBBoxListener();
-      }, true);
-      wmjsMap.addListener('onupdatebbox', function (newBbox) {
-        _this4.onUpdateBBoxListener(newBbox);
-      }, true);
-      wmjsMap.addListener('onsetmappin', function (mapPinLatLonCoordinate) {
-        // only change location when mapPin is visible and enabled
-        if (onMapPinChangeLocation &&
-        // eslint-disable-next-line react/destructuring-assignment
-        _this4.props.displayMapPin &&
-        // eslint-disable-next-line react/destructuring-assignment
-        !_this4.props.disableMapPin) {
-          onMapPinChangeLocation({
-            mapPinLocation: {
-              lat: mapPinLatLonCoordinate.lat,
-              lon: mapPinLatLonCoordinate.lon
-            },
-            mapId: mapId
-          });
-        }
-      }, true);
-      this.resize();
-      wmjsMap.draw();
-      this.updateWMJSMapProps(null, this.props);
-      return wmjsMap;
-    }
-  }, {
-    key: "resize",
-    value: function resize() {
-      var element = this.adagucContainerRef.current;
-      if (element) {
-        var newWidth = element.clientWidth;
-        var newHeight = element.clientHeight;
-        if (this.adaguc.currentWidth !== newWidth || this.adaguc.currentHeight !== newHeight) {
-          this.adaguc.currentWidth = newWidth;
-          this.adaguc.currentHeight = newHeight;
-          var mapId = this.props.mapId;
-          var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-          wmjsMap.setSize(newWidth, newHeight);
-        }
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props5 = this.props,
-        passiveMap = _this$props5.passiveMap,
-        children = _this$props5.children,
-        onClick = _this$props5.onClick,
-        mapId = _this$props5.mapId;
-      var adagucInitialised = this.state.adagucInitialised;
-      var featureLayers = getFeatureLayers(children);
-      return /*#__PURE__*/React.createElement("div", {
-        className: "MapView",
-        style: {
-          height: '100%',
-          width: '100%',
-          border: 'none',
-          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", {
-        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"
-      })));
-    }
-  }]);
-  return ReactMapView;
-}(React.Component);
-ReactMapView.defaultProps = {
-  srs: 'EPSG:3857',
-  bbox: {
-    left: -2324980.5498391856,
-    bottom: 5890854.775012179,
-    right: 6393377.702660825,
-    top: 11652109.058827976
-  },
-  shouldAutoFetch: true,
-  displayMapPin: false,
-  disableMapPin: false,
-  onWMJSMount: function onWMJSMount() {},
-  onMapChangeDimension: function onMapChangeDimension() {
-    /* nothing */
-  },
-  onUpdateLayerInformation: function onUpdateLayerInformation() {
-    /* nothing */
-  },
-  onMapZoomEnd: function onMapZoomEnd() {
-    /* nothing */
-  }
-};
-
-/* *
- * 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),
@@ -21990,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);
   });
@@ -22027,9 +20268,6 @@ var MapViewConnect = function MapViewConnect(_a) {
   var displayMapPin = useSelector(function (store) {
     return mapSelectors.getDisplayMapPin(store, mapId);
   });
-  var services = useSelector(function (store) {
-    return serviceSelectors.getServices(store);
-  });
   var dispatch = useDispatch();
   var mapChangeDimension = React.useCallback(function (mapDimensionPayload) {
     if (mapDimensionPayload.dimension) {
@@ -22119,7 +20357,6 @@ var MapViewConnect = function MapViewConnect(_a) {
     animationDelay: animationDelay,
     displayMapPin: displayMapPin,
     disableMapPin: disableMapPin,
-    services: services,
     onMapChangeDimension: function onMapChangeDimension(mapDimensionPayload) {
       if (mapDimensionPayload && mapDimensionPayload.dimension && mapDimensionPayload.dimension.name && mapDimensionPayload.dimension.name === 'time') {
         setTime({
@@ -22207,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,
@@ -22376,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));
@@ -25969,75 +24134,172 @@ var useMapDrawTool = function useMapDrawTool(_ref) {
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
-var MapDrawToolContext = /*#__PURE__*/React.createContext({});
-// currently used options
-var drawOptions = {
-  defaultEditModes: [defaultPolygon, defaultDelete]
-};
-var MapDrawToolProvider = function MapDrawToolProvider(_ref) {
-  var children = _ref.children,
-    _ref$options = _ref.options,
-    options = _ref$options === void 0 ? {} : _ref$options;
-  var value = useMapDrawTool(options);
-  return /*#__PURE__*/React.createElement(MapDrawToolContext.Provider, {
-    value: value
-  }, children);
-};
-function useMapDrawContext() {
-  return React.useContext(MapDrawToolContext);
-}
-
-/* *
- * 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 MapDrawToolContext = /*#__PURE__*/React.createContext({});
+// currently used options
+var drawOptions = {
+  defaultEditModes: [defaultPolygon, defaultDelete]
+};
+var MapDrawToolProvider = function MapDrawToolProvider(_ref) {
+  var children = _ref.children,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? {} : _ref$options;
+  var value = useMapDrawTool(options);
+  return /*#__PURE__*/React.createElement(MapDrawToolContext.Provider, {
+    value: value
+  }, children);
+};
+function useMapDrawContext() {
+  return React.useContext(MapDrawToolContext);
+}
+
+/* *
+ * 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$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));
 };
@@ -26177,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';
@@ -26205,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
@@ -26353,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,
@@ -26402,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,
@@ -26468,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;
@@ -26478,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,
@@ -26512,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;
@@ -26602,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 () {
@@ -26857,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),
@@ -27446,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,
@@ -28021,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'
@@ -28308,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;
   });
@@ -28480,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),
@@ -29071,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
@@ -29945,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],
@@ -30230,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,
@@ -30966,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, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, 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 };