@opengeoweb/core 6.0.2 → 6.0.4

package/index.esm.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import React__default, { forwardRef, useContext, useCallback, useEffect, createElement, PureComponent, useState, Component, cloneElement, useRef, isValidElement, createRef, 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, Tooltip, IconButton, ButtonGroup, Divider, Snackbar } from '@mui/material';
-import { CustomIconButton, TooltipSelect, AlertIcon, useControlledTooltip, CustomTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, AlertBanner, CustomAccordion, ToolContainerDraggable, calculateDialogSizeAndPosition, CustomToggleButton, SearchHighlight, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
-import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Add, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, 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, Location, DrawPolygon, DrawRegion, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
+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, Location, DrawPolygon, DrawRegion, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, 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, drawSelectors, drawActions, syncConstants, defaultLayers, syncGroupsSelectors, syncGroupsSelector, snackbarModuleConfig, snackbarSelectors, coreModuleConfig, routerUtils, routerModuleConfig, appModuleConfig, appActions } from '@opengeoweb/store';
 import { ReactSortable } from 'react-sortablejs';
@@ -882,7 +882,7 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
     _ref$tooltipTitle = _ref.tooltipTitle,
     tooltipTitle = _ref$tooltipTitle === void 0 ? 'Open the layer selector' : _ref$tooltipTitle,
     _ref$icon = _ref.icon,
