@opengeoweb/core 4.18.0 → 4.19.1

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;
@@ -3424,7 +3451,7 @@ var getDimensionLayerIds = createSelector(getLayersIds, getLayersById, function
   }, []);
 }, selectorMemoizationOptions);
 
-var selectors$3 = /*#__PURE__*/Object.freeze({
+var selectors$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   getLayerById: getLayerById,
   getLayersById: getLayersById,
@@ -3592,7 +3619,7 @@ var getDialogFocused = createSelector(getDialogDetailsByType, function (details)
   return details && details.focused || false;
 });
 
-var selectors$2 = /*#__PURE__*/Object.freeze({
+var selectors$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   getUiStore: getUiStore,
   getDialogDetailsByType: getDialogDetailsByType,
@@ -3989,6 +4016,154 @@ var types$1 = /*#__PURE__*/Object.freeze({
   get SyncGroupActionOrigin () { return SyncGroupActionOrigin; }
 });
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2020 - Finnish Meteorological Institute (FMI)
+ * */
+var syncGroupStore = function syncGroupStore(store) {
+  return store.syncronizationGroupStore || null;
+};
+/**
+ * Gets synchronization group state
+ *
+ * Example: synchronizationGroupState = getSynchronizationGroupState(store)
+ * @param {object} store store: object - Store object
+ * @returns {object} returnType: SynchronizationGroupState
+ */
+
+var getSynchronizationGroupState = createSelector(syncGroupStore, function (store) {
+  return store || null;
+});
+var getSynchronizationGroup = function getSynchronizationGroup(state, id) {
+  return syncGroupStore(state).groups.byId[id];
+};
+var getSynchronizationGroupSource = function getSynchronizationGroupSource(state, id) {
+  return syncGroupStore(state).sources.byId[id];
+};
+var getTargets = function getTargets(state, payload, actionType) {
+  var actionPayloads = [];
+  var targetsInActionPayload = {};
+  var syncronizationGroupStore = syncGroupStore(state);
+  /* All the groups the source is member of */
+
+  if (syncronizationGroupStore && payload) {
+    /* Backwards compatibility, if there are no groups, connect everything */
+    if (syncronizationGroupStore.groups.allIds.length === 0) {
+      syncronizationGroupStore.sources.allIds.forEach(function (targetId) {
+        // Only add if should react to this action
+        if (syncronizationGroupStore.sources.byId[targetId].types.includes(actionType)) {
+          /* Remember that we have already added this target in the action payloads, prevents adding it twice */
+          targetsInActionPayload[targetId] = true;
+          /* Compose the payload */
+
+          var newPayload = Object.assign({
+            targetId: targetId
+          }, payload);
+          actionPayloads.push(newPayload);
+        }
+      });
+    }
+
+    syncronizationGroupStore.groups.allIds.forEach(function (id) {
+      var syncronizationGroup = syncronizationGroupStore.groups.byId[id];
+
+      if (actionType === syncronizationGroup.type) {
+        /* Check if the source is in the target list of the synchonizationGroup */
+        var source = syncronizationGroup.targets.byId[payload.sourceId];
+        /* If the source is part of the target list, and is linked, continue syncing the other targets */
+
+        if (source && source.linked) {
+          syncronizationGroup.targets.allIds.forEach(function (targetId) {
+            var target = syncronizationGroup.targets.byId[targetId];
+
+            if (target.linked && !targetsInActionPayload[targetId]) {
+              /* Remember that we have already added this target in the action payloads, prevents adding it twice */
+              targetsInActionPayload[targetId] = true;
+              /* Compose the payload */
+
+              var newPayload = Object.assign({
+                targetId: targetId
+              }, payload);
+              actionPayloads.push(newPayload);
+            }
+          });
+        }
+      }
+    });
+  }
+
+  return actionPayloads;
+};
+var getTargetGroups = function getTargetGroups(state, payload, actionType) {
+  var syncronizationGroupStore = syncGroupStore(state);
+  var groups = syncronizationGroupStore.groups.allIds.reduce(function (list, groupId) {
+    var syncronizationGroup = syncronizationGroupStore.groups.byId[groupId];
+
+    if (actionType === syncronizationGroup.type) {
+      /* Check if the source is in the target list of the synchronizationGroup */
+      var source = syncronizationGroup.targets.byId[payload.sourceId];
+      /* If the source is part of the target list, and is linked, continue syncin the other targets */
+
+      if (source && source.linked) {
+        return list.concat(groupId);
+      }
+    }
+
+    return list;
+  }, []);
+  return groups;
+};
+var getAllTargetGroupsForSource = function getAllTargetGroupsForSource(state, sourceId) {
+  var syncronizationGroupStore = syncGroupStore(state);
+
+  if (syncronizationGroupStore === null || syncronizationGroupStore === void 0 ? void 0 : syncronizationGroupStore.groups) {
+    return syncronizationGroupStore.groups.allIds.reduce(function (linkedSyncGroupIds, groupId) {
+      var syncronizationGroup = syncronizationGroupStore.groups.byId[groupId];
+      var source = syncronizationGroup.targets.byId[sourceId];
+      /* If the source is part of the target list, and is linked, continue syncin the other targets */
+
+      if (source && source.linked) {
+        return linkedSyncGroupIds.concat(groupId);
+      }
+
+      return linkedSyncGroupIds;
+    }, []);
+  }
+
+  return [];
+};
+var syncGroupGetViewState = createSelector(syncGroupStore, function (store) {
+  return store.viewState;
+});
+var getSyncedMapIdsForTimeslider = createSelector(syncGroupStore, function (store) {
+  return store.viewState.timeslider.groups[0].selected;
+}, selectorMemoizationOptions);
+
+var selectors$2 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  syncGroupStore: syncGroupStore,
+  getSynchronizationGroupState: getSynchronizationGroupState,
+  getSynchronizationGroup: getSynchronizationGroup,
+  getSynchronizationGroupSource: getSynchronizationGroupSource,
+  getTargets: getTargets,
+  getTargetGroups: getTargetGroups,
+  getAllTargetGroupsForSource: getAllTargetGroupsForSource,
+  syncGroupGetViewState: syncGroupGetViewState,
+  getSyncedMapIdsForTimeslider: getSyncedMapIdsForTimeslider
+});
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -4011,7 +4186,8 @@ var index = /*#__PURE__*/Object.freeze({
   actions: actions,
   constants: constants,
   types: types$1,
-  initialState: initialState$4
+  initialState: initialState$4,
+  syncGroupsSelectors: selectors$2
 });
 
 /* *
@@ -5582,119 +5758,6 @@ var slice = createSlice({
 var reducer = slice.reducer;
 var appActions = slice.actions;
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * */
-var syncGroupStore = function syncGroupStore(store) {
-  return store.syncronizationGroupStore || null;
-};
-/**
- * Gets synchronization group state
- *
- * Example: synchronizationGroupState = getSynchronizationGroupState(store)
- * @param {object} store store: object - Store object
- * @returns {object} returnType: SynchronizationGroupState
- */
-
-var getSynchronizationGroupState = createSelector(syncGroupStore, function (store) {
-  return store || null;
-});
-var getSynchronizationGroup = function getSynchronizationGroup(state, id) {
-  return syncGroupStore(state).groups.byId[id];
-};
-var getTargets = function getTargets(state, payload, actionType) {
-  var actionPayloads = [];
-  var targetsInActionPayload = {};
-  var syncronizationGroupStore = syncGroupStore(state);
-  /* All the groups the source is member of */
-
-  if (syncronizationGroupStore && payload) {
-    /* Backwards compatibility, if there are no groups, connect everything */
-    if (syncronizationGroupStore.groups.allIds.length === 0) {
-      syncronizationGroupStore.sources.allIds.forEach(function (targetId) {
-        // Only add if should react to this action
-        if (syncronizationGroupStore.sources.byId[targetId].types.includes(actionType)) {
-          /* Remember that we have already added this target in the action payloads, prevents adding it twice */
-          targetsInActionPayload[targetId] = true;
-          /* Compose the payload */
-
-          var newPayload = Object.assign({
-            targetId: targetId
-          }, payload);
-          actionPayloads.push(newPayload);
-        }
-      });
-    }
-
-    syncronizationGroupStore.groups.allIds.forEach(function (id) {
-      var syncronizationGroup = syncronizationGroupStore.groups.byId[id];
-
-      if (actionType === syncronizationGroup.type) {
-        /* Check if the source is in the target list of the synchonizationGroup */
-        var source = syncronizationGroup.targets.byId[payload.sourceId];
-        /* If the source is part of the target list, and is linked, continue syncing the other targets */
-
-        if (source && source.linked) {
-          syncronizationGroup.targets.allIds.forEach(function (targetId) {
-            var target = syncronizationGroup.targets.byId[targetId];
-
-            if (target.linked && !targetsInActionPayload[targetId]) {
-              /* Remember that we have already added this target in the action payloads, prevents adding it twice */
-              targetsInActionPayload[targetId] = true;
-              /* Compose the payload */
-
-              var newPayload = Object.assign({
-                targetId: targetId
-              }, payload);
-              actionPayloads.push(newPayload);
-            }
-          });
-        }
-      }
-    });
-  }
-
-  return actionPayloads;
-};
-var getTargetGroups = function getTargetGroups(state, payload, actionType) {
-  var syncronizationGroupStore = syncGroupStore(state);
-  var groups = syncronizationGroupStore.groups.allIds.reduce(function (list, groupId) {
-    var syncronizationGroup = syncronizationGroupStore.groups.byId[groupId];
-
-    if (actionType === syncronizationGroup.type) {
-      /* Check if the source is in the target list of the synchronizationGroup */
-      var source = syncronizationGroup.targets.byId[payload.sourceId];
-      /* If the source is part of the target list, and it linked, continue syncin the other targets */
-
-      if (source && source.linked) {
-        return list.concat(groupId);
-      }
-    }
-
-    return list;
-  }, []);
-  return groups;
-};
-var syncGroupGetViewState = createSelector(syncGroupStore, function (store) {
-  return store.viewState;
-});
-var getSyncedMapIdsForTimeslider = createSelector(syncGroupStore, function (store) {
-  return store.viewState.timeslider.groups[0].selected;
-}, selectorMemoizationOptions);
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -7944,7 +8007,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 +9972,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 +10008,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 +10040,7 @@ var HeaderOptions = function HeaderOptions(_ref) {
     "data-testid": "dockedLayerManager-collapse"
   }) : /*#__PURE__*/React.createElement(ExpandWindow, {
     "data-testid": "dockedLayerManager-uncollapse"
-  }))));
+  })));
 };
 
 /* *
@@ -10200,20 +10247,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 +10280,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 +10302,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 +10330,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 +10347,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
   }));
 };
@@ -10506,7 +10559,9 @@ var RenderLayers = function RenderLayers(_ref) {
       _ref$layers = _ref.layers,
       layers = _ref$layers === void 0 ? [] : _ref$layers,
       _ref$isEnabled = _ref.isEnabled,
-      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
+      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
+      _ref$tooltipPrefix = _ref.tooltipPrefix,
+      tooltipPrefix = _ref$tooltipPrefix === void 0 ? 'Layer: ' : _ref$tooltipPrefix;
 
   var _a;
 
@@ -10547,7 +10602,7 @@ var RenderLayers = function RenderLayers(_ref) {
   });
   return /*#__PURE__*/React.createElement(TooltipSelect, {
     disableUnderline: true,
-    tooltip: "Layer: ".concat((_a = extendedLayers[currentIndex]) === null || _a === void 0 ? void 0 : _a.title),
+    tooltip: "".concat(tooltipPrefix).concat((_a = extendedLayers[currentIndex]) === null || _a === void 0 ? void 0 : _a.title),
     inputProps: {
       SelectDisplayProps: {
         'data-testid': 'selectLayer'
@@ -10616,7 +10671,9 @@ var OpacitySelect = function OpacitySelect(_ref) {
   var currentOpacity = _ref.currentOpacity,
       onLayerChangeOpacity = _ref.onLayerChangeOpacity,
       _ref$isEnabled = _ref.isEnabled,
-      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
+      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
+      _ref$tooltipPrefix = _ref.tooltipPrefix,
+      tooltipPrefix = _ref$tooltipPrefix === void 0 ? 'Opacity: ' : _ref$tooltipPrefix;
 
   var _useControlledTooltip = useControlledTooltip(),
       _useControlledTooltip2 = _slicedToArray(_useControlledTooltip, 2),
@@ -10681,7 +10738,7 @@ var OpacitySelect = function OpacitySelect(_ref) {
       height: 32
     }
   }, /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: "Opacity: ".concat(currentOpacityText),
+    title: "".concat(tooltipPrefix).concat(currentOpacityText),
     sx: tooltipContainerStyles(isEnabled),
     placement: "top",
     open: tooltipOpen
@@ -10764,7 +10821,10 @@ var OpacitySelect = function OpacitySelect(_ref) {
 var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
   var mapId = _ref.mapId,
       layerId = _ref.layerId,
-      onLayerDuplicate = _ref.onLayerDuplicate;
+      onLayerDuplicate = _ref.onLayerDuplicate,
+      _ref$tooltipTitle = _ref.tooltipTitle,
+      tooltipTitle = _ref$tooltipTitle === void 0 ? 'Options' : _ref$tooltipTitle,
+      icon = _ref.icon;
 
   var onClickDuplicate = function onClickDuplicate() {
     onLayerDuplicate({
@@ -10788,7 +10848,8 @@ var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
       action: onClickDuplicate,
       icon: /*#__PURE__*/React.createElement(Copy, null)
     }],
-    tooltipTitle: "Options"
+    tooltipTitle: tooltipTitle,
+    buttonIcon: icon
   });
 };
 
@@ -10797,7 +10858,10 @@ var RenderStyles = function RenderStyles(_ref) {
       currentLayerStyle = _ref.currentLayerStyle,
       onChangeLayerStyle = _ref.onChangeLayerStyle,
       _ref$isEnabled = _ref.isEnabled,
-      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
+      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
+      icon = _ref.icon,
+      _ref$tooltipPrefix = _ref.tooltipPrefix,
+      tooltipPrefix = _ref$tooltipPrefix === void 0 ? 'Style: ' : _ref$tooltipPrefix;
 
   var _a;
 
@@ -10828,7 +10892,7 @@ var RenderStyles = function RenderStyles(_ref) {
     return currentStyle === style.name;
   });
   return /*#__PURE__*/React.createElement(TooltipSelect, {
-    tooltip: "Style: ".concat((_a = styles[currentIndex]) === null || _a === void 0 ? void 0 : _a.title),
+    tooltip: "".concat(tooltipPrefix).concat((_a = styles[currentIndex]) === null || _a === void 0 ? void 0 : _a.title),
     inputProps: {
       SelectDisplayProps: {
         'data-testid': 'selectStyle'
@@ -10842,7 +10906,8 @@ var RenderStyles = function RenderStyles(_ref) {
     onChangeMouseWheel: function onChangeMouseWheel(e) {
       return onChangeLayerStyle(e.value);
     },
-    requiresCtrlToChange: true
+    requiresCtrlToChange: true,
+    IconComponent: icon
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
   }, "Style"), styles.map(function (styleFromlayer) {
@@ -10882,13 +10947,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 +10970,7 @@ var ActivateLayer = function ActivateLayer(_ref) {
       },
       tabIndex: -1
     },
-    value: isActive ? 'Both' : 'None',
+    value: current,
     sx: {
       '&& .MuiInput-input': {
         paddingRight: '2px',
@@ -10904,30 +10978,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 +11018,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 +11049,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 +11090,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 +11144,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 +11161,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 +11171,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 +11233,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 +11241,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 +11256,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 +11322,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 +11332,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,14 +11353,18 @@ 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) {
   var layerId = _ref.layerId,
       mapId = _ref.mapId,
-      layerIndex = _ref.layerIndex;
+      layerIndex = _ref.layerIndex,
+      _ref$tooltipTitle = _ref.tooltipTitle,
+      tooltipTitle = _ref$tooltipTitle === void 0 ? 'Delete' : _ref$tooltipTitle,
+      _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(Delete, null) : _ref$icon;
   var dispatch = useDispatch();
   var layerDelete = React.useCallback(function (_ref2) {
     var mapId = _ref2.mapId,
@@ -11274,8 +11380,8 @@ var DeleteLayerConnect = function DeleteLayerConnect(_ref) {
   var isLayerEnabled = useSelector(function (store) {
     return getLayerEnabled(store, layerId);
   });
-  return /*#__PURE__*/React.createElement(ManagerButton, {
-    tooltipTitle: "Delete",
+  return /*#__PURE__*/React.createElement(CustomIconButton, {
+    tooltipTitle: tooltipTitle,
     onClick: function onClick() {
       layerDelete({
         mapId: mapId,
@@ -11283,10 +11389,9 @@ var DeleteLayerConnect = function DeleteLayerConnect(_ref) {
         layerIndex: layerIndex
       });
     },
-    isEnabled: isLayerEnabled,
-    icon: /*#__PURE__*/React.createElement(Delete, null),
+    shouldShowAsDisabled: !isLayerEnabled,
     "data-testid": "deleteButton"
-  });
+  }, icon);
 };
 
 /* *
@@ -11302,8 +11407,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) {
@@ -11312,7 +11417,10 @@ var EnableLayerConnect = function EnableLayerConnect(_ref) {
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? false : _ref$isEnabled,
       _ref$layerName = _ref.layerName,
-      layerName = _ref$layerName === void 0 ? '' : _ref$layerName;
+      layerName = _ref$layerName === void 0 ? '' : _ref$layerName,
+      _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? isEnabled ? /*#__PURE__*/React.createElement(Visibility, null) : /*#__PURE__*/React.createElement(VisibilityOff, null) : _ref$icon,
+      tooltipTitle = _ref.tooltipTitle;
   var dispatch = useDispatch();
   var layerChangeEnabled = React.useCallback(function (_ref2) {
     var layerId = _ref2.layerId,
@@ -11324,9 +11432,11 @@ var EnableLayerConnect = function EnableLayerConnect(_ref) {
       origin: LayerActionOrigin.layerManager
     }));
   }, [dispatch, mapId]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ManagerButton, {
-    isEnabled: isEnabled,
-    tooltipTitle: "Toggle visibility",
+  var normalTooltip = tooltipTitle !== null && tooltipTitle !== void 0 ? tooltipTitle : 'Toggle visibility';
+  var miniTooltip = tooltipTitle !== null && tooltipTitle !== void 0 ? tooltipTitle : layerName;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomIconButton, {
+    shouldShowAsDisabled: !isEnabled,
+    tooltipTitle: normalTooltip,
     onClick: function onClick(event) {
       event.stopPropagation();
       layerChangeEnabled({
@@ -11335,11 +11445,13 @@ 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,
-    tooltipTitle: layerName,
+    "data-testid": "enableButton",
+    sx: {
+      margin: 'auto 0px'
+    }
+  }, icon), /*#__PURE__*/React.createElement(CustomIconButton, {
+    shouldShowAsDisabled: !isEnabled,
+    tooltipTitle: miniTooltip,
     onClick: function onClick(event) {
       event.stopPropagation();
       layerChangeEnabled({
@@ -11348,9 +11460,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'
+    }
+  }, icon));
 };
 
 /* *
@@ -11372,7 +11486,8 @@ var EnableLayerConnect = function EnableLayerConnect(_ref) {
 
 var OpacitySelectConnect = function OpacitySelectConnect(_ref) {
   var layerId = _ref.layerId,
-      mapId = _ref.mapId;
+      mapId = _ref.mapId,
+      tooltipPrefix = _ref.tooltipPrefix;
   var dispatch = useDispatch();
   var opacity = useSelector(function (store) {
     return getLayerOpacity(store, layerId);
@@ -11390,7 +11505,8 @@ var OpacitySelectConnect = function OpacitySelectConnect(_ref) {
         origin: LayerActionOrigin.layerManager
       }));
     },
-    isEnabled: isLayerEnabled
+    isEnabled: isLayerEnabled,
+    tooltipPrefix: tooltipPrefix
   });
 };
 
@@ -11467,7 +11583,9 @@ var DimensionSelectConnect = function DimensionSelectConnect(_ref) {
 
 var RenderStylesConnect = function RenderStylesConnect(_ref) {
   var layerId = _ref.layerId,
-      mapId = _ref.mapId;
+      mapId = _ref.mapId,
+      icon = _ref.icon,
+      tooltipPrefix = _ref.tooltipPrefix;
   var dispatch = useDispatch();
   var layerService = useSelector(function (store) {
     return getLayerService(store, layerId);
@@ -11496,7 +11614,9 @@ var RenderStylesConnect = function RenderStylesConnect(_ref) {
     layerStyles: layerStyles,
     currentLayerStyle: currentLayerStyle,
     onChangeLayerStyle: layerChangeStyle,
-    isEnabled: isLayerEnabled
+    isEnabled: isLayerEnabled,
+    icon: icon,
+    tooltipPrefix: tooltipPrefix
   });
 };
 
@@ -11519,7 +11639,8 @@ var RenderStylesConnect = function RenderStylesConnect(_ref) {
 
 var RenderLayersConnect = function RenderLayersConnect(_ref) {
   var layerId = _ref.layerId,
-      mapId = _ref.mapId;
+      mapId = _ref.mapId,
+      tooltipPrefix = _ref.tooltipPrefix;
   var dispatch = useDispatch();
   var layerName = useSelector(function (store) {
     return getLayerName(store, layerId);
@@ -11603,7 +11724,8 @@ var RenderLayersConnect = function RenderLayersConnect(_ref) {
         name: name
       });
     },
-    isEnabled: isLayerEnabled
+    isEnabled: isLayerEnabled,
+    tooltipPrefix: tooltipPrefix
   });
 };
 
@@ -11626,7 +11748,9 @@ var RenderLayersConnect = function RenderLayersConnect(_ref) {
 
 var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_ref) {
   var layerId = _ref.layerId,
-      mapId = _ref.mapId;
+      mapId = _ref.mapId,
+      tooltipTitle = _ref.tooltipTitle,
+      icon = _ref.icon;
   var dispatch = useDispatch();
   var layer = useSelector(function (store) {
     return getLayerById(store, layerId);
@@ -11651,7 +11775,9 @@ var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_ref)
         mapId: mapId,
         layer: layer
       });
-    }
+    },
+    tooltipTitle: tooltipTitle,
+    icon: icon
   });
 };
 
@@ -11676,49 +11802,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
+      }));
+    }
+
+    goToLastAvailableTimeForLayerIfAutoUpdateIsOn();
+  }
+
+  function handleAutoTimestepClick() {
+    dispatch(mapActions$1.setAutoTimestepLayerId({
+      mapId: mapId,
+      autoTimestepLayerId: layerId
+    }));
+
+    if (thisLayerHasAutoUpdate) {
+      dispatch(mapActions$1.setAutoUpdateLayerId({
+        mapId: mapId,
+        autoUpdateLayerId: undefined
+      }));
+    }
+  }
 
-      if (isAutoUpdating$1) {
-        // Layer is now set active *and* autoupdate is currently on => autoupdate is desired to be set on.
-        setAutoUpdateOn(mapId);
+  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.
@@ -11740,9 +11944,10 @@ var LayerRowConnect = function LayerRowConnect(_ref) {
   var layerId = _ref.layerId,
       mapId = _ref.mapId,
       dragHandle = _ref.dragHandle,
-      layerIndex = _ref.layerIndex;
+      layerIndex = _ref.layerIndex,
+      settings = _ref.settings;
 
-  var _a;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
 
   var isEnabled = useSelector(function (store) {
     return getLayerEnabled(store, layerId);
@@ -11772,15 +11977,19 @@ var LayerRowConnect = function LayerRowConnect(_ref) {
       layerId: layerId,
       mapId: mapId,
       isEnabled: isEnabled,
-      layerName: fullLayerName || layerName
+      layerName: fullLayerName || layerName,
+      icon: isEnabled ? (_b = settings === null || settings === void 0 ? void 0 : settings.enableLayer) === null || _b === void 0 ? void 0 : _b.enabledIcon : (_c = settings === null || settings === void 0 ? void 0 : settings.enableLayer) === null || _c === void 0 ? void 0 : _c.disabledIcon,
+      tooltipTitle: isEnabled ? (_d = settings === null || settings === void 0 ? void 0 : settings.enableLayer) === null || _d === void 0 ? void 0 : _d.enabledTooltipTitle : (_e = settings === null || settings === void 0 ? void 0 : settings.enableLayer) === null || _e === void 0 ? void 0 : _e.disabledTooltipTitle
     }),
     layerOpacityLayout: /*#__PURE__*/React.createElement(OpacitySelectConnect, {
       layerId: layerId,
-      mapId: mapId
+      mapId: mapId,
+      tooltipPrefix: (_f = settings === null || settings === void 0 ? void 0 : settings.opacity) === null || _f === void 0 ? void 0 : _f.tooltipPrefix
     }),
     layerServicesLayout: /*#__PURE__*/React.createElement(RenderLayersConnect, {
       layerId: layerId,
-      mapId: mapId
+      mapId: mapId,
+      tooltipPrefix: (_g = settings === null || settings === void 0 ? void 0 : settings.renderLayer) === null || _g === void 0 ? void 0 : _g.tooltipPrefix
     }),
     layerDimensionLayout: /*#__PURE__*/React.createElement(DimensionSelectConnect, {
       layerId: layerId,
@@ -11788,16 +11997,22 @@ var LayerRowConnect = function LayerRowConnect(_ref) {
     }),
     layerStylesLayout: /*#__PURE__*/React.createElement(RenderStylesConnect, {
       layerId: layerId,
-      mapId: mapId
+      mapId: mapId,
+      tooltipPrefix: (_h = settings === null || settings === void 0 ? void 0 : settings.layerStyle) === null || _h === void 0 ? void 0 : _h.tooltipPrefix,
+      icon: (_j = settings === null || settings === void 0 ? void 0 : settings.layerStyle) === null || _j === void 0 ? void 0 : _j.icon
     }),
     layerDeleteLayout: /*#__PURE__*/React.createElement(DeleteLayerConnect, {
       mapId: mapId,
       layerId: layerId,
-      layerIndex: layerIndex
+      layerIndex: layerIndex,
+      tooltipTitle: (_k = settings === null || settings === void 0 ? void 0 : settings.deleteLayer) === null || _k === void 0 ? void 0 : _k.tooltipTitle,
+      icon: (_l = settings === null || settings === void 0 ? void 0 : settings.deleteLayer) === null || _l === void 0 ? void 0 : _l.icon
     }),
     layerMenuLayout: /*#__PURE__*/React.createElement(LayerManagerMenuButtonConnect, {
       mapId: mapId,
-      layerId: layerId
+      layerId: layerId,
+      tooltipTitle: (_m = settings === null || settings === void 0 ? void 0 : settings.menu) === null || _m === void 0 ? void 0 : _m.tooltipTitle,
+      icon: (_o = settings === null || settings === void 0 ? void 0 : settings.menu) === null || _o === void 0 ? void 0 : _o.icon
     }),
     layerActiveLayout: /*#__PURE__*/React.createElement(ActivateLayerConnect, {
       mapId: mapId,
@@ -11820,8 +12035,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 +12046,23 @@ 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, {
-    tooltipTitle: tooltipTitle,
-    icon: /*#__PURE__*/React__default.createElement(DragHandle$1, null),
+      isSorting = _ref$isSorting === void 0 ? false : _ref$isSorting,
+      _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? /*#__PURE__*/React__default.createElement(DragHandle$1, {
+    "data-testid": "dragHandleIcon"
+  }) : _ref$icon,
+      _ref$tooltipTitle = _ref.tooltipTitle,
+      tooltipTitle = _ref$tooltipTitle === void 0 ? TOOLTIP_TITLE : _ref$tooltipTitle;
+  var usedTooltipTitle = hideTooltip ? '' : tooltipTitle;
+  return /*#__PURE__*/React__default.createElement(CustomIconButton, {
+    tooltipTitle: usedTooltipTitle,
     "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,13 +12071,17 @@ var DragHandle = function DragHandle(_ref) {
       marginLeft: '3px',
       marginRight: '3px',
       marginTop: 'auto',
-      marginBottom: 'auto'
+      marginBottom: 'auto',
+      '&.MuiIconButton-root': {
+        color: 'geowebColors.greys.accessible'
+      }
     }
-  });
+  }, icon);
 };
 
 var LayerContainerRow = function LayerContainerRow(_ref) {
-  var mapId = _ref.mapId;
+  var mapId = _ref.mapId,
+      settings = _ref.settings;
   var dispatch = useDispatch();
 
   var _React$useState = React.useState(false),
@@ -11983,6 +12205,8 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
       width: '100%'
     }
   }, layerIds.map(function (layerId, index) {
+    var _a, _b;
+
     return /*#__PURE__*/React.createElement(LayerRowConnect, {
       mapId: mapId,
       layerId: layerId,
@@ -11992,8 +12216,11 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
         isDisabled: isDragDisabled,
         index: index,
         hideTooltip: isSorting || isDragDisabled,
-        isSorting: isSorting
-      })
+        isSorting: isSorting,
+        icon: (_a = settings === null || settings === void 0 ? void 0 : settings.dragHandle) === null || _a === void 0 ? void 0 : _a.icon,
+        tooltipTitle: (_b = settings === null || settings === void 0 ? void 0 : settings.dragHandle) === null || _b === void 0 ? void 0 : _b.tooltipTitle
+      }),
+      settings: settings
     });
   })));
 };
@@ -12018,7 +12245,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 +12271,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 +12289,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 +12362,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 +12399,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 +12438,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 +12464,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 +12483,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 +12623,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 +12965,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 +12987,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 +13041,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 +13062,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 +13112,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 +13142,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 +13258,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 +13351,17 @@ 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
+    mapId: mapId,
+    settings: settings === null || settings === void 0 ? void 0 : settings.content
   }), /*#__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 +13735,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 +13755,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 +13781,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 +14946,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 +15120,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 +15287,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 +15329,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 +15341,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 +15814,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 +16371,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 +16418,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 +17118,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 +17160,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 +21314,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 +21392,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 +21421,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 +21638,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 +24865,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 +24917,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 +26171,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 +26555,7 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
         syncGroupAddTarget({
           groupId: syncGroupsId,
           targetId: map.id,
-          linked: true,
-          origin: 'system'
+          linked: true
         });
       });
     });
@@ -26735,10 +26965,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 +27001,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 +27030,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 +27040,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,
@@ -26855,7 +27082,8 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
     if (isChecked) {
       syncGroupRemoveTarget({
         groupId: String(groupId),
-        targetId: String(sourceId)
+        targetId: String(sourceId),
+        origin: 'user'
       });
     } else {
       var groups = syncGroupViewState[groupCategory].groups; // Check all other groups and if checkmark is found -> uncheck it
@@ -26870,7 +27098,8 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
           if (group.id !== groupId && group.selected.includes(sourceId)) {
             syncGroupRemoveTarget({
               groupId: String(group.id),
-              targetId: String(sourceId)
+              targetId: String(sourceId),
+              origin: 'user'
             });
           }
         } // Add new checkmark
@@ -26883,7 +27112,8 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
 
       syncGroupAddTarget({
         groupId: String(groupId),
-        targetId: String(sourceId)
+        targetId: String(sourceId),
+        origin: 'user'
       });
     }
   };
@@ -26904,7 +27134,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 +27413,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 +27432,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 +27559,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 +27640,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;
 };
@@ -27556,4 +27791,4 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
  * */
 var mapActions = Object.assign(Object.assign(Object.assign({}, layerActions), mapActions$1), serviceActions);
 
-export { AppWrapperConnect, ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DockedLayerManagerConnect, HarmonieTempAndPrecipPreset, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LayerSelectConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, RouterWrapperConnect, SnackbarWrapperConnect, SyncGroupViewerConnect, index as SyncGroups, TimeSlider, BackwardForwardStepButtonConnect as TimeSliderBackwardForwardStepButtonConnect, TimeSliderButtonsConnect, TimeSliderConnect, OptionsMenuButtonConnect as TimeSliderOptionsMenuButtonConnect, PlayButtonConnect as TimeSliderPlayButtonConnect, ZoomControlConnect, ZoomControls, appActions, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, selectors$1 as genericSelectors, getDrawFunctionFromStore, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$8 as layerReducer, selectors$3 as layerSelectors, types$3 as layerTypes, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerDrawFunction, registerWMJSMap, registerWMLayer, routerActions, snackbarActions, store, genericActions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, timeSliderUtils, uiActions, uiModuleConfig, selectors$2 as uiSelectors, types as uiTypes, unRegisterWMJSLayer, unRegisterWMJSMap, useSetupDialog };
+export { AppWrapperConnect, ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DockedLayerManagerConnect, HarmonieTempAndPrecipPreset, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LayerSelectConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, RouterWrapperConnect, SnackbarWrapperConnect, SyncGroupViewerConnect, index as SyncGroups, TimeSlider, BackwardForwardStepButtonConnect as TimeSliderBackwardForwardStepButtonConnect, TimeSliderButtonsConnect, TimeSliderConnect, OptionsMenuButtonConnect as TimeSliderOptionsMenuButtonConnect, PlayButtonConnect as TimeSliderPlayButtonConnect, ZoomControlConnect, ZoomControls, appActions, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, selectors$1 as genericSelectors, getDrawFunctionFromStore, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$8 as layerReducer, selectors$4 as layerSelectors, types$3 as layerTypes, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerDrawFunction, registerWMJSMap, registerWMLayer, routerActions, snackbarActions, store, genericActions as syncGroupActions, selectors$2 as syncGroupsSelectors, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, timeSliderUtils, uiActions, uiModuleConfig, selectors$3 as uiSelectors, types as uiTypes, unRegisterWMJSLayer, unRegisterWMJSMap, useSetupDialog };