@opengeoweb/core 4.18.0 → 4.19.0

package/index.esm.js

@@ -6,9 +6,9 @@ import React__default, { Component, useRef, useState, useEffect, useCallback } f
 import _, { debounce, isEqual, compact, escapeRegExp, groupBy, throttle, range } from 'lodash';
 import { takeLatest, put, select, call, takeEvery, all, delay } from 'redux-saga/effects';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
-import { CustomTooltip, ToolButton, ToolContainerDraggable, TooltipSelect, AlertIcon, useControlledTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, CustomAccordion, ManagerButton, AlertBanner, calculateDialogSizeAndPosition, CustomToggleButton, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
-import { Pause, Play, CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Add, Copy, None, 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, AutoUpdateActive, AutoUpdateInActive, Speed, FastForward, Clock, Now, Animation, Options, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
-import { Paper, Box, Typography, IconButton, Grid, MenuItem, Button, Popper, ListItemText, ListItemIcon, FormControl, InputLabel, List, ListItem, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, LinearProgress, InputAdornment, Backdrop, ListItemSecondaryAction, Checkbox, Switch, styled, Slider, Menu, useTheme, Snackbar } from '@mui/material';
+import { CustomTooltip, ToolButton, ToolContainerDraggable, CustomIconButton, TooltipSelect, AlertIcon, useControlledTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, CustomAccordion, AlertBanner, calculateDialogSizeAndPosition, CustomToggleButton, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
+import { Pause, Play, 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, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
+import { Paper, Box, Typography, Grid, MenuItem, Button, Popper, ListItemText, ListItemIcon, FormControl, InputLabel, List, ListItemButton, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, LinearProgress, Backdrop, ListItem, ListItemSecondaryAction, Checkbox, Switch, styled, Slider, Menu, useTheme, Snackbar } from '@mui/material';
 import { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, clearImageCache, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
 import { ReactSortable } from 'react-sortablejs';
 import Sortable from 'sortablejs';
@@ -19,6 +19,7 @@ import Grid$1 from '@mui/material/Grid';
 import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField } from '@opengeoweb/form-fields';
 import { useFormContext } from 'react-hook-form';
 import { Box as Box$2 } from '@mui/system';
+import { useResizeDetector } from 'react-resize-detector';
 import { debounce as debounce$1 } from 'throttle-debounce';
 import cloneDeep from 'lodash.clonedeep';
 import proj4 from 'proj4';
@@ -513,8 +514,10 @@ var unRegisterWMJSMap = function unRegisterWMJSMap(wmjsMapId) {
     wmjsMap.getListener().suspendEvents();
 
     try {
-      wmjsMap.stopAnimating && wmjsMap.stopAnimating(); // eslint-disable-next-line no-empty
-    } catch (e) {}
+      wmjsMap.stopAnimating && wmjsMap.stopAnimating();
+    } catch (e) {
+      console.warn(e);
+    }
 
     Object.keys(registeredWMLayersForReactLayerId).forEach(function (layerId) {
       var wmLayer = getWMLayerById(layerId);
@@ -967,8 +970,8 @@ var useCanvasTarget = function useCanvasTarget(eventType) {
       setTargetNode = _React$useState2[1]; // Check if pointer event targets current node element
 
 
-  var pointerEventListener = React__default.useCallback(function (e) {
-    setTargetNode(nodeRef.current.canvas ? nodeRef.current.canvas.isEqualNode(e.target) : false);
+  var pointerEventListener = React__default.useCallback(function (event) {
+    setTargetNode(nodeRef.current.canvas ? nodeRef.current.canvas.isEqualNode(event.target) : false);
   }, [nodeRef]);
   React__default.useEffect(function () {
     document.addEventListener(eventType, pointerEventListener);
@@ -2646,10 +2649,34 @@ var slice$5 = createSlice({
         map.autoUpdateLayerId = undefined;
       }
     },
-    setTimeSliderCenterTime: function setTimeSliderCenterTime(draft, action) {
+    setAutoTimestepLayerId: function setAutoTimestepLayerId(draft, action) {
       var _action$payload10 = action.payload,
           mapId = _action$payload10.mapId,
-          timeSliderCenterTime = _action$payload10.timeSliderCenterTime;
+          autoTimestepLayerId = _action$payload10.autoTimestepLayerId;
+      var map = draft.byId[mapId];
+
+      if (!map) {
+        return;
+      }
+
+      map.autoTimeStepLayerId = autoTimestepLayerId;
+    },
+    setAutoUpdateLayerId: function setAutoUpdateLayerId(draft, action) {
+      var _action$payload11 = action.payload,
+          mapId = _action$payload11.mapId,
+          autoUpdateLayerId = _action$payload11.autoUpdateLayerId;
+      var map = draft.byId[mapId];
+
+      if (!map) {
+        return;
+      }
+
+      map.autoUpdateLayerId = autoUpdateLayerId;
+    },
+    setTimeSliderCenterTime: function setTimeSliderCenterTime(draft, action) {
+      var _action$payload12 = action.payload,
+          mapId = _action$payload12.mapId,
+          timeSliderCenterTime = _action$payload12.timeSliderCenterTime;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2658,9 +2685,9 @@ var slice$5 = createSlice({
       draft.byId[mapId].timeSliderCenterTime = timeSliderCenterTime;
     },
     setTimeSliderUnfilteredSelectedTime: function setTimeSliderUnfilteredSelectedTime(draft, action) {
-      var _action$payload11 = action.payload,
-          mapId = _action$payload11.mapId,
-          timeSliderUnfilteredSelectedTime = _action$payload11.timeSliderUnfilteredSelectedTime;
+      var _action$payload13 = action.payload,
+          mapId = _action$payload13.mapId,
+          timeSliderUnfilteredSelectedTime = _action$payload13.timeSliderUnfilteredSelectedTime;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2669,9 +2696,9 @@ var slice$5 = createSlice({
       draft.byId[mapId].timeSliderUnfilteredSelectedTime = timeSliderUnfilteredSelectedTime;
     },
     setTimeSliderSecondsPerPx: function setTimeSliderSecondsPerPx(draft, action) {
-      var _action$payload12 = action.payload,
-          mapId = _action$payload12.mapId,
-          timeSliderSecondsPerPx = _action$payload12.timeSliderSecondsPerPx;
+      var _action$payload14 = action.payload,
+          mapId = _action$payload14.mapId,
+          timeSliderSecondsPerPx = _action$payload14.timeSliderSecondsPerPx;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2683,9 +2710,9 @@ var slice$5 = createSlice({
       draft.byId[mapId].timeSliderScale = scale;
     },
     setTimeSliderDataScaleToSecondsPerPx: function setTimeSliderDataScaleToSecondsPerPx(draft, action) {
-      var _action$payload13 = action.payload,
-          mapId = _action$payload13.mapId,
-          timeSliderDataScaleToSecondsPerPx = _action$payload13.timeSliderDataScaleToSecondsPerPx;
+      var _action$payload15 = action.payload,
+          mapId = _action$payload15.mapId,
+          timeSliderDataScaleToSecondsPerPx = _action$payload15.timeSliderDataScaleToSecondsPerPx;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2694,9 +2721,9 @@ var slice$5 = createSlice({
       draft.byId[mapId].timeSliderDataScaleToSecondsPerPx = timeSliderDataScaleToSecondsPerPx;
     },
     toggleAutoUpdate: function toggleAutoUpdate(draft, action) {
-      var _action$payload14 = action.payload,
-          mapId = _action$payload14.mapId,
-          shouldAutoUpdate = _action$payload14.shouldAutoUpdate;
+      var _action$payload16 = action.payload,
+          mapId = _action$payload16.mapId,
+          shouldAutoUpdate = _action$payload16.shouldAutoUpdate;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2705,9 +2732,9 @@ var slice$5 = createSlice({
       draft.byId[mapId].isAutoUpdating = shouldAutoUpdate;
     },
     setEndTimeOverriding: function setEndTimeOverriding(draft, action) {
-      var _action$payload15 = action.payload,
-          mapId = _action$payload15.mapId,
-          shouldEndtimeOverride = _action$payload15.shouldEndtimeOverride;
+      var _action$payload17 = action.payload,
+          mapId = _action$payload17.mapId,
+          shouldEndtimeOverride = _action$payload17.shouldEndtimeOverride;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2716,9 +2743,9 @@ var slice$5 = createSlice({
       draft.byId[mapId].isEndTimeOverriding = shouldEndtimeOverride;
     },
     toggleTimestepAuto: function toggleTimestepAuto(draft, action) {
-      var _action$payload16 = action.payload,
-          mapId = _action$payload16.mapId,
-          timestepAuto = _action$payload16.timestepAuto;
+      var _action$payload18 = action.payload,
+          mapId = _action$payload18.mapId,
+          timestepAuto = _action$payload18.timestepAuto;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2727,9 +2754,9 @@ var slice$5 = createSlice({
       draft.byId[mapId].isTimestepAuto = timestepAuto;
     },
     toggleTimeSliderHover: function toggleTimeSliderHover(draft, action) {
-      var _action$payload17 = action.payload,
-          mapId = _action$payload17.mapId,
-          isTimeSliderHoverOn = _action$payload17.isTimeSliderHoverOn;
+      var _action$payload19 = action.payload,
+          mapId = _action$payload19.mapId,
+          isTimeSliderHoverOn = _action$payload19.isTimeSliderHoverOn;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2738,9 +2765,9 @@ var slice$5 = createSlice({
       draft.byId[mapId].isTimeSliderHoverOn = isTimeSliderHoverOn;
     },
     toggleTimeSliderIsVisible: function toggleTimeSliderIsVisible(draft, action) {
-      var _action$payload18 = action.payload,
-          mapId = _action$payload18.mapId,
-          isTimeSliderVisible = _action$payload18.isTimeSliderVisible;
+      var _action$payload20 = action.payload,
+          mapId = _action$payload20.mapId,
+          isTimeSliderVisible = _action$payload20.isTimeSliderVisible;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2749,9 +2776,9 @@ var slice$5 = createSlice({
       draft.byId[mapId].isTimeSliderVisible = isTimeSliderVisible;
     },
     toggleZoomControls: function toggleZoomControls(draft, action) {
-      var _action$payload19 = action.payload,
-          mapId = _action$payload19.mapId,
-          shouldShowZoomControls = _action$payload19.shouldShowZoomControls;
+      var _action$payload21 = action.payload,
+          mapId = _action$payload21.mapId,
+          shouldShowZoomControls = _action$payload21.shouldShowZoomControls;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2760,9 +2787,9 @@ var slice$5 = createSlice({
       draft.byId[mapId].shouldShowZoomControls = shouldShowZoomControls;
     },
     setMapPinLocation: function setMapPinLocation(draft, action) {
-      var _action$payload20 = action.payload,
-          mapId = _action$payload20.mapId,
-          mapPinLocation = _action$payload20.mapPinLocation;
+      var _action$payload22 = action.payload,
+          mapId = _action$payload22.mapId,
+          mapPinLocation = _action$payload22.mapPinLocation;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2771,9 +2798,9 @@ var slice$5 = createSlice({
       draft.byId[mapId].mapPinLocation = mapPinLocation;
     },
     setDisableMapPin: function setDisableMapPin(draft, action) {
-      var _action$payload21 = action.payload,
-          mapId = _action$payload21.mapId,
-          disableMapPin = _action$payload21.disableMapPin;
+      var _action$payload23 = action.payload,
+          mapId = _action$payload23.mapId,
+          disableMapPin = _action$payload23.disableMapPin;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2782,9 +2809,9 @@ var slice$5 = createSlice({
       draft.byId[mapId].disableMapPin = disableMapPin;
     },
     toggleMapPinIsVisible: function toggleMapPinIsVisible(draft, action) {
-      var _action$payload22 = action.payload,
-          mapId = _action$payload22.mapId,
-          displayMapPin = _action$payload22.displayMapPin;
+      var _action$payload24 = action.payload,
+          mapId = _action$payload24.mapId,
+          displayMapPin = _action$payload24.displayMapPin;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2793,9 +2820,9 @@ var slice$5 = createSlice({
       draft.byId[mapId].displayMapPin = displayMapPin;
     },
     setDockedLayerManagerSize: function setDockedLayerManagerSize(draft, action) {
-      var _action$payload23 = action.payload,
-          mapId = _action$payload23.mapId,
-          dockedLayerManagerSize = _action$payload23.dockedLayerManagerSize;
+      var _action$payload25 = action.payload,
+          mapId = _action$payload25.mapId,
+          dockedLayerManagerSize = _action$payload25.dockedLayerManagerSize;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2806,9 +2833,9 @@ var slice$5 = createSlice({
   },
   extraReducers: function extraReducers(builder) {
     builder.addCase(addLayer$1, function (draft, action) {
-      var _action$payload24 = action.payload,
-          layerId = _action$payload24.layerId,
-          mapId = _action$payload24.mapId;
+      var _action$payload26 = action.payload,
+          layerId = _action$payload26.layerId,
+          mapId = _action$payload26.mapId;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2826,10 +2853,10 @@ var slice$5 = createSlice({
 
       draft.byId[mapId].mapLayers.unshift(layerId);
     }).addCase(addBaseLayer, function (draft, action) {
-      var _action$payload25 = action.payload,
-          layer = _action$payload25.layer,
-          layerId = _action$payload25.layerId,
-          mapId = _action$payload25.mapId;
+      var _action$payload27 = action.payload,
+          layer = _action$payload27.layer,
+          layerId = _action$payload27.layerId,
+          mapId = _action$payload27.mapId;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2896,9 +2923,9 @@ var slice$5 = createSlice({
         }
       }
     }).addCase(setBaseLayers$1, function (draft, action) {
-      var _action$payload26 = action.payload,
-          layers = _action$payload26.layers,
-          mapId = _action$payload26.mapId; // Split into base and overlayers
+      var _action$payload28 = action.payload,
+          layers = _action$payload28.layers,
+          mapId = _action$payload28.mapId; // Split into base and overlayers
 
       var baseLayers = [];
       var overLayers = [];
@@ -2930,9 +2957,9 @@ var slice$5 = createSlice({
         }
       }
     }).addCase(layerDelete$1, function (draft, action) {
-      var _action$payload27 = action.payload,
-          mapId = _action$payload27.mapId,
-          layerId = _action$payload27.layerId;
+      var _action$payload29 = action.payload,
+          mapId = _action$payload29.mapId,
+          layerId = _action$payload29.layerId;
       var map = draft.byId[mapId];
 
       if (!map) {
@@ -2960,9 +2987,9 @@ var slice$5 = createSlice({
         map.autoTimeStepLayerId = activeLayerId;
       }
     }).addCase(baseLayerDelete, function (draft, action) {
-      var _action$payload28 = action.payload,
-          mapId = _action$payload28.mapId,
-          layerId = _action$payload28.layerId;
+      var _action$payload30 = action.payload,
+          mapId = _action$payload30.mapId,
+          layerId = _action$payload30.layerId;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2975,14 +3002,14 @@ var slice$5 = createSlice({
         return id !== layerId;
       });
     }).addCase(layerChangeDimension$1, function (draft, action) {
-      var _action$payload29 = action.payload,
-          layerId = _action$payload29.layerId,
-          dimension = _action$payload29.dimension;
+      var _action$payload31 = action.payload,
+          layerId = _action$payload31.layerId,
+          dimension = _action$payload31.dimension;
       produceDraftStateSetMapDimensionFromLayerChangeDimension(draft, layerId, dimension);
     }).addCase(setTimeSync, function (draft, action) {
-      var _action$payload30 = action.payload,
-          targetsFromAction = _action$payload30.targets,
-          source = _action$payload30.source;
+      var _action$payload32 = action.payload,
+          targetsFromAction = _action$payload32.targets,
+          source = _action$payload32.source;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
 
       var targets = [{
@@ -3006,9 +3033,9 @@ var slice$5 = createSlice({
         }
       });
     }).addCase(setBboxSync, function (draft, action) {
-      var _action$payload31 = action.payload,
-          targetsFromAction = _action$payload31.targets,
-          source = _action$payload31.source;
+      var _action$payload33 = action.payload,
+          targetsFromAction = _action$payload33.targets,
+          source = _action$payload33.source;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
 
       var targets = [{
@@ -3041,9 +3068,9 @@ var slice$5 = createSlice({
        * These targets can be used as payloads in new Layer actions.
        * These actions are here handled via the layer reducer, as it is the same logic
        */
-      var _action$payload32 = action.payload,
-          targets = _action$payload32.targets,
-          source = _action$payload32.source;
+      var _action$payload34 = action.payload,
+          targets = _action$payload34.targets,
+          source = _action$payload34.source;
       return targets.reduce(function (prevState, target) {
         var action = {
           payload: target,
@@ -3063,9 +3090,9 @@ var slice$5 = createSlice({
       var mapAction = mapActions$1.mapUpdateAllMapDimensions(mapDimensions);
       return reducer$5(draft, mapAction);
     }).addCase(mapChangeDimension, function (draft, action) {
-      var _action$payload33 = action.payload,
-          mapId = _action$payload33.mapId,
-          dimensionFromAction = _action$payload33.dimension;
+      var _action$payload35 = action.payload,
+          mapId = _action$payload35.mapId,
+          dimensionFromAction = _action$payload35.dimension;
       produceDraftStateSetWebMapDimension(draft, mapId, dimensionFromAction, true);
     }).addCase(setMapPreset, function (draft, action) {
       var mapId = action.payload.mapId;
@@ -3087,9 +3114,9 @@ var slice$5 = createSlice({
       draft.byId[mapId].animationDelay = defaultAnimationDelayAtStart;
       draft.byId[mapId].dockedLayerManagerSize = '';
     }).addCase(uiActions.registerDialog, function (draft, action) {
-      var _action$payload34 = action.payload,
-          mapId = _action$payload34.mapId,
-          type = _action$payload34.type;
+      var _action$payload36 = action.payload,
+          mapId = _action$payload36.mapId,
+          type = _action$payload36.type;
 
       if (!draft.byId[mapId]) {
         return;
@@ -7944,7 +7971,7 @@ var CanvasComponent = /*#__PURE__*/function (_Component) {
   }]);
 
   return CanvasComponent;
-}(Component); // eslint-disable-next-line react/static-property-placement
+}(Component);
 CanvasComponent.defaultProps = {
   onRenderCanvas: function onRenderCanvas() {
     /* intentionally left blank */
@@ -9909,10 +9936,6 @@ var coreModuleConfig = [moduleConfig, synchronizationGroupConfig, uiModuleConfig
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
-var iconStyle = {
-  height: 24,
-  width: 24
-};
 var sizeSmall = {
   width: 100,
   height: 300
@@ -9949,43 +9972,31 @@ var HeaderOptions = function HeaderOptions(_ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [onChangeSize, shortcutsEnabled]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: "small"
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomIconButton, {
+    tooltipTitle: "small",
     "data-testid": "collapseSmall-btn",
-    size: "small",
     onClick: function onClick() {
       return onChangeSize(sizeSmall);
     },
-    sx: iconStyle,
     className: "collapseSmall-btn"
-  }, /*#__PURE__*/React.createElement(CollapseSmall, null))), /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: "medium"
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  }, /*#__PURE__*/React.createElement(CollapseSmall, null)), /*#__PURE__*/React.createElement(CustomIconButton, {
+    tooltipTitle: "medium",
     "data-testid": "collapseMedium-btn",
-    size: "small",
     onClick: function onClick() {
       return onChangeSize(sizeMedium);
     },
-    sx: iconStyle,
     className: "collapseMedium-btn"
-  }, /*#__PURE__*/React.createElement(CollapseMedium, null))), /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: "large"
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  }, /*#__PURE__*/React.createElement(CollapseMedium, null)), /*#__PURE__*/React.createElement(CustomIconButton, {
+    tooltipTitle: "large",
     "data-testid": "collapseLarge-btn",
-    size: "small",
     onClick: function onClick() {
       return onChangeSize(sizeLarge);
     },
-    sx: iconStyle,
     className: "collapseLarge-btn"
-  }, /*#__PURE__*/React.createElement(CollapseLarge, null))), /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: isDockedLayerManager ? 'Undock' : 'Dock'
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  }, /*#__PURE__*/React.createElement(CollapseLarge, null)), /*#__PURE__*/React.createElement(CustomIconButton, {
+    tooltipTitle: isDockedLayerManager ? 'Undock' : 'Dock',
     "data-testid": "dockedBtn",
     disableRipple: true,
-    size: "small",
-    sx: iconStyle,
     onClick: function onClick() {
       return onClickDockButton();
     }
@@ -9993,7 +10004,7 @@ var HeaderOptions = function HeaderOptions(_ref) {
     "data-testid": "dockedLayerManager-collapse"
   }) : /*#__PURE__*/React.createElement(ExpandWindow, {
     "data-testid": "dockedLayerManager-uncollapse"
-  }))));
+  })));
 };
 
 /* *
@@ -10200,20 +10211,24 @@ var returnCorrectSize = function returnCorrectSize(sizeResult) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 var style$2 = {
-  width: '24px',
-  height: '24px',
-  margin: 'auto 0px auto 32px',
-  borderRadius: '15%'
+  padding: 0,
+  margin: 'auto 0px auto 32px'
 };
 
 var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
   var mapId = _ref.mapId,
       _ref$source = _ref.source,
-      source = _ref$source === void 0 ? 'app' : _ref$source;
+      source = _ref$source === void 0 ? 'app' : _ref$source,
+      _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, {
+    "data-testid": "layerSelectButtonConnectIcon"
+  }) : _ref$icon;
   var dispatch = useDispatch();
   var currentActiveMapId = useSelector(function (store) {
     return getDialogMapId(store, DialogTypes.LayerSelect);
@@ -10229,16 +10244,13 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
       source: source
     }));
   }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source]);
-  return /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: "Open the layer selector"
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  return /*#__PURE__*/React.createElement(CustomIconButton, {
     onClick: openLayerSelectDialog,
     sx: style$2,
     id: "layerSelectButton",
     "data-testid": "layerSelectButton",
-    disableRipple: true,
-    size: "large"
-  }, /*#__PURE__*/React.createElement(Add, null)));
+    tooltipTitle: tooltipTitle
+  }, icon);
 };
 
 var styles$4 = {
@@ -10254,7 +10266,10 @@ var DescriptionRow = function DescriptionRow(_ref) {
   var mapId = _ref.mapId,
       mapPresetsModule = _ref.mapPresetsModule,
       _ref$source = _ref.source,
-      source = _ref$source === void 0 ? 'app' : _ref$source;
+      source = _ref$source === void 0 ? 'app' : _ref$source,
+      settings = _ref.settings;
+
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
 
   var _React$useState = React.useState(mapPresetsModule ? Object.assign(Object.assign({}, mapPresetsModule), {
     props: Object.assign(Object.assign({}, mapPresetsModule.props), {
@@ -10279,13 +10294,15 @@ var DescriptionRow = function DescriptionRow(_ref) {
     className: columnClasses.column1
   }, /*#__PURE__*/React.createElement(LayerSelectButtonConnect, {
     mapId: mapId,
-    source: source
+    source: source,
+    tooltipTitle: (_a = settings === null || settings === void 0 ? void 0 : settings.addLayer) === null || _a === void 0 ? void 0 : _a.tooltipTitle,
+    icon: (_b = settings === null || settings === void 0 ? void 0 : settings.addLayer) === null || _b === void 0 ? void 0 : _b.icon
   })), /*#__PURE__*/React.createElement(Grid, {
     className: columnClasses.column2
   }, /*#__PURE__*/React.createElement(Box, {
     className: "header-layer ".concat(hasMapPresetsModule ? 'mappresetsModule-enabled' : ''),
     sx: styles$4.text
-  }, "Layer"), /*#__PURE__*/React.createElement(Box, {
+  }, (_d = (_c = settings === null || settings === void 0 ? void 0 : settings.layerName) === null || _c === void 0 ? void 0 : _c.title) !== null && _d !== void 0 ? _d : 'Layer'), /*#__PURE__*/React.createElement(Box, {
     className: "header-mapPresets",
     sx: {
       marginRight: 4
@@ -10294,15 +10311,15 @@ var DescriptionRow = function DescriptionRow(_ref) {
     className: columnClasses.column3
   }, /*#__PURE__*/React.createElement(Box, {
     sx: styles$4.text
-  }, "Style")), /*#__PURE__*/React.createElement(Grid, {
+  }, (_f = (_e = settings === null || settings === void 0 ? void 0 : settings.layerStyle) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : 'Style')), /*#__PURE__*/React.createElement(Grid, {
     className: columnClasses.column4
   }, /*#__PURE__*/React.createElement(Box, {
     sx: styles$4.text
-  }, "Opacity")), /*#__PURE__*/React.createElement(Grid, {
+  }, (_h = (_g = settings === null || settings === void 0 ? void 0 : settings.opacity) === null || _g === void 0 ? void 0 : _g.title) !== null && _h !== void 0 ? _h : 'Opacity')), /*#__PURE__*/React.createElement(Grid, {
     className: columnClasses.column5
   }, /*#__PURE__*/React.createElement(Box, {
     sx: styles$4.text
-  }, "Dimensions")), /*#__PURE__*/React.createElement(Grid, {
+  }, (_k = (_j = settings === null || settings === void 0 ? void 0 : settings.dimensions) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : 'Dimensions')), /*#__PURE__*/React.createElement(Grid, {
     className: columnClasses.column6
   }));
 };
@@ -10882,13 +10899,22 @@ var getIconColor = function getIconColor(isActive, isEnabled) {
   return 'geowebColors.buttons.flat.disabled.color';
 };
 
+var AutoOptions;
+
+(function (AutoOptions) {
+  AutoOptions["BOTH"] = "Auto both";
+  AutoOptions["NONE"] = "Auto none";
+  AutoOptions["TIMESTEP"] = "Auto-timestep";
+  AutoOptions["UPDATE"] = "Auto-update";
+})(AutoOptions || (AutoOptions = {}));
+
 var ActivateLayer = function ActivateLayer(_ref) {
   var _onChange = _ref.onChange,
-      isActive = _ref.isActive,
-      isEnabled = _ref.isEnabled;
+      isEnabled = _ref.isEnabled,
+      current = _ref.current;
   return /*#__PURE__*/React.createElement(TooltipSelect, {
     variant: "standard",
-    tooltip: "Auto update",
+    tooltip: "Leading layer",
     // Don't show arrow https://stackoverflow.com/questions/69085735/how-to-remove-arrow-from-react-textfield-select
     inputProps: {
       IconComponent: function IconComponent() {
@@ -10896,7 +10922,7 @@ var ActivateLayer = function ActivateLayer(_ref) {
       },
       tabIndex: -1
     },
-    value: isActive ? 'Both' : 'None',
+    value: current,
     sx: {
       '&& .MuiInput-input': {
         paddingRight: '2px',
@@ -10904,30 +10930,39 @@ var ActivateLayer = function ActivateLayer(_ref) {
         backgroundColor: 'inherit'
       }
     },
-    renderValue: function renderValue(optionSelected) {
+    renderValue: function renderValue(current) {
       return /*#__PURE__*/React.createElement(AutoUpdateButton$1, {
-        optionSelected: optionSelected,
-        isActive: isActive,
+        current: current,
         isEnabled: isEnabled
       });
     },
     onChange: function onChange(event) {
       event.stopPropagation();
 
-      _onChange(event.target.value === 'Both');
+      _onChange(event.target.value);
     },
     onClose: function onClose(event) {
       event.stopPropagation();
     }
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
-  }, "Auto-update"), /*#__PURE__*/React.createElement(MenuItem, {
-    value: "None"
+  }, "Leading layer"), /*#__PURE__*/React.createElement(MenuItem, {
+    value: AutoOptions.NONE
   }, /*#__PURE__*/React.createElement(AutoOption, {
     icon: /*#__PURE__*/React.createElement(None, null),
     text: "None"
   })), /*#__PURE__*/React.createElement(MenuItem, {
-    value: "Both"
+    value: AutoOptions.TIMESTEP
+  }, /*#__PURE__*/React.createElement(AutoOption, {
+    icon: /*#__PURE__*/React.createElement(FastForward, null),
+    text: "Auto-timestep"
+  })), /*#__PURE__*/React.createElement(MenuItem, {
+    value: AutoOptions.UPDATE
+  }, /*#__PURE__*/React.createElement(AutoOption, {
+    icon: /*#__PURE__*/React.createElement(AutoUpdateActive, null),
+    text: "Auto-update"
+  })), /*#__PURE__*/React.createElement(MenuItem, {
+    value: AutoOptions.BOTH
   }, /*#__PURE__*/React.createElement(AutoOption, {
     icon: /*#__PURE__*/React.createElement(Both, null),
     text: "Both"
@@ -10935,20 +10970,13 @@ var ActivateLayer = function ActivateLayer(_ref) {
 };
 
 var AutoUpdateButton$1 = function AutoUpdateButton(_ref2) {
-  var optionSelected = _ref2.optionSelected,
-      isActive = _ref2.isActive,
+  var current = _ref2.current,
       isEnabled = _ref2.isEnabled;
-  var style = {
-    color: getIconColor(isActive, isEnabled)
-  };
-  var Icon = isActive ? /*#__PURE__*/React.createElement(Both, {
-    sx: style
-  }) : /*#__PURE__*/React.createElement(None, {
-    sx: style
-  });
+  var isActive = current !== AutoOptions.NONE;
+  var Icon = getIcon(isActive, isEnabled, current);
   return /*#__PURE__*/React.createElement(ToolButton, {
+    "aria-label": current,
     "data-testid": "activateLayer-btn",
-    "aria-label": "Auto update ".concat(optionSelected),
     sx: {
       '&.MuiButtonBase-root': {
         backgroundColor: 'inherit'
@@ -10973,6 +11001,34 @@ var AutoOption = function AutoOption(_ref3) {
   }, text), /*#__PURE__*/React.createElement(ListItemIcon, null, icon));
 };
 
+function getIcon(isActive, isEnabled, current) {
+  var style = {
+    color: getIconColor(isActive, isEnabled)
+  };
+
+  if (current === AutoOptions.BOTH) {
+    return /*#__PURE__*/React.createElement(Both, {
+      sx: style
+    });
+  }
+
+  if (current === AutoOptions.TIMESTEP) {
+    return /*#__PURE__*/React.createElement(FastForward, {
+      sx: style
+    });
+  }
+
+  if (current === AutoOptions.UPDATE) {
+    return /*#__PURE__*/React.createElement(AutoUpdateActive, {
+      sx: style
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(None, {
+    sx: style
+  });
+}
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -10986,8 +11042,8 @@ var AutoOption = function AutoOption(_ref3) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 
 var LayerRow = function LayerRow(_ref) {
@@ -11040,9 +11096,9 @@ var LayerRow = function LayerRow(_ref) {
       },
       '&.sortable-ghost': {
         opacity: 0.5
-      },
-      alignItems: 'center'
-    }
+      }
+    },
+    alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(CustomAccordion, {
     className: "medium-layermanager",
     defaultExpanded: false,
@@ -11057,8 +11113,8 @@ var LayerRow = function LayerRow(_ref) {
         padding: 0
       }
     },
-    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, dragHandle, layerEnableLayout || /*#__PURE__*/React__default.createElement(ManagerButton, {
-      isEnabled: layer.enabled,
+    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, dragHandle, layerEnableLayout || /*#__PURE__*/React__default.createElement(CustomIconButton, {
+      shouldShowAsDisabled: !layer.enabled,
       tooltipTitle: layer.name,
       onClick: function onClick(event) {
         event.stopPropagation();
@@ -11067,11 +11123,10 @@ var LayerRow = function LayerRow(_ref) {
           enabled: !layer.enabled
         });
       },
-      "data-testid": "enableButton-medium",
-      icon: isEnabled ? /*#__PURE__*/React__default.createElement(Visibility, null) : /*#__PURE__*/React__default.createElement(VisibilityOff, null)
-    }), layerActiveLayout || /*#__PURE__*/React__default.createElement(ActivateLayer, {
+      "data-testid": "enableButton-medium"
+    }, isEnabled ? /*#__PURE__*/React__default.createElement(Visibility, null) : /*#__PURE__*/React__default.createElement(VisibilityOff, null)), layerActiveLayout || /*#__PURE__*/React__default.createElement(ActivateLayer, {
+      current: AutoOptions.BOTH,
       onChange: onClickRow,
-      isActive: false,
       isEnabled: true
     }), /*#__PURE__*/React__default.createElement(Typography, {
       sx: {
@@ -11130,7 +11185,7 @@ var LayerRow = function LayerRow(_ref) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     sx: {}
-  }, layerDeleteLayout || /*#__PURE__*/React__default.createElement(ManagerButton, {
+  }, layerDeleteLayout || /*#__PURE__*/React__default.createElement(CustomIconButton, {
     tooltipTitle: "Delete",
     onClick: function onClick() {
       onLayerDelete({
@@ -11138,13 +11193,13 @@ var LayerRow = function LayerRow(_ref) {
         layerId: layerId
       });
     },
-    icon: /*#__PURE__*/React__default.createElement(Delete, null),
     "data-testid": "deleteButton"
-  }))))), /*#__PURE__*/React__default.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(Delete, null)))))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    className: columnClasses.column1
-  }, dragHandle, layerEnableLayout || /*#__PURE__*/React__default.createElement(ManagerButton, {
-    isEnabled: layer.enabled,
+    className: columnClasses.column1,
+    alignItems: "center"
+  }, dragHandle, layerEnableLayout || /*#__PURE__*/React__default.createElement(CustomIconButton, {
+    shouldShowAsDisabled: !layer.enabled,
     tooltipTitle: layer.name,
     onClick: function onClick(event) {
       event.stopPropagation();
@@ -11153,11 +11208,10 @@ var LayerRow = function LayerRow(_ref) {
         enabled: !layer.enabled
       });
     },
-    icon: layer.enabled ? /*#__PURE__*/React__default.createElement(Visibility, null) : /*#__PURE__*/React__default.createElement(VisibilityOff, null),
     "data-testid": "enableButton"
-  }), layerActiveLayout || /*#__PURE__*/React__default.createElement(ActivateLayer, {
+  }, layer.enabled ? /*#__PURE__*/React__default.createElement(Visibility, null) : /*#__PURE__*/React__default.createElement(VisibilityOff, null)), layerActiveLayout || /*#__PURE__*/React__default.createElement(ActivateLayer, {
     onChange: onClickRow,
-    isActive: false,
+    current: AutoOptions.BOTH,
     isEnabled: true
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -11220,8 +11274,9 @@ var LayerRow = function LayerRow(_ref) {
     }
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    className: columnClasses.column6
-  }, layerDeleteLayout || /*#__PURE__*/React__default.createElement(ManagerButton, {
+    className: columnClasses.column6,
+    alignItems: "center"
+  }, layerDeleteLayout || /*#__PURE__*/React__default.createElement(CustomIconButton, {
     tooltipTitle: "Delete",
     onClick: function onClick() {
       onLayerDelete({
@@ -11229,9 +11284,8 @@ var LayerRow = function LayerRow(_ref) {
         layerId: layerId
       });
     },
-    icon: /*#__PURE__*/React__default.createElement(Delete, null),
     "data-testid": "deleteButton"
-  }), layerMenuLayout || /*#__PURE__*/React__default.createElement(LayerManagerMenuButton, {
+  }, /*#__PURE__*/React__default.createElement(Delete, null)), layerMenuLayout || /*#__PURE__*/React__default.createElement(LayerManagerMenuButton, {
     mapId: mapId,
     layerId: layerId,
     onLayerDuplicate: onLayerDuplicate
@@ -11251,8 +11305,8 @@ var LayerRow = function LayerRow(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 
 var DeleteLayerConnect = function DeleteLayerConnect(_ref) {
@@ -11274,7 +11328,7 @@ var DeleteLayerConnect = function DeleteLayerConnect(_ref) {
   var isLayerEnabled = useSelector(function (store) {
     return getLayerEnabled(store, layerId);
   });
-  return /*#__PURE__*/React.createElement(ManagerButton, {
+  return /*#__PURE__*/React.createElement(CustomIconButton, {
     tooltipTitle: "Delete",
     onClick: function onClick() {
       layerDelete({
@@ -11283,10 +11337,9 @@ var DeleteLayerConnect = function DeleteLayerConnect(_ref) {
         layerIndex: layerIndex
       });
     },
-    isEnabled: isLayerEnabled,
-    icon: /*#__PURE__*/React.createElement(Delete, null),
+    shouldShowAsDisabled: !isLayerEnabled,
     "data-testid": "deleteButton"
-  });
+  }, /*#__PURE__*/React.createElement(Delete, null));
 };
 
 /* *
@@ -11302,8 +11355,8 @@ var DeleteLayerConnect = function DeleteLayerConnect(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 
 var EnableLayerConnect = function EnableLayerConnect(_ref) {
@@ -11324,8 +11377,8 @@ var EnableLayerConnect = function EnableLayerConnect(_ref) {
       origin: LayerActionOrigin.layerManager
     }));
   }, [dispatch, mapId]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ManagerButton, {
-    isEnabled: isEnabled,
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomIconButton, {
+    shouldShowAsDisabled: !isEnabled,
     tooltipTitle: "Toggle visibility",
     onClick: function onClick(event) {
       event.stopPropagation();
@@ -11335,10 +11388,12 @@ var EnableLayerConnect = function EnableLayerConnect(_ref) {
       });
     },
     className: "enable-btn",
-    icon: isEnabled ? /*#__PURE__*/React.createElement(Visibility, null) : /*#__PURE__*/React.createElement(VisibilityOff, null),
-    "data-testid": "enableButton"
-  }), /*#__PURE__*/React.createElement(ManagerButton, {
-    isEnabled: isEnabled,
+    "data-testid": "enableButton",
+    sx: {
+      margin: 'auto 0px'
+    }
+  }, isEnabled ? /*#__PURE__*/React.createElement(Visibility, null) : /*#__PURE__*/React.createElement(VisibilityOff, null)), /*#__PURE__*/React.createElement(CustomIconButton, {
+    shouldShowAsDisabled: !isEnabled,
     tooltipTitle: layerName,
     onClick: function onClick(event) {
       event.stopPropagation();
@@ -11348,9 +11403,11 @@ var EnableLayerConnect = function EnableLayerConnect(_ref) {
       });
     },
     className: "enable-btn-mini",
-    icon: isEnabled ? /*#__PURE__*/React.createElement(Visibility, null) : /*#__PURE__*/React.createElement(VisibilityOff, null),
-    "data-testid": "enableButton"
-  }));
+    "data-testid": "enableButton",
+    sx: {
+      margin: 'auto 0px'
+    }
+  }, isEnabled ? /*#__PURE__*/React.createElement(Visibility, null) : /*#__PURE__*/React.createElement(VisibilityOff, null)));
 };
 
 /* *
@@ -11676,49 +11733,127 @@ var ActivateLayerConnect = function ActivateLayerConnect(_ref) {
   var layerId = _ref.layerId,
       mapId = _ref.mapId;
   var dispatch = useDispatch();
-  var activeLayerId = useSelector(function (store) {
-    return getActiveLayerId(store, mapId);
+  var autoUpdateLayerId = useSelector(function (store) {
+    return getAutoUpdateLayerId(store, mapId);
+  });
+  var autoTimestepLayerId = useSelector(function (store) {
+    return getAutoTimeStepLayerId(store, mapId);
   });
   var isLayerEnabled = useSelector(function (store) {
     return getLayerEnabled(store, layerId);
   });
-  var setActiveLayerId = React.useCallback(function (_ref2) {
-    var layerId = _ref2.layerId,
-        mapId = _ref2.mapId;
-    return dispatch(mapActions$1.setAutoLayerId({
+  var isAutoUpdating$1 = useSelector(function (store) {
+    return isAutoUpdating(store, mapId);
+  });
+
+  var goToLastAvailableTimeForLayerIfAutoUpdateIsOn = function goToLastAvailableTimeForLayerIfAutoUpdateIsOn() {
+    if (isAutoUpdating$1) {
+      dispatch(mapActions$1.toggleAutoUpdate({
+        mapId: mapId,
+        shouldAutoUpdate: true
+      }));
+    }
+  };
+
+  var thisLayerHasAutoUpdate = layerId === autoUpdateLayerId;
+  var thisLayerHasAutoTimestep = layerId === autoTimestepLayerId;
+  var thisLayerHasBoth = thisLayerHasAutoTimestep && thisLayerHasAutoUpdate;
+
+  function handleNoneClick() {
+    if (thisLayerHasBoth) {
+      dispatch(mapActions$1.setAutoLayerId({
+        autoTimeStepLayerId: undefined,
+        autoUpdateLayerId: undefined,
+        mapId: mapId,
+        origin: LayerActionOrigin.layerManager
+      }));
+    } else if (thisLayerHasAutoTimestep) {
+      dispatch(mapActions$1.setAutoTimestepLayerId({
+        mapId: mapId,
+        autoTimestepLayerId: undefined
+      }));
+    } else if (thisLayerHasAutoUpdate) {
+      dispatch(mapActions$1.setAutoUpdateLayerId({
+        mapId: mapId,
+        autoUpdateLayerId: undefined
+      }));
+    }
+  }
+
+  function handleBothClick() {
+    dispatch(mapActions$1.setAutoLayerId({
       autoTimeStepLayerId: layerId,
       autoUpdateLayerId: layerId,
       mapId: mapId,
       origin: LayerActionOrigin.layerManager
     }));
-  }, [dispatch]);
-  var isAutoUpdating$1 = useSelector(function (store) {
-    return isAutoUpdating(store, mapId);
-  });
-  var setAutoUpdateOn = React.useCallback(function (mapId) {
-    return dispatch(mapActions$1.toggleAutoUpdate({
+    goToLastAvailableTimeForLayerIfAutoUpdateIsOn();
+  }
+
+  function handleAutoUpdateClick() {
+    dispatch(mapActions$1.setAutoUpdateLayerId({
       mapId: mapId,
-      shouldAutoUpdate: true
+      autoUpdateLayerId: layerId
     }));
-  }, [dispatch]);
-  var isActive = activeLayerId === layerId;
-  return /*#__PURE__*/React.createElement(ActivateLayer, {
-    onChange: function onChange(isActive) {
-      setActiveLayerId({
+
+    if (thisLayerHasAutoTimestep) {
+      dispatch(mapActions$1.setAutoTimestepLayerId({
         mapId: mapId,
-        layerId: isActive ? layerId : undefined
-      });
+        autoTimestepLayerId: undefined
+      }));
+    }
 
-      if (isAutoUpdating$1) {
-        // Layer is now set active *and* autoupdate is currently on => autoupdate is desired to be set on.
-        setAutoUpdateOn(mapId);
+    goToLastAvailableTimeForLayerIfAutoUpdateIsOn();
+  }
+
+  function handleAutoTimestepClick() {
+    dispatch(mapActions$1.setAutoTimestepLayerId({
+      mapId: mapId,
+      autoTimestepLayerId: layerId
+    }));
+
+    if (thisLayerHasAutoUpdate) {
+      dispatch(mapActions$1.setAutoUpdateLayerId({
+        mapId: mapId,
+        autoUpdateLayerId: undefined
+      }));
+    }
+  }
+
+  var current = getCurrentOptionForLayer(thisLayerHasBoth, thisLayerHasAutoTimestep, thisLayerHasAutoUpdate);
+  return /*#__PURE__*/React.createElement(ActivateLayer, {
+    current: current,
+    onChange: function onChange(autoOption) {
+      if (autoOption === AutoOptions.BOTH) {
+        handleBothClick();
+      } else if (autoOption === AutoOptions.NONE) {
+        handleNoneClick();
+      } else if (autoOption === AutoOptions.TIMESTEP) {
+        handleAutoTimestepClick();
+      } else if (autoOption === AutoOptions.UPDATE) {
+        handleAutoUpdateClick();
       }
     },
-    isActive: isActive,
     isEnabled: isLayerEnabled
   });
 };
 
+function getCurrentOptionForLayer(thisLayerHasBoth, thisLayerHasAutoTimestep, thisLayerHasAutoUpdate) {
+  if (thisLayerHasBoth) {
+    return AutoOptions.BOTH;
+  }
+
+  if (thisLayerHasAutoTimestep) {
+    return AutoOptions.TIMESTEP;
+  }
+
+  if (thisLayerHasAutoUpdate) {
+    return AutoOptions.UPDATE;
+  }
+
+  return AutoOptions.NONE;
+}
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -11820,8 +11955,8 @@ var LayerRowConnect = function LayerRowConnect(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 var TOOLTIP_TITLE = 'Drag';
 
@@ -11831,20 +11966,17 @@ var DragHandle = function DragHandle(_ref) {
       _ref$index = _ref.index,
       index = _ref$index === void 0 ? undefined : _ref$index,
       _ref$hideTooltip = _ref.hideTooltip,
-      hideTooltip = _ref$hideTooltip === void 0 ? false : _ref$hideTooltip,
+      hideTooltip = _ref$hideTooltip === void 0 ? true : _ref$hideTooltip,
       _ref$isSorting = _ref.isSorting,
       isSorting = _ref$isSorting === void 0 ? false : _ref$isSorting;
   var tooltipTitle = hideTooltip ? '' : TOOLTIP_TITLE;
-  return /*#__PURE__*/React__default.createElement(ManagerButton, {
+  return /*#__PURE__*/React__default.createElement(CustomIconButton, {
     tooltipTitle: tooltipTitle,
-    icon: /*#__PURE__*/React__default.createElement(DragHandle$1, null),
     "data-testid": "dragHandle".concat(index !== undefined ? "-".concat(index) : ''),
     className: "handle",
     tabIndex: -1,
-    isEnabled: !isDisabled,
     disableTouchRipple: true,
     disabled: isDisabled,
-    isAccessible: true,
     sx: {
       cursor: isSorting ? 'grabbing' : 'grab',
       '&:hover': {
@@ -11853,9 +11985,12 @@ var DragHandle = function DragHandle(_ref) {
       marginLeft: '3px',
       marginRight: '3px',
       marginTop: 'auto',
-      marginBottom: 'auto'
+      marginBottom: 'auto',
+      '&.MuiIconButton-root': {
+        color: 'geowebColors.greys.accessible'
+      }
     }
-  });
+  }, /*#__PURE__*/React__default.createElement(DragHandle$1, null));
 };
 
 var LayerContainerRow = function LayerContainerRow(_ref) {
@@ -12018,7 +12153,10 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
 var BaseLayers = function BaseLayers(_ref) {
   var selectedBaseLayers = _ref.selectedBaseLayers,
       availableBaseLayers = _ref.availableBaseLayers,
-      onChangeBaseLayers = _ref.onChangeBaseLayers;
+      onChangeBaseLayers = _ref.onChangeBaseLayers,
+      icon = _ref.icon,
+      _ref$tooltipPrefix = _ref.tooltipPrefix,
+      tooltipPrefix = _ref$tooltipPrefix === void 0 ? 'Layer: ' : _ref$tooltipPrefix;
 
   var _a;
 
@@ -12041,7 +12179,7 @@ var BaseLayers = function BaseLayers(_ref) {
     }
   }, /*#__PURE__*/React.createElement(TooltipSelect, {
     disableUnderline: true,
-    tooltip: "Base layer: ".concat((_a = availableBaseLayers[currentIndex]) === null || _a === void 0 ? void 0 : _a.name),
+    tooltip: "".concat(tooltipPrefix).concat((_a = availableBaseLayers[currentIndex]) === null || _a === void 0 ? void 0 : _a.name),
     inputProps: {
       SelectDisplayProps: {
         'data-testid': 'selectBaseLayer'
@@ -12059,7 +12197,8 @@ var BaseLayers = function BaseLayers(_ref) {
     },
     onChangeMouseWheel: function onChangeMouseWheel(e) {
       return onChangeBaseLayers(e.value);
-    }
+    },
+    IconComponent: icon
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
   }, "Base layer"), availableBaseLayers.map(function (baseLayer) {
@@ -12131,7 +12270,9 @@ var areAvailableBaseLayersSame = function areAvailableBaseLayersSame(availableBa
 
 var BaseLayersConnect = function BaseLayersConnect(_ref) {
   var mapId = _ref.mapId,
-      preloadedAvailableBaseLayers = _ref.preloadedAvailableBaseLayers;
+      preloadedAvailableBaseLayers = _ref.preloadedAvailableBaseLayers,
+      tooltipPrefix = _ref.tooltipPrefix,
+      icon = _ref.icon;
   var dispatch = useDispatch();
   var selectedBaseLayers = useSelector(function (store) {
     return getMapBaseLayers(store, mapId);
@@ -12166,7 +12307,9 @@ var BaseLayersConnect = function BaseLayersConnect(_ref) {
   return /*#__PURE__*/React.createElement(BaseLayers, {
     selectedBaseLayers: selectedBaseLayers,
     availableBaseLayers: currentAvailableBaseLayers,
-    onChangeBaseLayers: onChangeBaseLayers
+    onChangeBaseLayers: onChangeBaseLayers,
+    tooltipPrefix: tooltipPrefix,
+    icon: icon
   });
 };
 
@@ -12203,11 +12346,10 @@ var WMSServerList = function WMSServerList(_ref) {
   }, /*#__PURE__*/React.createElement(List, {
     dense: true
   }, sortedServices.map(function (service) {
-    return /*#__PURE__*/React.createElement(ListItem, {
+    return /*#__PURE__*/React.createElement(ListItemButton, {
       "data-testid": "service-item",
       key: service.url,
       selected: service === activeService,
-      button: true,
       onClick: function onClick(event) {
         handleListItemClick(event, service);
       }
@@ -12230,8 +12372,8 @@ var WMSServerList = function WMSServerList(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 
 var WMSLayerTreeHeader = function WMSLayerTreeHeader(_ref) {
@@ -12249,18 +12391,11 @@ var WMSLayerTreeHeader = function WMSLayerTreeHeader(_ref) {
     htmlFor: "select-multiple-native"
   }, "Available layers for ", serviceName)), onClickReload && /*#__PURE__*/React.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: "Reload layers from service",
-    placement: "top"
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  }, /*#__PURE__*/React.createElement(CustomIconButton, {
+    tooltipTitle: "Reload layers from service",
     "data-testid": "reloadLayers",
-    color: "primary",
-    style: {
-      padding: 3
-    },
-    onClick: onClickReload,
-    size: "large"
-  }, /*#__PURE__*/React.createElement(Cached, null)))));
+    onClick: onClickReload
+  }, /*#__PURE__*/React.createElement(Cached, null))));
 };
 
 var WMSLayerTree = function WMSLayerTree(_ref) {
@@ -12396,10 +12531,9 @@ var WMSLayerTree = function WMSLayerTree(_ref) {
         textOverflow: 'ellipsis'
       }
     }, category)), layerMap[category].map(function (layer) {
-      return layer.leaf ? /*#__PURE__*/React.createElement(ListItem, {
+      return layer.leaf ? /*#__PURE__*/React.createElement(ListItemButton, {
         "data-testid": "selectableLayer",
         key: layer.name,
-        button: true,
         selected: processedOK.indexOf(layer.name) !== -1 || layerExists(layer, highlightedLayers),
         onClick: function onClick() {
           return handleInternalSelect(layer.name);
@@ -12739,7 +12873,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true,
-    xs: 10
+    xs: 12
   }, /*#__PURE__*/React.createElement(TextField, {
     margin: "dense",
     id: "serviceurl",
@@ -12761,25 +12895,21 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
     disabled: loading,
     error: urlError !== '',
     helperText: urlError,
-    variant: "standard"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 2,
-    sx: {
-      position: 'relative'
-    }
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    "data-testid": "add-service",
-    onClick: handleAddServiceURL,
-    disabled: loading,
-    size: "large"
-  }, /*#__PURE__*/React.createElement(Add, null)), loading && /*#__PURE__*/React.createElement(CircularProgress, {
-    size: 35,
-    sx: {
-      position: 'absolute',
-      top: '7px',
-      left: '7px',
-      zIndex: 1
+    variant: "filled",
+    InputProps: {
+      endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
+        position: "end"
+      }, loading ? /*#__PURE__*/React.createElement(CircularProgress, {
+        size: 24,
+        sx: {
+          zIndex: 1
+        }
+      }) : /*#__PURE__*/React.createElement(CustomIconButton, {
+        "data-testid": "add-service",
+        onClick: handleAddServiceURL,
+        disabled: loading,
+        size: "large"
+      }, /*#__PURE__*/React.createElement(Add, null)))
     }
   })))), /*#__PURE__*/React.createElement(Box, {
     m: 2
@@ -12819,10 +12949,7 @@ var styles$3 = {
     zIndex: 1
   },
   button: {
-    width: '24px',
-    height: '24px',
-    margin: 'auto 0px auto 32px',
-    borderRadius: '15%'
+    margin: 'auto 0px auto 32px'
   }
 };
 
@@ -12843,40 +12970,24 @@ var AddLayersButton = function AddLayersButton(_ref) {
       open = _React$useState2[0],
       setOpen = _React$useState2[1];
 
-  var _React$useState3 = React.useState(shouldFocus),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      isTooltipDisabled = _React$useState4[0],
-      setTooltipDisabled = _React$useState4[1];
-
   var handleClose = function handleClose() {
     setOpen(!open);
   };
 
-  var onBlurTooltip = function onBlurTooltip(event) {
-    // enable tooltip again after user blurs
-    if (event.relatedTarget) {
-      setTooltipDisabled(false);
-    }
-  };
-
   React.useEffect(function () {
     if (shouldFocus && ref.current) {
       ref.current.focus();
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: tooltip,
-    disableFocusListener: isTooltipDisabled,
-    onBlur: onBlurTooltip
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomIconButton, {
     onClick: handleClose,
     sx: styles$3.button,
     disableRipple: true,
     "data-testid": "addLayersButton",
     ref: ref,
-    size: "large"
-  }, /*#__PURE__*/React.createElement(Add, null))), /*#__PURE__*/React.createElement(AddLayersPopup, {
+    tooltipTitle: tooltip
+  }, /*#__PURE__*/React.createElement(Add, null)), /*#__PURE__*/React.createElement(AddLayersPopup, {
     open: open,
     handleClose: handleClose,
     onRenderTree: onRenderTree,
@@ -12909,7 +13020,11 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
       _ref$preloadedService = _ref.preloadedServices,
       preloadedServices = _ref$preloadedService === void 0 ? preloadedDefaultBaseServices : _ref$preloadedService,
       _ref$tooltip = _ref.tooltip,
-      tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip;
+      tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip,
+      settings = _ref.settings;
+
+  var _a, _b, _c;
+
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     item: true,
@@ -12935,12 +13050,14 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
         layerType: LayerType.baseLayer
       });
     }
-  })), /*#__PURE__*/React.createElement(Grid, {
+  })), (_a = settings === null || settings === void 0 ? void 0 : settings.baseLayerRow) === null || _a === void 0 ? void 0 : _a.title, /*#__PURE__*/React.createElement(Grid, {
     item: true,
     className: columnClasses.column2
   }, /*#__PURE__*/React.createElement(BaseLayersConnect, {
     mapId: mapId,
-    preloadedAvailableBaseLayers: preloadedAvailableBaseLayers
+    preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
+    tooltipPrefix: (_b = settings === null || settings === void 0 ? void 0 : settings.baseLayerDropdown) === null || _b === void 0 ? void 0 : _b.tooltipPrefix,
+    icon: (_c = settings === null || settings === void 0 ? void 0 : settings.baseLayerDropdown) === null || _c === void 0 ? void 0 : _c.icon
   })));
 };
 
@@ -13049,7 +13166,8 @@ var LayerManager = function LayerManager(_ref) {
     left: 50
   } : _ref$startPosition,
       _ref$setFocused = _ref.setFocused,
-      setFocused = _ref$setFocused === void 0 ? function () {} : _ref$setFocused;
+      setFocused = _ref$setFocused === void 0 ? function () {} : _ref$setFocused,
+      settings = _ref.settings;
   var minSize = {
     width: 100,
     height: 126
@@ -13141,14 +13259,16 @@ var LayerManager = function LayerManager(_ref) {
   }, /*#__PURE__*/React.createElement(DescriptionRow, {
     mapPresetsModule: leftHeaderComponent,
     mapId: mapId,
-    source: source
+    source: source,
+    settings: settings === null || settings === void 0 ? void 0 : settings.header
   }), /*#__PURE__*/React.createElement(LayerContainerRow, {
     mapId: mapId
   }), /*#__PURE__*/React.createElement(BaseLayerRow, {
     mapId: mapId,
     tooltip: "Add base layers",
     preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
-    preloadedServices: preloadedBaseServices
+    preloadedServices: preloadedBaseServices,
+    settings: settings === null || settings === void 0 ? void 0 : settings.footer
   })))));
 };
 
@@ -13522,12 +13642,19 @@ var KeywordFilterButtonConnect = function KeywordFilterButtonConnect(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 var isURL = function isURL(string) {
   return /^https?:\/\//.test(string);
 };
+var buttonStyle = {
+  '&.MuiButtonBase-root.MuiIconButton-root': {
+    width: 48,
+    height: 48,
+    marginRight: '-12px'
+  }
+};
 
 var SearchFieldButtonContainer = function SearchFieldButtonContainer(_ref) {
   var localSearchString = _ref.localSearchString,
@@ -13535,16 +13662,13 @@ var SearchFieldButtonContainer = function SearchFieldButtonContainer(_ref) {
       setPopupIsOpen = _ref.setPopupIsOpen;
 
   var ClearButton = function ClearButton() {
-    return /*#__PURE__*/React__default.createElement(CustomTooltip, {
-      title: "Clear",
-      placement: "top"
-    }, /*#__PURE__*/React__default.createElement(IconButton, {
-      edge: "end",
+    return /*#__PURE__*/React__default.createElement(CustomIconButton, {
+      tooltipTitle: "Clear",
+      sx: buttonStyle,
       onClick: function onClick() {
         onClickClear();
-      },
-      size: "large"
-    }, /*#__PURE__*/React__default.createElement(Clear, null)));
+      }
+    }, /*#__PURE__*/React__default.createElement(Clear, null));
   };
 
   if (isURL(localSearchString)) {
@@ -13564,13 +13688,10 @@ var SearchFieldButtonContainer = function SearchFieldButtonContainer(_ref) {
     return /*#__PURE__*/React__default.createElement(ClearButton, null);
   }
 
-  return /*#__PURE__*/React__default.createElement(CustomTooltip, {
-    title: "Search",
-    placement: "top"
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
-    edge: "end",
-    size: "large"
-  }, /*#__PURE__*/React__default.createElement(Search, null)));
+  return /*#__PURE__*/React__default.createElement(CustomIconButton, {
+    tooltipTitle: "Search",
+    sx: buttonStyle
+  }, /*#__PURE__*/React__default.createElement(Search, null));
 };
 
 var SearchField = function SearchField(_ref) {
@@ -14732,7 +14853,7 @@ var ServiceChipConnect = function ServiceChipConnect(_ref) {
     }));
   };
 
-  var hasSelectedStyle = !isAllSelected && isSelected || isAllSelected && service === 'all';
+  var hasSelectedStyle = !isAllSelected && isSelected || isAllSelected && (service === null || service === void 0 ? void 0 : service.serviceName) === 'all';
 
   var toggleChip = function toggleChip(service) {
     if (service === 'all') {
@@ -14906,8 +15027,8 @@ var ServiceListConnect = function ServiceListConnect(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 var styles$1 = {
   servicesContainer: {
@@ -15073,39 +15194,35 @@ var Rows = function Rows(_ref2) {
         paddingRight: '70px'
       }
     }, serviceName)), /*#__PURE__*/React.createElement(ListItemSecondaryAction, {
-      style: {
+      sx: {
         marginRight: '0px',
-        width: 100
+        width: 96,
+        button: {
+          marginLeft: 1
+        }
       }
     }, /*#__PURE__*/React.createElement(Grid, {
-      container: true
-    }, /*#__PURE__*/React.createElement(Grid, {
-      item: true,
-      xs: 4
+      container: true,
+      justifyContent: "left"
     }, /*#__PURE__*/React.createElement(CustomTooltip, {
       "data-testid": "updateServiceTooltip",
       title: updateServiceTitle,
       placement: tooltipPlacement(),
       PopperProps: tooltipPopperProps
-    }, /*#__PURE__*/React.createElement(IconButton, {
+    }, /*#__PURE__*/React.createElement(CustomIconButton, {
       "data-testid": "updateServiceButton",
       "aria-label": "Update layers from WMS service",
-      size: "large",
       onKeyDown: stopTabPropagation,
       onClick: function onClick() {
         layerSelectReloadService(serviceUrl);
       }
-    }, /*#__PURE__*/React.createElement(Cached, null)))), /*#__PURE__*/React.createElement(Grid, {
-      item: true,
-      xs: 4
-    }, userAddedService ? /*#__PURE__*/React.createElement(CustomTooltip, {
+    }, /*#__PURE__*/React.createElement(Cached, null))), userAddedService ? /*#__PURE__*/React.createElement(CustomTooltip, {
       title: editServiceTitle,
       placement: tooltipPlacement(),
       PopperProps: tooltipPopperProps
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
+    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CustomIconButton, {
       "aria-label": "edit service",
       "data-testid": "openEditServiceButton",
-      size: "large",
       onKeyDown: stopTabPropagation,
       onClick: function onClick() {
         setServicePopupInfo({
@@ -15119,10 +15236,9 @@ var Rows = function Rows(_ref2) {
       title: showServiceTitle,
       placement: tooltipPlacement(),
       PopperProps: tooltipPopperProps
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
+    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CustomIconButton, {
       "aria-label": "show service",
       "data-testid": "openShowServiceButton",
-      size: "large",
       onKeyDown: stopTabPropagation,
       onClick: function onClick() {
         setServicePopupInfo({
@@ -15132,24 +15248,20 @@ var Rows = function Rows(_ref2) {
           variant: 'show'
         });
       }
-    }, /*#__PURE__*/React.createElement(Visibility, null))))), /*#__PURE__*/React.createElement(Grid, {
-      item: true,
-      xs: 4
-    }, userAddedService && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(CustomTooltip, {
+    }, /*#__PURE__*/React.createElement(Visibility, null)))), userAddedService && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(CustomTooltip, {
       title: deleteServiceTitle(serviceHasActiveLayers),
       PopperProps: tooltipPopperProps,
       placement: tooltipPlacement(),
       "data-testid": "removeServiceTooltip"
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
+    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CustomIconButton, {
       "data-testid": "removeServiceButton",
       "aria-label": "delete service",
-      size: "large",
       disabled: serviceHasActiveLayers,
       onKeyDown: stopTabPropagation,
       onClick: function onClick() {
         return layerSelectRemoveService(serviceId, serviceUrl, serviceName);
       }
-    }, /*#__PURE__*/React.createElement(Delete, null)))))))));
+    }, /*#__PURE__*/React.createElement(Delete, null))))))));
   }));
 };
 
@@ -15609,12 +15721,12 @@ var FilterListItem = function FilterListItem(_ref) {
         whiteSpace: 'nowrap',
         overflow: 'hidden'
       }
-    }, filter.name, " (", filter.amountVisible, ")"), isHovering ? /*#__PURE__*/React.createElement(ListItemSecondaryAction, null, /*#__PURE__*/React.createElement(IconButton, {
+    }, filter.name, " (", filter.amountVisible, ")"), isHovering ? /*#__PURE__*/React.createElement(ListItemSecondaryAction, null, /*#__PURE__*/React.createElement(CustomIconButton, {
       style: {
-        backgroundColor: 'transparent'
+        backgroundColor: 'transparent',
+        width: 'auto'
       },
       edge: "end",
-      size: "small",
       onClick: function onClick() {
         return selectOnlyOne(filter.id);
       },
@@ -16166,15 +16278,16 @@ var ServicePopup = function ServicePopup(_ref2) {
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "h5",
     component: "span"
-  }, getTitleForVariant(servicePopupVariant)), /*#__PURE__*/React.createElement(IconButton, {
+  }, getTitleForVariant(servicePopupVariant)), /*#__PURE__*/React.createElement(CustomIconButton, {
     "aria-label": "close",
-    size: "small",
     onClick: closePopup,
     "data-testid": "closePopupButtonCross",
     sx: {
-      color: 'geowebColors.captions.captionDisabled.color',
       marginTop: 'auto',
-      marginBottom: 'auto'
+      marginBottom: 'auto',
+      '&.MuiButtonBase-root': {
+        color: 'geowebColors.greys.accessible'
+      }
     }
   }, /*#__PURE__*/React.createElement(Close, null))), isLoading && /*#__PURE__*/React.createElement(Box, {
     sx: {
@@ -16212,11 +16325,14 @@ var ServicePopup = function ServicePopup(_ref2) {
       disableUnderline: isShowPopup,
       endAdornment: isShowPopup && /*#__PURE__*/React.createElement(InputAdornment, {
         position: "end"
-      }, /*#__PURE__*/React.createElement(IconButton, {
+      }, /*#__PURE__*/React.createElement(CustomIconButton, {
         "aria-label": "copy url",
         onClick: function onClick() {
           navigator.clipboard.writeText(serviceUrl);
           showSnackbar(COPY_URL_MESSAGE);
+        },
+        sx: {
+          marginTop: 0.5
         }
       }, /*#__PURE__*/React.createElement(Copy, null)))
     },
@@ -16909,8 +17025,8 @@ var handleMomentISOString = function handleMomentISOString(dateIn) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 
 var DimensionSelectSliderConnect = function DimensionSelectSliderConnect(_ref) {
@@ -16951,16 +17067,16 @@ var DimensionSelectSliderConnect = function DimensionSelectSliderConnect(_ref) {
     key: layerId,
     item: true,
     xs: "auto"
-  }, /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: tooltipTitle,
-    placement: "top"
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  }, /*#__PURE__*/React.createElement(CustomIconButton, {
+    tooltipTitle: tooltipTitle,
     "data-testid": "syncButton",
-    size: "small",
     onClick: function onClick() {
       return handleSyncChanged(layerId, dimensionName, layerDimension.currentValue, !layerDimension.synced);
+    },
+    sx: {
+      margin: '5px'
     }
-  }, /*#__PURE__*/React.createElement(Icon, null))), /*#__PURE__*/React.createElement(DimensionSelectSlider, {
+  }, /*#__PURE__*/React.createElement(Icon, null)), /*#__PURE__*/React.createElement(DimensionSelectSlider, {
     marks: marks,
     layerTitle: layerTitle,
     reverse: dimConfig ? dimConfig.reversed : false,
@@ -21105,7 +21221,6 @@ var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, mapProperti
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
 /* Function which calculates the distance between two points */
-// eslint-disable-next-line class-methods-use-this
 
 var distance = function distance(a, b) {
   return Math.sqrt((a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y));
@@ -21184,9 +21299,10 @@ var checkHoverVertice = function checkHoverVertice(feature, mouseX, mouseY, conv
           return {
             coordinateIndexInFeature: _polygonIndex
           };
-        } // eslint-disable-next-line no-empty
-
-      } catch (e) {}
+        }
+      } catch (e) {
+        console.warn(e);
+      }
     }
   }
 
@@ -21212,9 +21328,10 @@ var checkHoverVertice = function checkHoverVertice(feature, mouseX, mouseY, conv
           return {
             coordinateIndexInFeature: _polygonIndex2
           };
-        } // eslint-disable-next-line no-empty
-
-      } catch (e) {}
+        }
+      } catch (e) {
+        console.warn(e);
+      }
     }
   }
 
@@ -21428,7 +21545,7 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
         if (feature.geometry) {
           var coordinates = feature.geometry.coordinates;
 
-          if (_this.snappedPolygonIndex > coordinates.length - 1) {
+          if (Number(_this.snappedPolygonIndex) > coordinates.length - 1) {
             _this.snappedPolygonIndex = coordinates.length - 1;
           }
         }
@@ -24655,7 +24772,26 @@ var MapView = function MapView(_a) {
 
   var dimensions = props.dimensions,
       mapId = props.mapId;
+  var wmjsMapRef = React.useRef(null);
+
+  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]);
   return /*#__PURE__*/React.createElement(Box, {
+    ref: ref,
     sx: {
       display: 'grid',
       width: '100%',
@@ -24688,7 +24824,10 @@ var MapView = function MapView(_a) {
     }
   }, /*#__PURE__*/React.createElement(ReactMapView, Object.assign({}, props, {
     showLegend: false,
-    displayTimeInMap: false
+    displayTimeInMap: false,
+    onWMJSMount: function onWMJSMount(id) {
+      wmjsMapRef.current = getWMJSMapById(id);
+    }
   }), children)), displayTimeInMap && dimensions && /*#__PURE__*/React.createElement(MapTime, {
     dimensions: dimensions
   }));
@@ -25939,11 +26078,10 @@ var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
       }
     }, /*#__PURE__*/React__default.createElement(Typography, {
       variant: "subtitle1"
-    }, title, "\xA0", /*#__PURE__*/React__default.createElement(IconButton, {
+    }, title, "\xA0", /*#__PURE__*/React__default.createElement(CustomIconButton, {
       sx: {
         "float": 'right'
       },
-      size: "small",
       "aria-label": "Open layer featureinfo in another page",
       onClick: function onClick() {
         window.open(url);
@@ -26324,8 +26462,7 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
         syncGroupAddTarget({
           groupId: syncGroupsId,
           targetId: map.id,
-          linked: true,
-          origin: 'system'
+          linked: true
         });
       });
     });
@@ -26735,10 +26872,9 @@ var SyncGroupListItem = function SyncGroupListItem(_ref) {
     var isNotCheckedElseWhere = viewStateData.groups.every(function (group) {
       return !(group.id !== groupId && group.selected.includes(source.id));
     });
-    return /*#__PURE__*/React.createElement(ListItem, {
+    return /*#__PURE__*/React.createElement(ListItemButton, {
       key: source.id,
       dense: true,
-      button: true,
       onClick: function onClick() {
         return handleToggle(source.id);
       },
@@ -26772,8 +26908,8 @@ var SyncGroupListItem = function SyncGroupListItem(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 var SyncGroupList = function SyncGroupList(_ref) {
   var viewStateData = _ref.viewStateData,
@@ -26801,9 +26937,8 @@ var SyncGroupList = function SyncGroupList(_ref) {
         paddingLeft: '15px',
         paddingTop: '10px'
       }
-    }, /*#__PURE__*/React.createElement(Typography, null, title), /*#__PURE__*/React.createElement(CustomTooltip, {
-      title: index === 0 ? 'Add new group to list' : 'Remove group from list'
-    }, /*#__PURE__*/React.createElement(IconButton, {
+    }, /*#__PURE__*/React.createElement(Typography, null, title), /*#__PURE__*/React.createElement(CustomIconButton, {
+      tooltipTitle: index === 0 ? 'Add new group to list' : 'Remove group from list',
       style: {
         right: '10px'
       },
@@ -26812,9 +26947,8 @@ var SyncGroupList = function SyncGroupList(_ref) {
         return addNewGroup(groupObject.id);
       } : function () {
         return removeGroup(groupObject.id);
-      },
-      size: "large"
-    }, index === 0 ? /*#__PURE__*/React.createElement(Add, null) : /*#__PURE__*/React.createElement(Delete, null)))), /*#__PURE__*/React.createElement(SyncGroupListItem, {
+      }
+    }, index === 0 ? /*#__PURE__*/React.createElement(Add, null) : /*#__PURE__*/React.createElement(Delete, null))), /*#__PURE__*/React.createElement(SyncGroupListItem, {
       viewStateData: viewStateData,
       groupId: groupObject.id,
       selected: groupObject.selected,
@@ -26904,7 +27038,8 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
         syncGroupAddGroup({
           groupId: String(groupId + Math.floor(Math.random() * 1000)),
           title: title,
-          type: syncType
+          type: syncType,
+          origin: 'user'
         });
       }
     });
@@ -27182,8 +27317,8 @@ var testLayers = /*#__PURE__*/Object.freeze({
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 var SnackbarWrapper = function SnackbarWrapper(_a) {
   var children = _a.children,
@@ -27201,14 +27336,19 @@ var SnackbarWrapper = function SnackbarWrapper(_a) {
     ClickAwayListenerProps: {
       mouseEvent: false
     },
-    action: /*#__PURE__*/React.createElement(IconButton, {
+    action: /*#__PURE__*/React.createElement(CustomIconButton, {
       "aria-label": "close",
       "data-testid": "snackbarCloseButton",
       onClick: onCloseSnackbar,
+      size: "large",
       sx: {
-        color: 'geowebColors.snackbar.action',
-        '&:hover': {
-          backgroundColor: 'geowebColors.snackbar.actionHover.rgba'
+        '&.MuiButtonBase-root': {
+          borderRadius: 20,
+          color: 'geowebColors.snackbar.action',
+          '&:hover': {
+            color: 'geowebColors.snackbar.action',
+            backgroundColor: 'geowebColors.snackbar.actionHover.rgba'
+          }
         }
       }
     }, /*#__PURE__*/React.createElement(Close, null))
@@ -27323,6 +27463,7 @@ var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref3) {
  * */
 // stores navigate hook method to object, so it can be used outside components
 var historyDict = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   navigate: null
 };
 
@@ -27403,8 +27544,6 @@ var routerModuleConfig = {
  * */
 var NavigateSetter = function NavigateSetter() {
   // stores navigate hook method to historyDict, so it can be used outside components
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
   historyDict.navigate = useNavigate();
   return null;
 };