-    icon = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(Add, {
+    icon = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(LayersAdd, {
       "data-testid": "layerSelectButtonConnectIcon"
     }) : _ref$icon,
     _ref$isMultiMap = _ref.isMultiMap,
@@ -4861,109 +4861,130 @@ var getTextAndColor = function getTextAndColor(layerIsInsideAcceptanceTime) {
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
-var LayerRow = function LayerRow(_ref) {
-  var layerId = _ref.layerId,
+var LeftButtons = function LeftButtons(_ref) {
+  var size = _ref.size,
+    dragHandle = _ref.dragHandle,
     layer = _ref.layer,
-    layerName = _ref.layerName,
-    services = _ref.services,
-    mapId = _ref.mapId,
-    _ref$onLayerRowClick = _ref.onLayerRowClick,
-    onLayerRowClick = _ref$onLayerRowClick === void 0 ? function () {} : _ref$onLayerRowClick,
-    _ref$isEnabled = _ref.isEnabled,
-    isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
-    _ref$isLayerMissing = _ref.isLayerMissing,
-    isLayerMissing = _ref$isLayerMissing === void 0 ? false : _ref$isLayerMissing,
-    onLayerEnable = _ref.onLayerEnable,
-    onLayerChangeName = _ref.onLayerChangeName,
-    onLayerChangeStyle = _ref.onLayerChangeStyle,
-    _onLayerChangeOpacity = _ref.onLayerChangeOpacity,
-    _onLayerChangeDimension = _ref.onLayerChangeDimension,
-    onLayerDelete = _ref.onLayerDelete,
-    onLayerDuplicate = _ref.onLayerDuplicate,
-    _onChangeAcceptanceTime = _ref.onChangeAcceptanceTime,
+    layerMissingDataLayout = _ref.layerMissingDataLayout,
     layerEnableLayout = _ref.layerEnableLayout,
-    layerServicesLayout = _ref.layerServicesLayout,
-    layerStylesLayout = _ref.layerStylesLayout,
-    layerOpacityLayout = _ref.layerOpacityLayout,
-    layerDimensionLayout = _ref.layerDimensionLayout,
-    layerDeleteLayout = _ref.layerDeleteLayout,
-    layerMenuLayout = _ref.layerMenuLayout,
-    layerActiveLayout = _ref.layerActiveLayout,
+    isEnabled = _ref.isEnabled,
     disableActivateLayer = _ref.disableActivateLayer,
-    dragHandle = _ref.dragHandle,
-    layerAcceptanceTimeLayout = _ref.layerAcceptanceTimeLayout,
-    layerMissingDataLayout = _ref.layerMissingDataLayout;
+    layerActiveLayout = _ref.layerActiveLayout,
+    onChangeEnable = _ref.onChangeEnable,
+    onChangeActive = _ref.onChangeActive;
+  return /*#__PURE__*/React__default.createElement(Box$2, {
+    sx: leftButtonsStyle
+  }, dragHandle, layerMissingDataLayout || /*#__PURE__*/React__default.createElement(MissingData, {
+    layerIsInsideAcceptanceTime: "equal"
+  }), layerEnableLayout || /*#__PURE__*/React__default.createElement(CustomIconButton, {
+    shouldShowAsDisabled: !layer.enabled,
+    tooltipTitle: layer.name,
+    onClick: onChangeEnable,
+    "data-testid": "enableButton".concat(size)
+  }, isEnabled ? /*#__PURE__*/React__default.createElement(Visibility, null) : /*#__PURE__*/React__default.createElement(VisibilityOff, null)), !disableActivateLayer && (layerActiveLayout || /*#__PURE__*/React__default.createElement(ActivateLayer, {
+    onChange: onChangeActive,
+    current: AutoOptions.BOTH,
+    isEnabled: true
+  })));
+};
+var Styles = function Styles(_ref2) {
+  var style = _ref2.style,
+    onChangeStyle = _ref2.onChangeStyle;
+  return /*#__PURE__*/React__default.createElement(RenderStyles, {
+    layerStyles: [],
+    currentLayerStyle: style,
+    onChangeLayerStyle: onChangeStyle
+  });
+};
+var Opacity = function Opacity(_ref3) {
+  var opacity = _ref3.opacity,
+    onChangeOpacity = _ref3.onChangeOpacity;
+  return /*#__PURE__*/React__default.createElement(OpacitySelect, {
+    currentOpacity: opacity,
+    onLayerChangeOpacity: onChangeOpacity
+  });
+};
+var DeleteLayer = function DeleteLayer(_ref4) {
+  var onClick = _ref4.onClick;
+  return /*#__PURE__*/React__default.createElement(CustomIconButton, {
+    tooltipTitle: "Delete",
+    onClick: onClick,
+    "data-testid": "deleteButton"
+  }, /*#__PURE__*/React__default.createElement(Delete, null));
+};
+var Acceptance = function Acceptance(_ref5) {
+  var acceptanceTime = _ref5.acceptanceTime,
+    onChangeAcceptanceTime = _ref5.onChangeAcceptanceTime;
+  return /*#__PURE__*/React__default.createElement(AcceptanceTime, {
+    acceptanceTimeInMinutes: acceptanceTime,
+    onChangeAcceptanceTime: onChangeAcceptanceTime
+  });
+};
+var LayerRow = function LayerRow(_ref6) {
+  var layerId = _ref6.layerId,
+    layer = _ref6.layer,
+    layerName = _ref6.layerName,
+    services = _ref6.services,
+    mapId = _ref6.mapId,
+    _ref6$onLayerRowClick = _ref6.onLayerRowClick,
+    onLayerRowClick = _ref6$onLayerRowClick === void 0 ? function () {} : _ref6$onLayerRowClick,
+    _ref6$isEnabled = _ref6.isEnabled,
+    isEnabled = _ref6$isEnabled === void 0 ? true : _ref6$isEnabled,
+    _ref6$isLayerMissing = _ref6.isLayerMissing,
+    isLayerMissing = _ref6$isLayerMissing === void 0 ? false : _ref6$isLayerMissing,
+    onLayerEnable = _ref6.onLayerEnable,
+    onLayerChangeName = _ref6.onLayerChangeName,
+    onLayerChangeStyle = _ref6.onLayerChangeStyle,
+    onLayerChangeOpacity = _ref6.onLayerChangeOpacity,
+    _onLayerChangeDimension = _ref6.onLayerChangeDimension,
+    onLayerDelete = _ref6.onLayerDelete,
+    onLayerDuplicate = _ref6.onLayerDuplicate,
+    onChangeAcceptanceTime = _ref6.onChangeAcceptanceTime,
+    layerEnableLayout = _ref6.layerEnableLayout,
+    layerServicesLayout = _ref6.layerServicesLayout,
+    layerStylesLayout = _ref6.layerStylesLayout,
+    layerOpacityLayout = _ref6.layerOpacityLayout,
+    layerDimensionLayout = _ref6.layerDimensionLayout,
+    layerDeleteLayout = _ref6.layerDeleteLayout,
+    layerMenuLayout = _ref6.layerMenuLayout,
+    layerActiveLayout = _ref6.layerActiveLayout,
+    disableActivateLayer = _ref6.disableActivateLayer,
+    dragHandle = _ref6.dragHandle,
+    layerAcceptanceTimeLayout = _ref6.layerAcceptanceTimeLayout,
+    layerMissingDataLayout = _ref6.layerMissingDataLayout;
   var onClickRow = function onClickRow() {
     return onLayerRowClick(layerId);
   };
-  var LeftButtons = function LeftButtons(_ref2) {
-    var size = _ref2.size;
-    return /*#__PURE__*/React__default.createElement(Box$2, {
-      sx: leftButtonsStyle
-    }, dragHandle, layerMissingDataLayout || /*#__PURE__*/React__default.createElement(MissingData, {
-      layerIsInsideAcceptanceTime: "equal"
-    }), layerEnableLayout || /*#__PURE__*/React__default.createElement(CustomIconButton, {
-      shouldShowAsDisabled: !layer.enabled,
-      tooltipTitle: layer.name,
-      onClick: function onClick(event) {
-        event.stopPropagation();
-        onLayerEnable({
-          layerId: layerId,
-          enabled: !isEnabled
-        });
-      },
-      "data-testid": "enableButton".concat(size)
-    }, isEnabled ? /*#__PURE__*/React__default.createElement(Visibility, null) : /*#__PURE__*/React__default.createElement(VisibilityOff, null)), !disableActivateLayer && (layerActiveLayout || /*#__PURE__*/React__default.createElement(ActivateLayer, {
-      onChange: onClickRow,
-      current: AutoOptions.BOTH,
-      isEnabled: true
-    })));
+  var changeEnable = function changeEnable(event) {
+    event.stopPropagation();
+    onLayerEnable({
+      layerId: layerId,
+      enabled: !isEnabled
+    });
   };
-  var Styles = function Styles() {
-    return layerStylesLayout || /*#__PURE__*/React__default.createElement(RenderStyles, {
-      layerStyles: [],
-      currentLayerStyle: layer.style,
-      onChangeLayerStyle: function onChangeLayerStyle(style) {
-        onLayerChangeStyle({
-          layerId: layerId,
-          style: style
-        });
-      }
+  var changeStyle = function changeStyle(style) {
+    onLayerChangeStyle({
+      layerId: layerId,
+      style: style
     });
   };
-  var Opacity = function Opacity() {
-    return layerOpacityLayout || /*#__PURE__*/React__default.createElement(OpacitySelect, {
-      currentOpacity: layer.opacity,
-      onLayerChangeOpacity: function onLayerChangeOpacity(_opacity) {
-        _onLayerChangeOpacity({
-          layerId: layer.id,
-          opacity: _opacity
-        });
-      }
+  var changeOpacity = function changeOpacity(opacity) {
+    onLayerChangeOpacity({
+      layerId: layer.id,
+      opacity: opacity
     });
   };
-  var Acceptance = function Acceptance() {
-    return layerAcceptanceTimeLayout || /*#__PURE__*/React__default.createElement(AcceptanceTime, {
-      acceptanceTimeInMinutes: layer.acceptanceTimeInMinutes,
-      onChangeAcceptanceTime: function onChangeAcceptanceTime(acceptanceTime) {
-        _onChangeAcceptanceTime === null || _onChangeAcceptanceTime === void 0 ? void 0 : _onChangeAcceptanceTime({
-          layerId: layerId,
-          acceptanceTime: acceptanceTime
-        });
-      }
+  var changeAcceptanceTime = function changeAcceptanceTime(acceptanceTime) {
+    onChangeAcceptanceTime === null || onChangeAcceptanceTime === void 0 ? void 0 : onChangeAcceptanceTime({
+      layerId: layerId,
+      acceptanceTime: acceptanceTime
     });
   };
-  var DeleteLayer = function DeleteLayer() {
-    return layerDeleteLayout || /*#__PURE__*/React__default.createElement(CustomIconButton, {
-      tooltipTitle: "Delete",
-      onClick: function onClick() {
-        onLayerDelete({
-          mapId: mapId,
-          layerId: layerId
-        });
-      },
-      "data-testid": "deleteButton"
-    }, /*#__PURE__*/React__default.createElement(Delete, null));
+  var deleteLayer = function deleteLayer() {
+    return onLayerDelete({
+      mapId: mapId,
+      layerId: layerId
+    });
   };
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -4986,17 +5007,49 @@ var LayerRow = function LayerRow(_ref) {
     },
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(Accordion, {
-    LeftButtons: LeftButtons,
+    LeftButtons: /*#__PURE__*/React__default.createElement(LeftButtons, {
+      size: "-medium",
+      dragHandle: dragHandle,
+      layer: layer,
+      layerMissingDataLayout: layerMissingDataLayout,
+      layerEnableLayout: layerEnableLayout,
+      isEnabled: isEnabled,
+      disableActivateLayer: disableActivateLayer,
+      layerActiveLayout: layerActiveLayout,
+      onChangeEnable: changeEnable,
+      onChangeActive: onClickRow
+    }),
     layerName: layerName,
-    Styles: Styles,
-    Opacity: Opacity,
-    Acceptance: Acceptance,
-    DeleteLayer: DeleteLayer
+    Styles: layerStylesLayout || /*#__PURE__*/React__default.createElement(Styles, {
+      style: layer.style,
+      onChangeStyle: changeStyle
+    }),
+    Opacity: layerOpacityLayout || /*#__PURE__*/React__default.createElement(Opacity, {
+      opacity: layer.opacity,
+      onChangeOpacity: changeOpacity
+    }),
+    Acceptance: layerAcceptanceTimeLayout || /*#__PURE__*/React__default.createElement(Acceptance, {
+      acceptanceTime: layer.acceptanceTimeInMinutes,
+      onChangeAcceptanceTime: changeAcceptanceTime
+    }),
+    DeleteLayer: layerDeleteLayout || /*#__PURE__*/React__default.createElement(DeleteLayer, {
+      onClick: deleteLayer
+    })
   }), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: columnClasses.column1,
     alignItems: "center"
-  }, /*#__PURE__*/React__default.createElement(LeftButtons, null)), /*#__PURE__*/React__default.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(LeftButtons, {
+    dragHandle: dragHandle,
+    layer: layer,
+    layerMissingDataLayout: layerMissingDataLayout,
+    layerEnableLayout: layerEnableLayout,
+    isEnabled: isEnabled,
+    disableActivateLayer: disableActivateLayer,
+    layerActiveLayout: layerActiveLayout,
+    onChangeEnable: changeEnable,
+    onChangeActive: onClickRow
+  })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: columnClasses.column2
   }, layerServicesLayout || /*#__PURE__*/React__default.createElement(RenderLayers, {
@@ -5017,10 +5070,16 @@ var LayerRow = function LayerRow(_ref) {
   })) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: columnClasses.column3
-  }, /*#__PURE__*/React__default.createElement(Styles, null)), /*#__PURE__*/React__default.createElement(Grid, {
+  }, layerStylesLayout || /*#__PURE__*/React__default.createElement(Styles, {
+    style: layer.style,
+    onChangeStyle: changeStyle
+  })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: columnClasses.column4
-  }, /*#__PURE__*/React__default.createElement(Opacity, null)), /*#__PURE__*/React__default.createElement(Grid, {
+  }, layerOpacityLayout || /*#__PURE__*/React__default.createElement(Opacity, {
+    opacity: layer.opacity,
+    onChangeOpacity: changeOpacity
+  })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: columnClasses.column5
   }, layerDimensionLayout || /*#__PURE__*/React__default.createElement(DimensionSelect, {
@@ -5040,23 +5099,28 @@ var LayerRow = function LayerRow(_ref) {
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: columnClasses.acceptanceTime
-  }, /*#__PURE__*/React__default.createElement(Acceptance, null))), /*#__PURE__*/React__default.createElement(Grid, {
+  }, layerAcceptanceTimeLayout || /*#__PURE__*/React__default.createElement(Acceptance, {
+    acceptanceTime: layer.acceptanceTimeInMinutes,
+    onChangeAcceptanceTime: changeAcceptanceTime
+  }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: columnClasses.column6,
     alignItems: "center"
-  }, /*#__PURE__*/React__default.createElement(DeleteLayer, null), layerMenuLayout || /*#__PURE__*/React__default.createElement(LayerManagerMenuButton, {
+  }, layerDeleteLayout || /*#__PURE__*/React__default.createElement(DeleteLayer, {
+    onClick: deleteLayer
+  }), layerMenuLayout || /*#__PURE__*/React__default.createElement(LayerManagerMenuButton, {
     mapId: mapId,
     layerId: layerId,
     onLayerDuplicate: onLayerDuplicate
   })));
 };
-var Accordion = function Accordion(_ref3) {
-  var Styles = _ref3.Styles,
-    Acceptance = _ref3.Acceptance,
-    DeleteLayer = _ref3.DeleteLayer,
-    Opacity = _ref3.Opacity,
-    layerName = _ref3.layerName,
-    LeftButtons = _ref3.LeftButtons;
+var Accordion = function Accordion(_ref7) {
+  var Styles = _ref7.Styles,
+    Acceptance = _ref7.Acceptance,
+    DeleteLayer = _ref7.DeleteLayer,
+    Opacity = _ref7.Opacity,
+    layerName = _ref7.layerName,
+    LeftButtons = _ref7.LeftButtons;
   return /*#__PURE__*/React__default.createElement(CustomAccordion, {
     className: "medium-layermanager",
     defaultExpanded: false,
@@ -5071,9 +5135,7 @@ var Accordion = function Accordion(_ref3) {
         padding: 0
       }
     },
-    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(LeftButtons, {
-      size: "-medium"
-    }), /*#__PURE__*/React__default.createElement(Typography, {
+    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, LeftButtons, /*#__PURE__*/React__default.createElement(Typography, {
       sx: {
         fontWeight: '500',
         fontSize: '12px',
@@ -5092,7 +5154,7 @@ var Accordion = function Accordion(_ref3) {
     item: true
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, "Style"), /*#__PURE__*/React__default.createElement(Styles, null)), /*#__PURE__*/React__default.createElement(Grid, {
+  }, "Style"), Styles), /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     item: true,
     sx: {
@@ -5105,19 +5167,19 @@ var Accordion = function Accordion(_ref3) {
     }
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, "Opacity"), /*#__PURE__*/React__default.createElement(Opacity, null)), /*#__PURE__*/React__default.createElement(Grid, {
+  }, "Opacity"), Opacity), /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     item: true
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, "Acc Time"), /*#__PURE__*/React__default.createElement(Acceptance, null)), /*#__PURE__*/React__default.createElement(Grid, {
+  }, "Acc Time"), Acceptance), /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     item: true,
     justifyContent: "center"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     sx: {}
-  }, /*#__PURE__*/React__default.createElement(DeleteLayer, null)))));
+  }, DeleteLayer))));
 };
 
 /* *
@@ -11739,7 +11801,7 @@ var AddLayersButton = function AddLayersButton(_ref) {
     "data-testid": "addLayersButton",
     ref: ref,
     tooltipTitle: tooltip
-  }, /*#__PURE__*/React.createElement(Add, null)), /*#__PURE__*/React.createElement(AddLayersPopup, {
+  }, /*#__PURE__*/React.createElement(MapAdd, null)), /*#__PURE__*/React.createElement(AddLayersPopup, {
     open: open,
     handleClose: handleClose,
     onRenderTree: onRenderTree,
@@ -11764,15 +11826,25 @@ var AddLayersButton = function AddLayersButton(_ref) {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var BaseLayerRow = function BaseLayerRow(_ref) {
-  var mapId = _ref.mapId,
-    _ref$preloadedAvailab = _ref.preloadedAvailableBaseLayers,
-    preloadedAvailableBaseLayers = _ref$preloadedAvailab === void 0 ? availableDefaultBaseLayers : _ref$preloadedAvailab,
-    _ref$preloadedService = _ref.preloadedServices,
-    preloadedServices = _ref$preloadedService === void 0 ? preloadedDefaultBaseServices : _ref$preloadedService,
-    _ref$tooltip = _ref.tooltip,
-    tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip,
-    settings = _ref.settings;
+var _onRenderTree = function onRenderTree(_ref) {
+  var service = _ref.service,
+    mapId = _ref.mapId,
+    layerType = _ref.layerType;
+  return /*#__PURE__*/React.createElement(WMSLayerTreeConnect, {
+    mapId: mapId,
+    service: service,
+    layerType: layerType
+  });
+};
+var BaseLayerRow = function BaseLayerRow(_ref2) {
+  var mapId = _ref2.mapId,
+    _ref2$preloadedAvaila = _ref2.preloadedAvailableBaseLayers,
+    preloadedAvailableBaseLayers = _ref2$preloadedAvaila === void 0 ? availableDefaultBaseLayers : _ref2$preloadedAvaila,
+    _ref2$preloadedServic = _ref2.preloadedServices,
+    preloadedServices = _ref2$preloadedServic === void 0 ? preloadedDefaultBaseServices : _ref2$preloadedServic,
+    _ref2$tooltip = _ref2.tooltip,
+    tooltip = _ref2$tooltip === void 0 ? '' : _ref2$tooltip,
+    settings = _ref2.settings;
   var _a, _b, _c, _d, _e;
   var theme = useTheme$2();
   return /*#__PURE__*/React.createElement(Grid, {
@@ -11794,7 +11866,7 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
     preloadedServices: preloadedServices,
     tooltip: tooltip,
     onRenderTree: function onRenderTree(service) {
-      return /*#__PURE__*/React.createElement(WMSLayerTreeConnect, {
+      return _onRenderTree({
         mapId: mapId,
         service: service,
         layerType: layerTypes.LayerType.baseLayer
@@ -12361,6 +12433,14 @@ var KeywordFilterButtonConnect = function KeywordFilterButtonConnect(_ref) {
 var isURL = function isURL(string) {
   return /^https?:\/\//.test(string);
 };
+var ClearButton = function ClearButton(_ref) {
+  var onClick = _ref.onClick;
+  return /*#__PURE__*/React__default.createElement(CustomIconButton, {
+    tooltipTitle: "Clear",
+    sx: buttonStyle,
+    onClick: onClick
+  }, /*#__PURE__*/React__default.createElement(Clear, null));
+};
 var buttonStyle = {
   '&.MuiButtonBase-root.MuiIconButton-root': {
     width: 48,
@@ -12368,25 +12448,20 @@ var buttonStyle = {
     marginRight: '-12px'
   }
 };
-var SearchFieldButtonContainer = function SearchFieldButtonContainer(_ref) {
-  var localSearchString = _ref.localSearchString,
-    onClickClear = _ref.onClickClear,
-    setPopupIsOpen = _ref.setPopupIsOpen;
-  var ClearButton = function ClearButton() {
-    return /*#__PURE__*/React__default.createElement(CustomIconButton, {
-      tooltipTitle: "Clear",
-      sx: buttonStyle,
-      onClick: function onClick() {
-        onClickClear();
-      }
-    }, /*#__PURE__*/React__default.createElement(Clear, null));
-  };
+var SearchFieldButtonContainer = function SearchFieldButtonContainer(_ref2) {
+  var localSearchString = _ref2.localSearchString,
+    onClickClear = _ref2.onClickClear,
+    setPopupIsOpen = _ref2.setPopupIsOpen;
   if (isURL(localSearchString)) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
       style: {
         marginRight: '15px'
       }
-    }, /*#__PURE__*/React__default.createElement(ClearButton, null)), /*#__PURE__*/React__default.createElement(Button, {
+    }, /*#__PURE__*/React__default.createElement(ClearButton, {
+      onClick: function onClick() {
+        return onClickClear();
+      }
+    })), /*#__PURE__*/React__default.createElement(Button, {
       variant: "tertiary",
       onClick: function onClick() {
         return setPopupIsOpen(true);
@@ -12394,7 +12469,11 @@ var SearchFieldButtonContainer = function SearchFieldButtonContainer(_ref) {
     }, "Save"));
   }
   if (localSearchString) {
-    return /*#__PURE__*/React__default.createElement(ClearButton, null);
+    return /*#__PURE__*/React__default.createElement(ClearButton, {
+      onClick: function onClick() {
+        return onClickClear();
+      }
+    });
   }
   return /*#__PURE__*/React__default.createElement(CustomIconButton, {
     tooltipTitle: "Search",
@@ -16386,12 +16465,20 @@ var handleMomentISOString = function handleMomentISOString(dateIn) {
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
-var DimensionSelectSliderConnect = function DimensionSelectSliderConnect(_ref) {
-  var layerId = _ref.layerId,
-    dimConfig = _ref.dimConfig,
-    dimensionName = _ref.dimensionName,
-    handleDimensionValueChanged = _ref.handleDimensionValueChanged,
-    handleSyncChanged = _ref.handleSyncChanged;
+var Icon$1 = function Icon(_ref) {
+  var isLayerDimensionSynced = _ref.isLayerDimensionSynced;
+  return isLayerDimensionSynced ? /*#__PURE__*/React.createElement(Link, {
+    "data-testid": "syncIcon"
+  }) : /*#__PURE__*/React.createElement(LinkOff, {
+    "data-testid": "syncDisIcon"
+  });
+};
+var DimensionSelectSliderConnect = function DimensionSelectSliderConnect(_ref2) {
+  var layerId = _ref2.layerId,
+    dimConfig = _ref2.dimConfig,
+    dimensionName = _ref2.dimensionName,
+    handleDimensionValueChanged = _ref2.handleDimensionValueChanged,
+    handleSyncChanged = _ref2.handleSyncChanged;
   var layerDimension = useSelector(function (store) {
     return layerSelectors.getLayerDimension(store, layerId, dimensionName);
   });
@@ -16407,13 +16494,6 @@ var DimensionSelectSliderConnect = function DimensionSelectSliderConnect(_ref) {
   var marks = marksByDimension(wmsDimension);
   var isLayerDimensionSynced = layerDimension.synced !== undefined && layerDimension.synced === true;
   var tooltipTitle = isLayerDimensionSynced ? 'Click to disconnect layer' : 'Click to connect layer';
-  var Icon = function Icon() {
-    return isLayerDimensionSynced ? /*#__PURE__*/React.createElement(Link, {
-      "data-testid": "syncIcon"
-    }) : /*#__PURE__*/React.createElement(LinkOff, {
-      "data-testid": "syncDisIcon"
-    });
-  };
   return /*#__PURE__*/React.createElement(Grid, {
     key: layerId,
     item: true,
@@ -16427,7 +16507,9 @@ var DimensionSelectSliderConnect = function DimensionSelectSliderConnect(_ref) {
     sx: {
       margin: '5px'
     }
-  }, /*#__PURE__*/React.createElement(Icon, null)), /*#__PURE__*/React.createElement(DimensionSelectSlider, {
+  }, /*#__PURE__*/React.createElement(Icon$1, {
+    isLayerDimensionSynced: isLayerDimensionSynced
+  })), /*#__PURE__*/React.createElement(DimensionSelectSlider, {
     marks: marks,
     layerTitle: layerTitle,
     reverse: dimConfig ? dimConfig.reversed : false,
@@ -16959,16 +17041,17 @@ var useCanvasTarget = function useCanvasTarget(eventType) {
   }, [eventType, pointerEventListener]); // Only add/remove event listener when listener really changes, that is, NOT necessarily between every re-render.
   return [isTargetNode, nodeRef];
 };
-var needleGeom = {
+var timeBoxGeom = {
   smallWidth: 126,
   largeWidth: 167,
   height: 24,
   cornerRadius: 5,
-  lineWidth: 1
+  lineWidth: 1,
+  iconWidth: 25
 };
 var AUTO_MOVE_AREA_PADDING = 1;
 var getAutoMoveAreaWidth = function getAutoMoveAreaWidth(scale) {
-  return (scale === mapEnums.Scale.Year ? needleGeom.largeWidth : needleGeom.smallWidth) / 2 + AUTO_MOVE_AREA_PADDING;
+  return (scale === mapEnums.Scale.Year ? timeBoxGeom.largeWidth + timeBoxGeom.iconWidth : timeBoxGeom.smallWidth + timeBoxGeom.iconWidth) / 2 + AUTO_MOVE_AREA_PADDING;
 };
 /** Reusable business logic for how to handle events that set time to now (closest).
  * Used in NowButton and TimeSliderLegend.
@@ -17102,7 +17185,7 @@ var timeSliderUtils = /*#__PURE__*/Object.freeze({
   getNewCenterOfFixedPointZoom: getNewCenterOfFixedPointZoom,
   moveRelativeToTimePoint: moveRelativeToTimePoint,
   useCanvasTarget: useCanvasTarget,
-  needleGeom: needleGeom,
+  timeBoxGeom: timeBoxGeom,
   AUTO_MOVE_AREA_PADDING: AUTO_MOVE_AREA_PADDING,
   getAutoMoveAreaWidth: getAutoMoveAreaWidth,
   handleSetNowEvent: handleSetNowEvent,
@@ -19329,8 +19412,8 @@ var drawRoundedRectangle = function drawRoundedRectangle(ctx, x, y, width, heigh
   ctx.beginPath();
   ctx.strokeStyle = playerTimeMarkers.fill;
   ctx.fillStyle = playerTimeMarkers.fill;
-  ctx.lineWidth = needleGeom.lineWidth;
-  var halfLineWidth = needleGeom.lineWidth / 2;
+  ctx.lineWidth = timeBoxGeom.lineWidth;
+  var halfLineWidth = timeBoxGeom.lineWidth / 2;
   // Top left corner
   ctx.moveTo(halfLineWidth, height / 2);
   ctx.arcTo(halfLineWidth, halfLineWidth, width / 2, halfLineWidth, cornerRadius);
@@ -19376,18 +19459,18 @@ var drawTextAnnotation = function drawTextAnnotation(ctx, x, y, text, theme) {
   ctx.restore();
 };
 var drawNewCurrentTimeBox = function drawNewCurrentTimeBox(ctx, selectedTime, selectedPx, span, theme, isAutoUpdating) {
-  var iconWidth = 25;
-  var smallWidth = needleGeom.smallWidth,
-    largeWidth = needleGeom.largeWidth,
-    height = needleGeom.height;
-  var boxWidth = span > secondsInYear ? largeWidth : smallWidth;
+  var smallWidth = timeBoxGeom.smallWidth,
+    largeWidth = timeBoxGeom.largeWidth,
+    height = timeBoxGeom.height,
+    iconWidth = timeBoxGeom.iconWidth;
+  var boxWidth = span >= secondsInYear ? largeWidth : smallWidth;
   var needleX = selectedPx - boxWidth / 2;
-  var needleY = needleGeom.lineWidth;
-  drawRoundedRectangle(ctx, needleX - iconWidth, needleY, boxWidth + iconWidth, height, needleGeom.cornerRadius, theme);
-  var timeFormat = span > secondsInYear ? 'Y ddd DD MMM HH:mm' : 'ddd DD MMM HH:mm';
+  var needleY = timeBoxGeom.lineWidth;
+  drawRoundedRectangle(ctx, needleX - iconWidth / 2, needleY, boxWidth + iconWidth, height, timeBoxGeom.cornerRadius, theme);
+  var timeFormat = span >= secondsInYear ? 'Y ddd DD MMM HH:mm' : 'ddd DD MMM HH:mm';
   var timeText = moment.utc(selectedTime * 1000).format(timeFormat).toString();
-  drawTextAnnotation(ctx, needleX + boxWidth / 2 - iconWidth, needleY + height / 2, timeText, theme);
-  drawAutoUpdateIcon(ctx, needleX + boxWidth - iconWidth, needleY, theme, isAutoUpdating);
+  drawTextAnnotation(ctx, needleX + boxWidth / 2 - iconWidth / 2, needleY + height / 2, timeText, theme);
+  drawAutoUpdateIcon(ctx, needleX + boxWidth - iconWidth / 2, needleY, theme, isAutoUpdating);
 };
 var renderTimeSliderCurrentTimeBox = function renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, selected, secondsPerPx, span, isAutoUpdating) {
   // map unix timestamps to pixel values
@@ -19414,7 +19497,8 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
     unfilteredSelectedTime = _ref.unfilteredSelectedTime,
     isAutoUpdating = _ref.isAutoUpdating,
     onSetNewDate = _ref.onSetNewDate,
-    setUnfilteredSelectedTime = _ref.setUnfilteredSelectedTime;
+    setUnfilteredSelectedTime = _ref.setUnfilteredSelectedTime,
+    onSetCenterTime = _ref.onSetCenterTime;
   var TIME_BOX_WIDTH = 140;
   var theme = useTheme$2();
   var _useCanvasTarget = useCanvasTarget('mousedown'),
@@ -19432,6 +19516,20 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     canvasWidth = _React$useState6[0],
     setCanvasWidth = _React$useState6[1];
+  // Move TimeBox back to view if it goes out of bounds
+  useEffect(function () {
+    if (!(onSetCenterTime && canvasWidth && !mouseDownInTimeBox)) {
+      return;
+    }
+    var receivedTimePx = timestampToPixel(selectedTime || moment.utc().unix(), centerTime, canvasWidth, secondsPerPx);
+    var moveWidth = getAutoMoveAreaWidth(getFundamentalScale$1(secondsPerPx));
+    if (receivedTimePx < moveWidth) {
+      onSetCenterTime(pixelToTimestamp(canvasWidth / 2 - (moveWidth - receivedTimePx), centerTime, canvasWidth, secondsPerPx));
+    } else if (receivedTimePx > canvasWidth - moveWidth) {
+      onSetCenterTime(pixelToTimestamp(canvasWidth / 2 + (receivedTimePx - (canvasWidth - moveWidth)), centerTime, canvasWidth, secondsPerPx));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedTime]);
   var isTimeBoxArea = function isTimeBoxArea(x, selectedTimePx) {
     return x > selectedTimePx - TIME_BOX_WIDTH / 2 && x < selectedTimePx + TIME_BOX_WIDTH / 2;
   };
@@ -20270,7 +20368,8 @@ var connectRedux = connect(function (store, props) {
 }, {
   setTimeSliderUnfilteredSelectedTime: mapActions.setTimeSliderUnfilteredSelectedTime,
   stopMapAnimation: mapActions.mapStopAnimation,
-  setTime: genericActions.setTime
+  setTime: genericActions.setTime,
+  setCenterTime: mapActions.setTimeSliderCenterTime
 });
 var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBoxConnectComponent(_ref) {
   var mapId = _ref.mapId,
@@ -20286,7 +20385,8 @@ var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBox
     stopMapAnimation = _ref.stopMapAnimation,
     unfilteredSelectedTime = _ref.unfilteredSelectedTime,
     setTimeSliderUnfilteredSelectedTime = _ref.setTimeSliderUnfilteredSelectedTime,
-    setTime = _ref.setTime;
+    setTime = _ref.setTime,
+    setCenterTime = _ref.setCenterTime;
   var _getTimeBounds = getTimeBounds(dimensions),
     selectedTime = _getTimeBounds.selectedTime;
   var _getDataLimitsFromLay = getDataLimitsFromLayers(layers),
@@ -20322,6 +20422,12 @@ var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBox
         origin: 'TimeSliderConnect, 139',
         value: handleMomentISOString(newDate)
       });
+    },
+    onSetCenterTime: function onSetCenterTime(newTime) {
+      setCenterTime({
+        mapId: mapId,
+        timeSliderCenterTime: newTime
+      });
     }
   });
 };
@@ -25413,6 +25519,7 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     _this.addPointToMultiPointFeature = _this.addPointToMultiPointFeature.bind(_assertThisInitialized$1(_this));
     _this.addVerticesToPolygonFeature = _this.addVerticesToPolygonFeature.bind(_assertThisInitialized$1(_this));
     _this.checkIfFeatureIsBox = _this.checkIfFeatureIsBox.bind(_assertThisInitialized$1(_this));
+    _this.handleGeoJSONUpdate = _this.handleGeoJSONUpdate.bind(_assertThisInitialized$1(_this));
     _this.handleDrawMode(props.drawMode);
     _this.textPositions = [];
     _this.mouseOverPolygonCoordinates = [];
@@ -25450,15 +25557,33 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     key: "componentDidMount",
     value: function componentDidMount() {
       document.addEventListener('keydown', this.handleKeyDown);
+      var _this$props = this.props,
+        mapId = _this$props.mapId,
+        isInDeleteMode = _this$props.isInDeleteMode;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
+      if (this.disabled === undefined) {
+        this.disabled = isInDeleteMode;
+      }
+      if (webmapjs !== undefined && this.listenersInitialized !== true) {
+        this.listenersInitialized = true;
+        webmapjs.addListener('beforecanvasdisplay', this.beforeDraw, true);
+        webmapjs.addListener('beforemousemove', this.mouseMove, true);
+        webmapjs.addListener('beforemousedown', this.mouseDown, true);
+        webmapjs.addListener('beforemouseup', this.mouseUp, true);
+        this.disabled = false;
+      }
+      if (webmapjs !== undefined) {
+        webmapjs.draw();
+      }
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$props = this.props,
-        geojson = _this$props.geojson,
-        isInEditMode = _this$props.isInEditMode,
-        isInDeleteMode = _this$props.isInDeleteMode,
-        drawMode = _this$props.drawMode;
+      var _this$props2 = this.props,
+        geojson = _this$props2.geojson,
+        isInEditMode = _this$props2.isInEditMode,
+        isInDeleteMode = _this$props2.isInDeleteMode,
+        drawMode = _this$props2.drawMode;
       var prevGeojson = prevProps && prevProps.geojson;
       var prevIsInEditMode = prevProps && prevProps.isInEditMode;
       var prevIsInDeleteMode = prevProps && prevProps.isInDeleteMode;
@@ -25535,7 +25660,8 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "getPixelCoordFromGeoCoord",
     value: function getPixelCoordFromGeoCoord(featureCoords) {
-      var webmapjs = this.props.webmapjs;
+      var mapId = this.props.mapId;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       var _webmapjs$getSize = webmapjs.getSize(),
         width = _webmapjs$getSize.width,
         height = _webmapjs$getSize.height;
@@ -25651,10 +25777,10 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     key: "mouseMove",
     value: function mouseMove(event) {
       var _this2 = this;
-      var _this$props2 = this.props,
-        isInEditMode = _this$props2.isInEditMode,
-        featureNrToEdit = _this$props2.featureNrToEdit,
-        onHoverFeature = _this$props2.onHoverFeature;
+      var _this$props3 = this.props,
+        isInEditMode = _this$props3.isInEditMode,
+        featureNrToEdit = _this$props3.featureNrToEdit,
+        onHoverFeature = _this$props3.onHoverFeature;
       if (event && event.rightButton === true) {
         return undefined;
       }
@@ -25685,7 +25811,8 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
           } else {
             _this2.featureEvent = undefined;
           }
-          var webmapjs = _this2.props.webmapjs;
+          var mapId = _this2.props.mapId;
+          var webmapjs = webmapUtils.getWMJSMapById(mapId);
           webmapjs && webmapjs.draw('MapDraw::onHoverFeature');
         };
         window.clearTimeout(this.mouseStoppedTimer);
@@ -25698,7 +25825,8 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
       if (!feature) {
         return undefined;
       }
-      var webmapjs = this.props.webmapjs;
+      var mapId = this.props.mapId;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
         x: mouseX,
         y: mouseY
@@ -25795,9 +25923,10 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     value: function insertVertexInEdge(event) {
       var mouseX = event.mouseX,
         mouseY = event.mouseY;
-      var _this$props3 = this.props,
-        webmapjs = _this$props3.webmapjs,
-        featureNrToEdit = _this$props3.featureNrToEdit;
+      var _this$props4 = this.props,
+        mapId = _this$props4.mapId,
+        featureNrToEdit = _this$props4.featureNrToEdit;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       if (this.myDrawMode === DRAWMODE.POLYGON) {
         if (this.selectedEdge !== EDGE.NONE && this.myEditMode !== EDITMODE.DELETE_FEATURES) {
           this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
@@ -25846,9 +25975,10 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     value: function createNewFeature(event) {
       var mouseX = event.mouseX,
         mouseY = event.mouseY;
-      var _this$props4 = this.props,
-        webmapjs = _this$props4.webmapjs,
-        featureNrToEdit = _this$props4.featureNrToEdit;
+      var _this$props5 = this.props,
+        mapId = _this$props5.mapId,
+        featureNrToEdit = _this$props5.featureNrToEdit;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       if (this.myEditMode === EDITMODE.EMPTY) {
         this.myEditMode = EDITMODE.ADD_FEATURE;
         var feature = this.geojson.features[featureNrToEdit];
@@ -25960,9 +26090,10 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     value: function addPointToMultiPointFeature(event) {
       var mouseX = event.mouseX,
         mouseY = event.mouseY;
-      var _this$props5 = this.props,
-        webmapjs = _this$props5.webmapjs,
-        featureNrToEdit = _this$props5.featureNrToEdit;
+      var _this$props6 = this.props,
+        mapId = _this$props6.mapId,
+        featureNrToEdit = _this$props6.featureNrToEdit;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       if (this.myDrawMode === DRAWMODE.MULTIPOINT) {
         if (this.myEditMode === EDITMODE.ADD_FEATURE && this.snappedPolygonIndex !== SNAPPEDFEATURE.NONE) {
           this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
@@ -25985,9 +26116,10 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     value: function addVerticesToPolygonFeature(event) {
       var mouseX = event.mouseX,
         mouseY = event.mouseY;
-      var _this$props6 = this.props,
-        webmapjs = _this$props6.webmapjs,
-        featureNrToEdit = _this$props6.featureNrToEdit;
+      var _this$props7 = this.props,
+        mapId = _this$props7.mapId,
+        featureNrToEdit = _this$props7.featureNrToEdit;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       if (this.myDrawMode === DRAWMODE.POLYGON) {
         if (this.myEditMode === EDITMODE.ADD_FEATURE && this.snappedPolygonIndex !== SNAPPEDFEATURE.NONE) {
           this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
@@ -26010,9 +26142,10 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     value: function addPointToLineStringFeature(event) {
       var mouseX = event.mouseX,
         mouseY = event.mouseY;
-      var _this$props7 = this.props,
-        webmapjs = _this$props7.webmapjs,
-        featureNrToEdit = _this$props7.featureNrToEdit;
+      var _this$props8 = this.props,
+        mapId = _this$props8.mapId,
+        featureNrToEdit = _this$props8.featureNrToEdit;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       if (this.myDrawMode === DRAWMODE.LINESTRING) {
         if (this.myEditMode === EDITMODE.ADD_FEATURE) {
           this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
@@ -26084,9 +26217,9 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "deletePolygon",
     value: function deletePolygon(index) {
-      var _this$props8 = this.props,
-        featureNrToEdit = _this$props8.featureNrToEdit,
-        deletePolygonCallback = _this$props8.deletePolygonCallback;
+      var _this$props9 = this.props,
+        featureNrToEdit = _this$props9.featureNrToEdit,
+        deletePolygonCallback = _this$props9.deletePolygonCallback;
       var feature = this.geojson.features[featureNrToEdit];
       feature.geometry.coordinates.splice(index, 1);
       if (deletePolygonCallback) {
@@ -26099,9 +26232,10 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     key: "deleteFeature",
     value: function deleteFeature() {
       /* Deletes any features under the mousecursor */
-      var _this$props9 = this.props,
-        webmapjs = _this$props9.webmapjs,
-        featureNrToEdit = _this$props9.featureNrToEdit;
+      var _this$props10 = this.props,
+        mapId = _this$props10.mapId,
+        featureNrToEdit = _this$props10.featureNrToEdit;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       if (this.mouseIsOverVertexNr === VERTEX.NONE) {
         return;
       }
@@ -26137,9 +26271,9 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     key: "mouseUp",
     value: function mouseUp(event) {
       var _this4 = this;
-      var _this$props10 = this.props,
-        isInEditMode = _this$props10.isInEditMode,
-        onClickFeature = _this$props10.onClickFeature;
+      var _this$props11 = this.props,
+        isInEditMode = _this$props11.isInEditMode,
+        onClickFeature = _this$props11.onClickFeature;
       if (event && event.rightButton === true) {
         return;
       }
@@ -26190,13 +26324,14 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "cancelEdit",
     value: function cancelEdit(cancelLastPoint) {
-      var _this$props11 = this.props,
-        isInEditMode = _this$props11.isInEditMode,
-        featureNrToEdit = _this$props11.featureNrToEdit;
+      var _this$props12 = this.props,
+        isInEditMode = _this$props12.isInEditMode,
+        featureNrToEdit = _this$props12.featureNrToEdit;
       if (isInEditMode === false) {
         return;
       }
-      var webmapjs = this.props.webmapjs;
+      var mapId = this.props.mapId;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       /* When in addpolygon mode, finish the polygon */
       if (this.myEditMode === EDITMODE.ADD_FEATURE) {
         this.myEditMode = EDITMODE.EMPTY;
@@ -26383,7 +26518,8 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     value: function componentCleanup() {
       // this will hold the cleanup code
       document.removeEventListener('keydown', this.handleKeyDown);
-      var webmapjs = this.props.webmapjs;
+      var mapId = this.props.mapId;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       if (webmapjs !== undefined && this.listenersInitialized === true) {
         this.listenersInitialized = undefined;
         webmapjs.removeListener('beforecanvasdisplay', this.beforeDraw);
@@ -26483,9 +26619,9 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
        just before viewer will flip the back canvas buffer to the front.
        You are free to draw anything you like on the canvas.
       */
-      var _this$props12 = this.props,
-        featureNrToEdit = _this$props12.featureNrToEdit,
-        isInEditMode = _this$props12.isInEditMode;
+      var _this$props13 = this.props,
+        featureNrToEdit = _this$props13.featureNrToEdit,
+        isInEditMode = _this$props13.isInEditMode;
       if (!this.geojson || !this.geojson.features || !this.geojson.features.length) {
         return;
       }
@@ -26888,9 +27024,9 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "drawLine",
     value: function drawLine(ctx, XYCoords, featureIndex, lineStringIndex) {
-      var _this$props13 = this.props,
-        isInEditMode = _this$props13.isInEditMode,
-        featureNrToEdit = _this$props13.featureNrToEdit;
+      var _this$props14 = this.props,
+        isInEditMode = _this$props14.isInEditMode,
+        featureNrToEdit = _this$props14.featureNrToEdit;
       var feature = this.geojson.features[featureIndex];
       if (!feature || !feature.geometry) {
         return;
@@ -26963,9 +27099,9 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "drawPolygon",
     value: function drawPolygon(ctx, XYCoords, featureIndex, polygonIndex) {
-      var _this$props14 = this.props,
-        isInEditMode = _this$props14.isInEditMode,
-        featureNrToEdit = _this$props14.featureNrToEdit;
+      var _this$props15 = this.props,
+        isInEditMode = _this$props15.isInEditMode,
+        featureNrToEdit = _this$props15.featureNrToEdit;
       var feature = this.geojson.features[featureIndex];
       if (!feature || !feature.geometry) {
         return;
@@ -27039,7 +27175,8 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "convertGeoCoordsToScreenCoords",
     value: function convertGeoCoordsToScreenCoords(featureCoords) {
-      var webmapjs = this.props.webmapjs;
+      var mapId = this.props.mapId;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       var XYCoords = [];
       for (var j = 0; j < featureCoords.length; j += 1) {
         if (featureCoords[j].length < 2) {
@@ -27134,23 +27271,6 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props15 = this.props,
-        webmapjs = _this$props15.webmapjs,
-        isInDeleteMode = _this$props15.isInDeleteMode;
-      if (this.disabled === undefined) {
-        this.disabled = isInDeleteMode;
-      }
-      if (webmapjs !== undefined && this.listenersInitialized !== true) {
-        this.listenersInitialized = true;
-        webmapjs.addListener('beforecanvasdisplay', this.beforeDraw, true);
-        webmapjs.addListener('beforemousemove', this.mouseMove, true);
-        webmapjs.addListener('beforemousedown', this.mouseDown, true);
-        webmapjs.addListener('beforemouseup', this.mouseUp, true);
-        this.disabled = false;
-      }
-      if (webmapjs !== undefined) {
-        webmapjs.draw();
-      }
       return /*#__PURE__*/React.createElement("div", null);
     }
   }]);
@@ -27181,7 +27301,7 @@ MapDraw.defaultProps = {
  * */
 var MapDrawContainer = function MapDrawContainer(_ref) {
   var featureLayers = _ref.featureLayers,
-    webMapJS = _ref.webMapJS;
+    mapId = _ref.mapId;
   return /*#__PURE__*/React.createElement(React.Fragment, null, featureLayers.map(function (layer) {
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "featureLayer-".concat(layer.id),
@@ -27194,7 +27314,7 @@ var MapDrawContainer = function MapDrawContainer(_ref) {
       isInEditMode: layer.isInEditMode,
       isInDeleteMode: layer.isInDeleteMode,
       drawMode: layer.drawMode,
-      webmapjs: webMapJS,
+      mapId: mapId,
       onHoverFeature: function onHoverFeature(hoverInfo) {
         if (layer.onHoverFeature) {
           layer.onHoverFeature(hoverInfo);
@@ -27684,6 +27804,9 @@ var DrawingTool = function DrawingTool(_ref) {
 };
 
 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 INPUT_AREA = 'Area name';
 var INPUT_OPACITY = 'Opacity';
@@ -27869,15 +27992,15 @@ var DrawingToolForm = function DrawingToolForm(_ref) {
 var Wrapper = function Wrapper(props) {
   var _props$id = props.id,
     id = _props$id === void 0 ? '' : _props$id,
-    areaName = props.areaName,
+    _props$areaName = props.areaName,
+    areaName = _props$areaName === void 0 ? '' : _props$areaName,
     area = props.area;
   return /*#__PURE__*/React.createElement(ReactHookFormProvider, {
     options: Object.assign(Object.assign({}, defaultFormOptions), {
       defaultValues: {
         id: id,
         area: area,
-        // TODO https://gitlab.com/opengeoweb/opengeoweb/-/issues/3954: use date as default name
-        areaName: areaName || 'Area 51'
+        areaName: getAreaName(areaName)
       }
     })
   }, /*#__PURE__*/React.createElement(DrawingToolForm, Object.assign({}, props)));
@@ -28644,7 +28767,6 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
         mapId = _this$props5.mapId;
       var adagucInitialised = this.state.adagucInitialised;
       var featureLayers = getFeatureLayers(children);
-      var wmjsMap = webmapUtils.getWMJSMapById(mapId);
       return /*#__PURE__*/React.createElement("div", {
         className: "MapView",
         style: {
@@ -28688,7 +28810,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
         }
       }, /*#__PURE__*/React.createElement("div", null, children), adagucInitialised && featureLayers && featureLayers.length ? /*#__PURE__*/React.createElement(MapDrawContainer, {
         featureLayers: featureLayers,
-        webMapJS: wmjsMap
+        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
@@ -30794,6 +30916,7 @@ var TimeSliderClock = function TimeSliderClock(_ref2) {
     options: options,
     controls: controls
   }), /*#__PURE__*/React__default.createElement(Draggable, {
+    cancel: ".MuiButtonBase-root",
     nodeRef: clockElement,
     bounds: "parent",
     position: position,
@@ -33973,12 +34096,13 @@ var componentsLookUp = function componentsLookUp(_ref) {
     case 'Map':
       {
         var mapPreset = initialProps.mapPreset,
-          mapControls = initialProps.mapControls;
+          mapControls = initialProps.mapControls,
+          shouldDisplayDrawControls = initialProps.shouldDisplayDrawControls;
         return /*#__PURE__*/React__default.createElement(ConfigurableMapConnect, Object.assign({}, mapPreset, {
           id: id,
           "data-testid": "coreConfigurableMapConnect",
           displayGetFeatureInfoButtonInMap: true,
-          shouldDisplayDrawControls: true,
+          shouldDisplayDrawControls: shouldDisplayDrawControls,
           mapControls: mapControls
         }));
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/core",
-  "version": "6.0.2",
+  "version": "6.0.4",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,12 +14,12 @@
   "peerDependencies": {
     "@mui/material": "5.12.0",
     "@mui/system": "5.14.5",
-    "@opengeoweb/api": "6.0.2",
-    "@opengeoweb/form-fields": "6.0.2",
-    "@opengeoweb/shared": "6.0.2",
-    "@opengeoweb/store": "6.0.2",
-    "@opengeoweb/theme": "6.0.2",
-    "@opengeoweb/webmap": "6.0.2",
+    "@opengeoweb/api": "6.0.4",
+    "@opengeoweb/form-fields": "6.0.4",
+    "@opengeoweb/shared": "6.0.4",
+    "@opengeoweb/store": "6.0.4",
+    "@opengeoweb/theme": "6.0.4",
+    "@opengeoweb/webmap": "6.0.4",
     "@redux-eggs/redux-toolkit": "2.2.0",
     "@redux-eggs/saga-extension": "2.2.0",
     "@reduxjs/toolkit": "1.9.5",

package/src/lib/components/ComponentsLookUp/componentsLookUp.d.ts

@@ -11,6 +11,7 @@ export interface InitialMapProps {
     mapPreset: mapTypes.MapPreset;
     syncGroupsIds: string[];
     mapControls?: React.ReactNode;
+    shouldDisplayDrawControls?: boolean;
 }
 interface InitialSliderProps {
     sliderPreset: {

package/src/lib/components/LayerManager/AddLayersButton/AddLayersButton.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { layerSelectTypes, layerTypes } from '@opengeoweb/store';
 interface AddLayerButtonProps {
-    onRenderTree?: (service: layerSelectTypes.LayerSelectService) => React.ReactChild;
+    onRenderTree?: (service: layerSelectTypes.LayerSelectService) => React.ReactNode;
     preloadedServices?: layerSelectTypes.LayerSelectService[];
     tooltip?: string;
     layerType?: layerTypes.LayerType;

package/src/lib/components/LayerManager/AddLayersPopup/AddLayersPopup.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { layerSelectTypes, layerTypes } from '@opengeoweb/store';
 interface AddLayerPopupProps {
-    onRenderTree?: (service: layerSelectTypes.LayerSelectService) => React.ReactChild;
+    onRenderTree?: (service: layerSelectTypes.LayerSelectService) => React.ReactNode;
     preloadedServices?: layerSelectTypes.LayerSelectService[];
     open?: boolean;
     handleClose?: () => void;

package/src/lib/components/MapDraw/DrawingToolForm/DrawingToolForm.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 export declare const opacityOptions: number[];
+export declare const getAreaName: (areaName: string) => string;
 export declare const SAVE_AREA_BUTTON = "Save area";
 export declare const INPUT_AREA = "Area name";
 export declare const INPUT_OPACITY = "Opacity";

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { GeoJsonProperties, GeometryObject, Position } from 'geojson';
-import { WMJSMap } from '@opengeoweb/webmap';
 import { GeoJsonFeatureType, GeoJsonFeature, GeoFeatureStyle, Coordinate } from './geojsonShapes';
 type DrawStyle = {
     x: number;
@@ -23,7 +22,7 @@ export interface FeatureEvent {
     feature: GeoJsonFeature;
 }
 export interface MapDrawProps {
-    webmapjs: WMJSMap;
+    mapId: string;
     geojson: GeoJSON.FeatureCollection;
     drawMode: string;
     deletePolygonCallback?: string;

package/src/lib/components/MapDraw/MapDrawContainer.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { GeometryObject } from 'geojson';
-import { WMJSMap } from '@opengeoweb/webmap';
 import { DrawModeExitCallback, FeatureEvent } from './MapDraw';
 export type FeatureLayer = {
     id: string;
@@ -18,7 +17,7 @@ export type FeatureLayer = {
 };
 interface MapDrawContainerProps {
     featureLayers: FeatureLayer[];
-    webMapJS: WMJSMap;
+    mapId: string;
 }
 declare const MapDrawContainer: React.FC<MapDrawContainerProps>;
 export default MapDrawContainer;

package/src/lib/components/TimeSlider/TimeSliderCurrentTimeBox/TimeSliderCurrentTimeBox.d.ts

@@ -11,6 +11,7 @@ export interface TimeSliderCurrentTimeBoxProps {
     isAutoUpdating?: boolean;
     setUnfilteredSelectedTime: (unfilteredSelectedTime: number) => void;
     onSetNewDate?: (newDate: string) => void;
+    onSetCenterTime?: (newTime: number) => void;
 }
 declare const TimeSliderCurrentTimeBox: React.FC<TimeSliderCurrentTimeBoxProps>;
 export default TimeSliderCurrentTimeBox;

package/src/lib/components/TimeSlider/TimeSliderCurrentTimeBox/TimeSliderCurrentTimeBoxConnect.d.ts

@@ -15,6 +15,7 @@ interface TimeSliderCurrentTimeBoxConnectComponentProps {
     setTimeSliderUnfilteredSelectedTime?: typeof mapActions.setTimeSliderUnfilteredSelectedTime;
     stopMapAnimation?: typeof mapActions.mapStopAnimation;
     setTime?: typeof genericActions.setTime;
+    setCenterTime?: typeof mapActions.setTimeSliderCenterTime;
 }
 declare const TimeSliderCurrentTimeBoxConnect: import("react-redux").ConnectedComponent<React.FC<TimeSliderCurrentTimeBoxConnectComponentProps>, {
     mapId: string;
@@ -31,6 +32,7 @@ declare const TimeSliderCurrentTimeBoxConnect: import("react-redux").ConnectedCo
     setTimeSliderUnfilteredSelectedTime?: import("@reduxjs/toolkit").ActionCreatorWithPayload<mapTypes.SetTimeSliderUnfilteredSelectedTimePayload, "mapReducer/setTimeSliderUnfilteredSelectedTime"> | undefined;
     stopMapAnimation?: import("@reduxjs/toolkit").ActionCreatorWithPayload<mapTypes.SetMapAnimationStopPayload, "mapReducer/mapStopAnimation"> | undefined;
     setTime?: import("@reduxjs/toolkit").ActionCreatorWithPayload<import("dist/libs/store/src/store/generic/types").SetTimePayload, string> | undefined;
+    setCenterTime?: import("@reduxjs/toolkit").ActionCreatorWithPayload<mapTypes.SetTimeSliderCenterTimePayload, "mapReducer/setTimeSliderCenterTime"> | undefined;
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").AnyAction>> | undefined;
     store?: import("redux").Store<any, import("redux").AnyAction> | undefined;
 }>;

package/src/lib/components/TimeSlider/timeSliderUtils.d.ts

@@ -69,12 +69,13 @@ export declare const moveRelativeToTimePoint: (timePoint: number, timePointPx: n
  *  ...
  */
 export declare const useCanvasTarget: (eventType: string) => [boolean, React.RefObject<CanvasComponent>];
-export declare const needleGeom: {
+export declare const timeBoxGeom: {
     smallWidth: number;
     largeWidth: number;
     height: number;
     cornerRadius: number;
     lineWidth: number;
+    iconWidth: number;
 };
 export declare const AUTO_MOVE_AREA_PADDING = 1;
 export declare const getAutoMoveAreaWidth: (scale: mapEnums.Scale) => number;

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { layerSelectTypes } from '@opengeoweb/store';
 interface WMSLoaderProps {
     onClickService?: (serviceURL: string, layerName: string) => void;
-    onRenderTree?: (service: layerSelectTypes.LayerSelectService) => React.ReactChild;
+    onRenderTree?: (service: layerSelectTypes.LayerSelectService) => React.ReactNode;
     highlightedLayers?: [];
     preloadedServices?: layerSelectTypes.LayerSelectService[];
     tooltip?: string;