@opengeoweb/core 4.16.0 → 4.18.0

package/index.esm.js

@@ -3,11 +3,11 @@ import produce$1, { current, produce } from 'immer';
 import moment from 'moment';
 import * as React from 'react';
 import React__default, { Component, useRef, useState, useEffect, useCallback } from 'react';
-import _, { debounce, isEqual, escapeRegExp, groupBy, throttle, range } from 'lodash';
+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, EnableButton, ManagerDeleteButton, AlertBanner, ManagerButton, calculateDialogSizeAndPosition, useIsMounted, CustomToggleButton, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
-import { Pause, Play, CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Add, Copy, None, Both, DragHandle as DragHandle$1, Cached, Filter, Search, Clear, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Visibility, Delete, 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 { 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 { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, clearImageCache, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
 import { ReactSortable } from 'react-sortablejs';
@@ -588,9 +588,17 @@ var getWMJSTimeDimensionForLayerId = function getWMJSTimeDimensionForLayerId(lay
 
 var getPreviousTimeStepForLayerId = function getPreviousTimeStepForLayerId(layerId) {
   var wmjsTimeDim = getWMJSTimeDimensionForLayerId(layerId);
-  if (!wmjsTimeDim) return null;
+
+  if (!wmjsTimeDim) {
+    return null;
+  }
+
   var currentIndex = wmjsTimeDim.getIndexForValue(wmjsTimeDim.currentValue, false);
-  if (currentIndex < 0 || currentIndex - 1 < 0) return wmjsTimeDim.getClosestValue(wmjsTimeDim.currentValue, true);
+
+  if (currentIndex < 0 || currentIndex - 1 < 0) {
+    return wmjsTimeDim.getClosestValue(wmjsTimeDim.currentValue, true);
+  }
+
   return wmjsTimeDim.getValueForIndex(currentIndex - 1);
 };
 /**
@@ -600,9 +608,17 @@ var getPreviousTimeStepForLayerId = function getPreviousTimeStepForLayerId(layer
 
 var getNextTimeStepForLayerId = function getNextTimeStepForLayerId(layerId) {
   var wmjsTimeDim = getWMJSTimeDimensionForLayerId(layerId);
-  if (!wmjsTimeDim) return null;
+
+  if (!wmjsTimeDim) {
+    return null;
+  }
+
   var currentIndex = wmjsTimeDim.getIndexForValue(wmjsTimeDim.currentValue, false);
-  if (currentIndex < 0 || currentIndex + 1 >= wmjsTimeDim.size()) return wmjsTimeDim.getClosestValue(wmjsTimeDim.currentValue, true);
+
+  if (currentIndex < 0 || currentIndex + 1 >= wmjsTimeDim.size()) {
+    return wmjsTimeDim.getClosestValue(wmjsTimeDim.currentValue, true);
+  }
+
   return wmjsTimeDim.getValueForIndex(currentIndex + 1);
 };
 /**
@@ -612,7 +628,11 @@ var getNextTimeStepForLayerId = function getNextTimeStepForLayerId(layerId) {
 
 var getFirstTimeStepForLayerId = function getFirstTimeStepForLayerId(layerId) {
   var wmjsTimeDim = getWMJSTimeDimensionForLayerId(layerId);
-  if (!wmjsTimeDim) return null;
+
+  if (!wmjsTimeDim) {
+    return null;
+  }
+
   return wmjsTimeDim.getFirstValue();
 };
 /**
@@ -622,7 +642,11 @@ var getFirstTimeStepForLayerId = function getFirstTimeStepForLayerId(layerId) {
 
 var getLastTimeStepForLayerId = function getLastTimeStepForLayerId(layerId) {
   var wmjsTimeDim = getWMJSTimeDimensionForLayerId(layerId);
-  if (!wmjsTimeDim) return null;
+
+  if (!wmjsTimeDim) {
+    return null;
+  }
+
   return wmjsTimeDim.getLastValue();
 };
 
@@ -1123,8 +1147,8 @@ var createMap = function createMap(_ref) {
       featureLayers = _ref$featureLayers === void 0 ? [] : _ref$featureLayers,
       _ref$dimensions = _ref.dimensions,
       dimensions = _ref$dimensions === void 0 ? [] : _ref$dimensions,
-      _ref$activeLayerId = _ref.activeLayerId,
-      activeLayerId = _ref$activeLayerId === void 0 ? '' : _ref$activeLayerId,
+      autoUpdateLayerId = _ref.autoUpdateLayerId,
+      autoTimeStepLayerId = _ref.autoTimeStepLayerId,
       _ref$timeSliderScale = _ref.timeSliderScale,
       timeSliderScale = _ref$timeSliderScale === void 0 ? Scale.Hour : _ref$timeSliderScale,
       _ref$timeStep = _ref.timeStep,
@@ -1163,7 +1187,8 @@ var createMap = function createMap(_ref) {
     mapLayers: mapLayers,
     featureLayers: featureLayers,
     dimensions: dimensions,
-    activeLayerId: activeLayerId,
+    autoUpdateLayerId: autoUpdateLayerId,
+    autoTimeStepLayerId: autoTimeStepLayerId,
     timeSliderScale: timeSliderScale,
     timeStep: timeStep,
     animationDelay: animationDelay,
@@ -1210,7 +1235,10 @@ var checkValidLayersPayload = function checkValidLayersPayload(layers, mapId) {
 
 var getDraftMapById = function getDraftMapById(mapId, draft) {
   var map = draft.byId[mapId];
-  if (map) return map;
+
+  if (map) {
+    return map;
+  }
 
   if (!draft.allIds.includes(mapId)) {
     draft.byId[mapId] = createMap({
@@ -1235,7 +1263,10 @@ var produceDraftStateSetWebMapDimension = function produceDraftStateSetWebMapDim
   var map = getDraftMapById(mapId, draft);
 
   if (dimensionFromAction) {
-    if (!map.dimensions) map.dimensions = [];
+    if (!map.dimensions) {
+      map.dimensions = [];
+    }
+
     var dimensions = map.dimensions;
     var mapDim = dimensions.find(function (dim) {
       return dim.name === dimensionFromAction.name;
@@ -1260,6 +1291,10 @@ var produceDraftStateSetWebMapDimension = function produceDraftStateSetWebMapDim
  */
 
 var findMapIdFromLayerId = function findMapIdFromLayerId(draft, layerId) {
+  if (!draft || !layerId) {
+    return null;
+  }
+
   for (var i = 0; i < draft.allIds.length; i += 1) {
     var mapId = draft.allIds[i];
     var layerIds = draft.byId[mapId].mapLayers;
@@ -1391,7 +1426,10 @@ var utils = /*#__PURE__*/Object.freeze({
  */
 
 var produceLayerDimensionDraftState = function produceLayerDimensionDraftState(draft, layerId, dimensionValueToUpdate) {
-  if (!draft.byId[layerId].dimensions) draft.byId[layerId].dimensions = [];
+  if (!draft.byId[layerId].dimensions) {
+    draft.byId[layerId].dimensions = [];
+  }
+
   var existingLayerDimIndex = draft.byId[layerId].dimensions.findIndex(function (layerDim) {
     return layerDim.name === dimensionValueToUpdate.name;
   });
@@ -1414,13 +1452,24 @@ var produceLayerDimensionDraftState = function produceLayerDimensionDraftState(d
 };
 
 var isActionLayerSynced = function isActionLayerSynced(state, layerIdFromAction, dimension) {
-  if (dimension.synced !== undefined) return dimension.synced;
+  if (dimension.synced !== undefined) {
+    return dimension.synced;
+  }
+
   var actionLayer = state.byId[layerIdFromAction];
-  if (!actionLayer) return false;
+
+  if (!actionLayer) {
+    return false;
+  }
+
   var layerDimensionIndex = actionLayer.dimensions.findIndex(function (layerDim) {
     return layerDim.name === dimension.name;
   });
-  if (layerDimensionIndex < 0) return false;
+
+  if (layerDimensionIndex < 0) {
+    return false;
+  }
+
   return actionLayer.dimensions[layerDimensionIndex].synced === true;
 };
 var produceDimensionActionForMapLayer = function produceDimensionActionForMapLayer(layerDim, wmjsDimension, newDimension) {
@@ -1452,7 +1501,10 @@ var produceDimensionActionForMapLayer = function produceDimensionActionForMapLay
 var produceDraftStateForAllLayersForDimensionWithinMap = function produceDraftStateForAllLayersForDimensionWithinMap(draft, dimension, mapId, layerIdFromAction
 /* Layer ID or null if not known */
 ) {
-  if (!mapId) return;
+  if (!mapId) {
+    return;
+  }
+
   var actionLayerSynced = isActionLayerSynced(draft, layerIdFromAction, dimension);
 
   for (var li = 0; li < draft.allIds.length; li += 1) {
@@ -1689,7 +1741,11 @@ var slice$8 = createSlice({
           layerIdFromAction = _action$payload2.layerId,
           dimension = _action$payload2.dimension;
       var layerFromAction = draft.byId[layerIdFromAction];
-      if (!layerFromAction) return;
+
+      if (!layerFromAction) {
+        return;
+      }
+
       var mapId = layerFromAction.mapId;
       produceDraftStateForAllLayersForDimensionWithinMap(draft, dimension, mapId, layerIdFromAction);
     },
@@ -1757,7 +1813,10 @@ var slice$8 = createSlice({
     },
     baseLayerDelete: function baseLayerDelete(draft, action) {
       var layerId = action.payload.layerId;
-      if (draft.byId[layerId].layerType !== LayerType.baseLayer && draft.byId[layerId].layerType !== LayerType.overLayer) return;
+
+      if (draft.byId[layerId].layerType !== LayerType.baseLayer && draft.byId[layerId].layerType !== LayerType.overLayer) {
+        return;
+      }
 
       if (draft.byId[layerId]) {
         draft.allIds = draft.allIds.filter(function (id) {
@@ -1812,8 +1871,13 @@ var slice$8 = createSlice({
 
       var layerTypes = [];
       filtererdBaseLayers.forEach(function (layer) {
-        if (layer.layerType !== LayerType.baseLayer && layer.layerType !== LayerType.overLayer) return;
-        if (!layerTypes.includes(layer.layerType)) layerTypes.push(layer.layerType);
+        if (layer.layerType !== LayerType.baseLayer && layer.layerType !== LayerType.overLayer) {
+          return;
+        }
+
+        if (!layerTypes.includes(layer.layerType)) {
+          layerTypes.push(layer.layerType);
+        }
       });
       var state = current(draft); // remove current layers with same type as one of the passed layers
 
@@ -1836,7 +1900,10 @@ var slice$8 = createSlice({
     },
     addBaseLayer: function addBaseLayer(draft, action) {
       var layer = action.payload.layer;
-      if (layer.layerType !== LayerType.baseLayer && layer.layerType !== LayerType.overLayer) return;
+
+      if (layer.layerType !== LayerType.baseLayer && layer.layerType !== LayerType.overLayer) {
+        return;
+      }
 
       if (!draft.byId[layer.id]) {
         draft.byId[layer.id] = createLayer(Object.assign({
@@ -1857,7 +1924,10 @@ var slice$8 = createSlice({
     },
     addAvailableBaseLayer: function addAvailableBaseLayer(draft, action) {
       var layer = action.payload.layer;
-      if (layer.layerType !== LayerType.baseLayer && layer.layerType !== LayerType.overLayer || !layer.mapId) return;
+
+      if (layer.layerType !== LayerType.baseLayer && layer.layerType !== LayerType.overLayer || !layer.mapId) {
+        return;
+      }
 
       if (!draft.availableBaseLayers.byId[layer.id]) {
         draft.availableBaseLayers.byId[layer.id] = createLayer(Object.assign({
@@ -1871,7 +1941,10 @@ var slice$8 = createSlice({
       var layers = action.payload.layers; // add new available baselayers
 
       layers.forEach(function (layer) {
-        if (layer.layerType !== LayerType.baseLayer || draft.availableBaseLayers.byId[layer.id] || !layer.mapId) return;
+        if (layer.layerType !== LayerType.baseLayer || draft.availableBaseLayers.byId[layer.id] || !layer.mapId) {
+          return;
+        }
+
         draft.availableBaseLayers.byId[layer.id] = createLayer(Object.assign({
           id: layer.id,
           layerType: layer.layerType
@@ -1895,7 +1968,10 @@ var slice$8 = createSlice({
       }); // add new available baselayers
 
       layers.forEach(function (layer) {
-        if (layer.layerType !== LayerType.baseLayer || !layer.mapId) return;
+        if (layer.layerType !== LayerType.baseLayer || !layer.mapId) {
+          return;
+        }
+
         draft.availableBaseLayers.byId[layer.id] = createLayer(Object.assign({}, layer));
         draft.availableBaseLayers.allIds.push(layer.id);
       });
@@ -2014,7 +2090,10 @@ var slice$7 = createSlice({
     serviceSetLayers: function serviceSetLayers(draft, action) {
       var id = action.payload.id;
       draft.byId[id] = Object.assign({}, action.payload);
-      if (!draft.allIds.includes(id)) draft.allIds.push(id);
+
+      if (!draft.allIds.includes(id)) {
+        draft.allIds.push(id);
+      }
     },
     mapStoreRemoveService: function mapStoreRemoveService(draft, action) {
       var foundServiceIndex = draft.allIds.findIndex(function (id) {
@@ -2028,12 +2107,19 @@ var slice$7 = createSlice({
         });
         delete draft.byId[serviceId];
       }
-    }
+    },
+    fetchInitialServices: function fetchInitialServices( // eslint-disable-next-line no-unused-vars
+    draft, // eslint-disable-next-line no-unused-vars
+    action) {}
   },
   extraReducers: function extraReducers(builder) {
     return builder.addCase(layerActions.onUpdateLayerInformation, function (draft, action) {
       var serviceLayers = action.payload.serviceLayers;
-      if (serviceLayers === null) return draft;
+
+      if (serviceLayers === null) {
+        return draft;
+      }
+
       var mapAction = serviceActions.serviceSetLayers(serviceLayers);
       var newState = reducer$7(draft, mapAction);
       return newState;
@@ -2165,7 +2251,10 @@ var getLayerFromService = createSelector(function (store, serviceUrl) {
 }, function (store, serviceUrl, layerName) {
   return layerName;
 }, function (layers, serviceUrl, layerName) {
-  if (!layers) return null;
+  if (!layers) {
+    return null;
+  }
+
   var index = layers.findIndex(function (serviceLayer) {
     return serviceLayer.name === layerName;
   });
@@ -2209,7 +2298,8 @@ var createUIDialogElement = function createUIDialogElement(_ref) {
     type: type,
     source: source,
     isLoading: false,
-    error: undefined
+    error: undefined,
+    focused: false
   };
 };
 var initialState$6 = {
@@ -2284,6 +2374,10 @@ var slice$6 = createSlice({
       if (setOpen) {
         draft.order = moveToTop(draft.order, type);
       }
+
+      if (!setOpen) {
+        draft.dialogs[type].focused = false;
+      }
     },
     orderDialog: function orderDialog(draft, action) {
       var type = action.payload.type;
@@ -2304,6 +2398,17 @@ var slice$6 = createSlice({
           error = _action$payload4.error,
           type = _action$payload4.type;
       draft.dialogs[type].error = error;
+    },
+    setDialogFocused: function setDialogFocused(draft, action) {
+      var _action$payload5 = action.payload,
+          focused = _action$payload5.focused,
+          type = _action$payload5.type;
+
+      if (!draft.dialogs[type]) {
+        return;
+      }
+
+      draft.dialogs[type].focused = focused;
     }
   }
 });
@@ -2344,7 +2449,10 @@ var checkIfMapLayerIdIsAlreadyTaken = function checkIfMapLayerIdIsAlreadyTaken(s
  */
 
 var createLayersWithIds = function createLayersWithIds(state, layers) {
-  if (!layers) return layers;
+  if (!layers) {
+    return layers;
+  }
+
   return produce(layers, function (draft) {
     for (var j = 0; j < draft.length; j += 1) {
       var layer = draft[j];
@@ -2397,7 +2505,10 @@ var slice$5 = createSlice({
 
       var srs = action.payload.srs || null;
       draft.byId[mapId].bbox = bbox;
-      if (srs) draft.byId[mapId].srs = srs;
+
+      if (srs) {
+        draft.byId[mapId].srs = srs;
+      }
     },
     mapUpdateAllMapDimensions: function mapUpdateAllMapDimensions(draft, action) {
       var _action$payload2 = action.payload,
@@ -2408,7 +2519,6 @@ var slice$5 = createSlice({
         return;
       }
 
-      draft.byId[mapId].dimensions.length = 0;
       dimensions.forEach(function (dimension) {
         return produceDraftStateSetWebMapDimension(draft, mapId, dimension, true);
       });
@@ -2513,16 +2623,28 @@ var slice$5 = createSlice({
 
       draft.byId[mapId].mapLayers = moveArrayElements(draft.byId[mapId].mapLayers, oldIndex, newIndex);
     },
-    setActiveLayerId: function setActiveLayerId(draft, action) {
+    setAutoLayerId: function setAutoLayerId(draft, action) {
       var _action$payload9 = action.payload,
           mapId = _action$payload9.mapId,
-          layerId = _action$payload9.layerId;
+          layerId = _action$payload9.layerId,
+          autoTimeStepLayerId = _action$payload9.autoTimeStepLayerId,
+          autoUpdateLayerId = _action$payload9.autoUpdateLayerId;
+      var map = draft.byId[mapId];
 
-      if (!draft.byId[mapId]) {
+      if (!map) {
         return;
       }
 
-      draft.byId[mapId].activeLayerId = layerId;
+      if (autoUpdateLayerId || autoTimeStepLayerId) {
+        map.autoUpdateLayerId = autoUpdateLayerId;
+        map.autoTimeStepLayerId = autoTimeStepLayerId;
+      } else if (layerId) {
+        map.autoUpdateLayerId = layerId;
+        map.autoTimeStepLayerId = layerId;
+      } else {
+        map.autoTimeStepLayerId = undefined;
+        map.autoUpdateLayerId = undefined;
+      }
     },
     setTimeSliderCenterTime: function setTimeSliderCenterTime(draft, action) {
       var _action$payload10 = action.payload,
@@ -2698,7 +2820,8 @@ var slice$5 = createSlice({
       }
 
       if (!draft.byId[mapId].mapLayers.length) {
-        draft.byId[mapId].activeLayerId = layerId;
+        draft.byId[mapId].autoUpdateLayerId = layerId;
+        draft.byId[mapId].autoTimeStepLayerId = layerId;
       }
 
       draft.byId[mapId].mapLayers.unshift(layerId);
@@ -2738,19 +2861,36 @@ var slice$5 = createSlice({
 
       if (draft.byId[mapId]) {
         draft.byId[mapId].mapLayers = layerIds;
-        draft.byId[mapId].activeLayerId = activeLayerId;
+        draft.byId[mapId].autoUpdateLayerId = activeLayerId;
+        draft.byId[mapId].autoTimeStepLayerId = activeLayerId;
         var webmapInstance = getWMJSMapById(mapId);
 
         if (webmapInstance) {
           var mapDims = webmapInstance.getDimensionList();
 
-          if (mapDims) {
-            draft.byId[mapId].dimensions = mapDims.map(function (dim) {
-              return {
-                name: dim.name,
-                currentValue: dim.currentValue,
-                units: dim.units
-              };
+          if (!draft.byId[mapId].dimensions) {
+            draft.byId[mapId].dimensions = [];
+          }
+
+          var draftDims = draft.byId[mapId].dimensions;
+
+          if (mapDims && draftDims) {
+            mapDims.forEach(function (dim) {
+              var draftMapDimIndex = draftDims.findIndex(function (draftDim) {
+                return draftDim.name === dim.name;
+              });
+
+              if (draftMapDimIndex !== -1) {
+                draftDims[draftMapDimIndex].name = dim.name;
+                draftDims[draftMapDimIndex].units = dim.units;
+                draftDims[draftMapDimIndex].currentValue = dim.currentValue;
+              } else {
+                draftDims.push({
+                  name: dim.name,
+                  units: dim.units,
+                  currentValue: dim.currentValue
+                });
+              }
             });
           }
         }
@@ -2781,31 +2921,43 @@ var slice$5 = createSlice({
       });
 
       if (draft.byId[mapId]) {
-        if (baseLayerIds.length !== 0) draft.byId[mapId].baseLayers = baseLayerIds;
-        if (overLayerIds.length !== 0) draft.byId[mapId].overLayers = overLayerIds;
+        if (baseLayerIds.length !== 0) {
+          draft.byId[mapId].baseLayers = baseLayerIds;
+        }
+
+        if (overLayerIds.length !== 0) {
+          draft.byId[mapId].overLayers = overLayerIds;
+        }
       }
     }).addCase(layerDelete$1, function (draft, action) {
       var _action$payload27 = action.payload,
           mapId = _action$payload27.mapId,
           layerId = _action$payload27.layerId;
+      var map = draft.byId[mapId];
 
-      if (!draft.byId[mapId]) {
+      if (!map) {
         return;
       }
 
-      draft.byId[mapId].mapLayers = draft.byId[mapId].mapLayers.filter(function (id) {
+      map.mapLayers = map.mapLayers.filter(function (id) {
         return id !== layerId;
-      }); // if activeLayer is deleted, change activeLayerId
+      }); // if auto layer is deleted, change auto layer ids
+
+      if (!map.mapLayers.length) {
+        map.autoUpdateLayerId = undefined;
+        map.autoTimeStepLayerId = undefined;
+        return;
+      }
 
-      if (draft.byId[mapId].activeLayerId === layerId && draft.byId[mapId].mapLayers.length) {
-        var _draft$byId$mapId$map = _slicedToArray(draft.byId[mapId].mapLayers, 1),
-            activeLayerId = _draft$byId$mapId$map[0];
+      var _map$mapLayers = _slicedToArray(map.mapLayers, 1),
+          activeLayerId = _map$mapLayers[0];
 
-        draft.byId[mapId].activeLayerId = activeLayerId;
+      if (map.autoUpdateLayerId === layerId) {
+        map.autoUpdateLayerId = activeLayerId;
       }
 
-      if (!draft.byId[mapId].mapLayers.length) {
-        draft.byId[mapId].activeLayerId = '';
+      if (map.autoTimeStepLayerId === layerId) {
+        map.autoTimeStepLayerId = activeLayerId;
       }
     }).addCase(baseLayerDelete, function (draft, action) {
       var _action$payload28 = action.payload,
@@ -2877,7 +3029,9 @@ var slice$5 = createSlice({
             draft.byId[targetId].bbox = bbox;
           }
 
-          if (srs) draft.byId[targetId].srs = srs;
+          if (srs) {
+            draft.byId[targetId].srs = srs;
+          }
         }
       });
     }).addCase(setLayerActionSync, function (draft, action) {
@@ -2901,7 +3055,11 @@ var slice$5 = createSlice({
       }, draft);
     }).addCase(onUpdateLayerInformation, function (draft, action) {
       var mapDimensions = action.payload.mapDimensions;
-      if (mapDimensions === null) return draft;
+
+      if (mapDimensions === null) {
+        return draft;
+      }
+
       var mapAction = mapActions$1.mapUpdateAllMapDimensions(mapDimensions);
       return reducer$5(draft, mapAction);
     }).addCase(mapChangeDimension, function (draft, action) {
@@ -2965,7 +3123,7 @@ var reducer$5 = slice$5.reducer;
  * */
 
 var layerStore = function layerStore(store) {
-  return store && store.layers ? store.layers : null;
+  return store === null || store === void 0 ? void 0 : store.layers;
 };
 /**
  * Gets a layer from the layers part of the store by its Id
@@ -2993,7 +3151,9 @@ var getLayerById = function getLayerById(store, layerId) {
  */
 
 var getLayersById = createSelector(layerStore, function (store) {
-  return store ? store.byId : null;
+  var _a;
+
+  return (_a = store === null || store === void 0 ? void 0 : store.byId) !== null && _a !== void 0 ? _a : null;
 }, selectorMemoizationOptions);
 /**
  * Retrieves all layerIds
@@ -3264,7 +3424,7 @@ var getDimensionLayerIds = createSelector(getLayersIds, getLayersById, function
   }, []);
 }, selectorMemoizationOptions);
 
-var selectors$2 = /*#__PURE__*/Object.freeze({
+var selectors$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   getLayerById: getLayerById,
   getLayersById: getLayersById,
@@ -3302,8 +3462,8 @@ var selectors$2 = /*#__PURE__*/Object.freeze({
  * 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 getUiStore = function getUiStore(store) {
   if (store && store.ui) {
@@ -3428,8 +3588,11 @@ var getDialogIsLoading = createSelector(getDialogDetailsByType, function (detail
 var getDialogError = createSelector(getDialogDetailsByType, function (details) {
   return details && details.error || '';
 });
+var getDialogFocused = createSelector(getDialogDetailsByType, function (details) {
+  return details && details.focused || false;
+});
 
-var selectors$1 = /*#__PURE__*/Object.freeze({
+var selectors$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   getUiStore: getUiStore,
   getDialogDetailsByType: getDialogDetailsByType,
@@ -3440,7 +3603,8 @@ var selectors$1 = /*#__PURE__*/Object.freeze({
   getDialogSource: getDialogSource,
   getActiveWindowId: getActiveWindowId,
   getDialogIsLoading: getDialogIsLoading,
-  getDialogError: getDialogError
+  getDialogError: getDialogError,
+  getDialogFocused: getDialogFocused
 });
 
 /* *
@@ -3503,8 +3667,11 @@ var removeInPlace = function removeInPlace(inDraftArray, condition) {
   var j = 0;
   inDraftArray.forEach(function (e, i) {
     if (!condition(e)) {
-      // eslint-disable-next-line no-param-reassign
-      if (i !== j) inDraftArray[j] = e;
+      if (i !== j) {
+        // eslint-disable-next-line no-param-reassign
+        inDraftArray[j] = e;
+      }
+
       j += 1;
     }
   }); // eslint-disable-next-line no-param-reassign
@@ -3641,8 +3808,15 @@ var slice$4 = createSlice({
       var _action$payload3 = action.payload,
           groupId = _action$payload3.groupId,
           targetId = _action$payload3.targetId;
-      if (!draft.groups.byId[groupId]) return;
-      if (!draft.groups.byId[groupId].targets.allIds.includes(targetId)) return;
+
+      if (!draft.groups.byId[groupId]) {
+        return;
+      }
+
+      if (!draft.groups.byId[groupId].targets.allIds.includes(targetId)) {
+        return;
+      }
+
       delete draft.groups.byId[groupId].targets.byId[targetId];
       removeInPlace(draft.groups.byId[groupId].targets.allIds, function (_id) {
         return _id === targetId;
@@ -3882,10 +4056,16 @@ var getSyncSourceBySourceId = function getSyncSourceBySourceId(state, id) {
   return null;
 };
 
-createSelector(getSyncSourceBySourceId, function (store) {
+var getTime = createSelector(getSyncSourceBySourceId, function (store) {
   return store && store.payloadByType && store.payloadByType[SYNCGROUPS_TYPE_SETTIME] ? store.payloadByType[SYNCGROUPS_TYPE_SETTIME].value : null;
 });
 
+var selectors$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  getSynchronizationGroupStore: getSynchronizationGroupStore,
+  getTime: getTime
+});
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3917,11 +4097,9 @@ var genericActions = Object.assign(Object.assign({}, actions), {
  */
 
 var getMapById = function getMapById(store, mapId) {
-  if (store && store.webmap && store.webmap.byId[mapId]) {
-    return store.webmap.byId[mapId];
-  }
+  var _a;
 
-  return null;
+  return (_a = store === null || store === void 0 ? void 0 : store.webmap) === null || _a === void 0 ? void 0 : _a.byId[mapId];
 };
 /**
  * Gets all mapIds
@@ -3988,8 +4166,10 @@ var getIsMapPresent = createSelector(function (store, mapId) {
  * @returns {array} returnType: array -  array containing all layerIds
  */
 
-var getLayerIds = createSelector(getMapById, function (store) {
-  return store && store.mapLayers ? store.mapLayers : [];
+var getLayerIds = createSelector(getMapById, function (map) {
+  var _a;
+
+  return (_a = map === null || map === void 0 ? void 0 : map.mapLayers) !== null && _a !== void 0 ? _a : [];
 }, selectorMemoizationOptions);
 /**
  * Gets all layer states for a map
@@ -4000,10 +4180,12 @@ var getLayerIds = createSelector(getMapById, function (store) {
  * @returns {array} returnType: array -  array containing all layer states for the map
  */
 
-var getMapLayers = createSelector(getLayerIds, getLayersById, function (layerIds, layers) {
-  return layerIds.map(function (layerId) {
-    return layers[layerId];
+var getMapLayers = createSelector(getLayerIds, getLayersById, function (layerIdsInMap, allLayers) {
+  var layersWithUndefined = layerIdsInMap.map(function (layerId) {
+    return allLayers === null || allLayers === void 0 ? void 0 : allLayers[layerId];
   });
+  var layersWithoutUndefined = compact(layersWithUndefined);
+  return layersWithoutUndefined;
 }, selectorMemoizationOptions);
 /**
  * Gets an array of baselayers ids for a map
@@ -4211,7 +4393,33 @@ var isEndTimeOverriding = createSelector(getMapById, function (store) {
  */
 
 var getActiveLayerId = createSelector(getMapById, function (store) {
-  return store ? store.activeLayerId : '';
+  if ((store === null || store === void 0 ? void 0 : store.autoUpdateLayerId) && store.autoUpdateLayerId === store.autoTimeStepLayerId) {
+    return store.autoUpdateLayerId;
+  }
+
+  return undefined;
+});
+/**
+ * Gets autoUpdateLayerId for map
+ *
+ * example: autoUpdateLayerId = getAutoUpdateLayerId(store, 'mapid_1')
+ * @param {object} store store: object - store object
+ * @param {string} mapId mapId: string - Id of the map
+ */
+
+var getAutoUpdateLayerId = createSelector(getMapById, function (store) {
+  return store === null || store === void 0 ? void 0 : store.autoUpdateLayerId;
+});
+/**
+ * Gets autoUpdateLayerId for map
+ *
+ * example: autoUpdateLayerId = getAutoUpdateLayerId(store, 'mapid_1')
+ * @param {object} store store: object - store object
+ * @param {string} mapId mapId: string - Id of the map
+ */
+
+var getAutoTimeStepLayerId = createSelector(getMapById, function (store) {
+  return store === null || store === void 0 ? void 0 : store.autoTimeStepLayerId;
 });
 /**
  * Gets scale of a time slider of a map
@@ -4375,8 +4583,8 @@ var getIsLayerActiveLayer = createSelector(getActiveLayerId, function (_store, _
  * @returns {string} returnType: string - the mapId, or null if not found
  */
 
-var getMapIdFromLayerId$1 = createSelector(function (store) {
-  return store && store.webmap ? store.webmap : null;
+var getMapIdFromLayerId = createSelector(function (store) {
+  return store === null || store === void 0 ? void 0 : store.webmap;
 }, function (_store, layerId) {
   return layerId;
 }, findMapIdFromLayerId, selectorMemoizationOptions);
@@ -4413,7 +4621,7 @@ var getLayerIdByLayerName = createSelector(getMapLayers, function (_store, _mapI
  * @returns {number} returnType: index number or -1 if not found
  */
 
-var getLayerIndexByLayerId$1 = createSelector(getMapLayers, function (_store, _mapId, layerId) {
+var getLayerIndexByLayerId = createSelector(getMapLayers, function (_store, _mapId, layerId) {
   return layerId;
 }, function (layers, layerId) {
   return layers.findIndex(function (layer) {
@@ -4430,7 +4638,7 @@ var getLayerIndexByLayerId$1 = createSelector(getMapLayers, function (_store, _m
  * @returns {object} returnType: layer, or null if not found
  */
 
-var getLayerByLayerIndex$1 = createSelector(getMapLayers, function (_store, _mapId, layerIndex) {
+var getLayerByLayerIndex = createSelector(getMapLayers, function (_store, _mapId, layerIndex) {
   return layerIndex;
 }, function (layers, layerIndex) {
   if (layerIndex >= 0 && layerIndex < layers.length) {
@@ -4519,7 +4727,7 @@ var getLegendId = createSelector(getMapById, function (store) {
  * @returns {MapPreset} returnType: MapPreset
  */
 
-var getMapPreset = createSelector(getMapLayers, getMapBaseLayers, getMapOverLayers, getBbox, getSrs, getActiveLayerId, isAnimating, isAutoUpdating, isTimeSliderVisible, getDisplayMapPin, isZoomControlsVisible, getMapTimeStep, getMapAnimationDelay, isTimestepAuto, getLegendId, getUiStore, function (mapLayers, baseLayers, overLayers, bbox, srs, activeLayerId, isAnimating, isAutoUpdating, isTimeSliderVisible, displayMapPin, isZoomControlsVisible, mapTimeStep, mapAnimationDelay, isTimestepAuto, legendId, uiStore) {
+var getMapPreset = createSelector(getMapLayers, getMapBaseLayers, getMapOverLayers, getBbox, getSrs, getActiveLayerId, getAutoTimeStepLayerId, getAutoUpdateLayerId, isAnimating, isAutoUpdating, isTimeSliderVisible, getDisplayMapPin, isZoomControlsVisible, getMapTimeStep, getMapAnimationDelay, isTimestepAuto, getLegendId, getUiStore, function (mapLayers, baseLayers, overLayers, bbox, srs, activeLayerId, autoUpdateLayerId, autoTimeStepLayerId, isAnimating, isAutoUpdating, isTimeSliderVisible, displayMapPin, isZoomControlsVisible, mapTimeStep, mapAnimationDelay, isTimestepAuto, legendId, uiStore) {
   var _a;
 
   var allLayers = [].concat(_toConsumableArray(baseLayers), _toConsumableArray(overLayers), _toConsumableArray(mapLayers)).map(function (_a) {
@@ -4546,6 +4754,8 @@ var getMapPreset = createSelector(getMapLayers, getMapBaseLayers, getMapOverLaye
   return Object.assign({
     layers: allLayers,
     activeLayerId: activeLayerId,
+    autoTimeStepLayerId: autoTimeStepLayerId,
+    autoUpdateLayerId: autoUpdateLayerId,
     proj: {
       bbox: bbox,
       srs: srs
@@ -4633,6 +4843,8 @@ var selectors = /*#__PURE__*/Object.freeze({
   isAutoUpdating: isAutoUpdating,
   isEndTimeOverriding: isEndTimeOverriding,
   getActiveLayerId: getActiveLayerId,
+  getAutoUpdateLayerId: getAutoUpdateLayerId,
+  getAutoTimeStepLayerId: getAutoTimeStepLayerId,
   getMapTimeSliderScale: getMapTimeSliderScale,
   getMapTimeStep: getMapTimeStep,
   getMapTimeStepWithoutDefault: getMapTimeStepWithoutDefault,
@@ -4646,10 +4858,10 @@ var selectors = /*#__PURE__*/Object.freeze({
   isZoomControlsVisible: isZoomControlsVisible,
   isTimeSliderVisible: isTimeSliderVisible,
   getIsLayerActiveLayer: getIsLayerActiveLayer,
-  getMapIdFromLayerId: getMapIdFromLayerId$1,
+  getMapIdFromLayerId: getMapIdFromLayerId,
   getLayerIdByLayerName: getLayerIdByLayerName,
-  getLayerIndexByLayerId: getLayerIndexByLayerId$1,
-  getLayerByLayerIndex: getLayerByLayerIndex$1,
+  getLayerIndexByLayerId: getLayerIndexByLayerId,
+  getLayerByLayerIndex: getLayerByLayerIndex,
   getAllUniqueDimensions: getAllUniqueDimensions,
   getPinLocation: getPinLocation,
   getDisableMapPin: getDisableMapPin,
@@ -4793,62 +5005,6 @@ var slice$3 = createSlice({
       draft.servicePopup.variant = variant;
       draft.servicePopup.serviceId = action.payload.serviceId ? action.payload.serviceId : '';
     },
-    addFiltersAndActiveServices: function addFiltersAndActiveServices(draft, action) {
-      var _a, _b;
-
-      var _action$payload2 = action.payload,
-          serviceId = _action$payload2.serviceId,
-          serviceName = _action$payload2.serviceName,
-          serviceUrl = _action$payload2.serviceUrl,
-          _abstract = _action$payload2["abstract"],
-          keywords = _action$payload2.keywords,
-          scope = _action$payload2.scope,
-          groups = _action$payload2.groups,
-          isLoading = _action$payload2.isLoading;
-
-      if (isLoading) {
-        // If service is still loading, add without filters
-        draft.filters.activeServices.entities[serviceId] = {
-          serviceId: serviceId,
-          enabled: draft.allServicesEnabled,
-          filterIds: [],
-          scope: scope,
-          serviceName: serviceName,
-          serviceUrl: serviceUrl,
-          "abstract": _abstract,
-          isLoading: isLoading
-        };
-      }
-
-      if (!isLoading) {
-        // If service is done loading, add with filters
-        if (!((_b = (_a = draft.filters.activeServices.entities[serviceId]) === null || _a === void 0 ? void 0 : _a.filterIds) === null || _b === void 0 ? void 0 : _b.length)) {
-          // If the service has no filters yet, add them
-          produceFilters(groups, FilterType.Group, draft, layerSelectFilterAdapter);
-          produceFilters(keywords, FilterType.Keyword, draft, layerSelectFilterAdapter);
-        }
-
-        var filterIds = groups.map(function (group) {
-          return getFilterId(FilterType.Group, group);
-        }).concat(keywords.map(function (keyword) {
-          return getFilterId(FilterType.Keyword, keyword);
-        }));
-        draft.filters.activeServices.entities[serviceId] = {
-          serviceId: serviceId,
-          enabled: draft.allServicesEnabled,
-          filterIds: filterIds,
-          scope: scope,
-          serviceName: serviceName,
-          serviceUrl: serviceUrl,
-          "abstract": _abstract,
-          isLoading: isLoading
-        };
-      }
-
-      if (!draft.filters.activeServices.ids.includes(serviceId)) {
-        draft.filters.activeServices.ids.push(serviceId);
-      }
-    },
     layerSelectRemoveService: function layerSelectRemoveService(draft, action) {
       var serviceId = action.payload.serviceId; // 1. Find a service that is to be removed
 
@@ -4873,9 +5029,9 @@ var slice$3 = createSlice({
       layerSelectActiveServicesAdapter.removeOne(draft.filters.activeServices, serviceId);
     },
     enableActiveService: function enableActiveService(draft, action) {
-      var _action$payload3 = action.payload,
-          serviceId = _action$payload3.serviceId,
-          keywords = _action$payload3.filters;
+      var _action$payload2 = action.payload,
+          serviceId = _action$payload2.serviceId,
+          keywords = _action$payload2.filters;
       draft.filters.activeServices.entities[serviceId].enabled = true;
 
       var _iterator = _createForOfIteratorHelper(keywords),
@@ -4893,9 +5049,9 @@ var slice$3 = createSlice({
       }
     },
     disableActiveService: function disableActiveService(draft, action) {
-      var _action$payload4 = action.payload,
-          serviceId = _action$payload4.serviceId,
-          keywords = _action$payload4.filters;
+      var _action$payload3 = action.payload,
+          serviceId = _action$payload3.serviceId,
+          keywords = _action$payload3.filters;
       draft.filters.activeServices.entities[serviceId].enabled = false;
 
       var _iterator2 = _createForOfIteratorHelper(keywords),
@@ -4929,6 +5085,92 @@ var slice$3 = createSlice({
       var layer = action.payload.layer;
       draft.activeLayerInfo = layer;
     }
+  },
+  extraReducers: function extraReducers(builder) {
+    builder.addCase(serviceActions.serviceSetLayers, function (draft, action) {
+      var _a, _b;
+
+      var _action$payload4 = action.payload,
+          serviceId = _action$payload4.id,
+          serviceUrl = _action$payload4.serviceUrl,
+          serviceName = _action$payload4.name,
+          scope = _action$payload4.scope,
+          _abstract = _action$payload4["abstract"],
+          layers = _action$payload4.layers,
+          isUpdating = _action$payload4.isUpdating;
+
+      if (isUpdating) {
+        return;
+      }
+
+      var keywords = layers.reduce(function (keywords, layer) {
+        var _a;
+
+        if (layer.leaf) {
+          return keywords.concat((_a = layer.keywords) !== null && _a !== void 0 ? _a : []);
+        }
+
+        return keywords;
+      }, []);
+      var groups = layers.reduce(function (groups, layer) {
+        var _a;
+
+        if (layer.leaf) {
+          return groups.concat((_a = layer.path) !== null && _a !== void 0 ? _a : []);
+        }
+
+        return groups;
+      }, []);
+
+      if (!((_b = (_a = draft.filters.activeServices.entities[serviceId]) === null || _a === void 0 ? void 0 : _a.filterIds) === null || _b === void 0 ? void 0 : _b.length)) {
+        // If the service has no filters yet, add them
+        produceFilters(groups, FilterType.Group, draft, layerSelectFilterAdapter);
+        produceFilters(keywords, FilterType.Keyword, draft, layerSelectFilterAdapter);
+      }
+
+      var filterIds = groups.map(function (group) {
+        return getFilterId(FilterType.Group, group);
+      }).concat(keywords.map(function (keyword) {
+        return getFilterId(FilterType.Keyword, keyword);
+      }));
+      draft.filters.activeServices.entities[serviceId] = {
+        serviceId: serviceId,
+        enabled: draft.allServicesEnabled,
+        filterIds: filterIds,
+        scope: scope,
+        serviceName: serviceName,
+        serviceUrl: serviceUrl,
+        "abstract": _abstract,
+        isLoading: false
+      };
+
+      if (!draft.filters.activeServices.ids.includes(serviceId)) {
+        draft.filters.activeServices.ids.push(serviceId);
+      }
+    }).addCase(serviceActions.fetchInitialServices, function (draft, action) {
+      var services = action.payload.services;
+      services.forEach(function (service) {
+        var serviceId = service.id,
+            serviceName = service.name,
+            serviceUrl = service.serviceUrl,
+            _abstract2 = service["abstract"],
+            scope = service.scope;
+        draft.filters.activeServices.entities[serviceId] = {
+          serviceId: serviceId,
+          enabled: draft.allServicesEnabled,
+          filterIds: [],
+          scope: scope,
+          serviceName: serviceName,
+          serviceUrl: serviceUrl,
+          "abstract": _abstract2,
+          isLoading: true
+        };
+
+        if (!draft.filters.activeServices.ids.includes(serviceId)) {
+          draft.filters.activeServices.ids.push(serviceId);
+        }
+      });
+    });
   }
 });
 var reducer$3 = slice$3.reducer;
@@ -4952,7 +5194,10 @@ var layerSelectActions = slice$3.actions;
  * */
 var filterLayersFromService = function filterLayersFromService(serviceId, services, filterIds, allFiltersActive, searchString) {
   var mapStoreService = services[serviceId];
-  if (!mapStoreService) return [];
+
+  if (!mapStoreService) {
+    return [];
+  }
 
   if (searchString === '' && allFiltersActive) {
     return mapStoreService.layers.filter(function (layer) {
@@ -5466,9 +5711,6 @@ var getSyncedMapIdsForTimeslider = createSelector(syncGroupStore, function (stor
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var getLayerByLayerIndex = getLayerByLayerIndex$1,
-    getMapIdFromLayerId = getMapIdFromLayerId$1,
-    getLayerIndexByLayerId = getLayerIndexByLayerId$1;
 /**
  * Tries to find the layerId's in the other map based on the payload of the action. It works for all layer actions.
  * @param state
@@ -5479,9 +5721,12 @@ var getLayerByLayerIndex = getLayerByLayerIndex$1,
  */
 
 var getTargetLayerIdFromPayload = function getTargetLayerIdFromPayload(state, mapId, targetMapId, payload) {
-  if (!payload) return null;
+  if (!payload) {
+    return null;
+  }
   /* Try to find the layer for the DeleteLayerPayload, it uses layerIndex to reference the layer */
 
+
   if ('layerIndex' in payload) {
     var targetLayer = getLayerByLayerIndex(state, targetMapId, payload.layerIndex);
     return !targetLayer ? null : targetLayer.id;
@@ -5667,15 +5912,15 @@ var getMapBaseLayerActionsTargets = function getMapBaseLayerActionsTargets(state
   });
 };
 
-var _marked$6 = /*#__PURE__*/regeneratorRuntime.mark(setTimeSaga),
-    _marked2$6 = /*#__PURE__*/regeneratorRuntime.mark(setBBoxSaga),
-    _marked3$4 = /*#__PURE__*/regeneratorRuntime.mark(layerActionsSaga),
-    _marked4$3 = /*#__PURE__*/regeneratorRuntime.mark(addLayerActionsSaga),
+var _marked$7 = /*#__PURE__*/regeneratorRuntime.mark(setTimeSaga),
+    _marked2$7 = /*#__PURE__*/regeneratorRuntime.mark(setBBoxSaga),
+    _marked3$5 = /*#__PURE__*/regeneratorRuntime.mark(layerActionsSaga),
+    _marked4$2 = /*#__PURE__*/regeneratorRuntime.mark(addLayerActionsSaga),
     _marked5$2 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerActionsSaga),
     _marked6$1 = /*#__PURE__*/regeneratorRuntime.mark(moveLayerActionsSaga),
-    _marked7$1 = /*#__PURE__*/regeneratorRuntime.mark(setActiveLayerIdActionsSaga),
+    _marked7$1 = /*#__PURE__*/regeneratorRuntime.mark(setAutoLayerIdActionsSaga),
     _marked8$1 = /*#__PURE__*/regeneratorRuntime.mark(mapBaseLayerActionsSaga),
-    _marked9$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$6);
+    _marked9$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$7);
 var setBaseLayers = layerActions.setBaseLayers,
     addLayer = layerActions.addLayer,
     layerChangeDimension = layerActions.layerChangeDimension,
@@ -5723,7 +5968,7 @@ function setTimeSaga(_ref) {
           return _context.stop();
       }
     }
-  }, _marked$6);
+  }, _marked$7);
 }
 function setBBoxSaga(_ref2) {
   var payload, targets, groups;
@@ -5750,7 +5995,7 @@ function setBBoxSaga(_ref2) {
           return _context2.stop();
       }
     }
-  }, _marked2$6);
+  }, _marked2$7);
 }
 function layerActionsSaga(_ref3) {
   var payload, type, targets;
@@ -5787,7 +6032,7 @@ function layerActionsSaga(_ref3) {
           return _context3.stop();
       }
     }
-  }, _marked3$4);
+  }, _marked3$5);
 }
 function addLayerActionsSaga(_ref4) {
   var payload, type, targets;
@@ -5824,7 +6069,7 @@ function addLayerActionsSaga(_ref4) {
           return _context4.stop();
       }
     }
-  }, _marked4$3);
+  }, _marked4$2);
 }
 function deleteLayerActionsSaga(_ref5) {
   var payload, type, targets;
@@ -5900,9 +6145,9 @@ function moveLayerActionsSaga(_ref6) {
     }
   }, _marked6$1);
 }
-function setActiveLayerIdActionsSaga(_ref7) {
+function setAutoLayerIdActionsSaga(_ref7) {
   var payload, type, targets;
-  return regeneratorRuntime.wrap(function setActiveLayerIdActionsSaga$(_context7) {
+  return regeneratorRuntime.wrap(function setAutoLayerIdActionsSaga$(_context7) {
     while (1) {
       switch (_context7.prev = _context7.next) {
         case 0:
@@ -5965,7 +6210,7 @@ function mapBaseLayerActionsSaga(_ref8) {
     }
   }, _marked8$1);
 }
-function rootSaga$6() {
+function rootSaga$7() {
   return regeneratorRuntime.wrap(function rootSaga$(_context9) {
     while (1) {
       switch (_context9.prev = _context9.next) {
@@ -6011,7 +6256,7 @@ function rootSaga$6() {
 
         case 20:
           _context9.next = 22;
-          return takeLatest(mapActions$1.setActiveLayerId.type, setActiveLayerIdActionsSaga);
+          return takeLatest(mapActions$1.setAutoLayerId.type, setAutoLayerIdActionsSaga);
 
         case 22:
           _context9.next = 24;
@@ -6124,11 +6369,11 @@ var sources = function sources(store) {
 
 var createSyncGroupViewStateSelector = createSelector(groups, sources, createSyncGroupViewState);
 
-var _marked$5 = /*#__PURE__*/regeneratorRuntime.mark(updateSourceValueWhenLinkingComponentToGroupSaga),
-    _marked2$5 = /*#__PURE__*/regeneratorRuntime.mark(addGroupTargetSaga),
-    _marked3$3 = /*#__PURE__*/regeneratorRuntime.mark(linkGroupTargetSaga),
-    _marked4$2 = /*#__PURE__*/regeneratorRuntime.mark(updateViewStateSaga),
-    _marked5$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$5);
+var _marked$6 = /*#__PURE__*/regeneratorRuntime.mark(updateSourceValueWhenLinkingComponentToGroupSaga),
+    _marked2$6 = /*#__PURE__*/regeneratorRuntime.mark(addGroupTargetSaga),
+    _marked3$4 = /*#__PURE__*/regeneratorRuntime.mark(linkGroupTargetSaga),
+    _marked4$1 = /*#__PURE__*/regeneratorRuntime.mark(updateViewStateSaga),
+    _marked5$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$6);
 function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdate) {
   var group;
   return regeneratorRuntime.wrap(function updateSourceValueWhenLinkingComponentToGroupSaga$(_context) {
@@ -6195,7 +6440,7 @@ function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdat
           return _context.stop();
       }
     }
-  }, _marked$5);
+  }, _marked$6);
 }
 function addGroupTargetSaga(_ref) {
   var payload, groupId, linked, targetToUpdate;
@@ -6219,7 +6464,7 @@ function addGroupTargetSaga(_ref) {
           return _context2.stop();
       }
     }
-  }, _marked2$5);
+  }, _marked2$6);
 }
 function linkGroupTargetSaga(_ref2) {
   var payload, groupId, linked, targetToUpdate;
@@ -6243,7 +6488,7 @@ function linkGroupTargetSaga(_ref2) {
           return _context3.stop();
       }
     }
-  }, _marked3$3);
+  }, _marked3$4);
 }
 function updateViewStateSaga() {
   var viewState;
@@ -6266,10 +6511,10 @@ function updateViewStateSaga() {
           return _context4.stop();
       }
     }
-  }, _marked4$2);
+  }, _marked4$1);
 }
 
-function rootSaga$5() {
+function rootSaga$6() {
   return regeneratorRuntime.wrap(function rootSaga$(_context5) {
     while (1) {
       switch (_context5.prev = _context5.next) {
@@ -6322,12 +6567,12 @@ var synchronizationGroupConfig = {
   reducersMap: {
     syncronizationGroupStore: reducer$4
   },
-  sagas: [rootSaga$6, rootSaga$5]
+  sagas: [rootSaga$7, rootSaga$6]
 };
 
-var _marked$4 = /*#__PURE__*/regeneratorRuntime.mark(registerMapUISaga),
-    _marked2$4 = /*#__PURE__*/regeneratorRuntime.mark(unregisterUIMapSaga),
-    _marked3$2 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$4);
+var _marked$5 = /*#__PURE__*/regeneratorRuntime.mark(registerMapUISaga),
+    _marked2$5 = /*#__PURE__*/regeneratorRuntime.mark(unregisterUIMapSaga),
+    _marked3$3 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$5);
 function registerMapUISaga() {
   var fields, source;
   return regeneratorRuntime.wrap(function registerMapUISaga$(_context) {
@@ -6363,7 +6608,7 @@ function registerMapUISaga() {
           return _context.stop();
       }
     }
-  }, _marked$4);
+  }, _marked$5);
 }
 function unregisterUIMapSaga() {
   var fields, activeUI;
@@ -6415,9 +6660,9 @@ function unregisterUIMapSaga() {
           return _context2.stop();
       }
     }
-  }, _marked2$4);
+  }, _marked2$5);
 }
-function rootSaga$4() {
+function rootSaga$5() {
   return regeneratorRuntime.wrap(function rootSaga$(_context3) {
     while (1) {
       switch (_context3.prev = _context3.next) {
@@ -6434,7 +6679,7 @@ function rootSaga$4() {
           return _context3.stop();
       }
     }
-  }, _marked3$2);
+  }, _marked3$3);
 }
 
 /* *
@@ -6458,7 +6703,7 @@ var uiModuleConfig = {
   reducersMap: {
     ui: reducer$6
   },
-  sagas: [rootSaga$4]
+  sagas: [rootSaga$5]
 };
 
 /* *
@@ -6477,30 +6722,102 @@ var uiModuleConfig = {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var generateUniqueLayerIds = function generateUniqueLayerIds(layers, activeLayerId) {
-  // if there is an activeLayerId given, generate a unique id for it
-  var activeLayerNewId = activeLayerId ? generateLayerId() : activeLayerId; // first match is set as activeLayer because there can only be one
+var replaceLayerIdsToEnsureUniqueLayerIdsInStore = function replaceLayerIdsToEnsureUniqueLayerIdsInStore(layerIds) {
+  var layers = layerIds.layers,
+      autoTimeStepLayerId = layerIds.autoTimeStepLayerId,
+      autoUpdateLayerId = layerIds.autoUpdateLayerId;
+  var layerIdIsSameForTimestepAndUpdate = autoTimeStepLayerId && autoTimeStepLayerId === autoUpdateLayerId;
+
+  if (layerIdIsSameForTimestepAndUpdate) {
+    var newAutoLayerId = generateLayerId();
+    return {
+      layers: replaceLayerIds(layers, autoTimeStepLayerId, newAutoLayerId),
+      autoTimeStepLayerId: newAutoLayerId,
+      autoUpdateLayerId: newAutoLayerId
+    };
+  }
+
+  var autoTimeStepLayerIdNew = autoTimeStepLayerId && generateLayerId();
+  var autoUpdateLayerIdNew = autoUpdateLayerId && generateLayerId();
+  var timestepAndUpdateLayerIdsAreProvided = autoTimeStepLayerId && autoUpdateLayerId;
+
+  if (timestepAndUpdateLayerIdsAreProvided) {
+    var autoTimeStepLayerIndex = layers.findIndex(function (layer) {
+      return layer.id === autoTimeStepLayerId;
+    });
+    var autoUpdateLayerIndex = layers.findIndex(function (layer) {
+      return layer.id === autoUpdateLayerId;
+    });
+
+    var _layersWithNewIds = layers.map(function (layer, index) {
+      if (layer.id && index === autoTimeStepLayerIndex) {
+        return Object.assign(Object.assign({}, layer), {
+          id: autoTimeStepLayerIdNew
+        });
+      }
+
+      if (layer.id && index === autoUpdateLayerIndex) {
+        return Object.assign(Object.assign({}, layer), {
+          id: autoUpdateLayerIdNew
+        });
+      }
 
-  var activeLayerIndex = layers.findIndex(function (layer) {
-    return layer.id === activeLayerId;
-  });
-  var layersNewIds = layers.map(function (layer, index) {
-    if (layer.id && index === activeLayerIndex) {
       return Object.assign(Object.assign({}, layer), {
-        id: activeLayerNewId
+        id: generateLayerId()
       });
-    }
+    });
 
+    return {
+      layers: _layersWithNewIds,
+      autoTimeStepLayerId: autoTimeStepLayerIdNew,
+      autoUpdateLayerId: autoUpdateLayerIdNew
+    };
+  }
+
+  if (autoTimeStepLayerIdNew) {
+    return {
+      layers: replaceLayerIds(layers, autoTimeStepLayerId, autoTimeStepLayerIdNew),
+      autoTimeStepLayerId: autoTimeStepLayerIdNew
+    };
+  }
+
+  if (autoUpdateLayerIdNew) {
+    return {
+      layers: replaceLayerIds(layers, autoUpdateLayerId, autoUpdateLayerIdNew),
+      autoUpdateLayerId: autoUpdateLayerIdNew
+    };
+  } // The code below is executed if neither auto timestep
+  // nor auto update layer id was provided
+
+
+  var layersWithNewIds = layers.map(function (layer) {
     return Object.assign(Object.assign({}, layer), {
       id: generateLayerId()
     });
   });
   return {
-    layersNewIds: layersNewIds,
-    activeLayerNewId: activeLayerNewId
+    layers: layersWithNewIds
   };
 };
 
+function replaceLayerIds(layers, autoLayerIdOld, autoLayerIdNew) {
+  var autoLayerIndex = layers.findIndex(function (layer) {
+    return layer.id === autoLayerIdOld;
+  });
+  var layersWithNewIds = layers.map(function (layer, index) {
+    if (layer.id && index === autoLayerIndex) {
+      return Object.assign(Object.assign({}, layer), {
+        id: autoLayerIdNew
+      });
+    }
+
+    return Object.assign(Object.assign({}, layer), {
+      id: generateLayerId()
+    });
+  });
+  return layersWithNewIds;
+}
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -7328,7 +7645,11 @@ var CanvasComponent = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
           onKeyUp = _this$props.onKeyUp,
           loopInterval = _this$props.redrawInterval;
-      if (onKeyUp) window.addEventListener('keyup', this.onKeyUp);
+
+      if (onKeyUp) {
+        window.addEventListener('keyup', this.onKeyUp);
+      }
+
       window.addEventListener('resize', this._handleWindowResize);
 
       if (this.canvascontaineroutside && this.canvascontaineroutside.current && onKeyUp) {
@@ -7361,7 +7682,10 @@ var CanvasComponent = /*#__PURE__*/function (_Component) {
       this.mounted = false;
       window.removeEventListener('resize', this._handleWindowResize);
       var onKeyUp = this.props.onKeyUp;
-      if (onKeyUp) window.removeEventListener('keyup', this.onKeyUp);
+
+      if (onKeyUp) {
+        window.removeEventListener('keyup', this.onKeyUp);
+      }
 
       if (this.canvas) {
         this.canvas.removeEventListener('mousedown', this.handleMouseDownEvent);
@@ -7402,7 +7726,10 @@ var CanvasComponent = /*#__PURE__*/function (_Component) {
     key: "onKeyUp",
     value: function onKeyUp(event) {
       var onKeyUp = this.props.onKeyUp;
-      if (onKeyUp) onKeyUp(event);
+
+      if (onKeyUp) {
+        onKeyUp(event);
+      }
 
       if (this.canvascontaineroutside && this.canvascontaineroutside.current && onKeyUp) {
         if (event.code === 'Escape') {
@@ -7415,7 +7742,10 @@ var CanvasComponent = /*#__PURE__*/function (_Component) {
     value: function _documentKeyDown(event) {
       if (this._isFocussed) {
         var onKeyDown = this.props.onKeyDown;
-        if (onKeyDown) onKeyDown(event);
+
+        if (onKeyDown) {
+          onKeyDown(event);
+        }
       }
     }
   }, {
@@ -7427,7 +7757,10 @@ var CanvasComponent = /*#__PURE__*/function (_Component) {
     key: "startLoop",
     value: function startLoop() {
       var onRenderCanvas = this.props.onRenderCanvas;
-      if (this.mounted === false || this.loopHasStarted === false) return;
+
+      if (this.mounted === false || this.loopHasStarted === false) {
+        return;
+      }
 
       if (this.canvas) {
         onRenderCanvas(this.ctx, this.currentWidth, this.currentHeight, this.canvas);
@@ -7793,9 +8126,16 @@ var Legend = function Legend(_ref) {
   }, [layerId]);
   /* Should not do anything if no layer is given */
 
-  if (!layer) return null;
+  if (!layer) {
+    return null;
+  }
+
   var isLayerEnabled = layer.enabled;
-  if (!isLayerEnabled) return null;
+
+  if (!isLayerEnabled) {
+    return null;
+  }
+
   var layerOpacity = layer.opacity ? layer.opacity : 1;
   /* Get the wmLayer, it has more detailed info about the WMS service,
   like a title and the WMS legendgraphic url */
@@ -8051,16 +8391,16 @@ var LegendConnect = function LegendConnect(_a) {
   }, props));
 };
 
-var _marked$3 = /*#__PURE__*/regeneratorRuntime.mark(startAnimationSaga),
-    _marked2$3 = /*#__PURE__*/regeneratorRuntime.mark(stopAnimationSaga),
-    _marked3$1 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerSaga),
-    _marked4$1 = /*#__PURE__*/regeneratorRuntime.mark(updateAnimation),
+var _marked$4 = /*#__PURE__*/regeneratorRuntime.mark(startAnimationSaga),
+    _marked2$4 = /*#__PURE__*/regeneratorRuntime.mark(stopAnimationSaga),
+    _marked3$2 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerSaga),
+    _marked4 = /*#__PURE__*/regeneratorRuntime.mark(updateAnimation),
     _marked5 = /*#__PURE__*/regeneratorRuntime.mark(setLayerDimensionsSaga),
     _marked6 = /*#__PURE__*/regeneratorRuntime.mark(toggleAutoUpdateSaga),
     _marked7 = /*#__PURE__*/regeneratorRuntime.mark(handleBaseLayersSaga),
     _marked8 = /*#__PURE__*/regeneratorRuntime.mark(setMapPresetSaga),
     _marked9 = /*#__PURE__*/regeneratorRuntime.mark(unregisterMapSaga),
-    _marked10 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$3);
+    _marked10 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$4);
 
 var generateTimeList = function generateTimeList(start, end, interval) {
   var timeList = [];
@@ -8123,7 +8463,7 @@ function startAnimationSaga(_ref) {
           return _context.stop();
       }
     }
-  }, _marked$3);
+  }, _marked$4);
 }
 function stopAnimationSaga(_ref2) {
   var payload, mapId;
@@ -8141,7 +8481,7 @@ function stopAnimationSaga(_ref2) {
           return _context2.stop();
       }
     }
-  }, _marked2$3);
+  }, _marked2$4);
 }
 function deleteLayerSaga(_ref3) {
   var payload, mapId, layers;
@@ -8172,7 +8512,7 @@ function deleteLayerSaga(_ref3) {
           return _context3.stop();
       }
     }
-  }, _marked3$1);
+  }, _marked3$2);
 }
 function updateAnimation(mapId, maxValue) {
   var animationStart, animationStartUnix, animationEnd, animationEndUnix, t, deltaT, start, end, isAnimating$1, timeStep;
@@ -8239,10 +8579,10 @@ function updateAnimation(mapId, maxValue) {
           return _context4.stop();
       }
     }
-  }, _marked4$1);
+  }, _marked4);
 }
 function setLayerDimensionsSaga(_ref4) {
-  var payload, layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, shouldEndTimeOverride, prevTimeDimension, isAnimating$1, webmapInstance, isActiveLayer, timeStep, isTimestepAuto$1, newTimeStep, syncedMapIds;
+  var payload, layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, autoUpdateLayerId, shouldAutoUpdate, shouldEndTimeOverride, prevTimeDimension, isAnimating$1, webmapInstance, isAutoUpdateLayer, syncedMapIds;
   return regeneratorRuntime.wrap(function setLayerDimensionsSaga$(_context5) {
     while (1) {
       switch (_context5.prev = _context5.next) {
@@ -8279,10 +8619,10 @@ function setLayerDimensionsSaga(_ref4) {
           });
           mapId = layer.mapId;
           _context5.next = 15;
-          return select(getActiveLayerId, mapId);
+          return select(getAutoUpdateLayerId, mapId);
 
         case 15:
-          activeLayerId = _context5.sent;
+          autoUpdateLayerId = _context5.sent;
           _context5.next = 18;
           return select(isAutoUpdating, mapId);
 
@@ -8304,49 +8644,20 @@ function setLayerDimensionsSaga(_ref4) {
         case 27:
           isAnimating$1 = _context5.sent;
           webmapInstance = getWMJSMapById(mapId);
-          isActiveLayer = layerId === activeLayerId;
-          _context5.next = 32;
-          return select(getMapTimeStepWithoutDefault, mapId);
-
-        case 32:
-          timeStep = _context5.sent;
-          _context5.next = 35;
-          return select(isTimestepAuto, mapId);
-
-        case 35:
-          isTimestepAuto$1 = _context5.sent;
-
-          if (!(isTimestepAuto$1 && isActiveLayer && timeStep === undefined && newTimeDimension)) {
-            _context5.next = 41;
-            break;
-          }
-
-          newTimeStep = getActiveLayerTimeStep(newTimeDimension);
-
-          if (!newTimeStep) {
-            _context5.next = 41;
-            break;
-          }
-
-          _context5.next = 41;
-          return put(mapActions$1.setTimeStep({
-            mapId: mapId,
-            timeStep: newTimeStep
-          }));
+          isAutoUpdateLayer = layerId === autoUpdateLayerId;
 
-        case 41:
-          if (!(isActiveLayer && // only update the active layer
+          if (!(isAutoUpdateLayer && // only update the active layer
           shouldAutoUpdate && newTimeDimension && newTimeDimension.maxValue && prevTimeDimension && prevTimeDimension.currentValue && prevTimeDimension.currentValue !== newTimeDimension.maxValue && !shouldEndTimeOverride)) {
-            _context5.next = 55;
+            _context5.next = 44;
             break;
           }
 
           if (isAnimating$1) {
-            _context5.next = 45;
+            _context5.next = 34;
             break;
           }
 
-          _context5.next = 45;
+          _context5.next = 34;
           return put(layerActions.layerChangeDimension({
             layerId: layerId,
             origin: LayerActionOrigin.setLayerDimensionSaga,
@@ -8356,19 +8667,19 @@ function setLayerDimensionsSaga(_ref4) {
             }
           }));
 
-        case 45:
-          _context5.next = 47;
+        case 34:
+          _context5.next = 36;
           return select(getSyncedMapIdsForTimeslider);
 
-        case 47:
+        case 36:
           syncedMapIds = _context5.sent;
 
           if (!syncedMapIds) {
-            _context5.next = 51;
+            _context5.next = 40;
             break;
           }
 
-          _context5.next = 51;
+          _context5.next = 40;
           return all(syncedMapIds.map(function (syncedMapId) {
             return put(setTime({
               origin: 'mapStore saga',
@@ -8377,42 +8688,42 @@ function setLayerDimensionsSaga(_ref4) {
             }));
           }));
 
-        case 51:
-          _context5.next = 53;
+        case 40:
+          _context5.next = 42;
           return call(updateAnimation, mapId, newTimeDimension.maxValue);
 
-        case 53:
-          _context5.next = 58;
+        case 42:
+          _context5.next = 47;
           break;
 
-        case 55:
+        case 44:
           if (!(isAnimating$1 && !webmapInstance.isAnimating && newTimeDimension && newTimeDimension.maxValue && !shouldEndTimeOverride)) {
-            _context5.next = 58;
+            _context5.next = 47;
             break;
           }
 
-          _context5.next = 58;
+          _context5.next = 47;
           return call(updateAnimation, mapId, newTimeDimension.maxValue);
 
-        case 58:
-          _context5.next = 63;
+        case 47:
+          _context5.next = 52;
           break;
 
-        case 60:
-          _context5.prev = 60;
+        case 49:
+          _context5.prev = 49;
           _context5.t0 = _context5["catch"](1);
           // eslint-disable-next-line no-console
           console.warn(_context5.t0);
 
-        case 63:
+        case 52:
         case "end":
           return _context5.stop();
       }
     }
-  }, _marked5, null, [[1, 60]]);
+  }, _marked5, null, [[1, 49]]);
 }
 function toggleAutoUpdateSaga(_ref5) {
-  var payload, shouldAutoUpdate, mapId, layerId, timeDimension, syncedMapIds, payloads;
+  var payload, shouldAutoUpdate, mapId, autoUpdateLayerId, timeDimension, syncedMapIds, payloads;
   return regeneratorRuntime.wrap(function toggleAutoUpdateSaga$(_context6) {
     while (1) {
       switch (_context6.prev = _context6.next) {
@@ -8427,12 +8738,12 @@ function toggleAutoUpdateSaga(_ref5) {
           }
 
           _context6.next = 6;
-          return select(getActiveLayerId, mapId);
+          return select(getAutoUpdateLayerId, mapId);
 
         case 6:
-          layerId = _context6.sent;
+          autoUpdateLayerId = _context6.sent;
           _context6.next = 9;
-          return select(getLayerTimeDimension, layerId);
+          return select(getLayerTimeDimension, autoUpdateLayerId);
 
         case 9:
           timeDimension = _context6.sent;
@@ -8444,7 +8755,7 @@ function toggleAutoUpdateSaga(_ref5) {
 
           _context6.next = 13;
           return put(layerActions.layerChangeDimension({
-            layerId: layerId,
+            layerId: autoUpdateLayerId,
             origin: LayerActionOrigin.toggleAutoUpdateSaga,
             dimension: {
               name: 'time',
@@ -8572,7 +8883,7 @@ function handleBaseLayersSaga(mapId, baseLayers) {
   }, _marked7);
 }
 function setMapPresetSaga(_ref6) {
-  var payload, mapId, initialProps, mapPreset, layers, activeLayerId, proj, shouldAutoUpdate, shouldAnimate, animationPayload, toggleTimestepAuto, showTimeSlider, displayMapPin, shouldShowZoomControls, shouldShowLegend, dockedLayerManagerSize, _filterLayers, mapLayers, baseLayers, overLayers, _yield$call, layersNewIds, activeLayerNewId, newActiveLayerId, baseLayersWithDefaultLayer, overLayersWithDefaultLayer, allBaseLayers, animationLength, animationEndTime, shouldEndtimeOverride, interval, animationEnd, _animationEnd, duration, _animationEnd2, animationStart, shouldOpenLegend, legendId, fiveMinuteDelayForAnimation, _animationEnd3, _animationStart;
+  var payload, _a, _b, _c, mapId, initialProps, mapPreset, layers, activeLayerId, autoTimeStepLayerId, autoUpdateLayerId, proj, shouldAutoUpdate, shouldAnimate, animationPayload, toggleTimestepAuto, showTimeSlider, displayMapPin, shouldShowZoomControls, shouldShowLegend, dockedLayerManagerSize, _filterLayers, mapLayers, baseLayers, overLayers, autoTimeStepLayerIdNew, autoUpdateLayerIdNew, onlyActiveLayerIdIsSet, newLayerIds, firstLayerId, baseLayersWithDefaultLayer, overLayersWithDefaultLayer, allBaseLayers, animationLength, animationEndTime, shouldEndtimeOverride, interval, animationEnd, _animationEnd, duration, _animationEnd2, animationStart, shouldOpenLegend, legendId, fiveMinuteDelayForAnimation, _animationEnd3, _animationStart;
 
   return regeneratorRuntime.wrap(function setMapPresetSaga$(_context8) {
     while (1) {
@@ -8584,41 +8895,54 @@ function setMapPresetSaga(_ref6) {
           mapPreset = initialProps.mapPreset;
 
           if (!mapPreset) {
-            _context8.next = 120;
+            _context8.next = 122;
             break;
           }
 
-          layers = mapPreset.layers, activeLayerId = mapPreset.activeLayerId, proj = mapPreset.proj, shouldAutoUpdate = mapPreset.shouldAutoUpdate, shouldAnimate = mapPreset.shouldAnimate, animationPayload = mapPreset.animationPayload, toggleTimestepAuto = mapPreset.toggleTimestepAuto, showTimeSlider = mapPreset.showTimeSlider, displayMapPin = mapPreset.displayMapPin, shouldShowZoomControls = mapPreset.shouldShowZoomControls, shouldShowLegend = mapPreset.shouldShowLegend, dockedLayerManagerSize = mapPreset.dockedLayerManagerSize;
+          layers = mapPreset.layers, activeLayerId = mapPreset.activeLayerId, autoTimeStepLayerId = mapPreset.autoTimeStepLayerId, autoUpdateLayerId = mapPreset.autoUpdateLayerId, proj = mapPreset.proj, shouldAutoUpdate = mapPreset.shouldAutoUpdate, shouldAnimate = mapPreset.shouldAnimate, animationPayload = mapPreset.animationPayload, toggleTimestepAuto = mapPreset.toggleTimestepAuto, showTimeSlider = mapPreset.showTimeSlider, displayMapPin = mapPreset.displayMapPin, shouldShowZoomControls = mapPreset.shouldShowZoomControls, shouldShowLegend = mapPreset.shouldShowLegend, dockedLayerManagerSize = mapPreset.dockedLayerManagerSize;
           _filterLayers = filterLayers(layers), mapLayers = _filterLayers.mapLayers, baseLayers = _filterLayers.baseLayers, overLayers = _filterLayers.overLayers;
 
           if (!layers) {
-            _context8.next = 18;
+            _context8.next = 20;
             break;
           }
 
-          _context8.next = 10;
-          return call(generateUniqueLayerIds, mapLayers, activeLayerId);
+          //  make sure all layers have a unique id before going forward
+          autoTimeStepLayerIdNew = autoTimeStepLayerId;
+          autoUpdateLayerIdNew = autoUpdateLayerId;
+          onlyActiveLayerIdIsSet = !autoTimeStepLayerId && !autoUpdateLayerId && activeLayerId;
 
-        case 10:
-          _yield$call = _context8.sent;
-          layersNewIds = _yield$call.layersNewIds;
-          activeLayerNewId = _yield$call.activeLayerNewId;
-          _context8.next = 15;
+          if (onlyActiveLayerIdIsSet) {
+            autoTimeStepLayerIdNew = activeLayerId;
+            autoUpdateLayerIdNew = activeLayerId;
+          }
+
+          _context8.next = 14;
+          return call(replaceLayerIdsToEnsureUniqueLayerIdsInStore, {
+            layers: mapLayers,
+            autoTimeStepLayerId: autoTimeStepLayerIdNew,
+            autoUpdateLayerId: autoUpdateLayerIdNew
+          });
+
+        case 14:
+          newLayerIds = _context8.sent;
+          _context8.next = 17;
           return put(layerActions.setLayers({
             mapId: mapId,
-            layers: layersNewIds
+            layers: newLayerIds.layers
           }));
 
-        case 15:
+        case 17:
           //  set active layer if given otherwise to first layer
-          newActiveLayerId = activeLayerNewId || (layersNewIds.length ? layersNewIds[0].id : undefined);
-          _context8.next = 18;
-          return put(mapActions$1.setActiveLayerId({
+          firstLayerId = (_a = newLayerIds.layers[0]) === null || _a === void 0 ? void 0 : _a.id;
+          _context8.next = 20;
+          return put(mapActions$1.setAutoLayerId({
             mapId: mapId,
-            layerId: newActiveLayerId
+            autoTimeStepLayerId: (_b = newLayerIds.autoTimeStepLayerId) !== null && _b !== void 0 ? _b : firstLayerId,
+            autoUpdateLayerId: (_c = newLayerIds.autoUpdateLayerId) !== null && _c !== void 0 ? _c : firstLayerId
           }));
 
-        case 18:
+        case 20:
           // sets (default) baseLayers
           baseLayersWithDefaultLayer = baseLayers.length ? baseLayers : [baseLayerGrey$1]; // sets (default) overLayers
 
@@ -8628,206 +8952,206 @@ function setMapPresetSaga(_ref6) {
               id: generateLayerId()
             });
           });
-          _context8.next = 23;
+          _context8.next = 25;
           return call(handleBaseLayersSaga, mapId, allBaseLayers);
 
-        case 23:
+        case 25:
           if (!proj) {
-            _context8.next = 26;
+            _context8.next = 28;
             break;
           }
 
-          _context8.next = 26;
+          _context8.next = 28;
           return put(mapActions$1.setBbox({
             mapId: mapId,
             bbox: proj === null || proj === void 0 ? void 0 : proj.bbox,
             srs: proj === null || proj === void 0 ? void 0 : proj.srs
           }));
 
-        case 26:
+        case 28:
           animationLength = animationPayload && animationPayload.duration;
           animationEndTime = animationPayload && animationPayload.endTime && isAnimationEndTimeValid(animationPayload.endTime) && animationPayload.endTime;
           shouldEndtimeOverride = animationPayload ? animationPayload.shouldEndtimeOverride : false;
 
           if (!shouldEndtimeOverride) {
-            _context8.next = 32;
+            _context8.next = 34;
             break;
           }
 
-          _context8.next = 32;
+          _context8.next = 34;
           return put(mapActions$1.setEndTimeOverriding({
             mapId: mapId,
             shouldEndtimeOverride: shouldEndtimeOverride
           }));
 
-        case 32:
+        case 34:
           if (!(shouldAutoUpdate !== undefined && !animationEndTime)) {
-            _context8.next = 35;
+            _context8.next = 37;
             break;
           }
 
-          _context8.next = 35;
+          _context8.next = 37;
           return put(mapActions$1.toggleAutoUpdate({
             mapId: mapId,
             shouldAutoUpdate: shouldAutoUpdate
           }));
 
-        case 35:
+        case 37:
           if (!(showTimeSlider !== undefined)) {
-            _context8.next = 38;
+            _context8.next = 40;
             break;
           }
 
-          _context8.next = 38;
+          _context8.next = 40;
           return put(mapActions$1.toggleTimeSliderIsVisible({
             mapId: mapId,
             isTimeSliderVisible: showTimeSlider
           }));
 
-        case 38:
+        case 40:
           if (!(shouldShowZoomControls !== undefined)) {
-            _context8.next = 41;
+            _context8.next = 43;
             break;
           }
 
-          _context8.next = 41;
+          _context8.next = 43;
           return put(mapActions$1.toggleZoomControls({
             mapId: mapId,
             shouldShowZoomControls: shouldShowZoomControls
           }));
 
-        case 41:
+        case 43:
           if (!(displayMapPin !== undefined)) {
-            _context8.next = 44;
+            _context8.next = 46;
             break;
           }
 
-          _context8.next = 44;
+          _context8.next = 46;
           return put(mapActions$1.toggleMapPinIsVisible({
             mapId: mapId,
             displayMapPin: displayMapPin
           }));
 
-        case 44:
+        case 46:
           // sets timestep by interval of animationPayload
           interval = animationPayload && animationPayload.interval;
 
           if (!interval) {
-            _context8.next = 48;
+            _context8.next = 50;
             break;
           }
 
-          _context8.next = 48;
+          _context8.next = 50;
           return put(mapActions$1.setTimeStep({
             mapId: mapId,
             timeStep: interval
           }));
 
-        case 48:
+        case 50:
           if (!animationEndTime) {
-            _context8.next = 57;
+            _context8.next = 59;
             break;
           }
 
-          _context8.next = 51;
+          _context8.next = 53;
           return put(mapActions$1.setAnimationEndTime({
             mapId: mapId,
             animationEndTime: getAnimationEndTime(animationEndTime)
           }));
 
-        case 51:
+        case 53:
           if (animationLength) {
-            _context8.next = 57;
+            _context8.next = 59;
             break;
           }
 
-          _context8.next = 54;
+          _context8.next = 56;
           return select(getAnimationEndTime$1, mapId);
 
-        case 54:
+        case 56:
           animationEnd = _context8.sent;
-          _context8.next = 57;
+          _context8.next = 59;
           return put(mapActions$1.setAnimationStartTime({
             mapId: mapId,
             animationStartTime: moment(animationEnd).subtract(5 * 60, 'minutes') // set to default of 5 hours
             .toISOString()
           }));
 
-        case 57:
+        case 59:
           if (!animationLength) {
-            _context8.next = 63;
+            _context8.next = 65;
             break;
           }
 
-          _context8.next = 60;
+          _context8.next = 62;
           return select(getAnimationEndTime$1, mapId);
 
-        case 60:
+        case 62:
           _animationEnd = _context8.sent;
-          _context8.next = 63;
+          _context8.next = 65;
           return put(mapActions$1.setAnimationStartTime({
             mapId: mapId,
             animationStartTime: moment(_animationEnd).subtract(animationLength, 'minutes').toISOString()
           }));
 
-        case 63:
+        case 65:
           if (!(animationPayload && animationPayload.speed)) {
-            _context8.next = 66;
+            _context8.next = 68;
             break;
           }
 
-          _context8.next = 66;
+          _context8.next = 68;
           return put(mapActions$1.setAnimationDelay({
             mapId: mapId,
             animationDelay: getSpeedDelay(animationPayload.speed)
           }));
 
-        case 66:
+        case 68:
           if (!(shouldAnimate === true)) {
-            _context8.next = 91;
+            _context8.next = 93;
             break;
           }
 
           duration = animationPayload && animationPayload.duration ? animationPayload.duration : 5 * 60; //  set to default of 5 hours
 
           if (!(shouldEndtimeOverride && animationEndTime)) {
-            _context8.next = 74;
+            _context8.next = 76;
             break;
           }
 
-          _context8.next = 71;
+          _context8.next = 73;
           return select(getAnimationEndTime$1, mapId);
 
-        case 71:
+        case 73:
           _context8.t0 = _context8.sent;
-          _context8.next = 75;
+          _context8.next = 77;
           break;
 
-        case 74:
+        case 76:
           _context8.t0 = moment.utc().format(dateFormat);
 
-        case 75:
+        case 77:
           _animationEnd2 = _context8.t0;
 
           if (!(shouldEndtimeOverride && animationLength)) {
-            _context8.next = 82;
+            _context8.next = 84;
             break;
           }
 
-          _context8.next = 79;
+          _context8.next = 81;
           return select(getAnimationStartTime, mapId);
 
-        case 79:
+        case 81:
           _context8.t1 = _context8.sent;
-          _context8.next = 83;
+          _context8.next = 85;
           break;
 
-        case 82:
+        case 84:
           _context8.t1 = moment.utc().subtract(duration, 'minutes').format(dateFormat);
 
-        case 83:
+        case 85:
           animationStart = _context8.t1;
-          _context8.next = 86;
+          _context8.next = 88;
           return put(mapActions$1.mapStartAnimation({
             mapId: mapId,
             start: animationStart,
@@ -8835,119 +9159,119 @@ function setMapPresetSaga(_ref6) {
             interval: interval || animationIntervalDefault
           }));
 
-        case 86:
+        case 88:
           if (!interval) {
-            _context8.next = 89;
+            _context8.next = 91;
             break;
           }
 
-          _context8.next = 89;
+          _context8.next = 91;
           return put(mapActions$1.toggleTimestepAuto({
             mapId: mapId,
             timestepAuto: false
           }));
 
-        case 89:
-          _context8.next = 94;
+        case 91:
+          _context8.next = 96;
           break;
 
-        case 91:
+        case 93:
           if (!(toggleTimestepAuto !== undefined)) {
-            _context8.next = 94;
+            _context8.next = 96;
             break;
           }
 
-          _context8.next = 94;
+          _context8.next = 96;
           return put(mapActions$1.toggleTimestepAuto({
             mapId: mapId,
             timestepAuto: toggleTimestepAuto
           }));
 
-        case 94:
+        case 96:
           // show legend
           shouldOpenLegend = shouldShowLegend !== undefined ? shouldShowLegend : IS_LEGEND_OPEN_BY_DEFAULT;
-          _context8.next = 97;
+          _context8.next = 99;
           return select(getLegendId, mapId);
 
-        case 97:
+        case 99:
           legendId = _context8.sent;
 
           if (!legendId) {
-            _context8.next = 101;
+            _context8.next = 103;
             break;
           }
 
-          _context8.next = 101;
+          _context8.next = 103;
           return put(uiActions.setToggleOpenDialog({
             type: legendId,
             setOpen: shouldOpenLegend
           }));
 
-        case 101:
+        case 103:
           if (!dockedLayerManagerSize) {
-            _context8.next = 104;
+            _context8.next = 106;
             break;
           }
 
-          _context8.next = 104;
+          _context8.next = 106;
           return put(mapActions$1.setDockedLayerManagerSize({
             mapId: mapId,
             dockedLayerManagerSize: dockedLayerManagerSize
           }));
 
-        case 104:
+        case 106:
           if (!(animationEndTime && (shouldEndtimeOverride || !(shouldAutoUpdate || shouldAnimate)))) {
-            _context8.next = 120;
+            _context8.next = 122;
             break;
           }
 
           fiveMinuteDelayForAnimation = 1000 * 60 * 5;
-          _context8.next = 108;
+          _context8.next = 110;
           return delay(fiveMinuteDelayForAnimation);
 
-        case 108:
-          _context8.next = 110;
+        case 110:
+          _context8.next = 112;
           return select(getAnimationEndTime$1, mapId);
 
-        case 110:
+        case 112:
           _animationEnd3 = _context8.sent;
-          _context8.next = 113;
+          _context8.next = 115;
           return put(mapActions$1.setAnimationEndTime({
             mapId: mapId,
             animationEndTime: moment(_animationEnd3).add(5, 'minutes').toISOString()
           }));
 
-        case 113:
-          _context8.next = 115;
+        case 115:
+          _context8.next = 117;
           return select(getAnimationStartTime, mapId);
 
-        case 115:
+        case 117:
           _animationStart = _context8.sent;
-          _context8.next = 118;
+          _context8.next = 120;
           return put(mapActions$1.setAnimationStartTime({
             mapId: mapId,
             animationStartTime: moment(_animationStart).add(5, 'minutes').toISOString()
           }));
 
-        case 118:
-          _context8.next = 104;
-          break;
-
         case 120:
-          _context8.next = 125;
+          _context8.next = 106;
           break;
 
         case 122:
-          _context8.prev = 122;
+          _context8.next = 127;
+          break;
+
+        case 124:
+          _context8.prev = 124;
           _context8.t2 = _context8["catch"](1);
           console.error(_context8.t2);
 
-        case 125:
+        case 127:
         case "end":
           return _context8.stop();
       }
     }
-  }, _marked8, null, [[1, 122]]);
+  }, _marked8, null, [[1, 124]]);
 }
 function unregisterMapSaga(_ref7) {
   var payload, mapId, layerList;
@@ -8979,7 +9303,7 @@ function unregisterMapSaga(_ref7) {
     }
   }, _marked9);
 }
-function rootSaga$3() {
+function rootSaga$4() {
   return regeneratorRuntime.wrap(function rootSaga$(_context10) {
     while (1) {
       switch (_context10.prev = _context10.next) {
@@ -9019,6 +9343,157 @@ function rootSaga$3() {
   }, _marked10);
 }
 
+/* *
+ * 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)
+ * */
+/**
+ * Converts webmapjs node structure to LayerTree
+ * @param nodesToRecur THe WebMapJS node structure from service.getNodes();
+ */
+
+var recurseNodes = function recurseNodes(nodesToRecur) {
+  var newLayerTreeObj = {
+    leaf: nodesToRecur.leaf,
+    name: nodesToRecur.name,
+    title: nodesToRecur.title,
+    path: nodesToRecur.path || [],
+    children: [],
+    keywords: nodesToRecur.keywords || [],
+    "abstract": nodesToRecur["abstract"] || '',
+    styles: nodesToRecur.styles || [],
+    dimensions: nodesToRecur.dimensions || [],
+    geographicBoundingBox: nodesToRecur.geographicBoundingBox || null
+  };
+
+  if (nodesToRecur.children) {
+    for (var j = 0; j < nodesToRecur.children.length; j += 1) {
+      newLayerTreeObj.children.push(recurseNodes(nodesToRecur.children[j]));
+    }
+  }
+
+  return newLayerTreeObj;
+};
+/**
+ * Returns a promise with a hierarchical tree of layers from the WMS GetCapabilities document.
+ * @param serviceUrl The URL of the WMS service
+ * @param {boolean} forceReload **optional** forceReload: boolean, true will force the layers to be reloaded from the service, defaults to false
+ */
+
+var getLayersFromService = function getLayersFromService(serviceUrl) {
+  var forceReload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return new Promise(function (resolve, reject) {
+    var serviceObject = WMGetServiceFromStore(serviceUrl);
+    serviceObject.getNodes(function (nodes) {
+      // TODO: Maarten Plieger, 2022-11-02:  Harmonize types and use correct types: https://gitlab.com/opengeoweb/opengeoweb/-/issues/2817
+      var layerTree = recurseNodes(nodes);
+      resolve(layerTree);
+    }, function (error) {
+      reject(new Error(error));
+    }, forceReload);
+  });
+};
+/**
+ * Returns a promise with an array of flattened layerobjects from the WMS GetCapabilities document.
+ * @param serviceUrl The URL of the WMS service
+ * @param {boolean} forceReload **optional** forceReload: boolean, true will force the layers to be reloaded from the service, defaults to false
+ */
+
+var getLayersFlattenedFromService = function getLayersFlattenedFromService(serviceUrl) {
+  var forceReload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return new Promise(function (resolve, reject) {
+    var serviceObject = WMGetServiceFromStore(serviceUrl);
+    serviceObject.getLayerObjectsFlat(function (layers) {
+      resolve(layers);
+    }, function (error) {
+      reject(new Error(error));
+    }, forceReload);
+  });
+};
+
+var _marked$3 = /*#__PURE__*/regeneratorRuntime.mark(fetchServiceSaga),
+    _marked2$3 = /*#__PURE__*/regeneratorRuntime.mark(fetchInitialServicesSaga),
+    _marked3$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$3);
+function fetchServiceSaga(service) {
+  var layers;
+  return regeneratorRuntime.wrap(function fetchServiceSaga$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          _context.next = 3;
+          return call(getLayersFlattenedFromService, service.serviceUrl);
+
+        case 3:
+          layers = _context.sent;
+          _context.next = 6;
+          return put(serviceActions.serviceSetLayers(Object.assign(Object.assign({}, service), {
+            layers: layers
+          })));
+
+        case 6:
+          _context.next = 10;
+          break;
+
+        case 8:
+          _context.prev = 8;
+          _context.t0 = _context["catch"](0);
+
+        case 10:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _marked$3, null, [[0, 8]]);
+}
+function fetchInitialServicesSaga(_ref) {
+  var payload, services;
+  return regeneratorRuntime.wrap(function fetchInitialServicesSaga$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          payload = _ref.payload;
+          services = payload.services;
+          _context2.next = 4;
+          return all(services.map(function (service) {
+            return call(fetchServiceSaga, service);
+          }));
+
+        case 4:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _marked2$3);
+}
+function rootSaga$3() {
+  return regeneratorRuntime.wrap(function rootSaga$(_context3) {
+    while (1) {
+      switch (_context3.prev = _context3.next) {
+        case 0:
+          _context3.next = 2;
+          return takeEvery(serviceActions.fetchInitialServices, fetchInitialServicesSaga);
+
+        case 2:
+        case "end":
+          return _context3.stop();
+      }
+    }
+  }, _marked3$1);
+}
+
 var moduleConfig = {
   id: 'webmap-module',
   reducersMap: {
@@ -9026,7 +9501,7 @@ var moduleConfig = {
     services: reducer$7,
     layers: reducer$8
   },
-  sagas: [rootSaga$3]
+  sagas: [rootSaga$4, rootSaga$3]
 };
 
 /* *
@@ -9080,153 +9555,97 @@ var isNoIdService = function isNoIdService(param) {
   return !!((serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.name) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.url));
 };
 
-var _marked$2 = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSaga),
-    _marked2$2 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectCloseInfoDialogSaga),
-    _marked3 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectRemoveServiceSaga),
-    _marked4 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$2);
-function newServiceAddedSaga(capturedAction) {
-  var addedService, id, serviceUrl, name, scope, _abstract, isUpdating, keywords, groups;
-
-  return regeneratorRuntime.wrap(function newServiceAddedSaga$(_context) {
-    while (1) {
-      switch (_context.prev = _context.next) {
-        case 0:
-          addedService = capturedAction.payload;
-          id = addedService.id, serviceUrl = addedService.serviceUrl, name = addedService.name, scope = addedService.scope, _abstract = addedService["abstract"], isUpdating = addedService.isUpdating;
-
-          if (!isUpdating) {
-            _context.next = 4;
-            break;
-          }
-
-          return _context.abrupt("return");
-
-        case 4:
-          keywords = addedService.layers.reduce(function (keywords, layer) {
-            var _a;
-
-            if (layer.leaf) {
-              return keywords.concat((_a = layer.keywords) !== null && _a !== void 0 ? _a : []);
-            }
-
-            return keywords;
-          }, []);
-          groups = addedService.layers.reduce(function (groups, layer) {
-            var _a;
-
-            if (layer.leaf) {
-              return groups.concat((_a = layer.path) !== null && _a !== void 0 ? _a : []);
-            }
-
-            return groups;
-          }, []);
-          _context.next = 8;
-          return put(layerSelectActions.addFiltersAndActiveServices({
-            serviceId: id,
-            serviceName: name,
-            serviceUrl: serviceUrl,
-            keywords: keywords,
-            scope: scope,
-            groups: groups,
-            "abstract": _abstract,
-            isLoading: false
-          }));
-
-        case 8:
-        case "end":
-          return _context.stop();
-      }
-    }
-  }, _marked$2);
-}
+var _marked$2 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectCloseInfoDialogSaga),
+    _marked2$2 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectRemoveServiceSaga),
+    _marked3 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$2);
 function layerSelectCloseInfoDialogSaga(_ref) {
   var type, payload, togglePayload, activeMapIdPayload, isLayerInfoDialogOpen, _isLayerInfoDialogOpen, filteredLayers, dialogInfo;
 
-  return regeneratorRuntime.wrap(function layerSelectCloseInfoDialogSaga$(_context2) {
+  return regeneratorRuntime.wrap(function layerSelectCloseInfoDialogSaga$(_context) {
     while (1) {
-      switch (_context2.prev = _context2.next) {
+      switch (_context.prev = _context.next) {
         case 0:
           type = _ref.type, payload = _ref.payload;
-          _context2.t0 = type;
-          _context2.next = _context2.t0 === uiActions.setToggleOpenDialog.type ? 4 : _context2.t0 === uiActions.setActiveMapIdForDialog.type ? 9 : 18;
+          _context.t0 = type;
+          _context.next = _context.t0 === uiActions.setToggleOpenDialog.type ? 4 : _context.t0 === uiActions.setActiveMapIdForDialog.type ? 9 : 18;
           break;
 
         case 4:
           togglePayload = payload;
 
           if (!(!togglePayload.setOpen && togglePayload.type === DialogTypes.LayerSelect)) {
-            _context2.next = 8;
+            _context.next = 8;
             break;
           }
 
-          _context2.next = 8;
+          _context.next = 8;
           return put(uiActions.setToggleOpenDialog({
             type: DialogTypes.LayerInfo,
             setOpen: false
           }));
 
         case 8:
-          return _context2.abrupt("break", 31);
+          return _context.abrupt("break", 31);
 
         case 9:
           activeMapIdPayload = payload;
 
           if (activeMapIdPayload.setOpen) {
-            _context2.next = 17;
+            _context.next = 17;
             break;
           }
 
-          _context2.next = 13;
+          _context.next = 13;
           return select(getisDialogOpen, DialogTypes.LayerInfo);
 
         case 13:
-          isLayerInfoDialogOpen = _context2.sent;
+          isLayerInfoDialogOpen = _context.sent;
 
           if (!isLayerInfoDialogOpen) {
-            _context2.next = 17;
+            _context.next = 17;
             break;
           }
 
-          _context2.next = 17;
+          _context.next = 17;
           return put(uiActions.setToggleOpenDialog({
             type: DialogTypes.LayerInfo,
             setOpen: false
           }));
 
         case 17:
-          return _context2.abrupt("break", 31);
+          return _context.abrupt("break", 31);
 
         case 18:
-          _context2.next = 20;
+          _context.next = 20;
           return select(getisDialogOpen, DialogTypes.LayerInfo);
 
         case 20:
-          _isLayerInfoDialogOpen = _context2.sent;
+          _isLayerInfoDialogOpen = _context.sent;
 
           if (!_isLayerInfoDialogOpen) {
-            _context2.next = 31;
+            _context.next = 31;
             break;
           }
 
-          _context2.next = 24;
+          _context.next = 24;
           return select(getFilteredLayers);
 
         case 24:
-          filteredLayers = _context2.sent;
-          _context2.next = 27;
+          filteredLayers = _context.sent;
+          _context.next = 27;
           return select(getActiveLayerInfo);
 
         case 27:
-          dialogInfo = _context2.sent;
+          dialogInfo = _context.sent;
 
           if (filteredLayers.map(function (layer) {
             return layer.title;
           }).includes(dialogInfo.title)) {
-            _context2.next = 31;
+            _context.next = 31;
             break;
           }
 
-          _context2.next = 31;
+          _context.next = 31;
           return put(uiActions.setToggleOpenDialog({
             type: DialogTypes.LayerInfo,
             setOpen: false
@@ -9234,35 +9653,35 @@ function layerSelectCloseInfoDialogSaga(_ref) {
 
         case 31:
         case "end":
-          return _context2.stop();
+          return _context.stop();
       }
     }
-  }, _marked2$2);
+  }, _marked$2);
 }
 function layerSelectRemoveServiceSaga(capturedAction) {
   var removedService, serviceId, serviceUrl, results, services, servicesEnabled;
-  return regeneratorRuntime.wrap(function layerSelectRemoveServiceSaga$(_context3) {
+  return regeneratorRuntime.wrap(function layerSelectRemoveServiceSaga$(_context2) {
     while (1) {
-      switch (_context3.prev = _context3.next) {
+      switch (_context2.prev = _context2.next) {
         case 0:
           removedService = capturedAction.payload;
           serviceId = removedService.serviceId, serviceUrl = removedService.serviceUrl;
-          _context3.next = 4;
+          _context2.next = 4;
           return select(getActiveServices);
 
         case 4:
-          results = _context3.sent;
+          results = _context2.sent;
           services = results;
           servicesEnabled = Object.values(services).find(function (service) {
             return service === null || service === void 0 ? void 0 : service.enabled;
           });
 
           if (!(servicesEnabled === undefined)) {
-            _context3.next = 10;
+            _context2.next = 10;
             break;
           }
 
-          _context3.next = 10;
+          _context2.next = 10;
           return all(Object.entries(services).map(function (_ref2) {
             var _ref3 = _slicedToArray(_ref2, 2),
                 serviceId = _ref3[0],
@@ -9275,7 +9694,7 @@ function layerSelectRemoveServiceSaga(capturedAction) {
           }));
 
         case 10:
-          _context3.next = 12;
+          _context2.next = 12;
           return put(serviceActions.mapStoreRemoveService({
             id: serviceId,
             serviceUrl: serviceUrl
@@ -9283,64 +9702,68 @@ function layerSelectRemoveServiceSaga(capturedAction) {
 
         case 12:
         case "end":
-          return _context3.stop();
+          return _context2.stop();
       }
     }
-  }, _marked3);
+  }, _marked2$2);
 }
 function addServiceToLocalStorageSaga(_ref4) {
   var payload = _ref4.payload;
   var scope = payload.scope,
       name = payload.name,
       serviceUrl = payload.serviceUrl,
-      _abstract2 = payload["abstract"];
-  if (!isUserAddedService(scope)) return;
+      _abstract = payload["abstract"];
+
+  if (!isUserAddedService(scope)) {
+    return;
+  }
+
   var localStorageServices = getUserAddedServices();
   setUserAddedServices(Object.assign(Object.assign({}, localStorageServices), _defineProperty({}, serviceUrl, {
     name: name,
     url: serviceUrl,
-    "abstract": _abstract2
+    "abstract": _abstract
   })));
 }
 function removeServiceFromLocalStorageSaga(_ref5) {
   var payload = _ref5.payload;
   var serviceUrl = payload.serviceUrl;
   var localStorageServices = getUserAddedServices();
-  if (!localStorageServices[serviceUrl]) return;
+
+  if (!localStorageServices[serviceUrl]) {
+    return;
+  }
+
   var updatedServices = Object.assign({}, localStorageServices);
   delete updatedServices[serviceUrl];
   setUserAddedServices(updatedServices);
 }
 function rootSaga$2() {
-  return regeneratorRuntime.wrap(function rootSaga$(_context4) {
+  return regeneratorRuntime.wrap(function rootSaga$(_context3) {
     while (1) {
-      switch (_context4.prev = _context4.next) {
+      switch (_context3.prev = _context3.next) {
         case 0:
-          _context4.next = 2;
-          return takeEvery(serviceActions.serviceSetLayers.type, newServiceAddedSaga);
-
-        case 2:
-          _context4.next = 4;
+          _context3.next = 2;
           return takeEvery(layerSelectActions.layerSelectRemoveService.type, layerSelectRemoveServiceSaga);
 
-        case 4:
-          _context4.next = 6;
+        case 2:
+          _context3.next = 4;
           return takeEvery(serviceActions.serviceSetLayers.type, addServiceToLocalStorageSaga);
 
-        case 6:
-          _context4.next = 8;
+        case 4:
+          _context3.next = 6;
           return takeEvery(serviceActions.mapStoreRemoveService.type, removeServiceFromLocalStorageSaga);
 
-        case 8:
-          _context4.next = 10;
+        case 6:
+          _context3.next = 8;
           return takeEvery([uiActions.setToggleOpenDialog.type, uiActions.setActiveMapIdForDialog.type, layerSelectActions.disableActiveService.type, layerSelectActions.toggleFilter.type, layerSelectActions.setSearchFilter.type], layerSelectCloseInfoDialogSaga);
 
-        case 10:
+        case 8:
         case "end":
-          return _context4.stop();
+          return _context3.stop();
       }
     }
-  }, _marked4);
+  }, _marked3);
 }
 
 var layerSelectConfig = {
@@ -9483,8 +9906,8 @@ var coreModuleConfig = [moduleConfig, synchronizationGroupConfig, uiModuleConfig
  * 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 iconStyle = {
   height: 24,
@@ -9505,16 +9928,19 @@ var sizeLarge = {
 
 var HeaderOptions = function HeaderOptions(_ref) {
   var isDockedLayerManager = _ref.isDockedLayerManager,
+      shortcutsEnabled = _ref.shortcutsEnabled,
       onClickDockButton = _ref.onClickDockButton,
       onChangeSize = _ref.onChangeSize;
   React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
-      if (event.ctrlKey && event.altKey && event.code === 'KeyS') {
-        onChangeSize(sizeSmall);
-      } else if (event.ctrlKey && event.altKey && event.code === 'KeyM') {
-        onChangeSize(sizeMedium);
-      } else if (event.ctrlKey && event.altKey && event.code === 'KeyL') {
-        onChangeSize(sizeLarge);
+      if (shortcutsEnabled) {
+        if (event.ctrlKey && event.altKey && event.code === 'KeyS') {
+          onChangeSize(sizeSmall);
+        } else if (event.ctrlKey && event.altKey && event.code === 'KeyM') {
+          onChangeSize(sizeMedium);
+        } else if (event.ctrlKey && event.altKey && event.code === 'KeyL') {
+          onChangeSize(sizeLarge);
+        }
       }
     };
 
@@ -9522,7 +9948,7 @@ var HeaderOptions = function HeaderOptions(_ref) {
     return function () {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [onChangeSize]);
+  }, [onChangeSize, shortcutsEnabled]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomTooltip, {
     title: "small"
   }, /*#__PURE__*/React.createElement(IconButton, {
@@ -9746,9 +10172,18 @@ var layerManagerStyle = {
   }
 };
 var returnCorrectSize = function returnCorrectSize(sizeResult) {
-  if (sizeResult === 'sizeSmall') return sizeSmall;
-  if (sizeResult === 'sizeMedium') return sizeMedium;
-  if (sizeResult === 'sizeLarge') return sizeLarge;
+  if (sizeResult === 'sizeSmall') {
+    return sizeSmall;
+  }
+
+  if (sizeResult === 'sizeMedium') {
+    return sizeMedium;
+  }
+
+  if (sizeResult === 'sizeLarge') {
+    return sizeLarge;
+  }
+
   return sizeLarge;
 };
 
@@ -9903,11 +10338,18 @@ var DimensionSelect = function DimensionSelect(_ref) {
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, []);
-  if (!layerDimensions.length || !layerId) return null;
+
+  if (!layerDimensions.length || !layerId) {
+    return null;
+  }
 
   var getValuesToDisplay = function getValuesToDisplay() {
     var activeWMJSDim = getWMJSDimensionForLayerAndDimension(layerId, activeDimName) || getWMJSDimensionForLayerAndDimension(layerId, layerDimensions[0].name);
-    if (!activeWMJSDim) return null;
+
+    if (!activeWMJSDim) {
+      return null;
+    }
+
     var availableDimValues = [];
 
     for (var j = 0; j < activeWMJSDim.size(); j += 1) {
@@ -9921,11 +10363,18 @@ var DimensionSelect = function DimensionSelect(_ref) {
   };
 
   var valuesToDisplay = getValuesToDisplay();
-  if (valuesToDisplay === null) return null;
+
+  if (valuesToDisplay === null) {
+    return null;
+  }
+
   var activeDim = layerDimensions.find(function (dim) {
     return dim.name === activeDimName;
   });
-  if (!activeDim) return null;
+
+  if (!activeDim) {
+    return null;
+  }
 
   var selectDimensionValue = function selectDimensionValue(event) {
     event.stopPropagation();
@@ -9956,7 +10405,11 @@ var DimensionSelect = function DimensionSelect(_ref) {
   var dimValueCurrentIndex = valuesToDisplay.findIndex(function (value) {
     return value === activeDim.currentValue;
   });
-  if (dimValueCurrentIndex === -1) return null;
+
+  if (dimValueCurrentIndex === -1) {
+    return null;
+  }
+
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     direction: "row",
@@ -10206,7 +10659,9 @@ var OpacitySelect = function OpacitySelect(_ref) {
     }
   }, [anchorEl]);
   var onMouseEnter = React.useCallback(function () {
-    if (!isOpen) setTooltipOpen(true);
+    if (!isOpen) {
+      setTooltipOpen(true);
+    }
   }, [isOpen, setTooltipOpen]);
   var onMouseLeave = React.useCallback(function () {
     setTooltipOpen(false);
@@ -10438,15 +10893,15 @@ var ActivateLayer = function ActivateLayer(_ref) {
     inputProps: {
       IconComponent: function IconComponent() {
         return null;
-      }
+      },
+      tabIndex: -1
     },
     value: isActive ? 'Both' : 'None',
     sx: {
-      '&& .MuiOutlinedInput-input': {
-        padding: '0'
-      },
-      '&&& .MuiInput-input': {
-        paddingRight: 0
+      '&& .MuiInput-input': {
+        paddingRight: '2px',
+        paddingLeft: '2px',
+        backgroundColor: 'inherit'
       }
     },
     renderValue: function renderValue(optionSelected) {
@@ -10484,8 +10939,6 @@ var AutoUpdateButton$1 = function AutoUpdateButton(_ref2) {
       isActive = _ref2.isActive,
       isEnabled = _ref2.isEnabled;
   var style = {
-    backgroundColor: isActive ? 'geowebColors.buttons.primary.active.fill' : 'transparent!important',
-    borderRadius: '5px',
     color: getIconColor(isActive, isEnabled)
   };
   var Icon = isActive ? /*#__PURE__*/React.createElement(Both, {
@@ -10498,9 +10951,10 @@ var AutoUpdateButton$1 = function AutoUpdateButton(_ref2) {
     "aria-label": "Auto update ".concat(optionSelected),
     sx: {
       '&.MuiButtonBase-root': {
-        backgroundColor: 'transparent'
+        backgroundColor: 'inherit'
       }
-    }
+    },
+    active: isActive
   }, Icon);
 };
 
@@ -10603,16 +11057,18 @@ var LayerRow = function LayerRow(_ref) {
         padding: 0
       }
     },
-    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, dragHandle, layerEnableLayout || /*#__PURE__*/React__default.createElement(EnableButton, {
+    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, dragHandle, layerEnableLayout || /*#__PURE__*/React__default.createElement(ManagerButton, {
       isEnabled: layer.enabled,
-      title: layer.name,
-      onChangeEnableLayer: function onChangeEnableLayer() {
+      tooltipTitle: layer.name,
+      onClick: function onClick(event) {
+        event.stopPropagation();
         onLayerEnable({
           layerId: layerId,
           enabled: !layer.enabled
         });
       },
-      id: "enableButton-medium"
+      "data-testid": "enableButton-medium",
+      icon: isEnabled ? /*#__PURE__*/React__default.createElement(Visibility, null) : /*#__PURE__*/React__default.createElement(VisibilityOff, null)
     }), layerActiveLayout || /*#__PURE__*/React__default.createElement(ActivateLayer, {
       onChange: onClickRow,
       isActive: false,
@@ -10674,26 +11130,31 @@ var LayerRow = function LayerRow(_ref) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     sx: {}
-  }, layerDeleteLayout || /*#__PURE__*/React__default.createElement(ManagerDeleteButton, {
+  }, layerDeleteLayout || /*#__PURE__*/React__default.createElement(ManagerButton, {
     tooltipTitle: "Delete",
-    onClickDelete: function onClickDelete() {
+    onClick: function onClick() {
       onLayerDelete({
         mapId: mapId,
         layerId: layerId
       });
-    }
+    },
+    icon: /*#__PURE__*/React__default.createElement(Delete, null),
+    "data-testid": "deleteButton"
   }))))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: columnClasses.column1
-  }, dragHandle, layerEnableLayout || /*#__PURE__*/React__default.createElement(EnableButton, {
+  }, dragHandle, layerEnableLayout || /*#__PURE__*/React__default.createElement(ManagerButton, {
     isEnabled: layer.enabled,
-    title: layer.name,
-    onChangeEnableLayer: function onChangeEnableLayer() {
+    tooltipTitle: layer.name,
+    onClick: function onClick(event) {
+      event.stopPropagation();
       onLayerEnable({
         layerId: layerId,
         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, {
     onChange: onClickRow,
     isActive: false,
@@ -10760,14 +11221,16 @@ var LayerRow = function LayerRow(_ref) {
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: columnClasses.column6
-  }, layerDeleteLayout || /*#__PURE__*/React__default.createElement(ManagerDeleteButton, {
+  }, layerDeleteLayout || /*#__PURE__*/React__default.createElement(ManagerButton, {
     tooltipTitle: "Delete",
-    onClickDelete: function onClickDelete() {
+    onClick: function onClick() {
       onLayerDelete({
         mapId: mapId,
         layerId: layerId
       });
-    }
+    },
+    icon: /*#__PURE__*/React__default.createElement(Delete, null),
+    "data-testid": "deleteButton"
   }), layerMenuLayout || /*#__PURE__*/React__default.createElement(LayerManagerMenuButton, {
     mapId: mapId,
     layerId: layerId,
@@ -10811,16 +11274,18 @@ var DeleteLayerConnect = function DeleteLayerConnect(_ref) {
   var isLayerEnabled = useSelector(function (store) {
     return getLayerEnabled(store, layerId);
   });
-  return /*#__PURE__*/React.createElement(ManagerDeleteButton, {
+  return /*#__PURE__*/React.createElement(ManagerButton, {
     tooltipTitle: "Delete",
-    onClickDelete: function onClickDelete() {
+    onClick: function onClick() {
       layerDelete({
         mapId: mapId,
         layerId: layerId,
         layerIndex: layerIndex
       });
     },
-    isEnabled: isLayerEnabled
+    isEnabled: isLayerEnabled,
+    icon: /*#__PURE__*/React.createElement(Delete, null),
+    "data-testid": "deleteButton"
   });
 };
 
@@ -10859,26 +11324,32 @@ var EnableLayerConnect = function EnableLayerConnect(_ref) {
       origin: LayerActionOrigin.layerManager
     }));
   }, [dispatch, mapId]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EnableButton, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ManagerButton, {
     isEnabled: isEnabled,
-    title: "Toggle visibility",
-    onChangeEnableLayer: function onChangeEnableLayer(enabled) {
+    tooltipTitle: "Toggle visibility",
+    onClick: function onClick(event) {
+      event.stopPropagation();
       layerChangeEnabled({
         layerId: layerId,
-        enabled: enabled
+        enabled: !isEnabled
       });
     },
-    className: "enable-btn"
-  }), /*#__PURE__*/React.createElement(EnableButton, {
+    className: "enable-btn",
+    icon: isEnabled ? /*#__PURE__*/React.createElement(Visibility, null) : /*#__PURE__*/React.createElement(VisibilityOff, null),
+    "data-testid": "enableButton"
+  }), /*#__PURE__*/React.createElement(ManagerButton, {
     isEnabled: isEnabled,
-    title: layerName,
-    onChangeEnableLayer: function onChangeEnableLayer(enabled) {
+    tooltipTitle: layerName,
+    onClick: function onClick(event) {
+      event.stopPropagation();
       layerChangeEnabled({
         layerId: layerId,
-        enabled: enabled
+        enabled: !isEnabled
       });
     },
-    className: "enable-btn-mini"
+    className: "enable-btn-mini",
+    icon: isEnabled ? /*#__PURE__*/React.createElement(Visibility, null) : /*#__PURE__*/React.createElement(VisibilityOff, null),
+    "data-testid": "enableButton"
   }));
 };
 
@@ -11029,86 +11500,6 @@ var RenderStylesConnect = function RenderStylesConnect(_ref) {
   });
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * */
-/**
- * Converts webmapjs node structure to LayerTree
- * @param nodesToRecur THe WebMapJS node structure from service.getNodes();
- */
-
-var recurseNodes = function recurseNodes(nodesToRecur) {
-  var newLayerTreeObj = {
-    leaf: nodesToRecur.leaf,
-    name: nodesToRecur.name,
-    title: nodesToRecur.title,
-    path: nodesToRecur.path || [],
-    children: [],
-    keywords: nodesToRecur.keywords || [],
-    "abstract": nodesToRecur["abstract"] || '',
-    styles: nodesToRecur.styles || [],
-    dimensions: nodesToRecur.dimensions || [],
-    geographicBoundingBox: nodesToRecur.geographicBoundingBox || null
-  };
-
-  if (nodesToRecur.children) {
-    for (var j = 0; j < nodesToRecur.children.length; j += 1) {
-      newLayerTreeObj.children.push(recurseNodes(nodesToRecur.children[j]));
-    }
-  }
-
-  return newLayerTreeObj;
-};
-/**
- * Returns a promise with a hierarchical tree of layers from the WMS GetCapabilities document.
- * @param serviceUrl The URL of the WMS service
- * @param {boolean} forceReload **optional** forceReload: boolean, true will force the layers to be reloaded from the service, defaults to false
- */
-
-var getLayersFromService = function getLayersFromService(serviceUrl) {
-  var forceReload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  return new Promise(function (resolve, reject) {
-    var serviceObject = WMGetServiceFromStore(serviceUrl);
-    serviceObject.getNodes(function (nodes) {
-      // TODO: Maarten Plieger, 2022-11-02:  Harmonize types and use correct types: https://gitlab.com/opengeoweb/opengeoweb/-/issues/2817
-      var layerTree = recurseNodes(nodes);
-      resolve(layerTree);
-    }, function (error) {
-      reject(new Error(error));
-    }, forceReload);
-  });
-};
-/**
- * Returns a promise with an array of flattened layerobjects from the WMS GetCapabilities document.
- * @param serviceUrl The URL of the WMS service
- * @param {boolean} forceReload **optional** forceReload: boolean, true will force the layers to be reloaded from the service, defaults to false
- */
-
-var getLayersFlattenedFromService = function getLayersFlattenedFromService(serviceUrl) {
-  var forceReload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  return new Promise(function (resolve, reject) {
-    var serviceObject = WMGetServiceFromStore(serviceUrl);
-    serviceObject.getLayerObjectsFlat(function (layers) {
-      resolve(layers);
-    }, function (error) {
-      reject(new Error(error));
-    }, forceReload);
-  });
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -11294,8 +11685,9 @@ var ActivateLayerConnect = function ActivateLayerConnect(_ref) {
   var setActiveLayerId = React.useCallback(function (_ref2) {
     var layerId = _ref2.layerId,
         mapId = _ref2.mapId;
-    return dispatch(mapActions$1.setActiveLayerId({
-      layerId: layerId,
+    return dispatch(mapActions$1.setAutoLayerId({
+      autoTimeStepLayerId: layerId,
+      autoUpdateLayerId: layerId,
       mapId: mapId,
       origin: LayerActionOrigin.layerManager
     }));
@@ -11446,11 +11838,10 @@ var DragHandle = function DragHandle(_ref) {
   return /*#__PURE__*/React__default.createElement(ManagerButton, {
     tooltipTitle: tooltipTitle,
     icon: /*#__PURE__*/React__default.createElement(DragHandle$1, null),
-    testId: "dragHandle".concat(index !== undefined ? "-".concat(index) : ''),
+    "data-testid": "dragHandle".concat(index !== undefined ? "-".concat(index) : ''),
     className: "handle",
     tabIndex: -1,
     isEnabled: !isDisabled,
-    disableFocusRipple: true,
     disableTouchRipple: true,
     disabled: isDisabled,
     isAccessible: true,
@@ -11502,7 +11893,10 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
   var onStart = React.useCallback(function (_ref3) {
     var oldIndex = _ref3.oldIndex;
     setActiveDragIndex(oldIndex);
-    if (Sortable.ghost) Sortable.ghost.style.opacity = '1';
+
+    if (Sortable.ghost) {
+      Sortable.ghost.style.opacity = '1';
+    }
   }, []);
   var onEnd = React.useCallback(function () {
     if (activeDragIndex !== null) {
@@ -12092,7 +12486,9 @@ var ConnectedTree = function ConnectedTree(_ref) {
     onClickLayer: function onClickLayer(serviceURL, layerName) {
       if (layerType === LayerType.baseLayer) {
         addBaseLayer(serviceURL, layerName);
-      } else addMapLayer(serviceURL, layerName);
+      } else {
+        addMapLayer(serviceURL, layerName);
+      }
     },
     highlightedLayers: loadedLayers
   });
@@ -12226,9 +12622,16 @@ var defaultConfigurations = /*#__PURE__*/Object.freeze({
 });
 
 var validateServiceUrl$1 = function validateServiceUrl(url) {
-  if (url === '' || url === null || typeof url === 'undefined') return false;
+  if (url === '' || url === null || typeof url === 'undefined') {
+    return false;
+  }
+
   var matcher = /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|[0-9a-zA-Z]+[:?\d]*)\S*$/;
-  if (!matcher.test(url)) return false;
+
+  if (!matcher.test(url)) {
+    return false;
+  }
+
   return true;
 };
 
@@ -12541,6 +12944,54 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
   })));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * */
+var areShortcutsEnabled = function areShortcutsEnabled(activeMapId, mapId, floatingLmFocused, isDockedLayerManager) {
+  if (floatingLmFocused && !isDockedLayerManager) {
+    return true;
+  }
+
+  if (activeMapId === mapId && isDockedLayerManager && !floatingLmFocused) {
+    return true;
+  }
+
+  return false;
+};
+
+var HeaderOptionsConnect = function HeaderOptionsConnect(_ref) {
+  var isDockedLayerManager = _ref.isDockedLayerManager,
+      mapId = _ref.mapId,
+      onClickDockButton = _ref.onClickDockButton,
+      onChangeSize = _ref.onChangeSize;
+  var activeMapId = useSelector(function (store) {
+    return getActiveWindowId(store);
+  });
+  var floatingLmFocused = useSelector(function (store) {
+    return getDialogFocused(store, DialogTypes.LayerManager);
+  });
+  var shortcutsEnabled = areShortcutsEnabled(activeMapId, mapId, floatingLmFocused, isDockedLayerManager);
+  return /*#__PURE__*/React.createElement(HeaderOptions, {
+    isDockedLayerManager: isDockedLayerManager,
+    shortcutsEnabled: shortcutsEnabled,
+    onClickDockButton: onClickDockButton,
+    onChangeSize: onChangeSize
+  });
+};
+
 var styles$2 = {
   layerRowContainer: {
     position: 'relative',
@@ -12596,7 +13047,9 @@ var LayerManager = function LayerManager(_ref) {
       startPosition = _ref$startPosition === void 0 ? {
     top: 85,
     left: 50
-  } : _ref$startPosition;
+  } : _ref$startPosition,
+      _ref$setFocused = _ref.setFocused,
+      setFocused = _ref$setFocused === void 0 ? function () {} : _ref$setFocused;
   var minSize = {
     width: 100,
     height: 126
@@ -12626,11 +13079,18 @@ var LayerManager = function LayerManager(_ref) {
     bounds: bounds,
     "data-testid": "layerManagerWindow",
     onMouseDown: onMouseDown,
+    onFocus: function onFocus() {
+      return setFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setFocused(false);
+    },
     order: order,
     source: source,
     leftHeaderComponent: leftHeaderComponent,
-    rightHeaderComponent: /*#__PURE__*/React.createElement(HeaderOptions, {
+    rightHeaderComponent: /*#__PURE__*/React.createElement(HeaderOptionsConnect, {
       isDockedLayerManager: isDockedLayerManager,
+      mapId: mapId,
       onClickDockButton: onToggleDock,
       onChangeSize: function onChangeSize(_ref2) {
         var width = _ref2.width;
@@ -12705,8 +13165,8 @@ var LayerManager = function LayerManager(_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 useSetupDialog = function useSetupDialog(dialogType) {
   var source = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
@@ -12773,6 +13233,14 @@ var useSetupDialog = function useSetupDialog(dialogType) {
   var uiError = useSelector(function (store) {
     return getDialogError(store, dialogType);
   });
+
+  var setFocused = function setFocused(focused) {
+    dispatch(uiActions.setDialogFocused({
+      type: dialogType,
+      focused: focused
+    }));
+  };
+
   return {
     setDialogOrder: setDialogOrder,
     dialogOrder: dialogOrder,
@@ -12780,63 +13248,41 @@ var useSetupDialog = function useSetupDialog(dialogType) {
     uiSource: uiSource,
     isDialogOpen: isDialogOpen,
     uiIsLoading: uiIsLoading,
-    uiError: uiError
+    uiError: uiError,
+    setFocused: setFocused
   };
 };
 
+var getServicesToLoad = function getServicesToLoad(services) {
+  return services.map(function (service) {
+    var wmService = WMGetServiceFromStore(service.url);
+    var scope = service.scope ? service.scope : 'system';
+    return {
+      id: wmService.id,
+      name: service.name,
+      serviceUrl: service.url,
+      scope: scope,
+      "abstract": service["abstract"] || wmService["abstract"]
+    };
+  });
+};
 var useFetchServices = function useFetchServices(dialogType) {
   var preloadedServices = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : preloadedDefaultMapServices;
   var dispatch = useDispatch();
-
-  var _useIsMounted = useIsMounted(),
-      isMounted = _useIsMounted.isMounted;
-
   var isOpenInStore = useSelector(function (store) {
     return getisDialogOpen(store, dialogType);
   });
-  var serviceSetLayers = React.useCallback(function (payload) {
-    dispatch(serviceActions.serviceSetLayers(payload));
-  }, [dispatch]);
-  var addFiltersAndActiveServices = React.useCallback(function (payload) {
-    dispatch(layerSelectActions.addFiltersAndActiveServices(payload));
+  var fetchInitialServices = React.useCallback(function (services) {
+    dispatch(serviceActions.fetchInitialServices({
+      services: services
+    }));
   }, [dispatch]);
   React.useEffect(function () {
     if (isOpenInStore && preloadedServices && preloadedServices.length > 0) {
-      mergePresetsAndUserAddedServices(preloadedServices, getUserAddedServices()).forEach(function (service) {
-        var wmService = WMGetServiceFromStore(service.url);
-        var scope = service.scope ? service.scope : 'system';
-
-        if (isMounted.current) {
-          addFiltersAndActiveServices({
-            serviceId: wmService.id,
-            serviceName: service.name,
-            serviceUrl: service.url,
-            keywords: [],
-            scope: scope,
-            groups: [],
-            "abstract": service["abstract"] || wmService["abstract"],
-            isLoading: true
-          });
-        }
-
-        getLayersFlattenedFromService(service.url).then(function (layers) {
-          if (isMounted.current) {
-            serviceSetLayers({
-              id: wmService.id,
-              name: service.name,
-              serviceUrl: service.url,
-              layers: layers,
-              scope: scope,
-              // first try to load the user abstract, otherwise the service abstract
-              "abstract": service["abstract"] || wmService["abstract"]
-            });
-          }
-        })["catch"](function () {
-          return null;
-        });
-      });
+      var allServicesToLoad = mergePresetsAndUserAddedServices(preloadedServices, getUserAddedServices());
+      fetchInitialServices(getServicesToLoad(allServicesToLoad));
     }
-  }, [addFiltersAndActiveServices, isMounted, isOpenInStore, preloadedServices, serviceSetLayers]);
+  }, [isOpenInStore, preloadedServices, fetchInitialServices]);
 };
 var mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices(presets, userAddedServices) {
   return Object.values(Object.assign(Object.assign({}, presets.reduce(function (byUrl, preset) {
@@ -12857,8 +13303,8 @@ var mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices
  * 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 dialogType = DialogTypes.LayerManager;
 /**
@@ -12894,7 +13340,8 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
       isDialogOpen = _useSetupDialog.isDialogOpen,
       uiSource = _useSetupDialog.uiSource,
       uiIsLoading = _useSetupDialog.uiIsLoading,
-      uiError = _useSetupDialog.uiError;
+      uiError = _useSetupDialog.uiError,
+      setFocused = _useSetupDialog.setFocused;
 
   useFetchServices(dialogType, preloadedMapServices);
 
@@ -12922,7 +13369,8 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
     leftHeaderComponent: leftHeaderComponent,
     isLoading: uiIsLoading,
     error: uiError,
-    onToggleDock: onToggleDock
+    onToggleDock: onToggleDock,
+    setFocused: setFocused
   });
 };
 
@@ -13099,17 +13547,23 @@ var SearchFieldButtonContainer = function SearchFieldButtonContainer(_ref) {
     }, /*#__PURE__*/React__default.createElement(Clear, null)));
   };
 
-  if (isURL(localSearchString)) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      marginRight: '15px'
-    }
-  }, /*#__PURE__*/React__default.createElement(ClearButton, null)), /*#__PURE__*/React__default.createElement(Button, {
-    variant: "tertiary",
-    onClick: function onClick() {
-      return setPopupIsOpen(true);
-    }
-  }, "Save"));
-  if (localSearchString) return /*#__PURE__*/React__default.createElement(ClearButton, null);
+  if (isURL(localSearchString)) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React__default.createElement(ClearButton, null)), /*#__PURE__*/React__default.createElement(Button, {
+      variant: "tertiary",
+      onClick: function onClick() {
+        return setPopupIsOpen(true);
+      }
+    }, "Save"));
+  }
+
+  if (localSearchString) {
+    return /*#__PURE__*/React__default.createElement(ClearButton, null);
+  }
+
   return /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: "Search",
     placement: "top"
@@ -13139,7 +13593,12 @@ var SearchField = function SearchField(_ref) {
 
   var handleChange = function handleChange(text) {
     setLocalSearchString(text);
-    if (!isURL(text)) setSearchFilterDebounced(text);else if (searchFilter) setSearchFilterDebounced('');
+
+    if (!isURL(text)) {
+      setSearchFilterDebounced(text);
+    } else if (searchFilter) {
+      setSearchFilterDebounced('');
+    }
   };
 
   React.useEffect(function () {
@@ -13166,7 +13625,10 @@ var SearchField = function SearchField(_ref) {
   }, [urlIsValid, localSearchString, onOpenServicePopup]); // mirror store unless typing a URL
 
   React.useEffect(function () {
-    if (isURL(localSearchString)) return;
+    if (isURL(localSearchString)) {
+      return;
+    }
+
     setLocalSearchString(searchFilter); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchFilter]);
   return /*#__PURE__*/React.createElement(TextField, {
@@ -13830,13 +14292,19 @@ var layerSelectColumnsSmall = {
 };
 var breakpoint = 500;
 var widthToColumns = function widthToColumns(width) {
-  if (width <= breakpoint) return layerSelectColumnsSmall;
+  if (width <= breakpoint) {
+    return layerSelectColumnsSmall;
+  }
+
   return layerSelectColumnsLarge;
 };
 var rowHeightLarge = 68;
 var rowHeightSmall = 136;
 var widthToRowHeight = function widthToRowHeight(width) {
-  if (width <= breakpoint) return rowHeightSmall;
+  if (width <= breakpoint) {
+    return rowHeightSmall;
+  }
+
   return rowHeightLarge;
 };
 var sortByService = function sortByService(serviceObj) {
@@ -14511,7 +14979,9 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
     sx: styles$1.servicesContainer,
     "data-testid": "ServiceDialog",
     onKeyDown: function onKeyDown(event) {
-      if (event.key !== 'Escape') event.stopPropagation();
+      if (event.key !== 'Escape') {
+        event.stopPropagation();
+      }
     },
     tabIndex: -1,
     ref: dialogRef
@@ -14572,7 +15042,11 @@ var Rows = function Rows(_ref2) {
     var foundService = selectedLayers.find(function (object) {
       return object.service === serviceUrl;
     });
-    if (foundService) return true;
+
+    if (foundService) {
+      return true;
+    }
+
     return false;
   };
 
@@ -14785,7 +15259,11 @@ var getService = function getService(services, serviceUrl) {
 
     return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceUrl) === serviceUrl;
   });
-  if (serviceIndex < 0) return null;
+
+  if (serviceIndex < 0) {
+    return null;
+  }
+
   return services[serviceIds[serviceIndex]];
 };
 
@@ -15411,7 +15889,10 @@ var LayerInfoDialogConnect = function LayerInfoDialogConnect() {
       uiSource = _useSetupDialog.uiSource,
       isDialogOpen = _useSetupDialog.isDialogOpen;
 
-  if (!layer) return null;
+  if (!layer) {
+    return null;
+  }
+
   return /*#__PURE__*/React__default.createElement(LayerInfoDialog, {
     isOpen: isDialogOpen,
     onClose: onCloseDialog,
@@ -16298,6 +16779,13 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
   var sliderValue = managedValue !== null ? values.findIndex(function (v) {
     return v === managedValue;
   }) : currentIndex;
+
+  var upDownNavigation = function upDownNavigation(event) {
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.metaKey || event.ctrlKey) {
+      event.preventDefault();
+    }
+  };
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
     "data-testid": "slider-dimensionSelect",
     sx: {
@@ -16323,9 +16811,13 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
     } : {},
     disabled: isDisabled,
     value: sliderValue,
+    onKeyDown: upDownNavigation,
     onChange: function onChange(e, val) {
       onChangeDimensionValue(values[val].toString());
-      if (!managedValue) setCurrentIndex(val);
+
+      if (!managedValue) {
+        setCurrentIndex(val);
+      }
     }
   }))), /*#__PURE__*/React.createElement(CustomTooltip, {
     title: layerTitle
@@ -16357,7 +16849,10 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
 var marksByDimension = function marksByDimension(dim) {
-  if (!dim || !dim.name) return [];
+  if (!dim || !dim.name) {
+    return [];
+  }
+
   var dimCnf = dimensionConfig.find(function (cnf) {
     return cnf.name === dim.name;
   });
@@ -16383,7 +16878,9 @@ var marksByDimension = function marksByDimension(dim) {
 
 var handleMomentISOString = function handleMomentISOString(dateIn) {
   /* Try to fix the timestrings generated by moment js made with moment.toISOString() */
-  if (!dateIn) return null;
+  if (!dateIn) {
+    return null;
+  }
 
   if (dateIn.length > 20) {
     var fixedDate = dateIn.substring(0, 19);
@@ -17088,7 +17585,10 @@ var TimeStepButton = function TimeStepButton(_ref) {
   };
 
   var handleToggleTimeStep = function handleToggleTimeStep() {
-    if (isTimestepAuto) return;
+    if (isTimestepAuto) {
+      return;
+    }
+
     onToggleTimestepAuto();
     timeStepFromLayer && onChangeTimeStep(timeStepFromLayer, MapActionOrigin.map);
   };
@@ -17557,32 +18057,53 @@ var getStepPxLineHeight = function getStepPxLineHeight(scale, timestep) {
     switch (scale) {
       case Scale.Hour:
         {
-          if (rem === 0) return TICK_MARK_HEIGHT_PRIMARY; // 15 min subdivisions
+          if (rem === 0) {
+            return TICK_MARK_HEIGHT_PRIMARY;
+          } // 15 min subdivisions
+
+
+          if (rem % (15 * 60) === 0) {
+            return TICK_MARK_HEIGHT_SECONDARY;
+          }
 
-          if (rem % (15 * 60) === 0) return TICK_MARK_HEIGHT_SECONDARY;
           return TICK_MARK_HEIGHT_TERTIARY;
         }
 
       case Scale.Hours3:
         {
-          if (rem === 0) return TICK_MARK_HEIGHT_PRIMARY;
+          if (rem === 0) {
+            return TICK_MARK_HEIGHT_PRIMARY;
+          }
+
           return TICK_MARK_HEIGHT_TERTIARY;
         }
 
       case Scale.Hours6:
         {
-          if (rem === 0) return TICK_MARK_HEIGHT_PRIMARY; // 3 hour subdivisions
+          if (rem === 0) {
+            return TICK_MARK_HEIGHT_PRIMARY;
+          } // 3 hour subdivisions
+
+
+          if (rem % (3 * 60 * 60) === 0) {
+            return TICK_MARK_HEIGHT_SECONDARY;
+          }
 
-          if (rem % (3 * 60 * 60) === 0) return TICK_MARK_HEIGHT_SECONDARY;
           return TICK_MARK_HEIGHT_TERTIARY;
         }
 
       default:
         {
           // Scale.Day
-          if (rem === 0) return TICK_MARK_HEIGHT_PRIMARY; // 6 hour subdivisions
+          if (rem === 0) {
+            return TICK_MARK_HEIGHT_PRIMARY;
+          } // 6 hour subdivisions
+
+
+          if (rem % (6 * 60 * 60) === 0) {
+            return TICK_MARK_HEIGHT_SECONDARY;
+          }
 
-          if (rem % (6 * 60 * 60) === 0) return TICK_MARK_HEIGHT_SECONDARY;
           return TICK_MARK_HEIGHT_TERTIARY;
         }
     }
@@ -17592,7 +18113,10 @@ var getStepPxLineHeight = function getStepPxLineHeight(scale, timestep) {
         {
           var weekday = moment.unix(timestep).utc().isoWeekday(); // momentjs isoWeekdays range from 1(Monday) to 7(Sunday)
 
-          if (weekday === 1) return TICK_MARK_HEIGHT_PRIMARY;
+          if (weekday === 1) {
+            return TICK_MARK_HEIGHT_PRIMARY;
+          }
+
           return TICK_MARK_HEIGHT_TERTIARY;
         }
 
@@ -17600,15 +18124,24 @@ var getStepPxLineHeight = function getStepPxLineHeight(scale, timestep) {
         {
           var month = moment.unix(timestep).utc().month(); // momentjs months are zero indexed
 
-          if (month === 0) return TICK_MARK_HEIGHT_PRIMARY;
-          if (month % 3 === 0) return TICK_MARK_HEIGHT_SECONDARY;
+          if (month === 0) {
+            return TICK_MARK_HEIGHT_PRIMARY;
+          }
+
+          if (month % 3 === 0) {
+            return TICK_MARK_HEIGHT_SECONDARY;
+          }
+
           return TICK_MARK_HEIGHT_TERTIARY;
         }
 
       case Scale.Minutes5:
         {
           // add primary line on day change
-          if (timestep % (60 * 60 * 24) === 0) return TICK_MARK_HEIGHT_PRIMARY;
+          if (timestep % (60 * 60 * 24) === 0) {
+            return TICK_MARK_HEIGHT_PRIMARY;
+          }
+
           return TICK_MARK_HEIGHT_TERTIARY;
         }
 
@@ -17626,31 +18159,52 @@ var getStepPxLineHeightForDataScale = function getStepPxLineHeightForDataScale(s
   switch (scale) {
     case Scale.Hour:
       {
-        if (rem === 0) return TICK_MARK_HEIGHT_PRIMARY; // 15 min subdivisions
+        if (rem === 0) {
+          return TICK_MARK_HEIGHT_PRIMARY;
+        } // 15 min subdivisions
+
+
+        if (rem % (15 * 60) === 0) {
+          return TICK_MARK_HEIGHT_SECONDARY;
+        }
 
-        if (rem % (15 * 60) === 0) return TICK_MARK_HEIGHT_SECONDARY;
         return TICK_MARK_HEIGHT_TERTIARY;
       }
 
     case Scale.Hours3:
       {
-        if (rem === 0) return TICK_MARK_HEIGHT_PRIMARY;
+        if (rem === 0) {
+          return TICK_MARK_HEIGHT_PRIMARY;
+        }
+
         return TICK_MARK_HEIGHT_TERTIARY;
       }
 
     case Scale.Hours6:
       {
-        if (rem === 0) return TICK_MARK_HEIGHT_PRIMARY; // 3 hour subdivisions
+        if (rem === 0) {
+          return TICK_MARK_HEIGHT_PRIMARY;
+        } // 3 hour subdivisions
+
+
+        if (rem % (3 * 60 * 60) === 0) {
+          return TICK_MARK_HEIGHT_SECONDARY;
+        }
 
-        if (rem % (3 * 60 * 60) === 0) return TICK_MARK_HEIGHT_SECONDARY;
         return TICK_MARK_HEIGHT_TERTIARY;
       }
 
     case Scale.Day:
       {
-        if (rem === 0) return TICK_MARK_HEIGHT_PRIMARY; // 6 hour subdivisions
+        if (rem === 0) {
+          return TICK_MARK_HEIGHT_PRIMARY;
+        } // 6 hour subdivisions
+
+
+        if (rem % (6 * 60 * 60) === 0) {
+          return TICK_MARK_HEIGHT_SECONDARY;
+        }
 
-        if (rem % (6 * 60 * 60) === 0) return TICK_MARK_HEIGHT_SECONDARY;
         return TICK_MARK_HEIGHT_TERTIARY;
       }
 
@@ -17658,7 +18212,10 @@ var getStepPxLineHeightForDataScale = function getStepPxLineHeightForDataScale(s
       {
         var weekday = moment.unix(timestep).utc().isoWeekday(); // momentjs isoWeekdays range from 1(Monday) to 7(Sunday)
 
-        if (weekday === 1) return TICK_MARK_HEIGHT_PRIMARY;
+        if (weekday === 1) {
+          return TICK_MARK_HEIGHT_PRIMARY;
+        }
+
         return TICK_MARK_HEIGHT_TERTIARY;
       }
 
@@ -17666,14 +18223,20 @@ var getStepPxLineHeightForDataScale = function getStepPxLineHeightForDataScale(s
       {
         var month = moment.unix(timestep).utc().month(); // momentjs months are zero indexed
 
-        if (month === 0) return TICK_MARK_HEIGHT_PRIMARY;
+        if (month === 0) {
+          return TICK_MARK_HEIGHT_PRIMARY;
+        }
+
         return TICK_MARK_HEIGHT_TERTIARY;
       }
 
     case Scale.Minutes5:
       {
         // add primary line on day change
-        if (timestep % (60 * 60 * 24) === 0) return TICK_MARK_HEIGHT_PRIMARY;
+        if (timestep % (60 * 60 * 24) === 0) {
+          return TICK_MARK_HEIGHT_PRIMARY;
+        }
+
         return TICK_MARK_HEIGHT_TERTIARY;
       }
 
@@ -17713,7 +18276,10 @@ var drawTimeText = function drawTimeText(ctx, theme, stepPx, height, timeText, s
 };
 
 var drawUpperText = function drawUpperText(ctx, theme, newDate, stepPx, height, minOffset) {
-  if (stepPx <= 0) return;
+  if (stepPx <= 0) {
+    return;
+  }
+
   var ctx2 = ctx;
   var _theme$palette$geoweb2 = theme.palette.geowebColors.timeSlider.timelineText,
       fontSize = _theme$palette$geoweb2.fontSize,
@@ -18085,7 +18651,10 @@ var drawTimeScale = function drawTimeScale(context, theme, visibleTimeStart, vis
   } // draw date change texts
 
 
-  if (scale === Scale.Year && fundamentalScale === Scale.Year) return;
+  if (scale === Scale.Year && fundamentalScale === Scale.Year) {
+    return;
+  }
+
   var timestepUnit = getDateChangeTimestepUnit(fundamentalScale);
 
   var _getCustomRoundedStar3 = getCustomRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, timestepUnit),
@@ -18124,7 +18693,10 @@ var drawTimeScale = function drawTimeScale(context, theme, visibleTimeStart, vis
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var drawNeedle = function drawNeedle(context, theme, width, height, startTime, endTime, selectedTime) {
-  if (!selectedTime) return;
+  if (!selectedTime) {
+    return;
+  }
+
   var ctx = context;
   var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider,
       playerNeedlePlayer = _theme$palette$geoweb.playerNeedlePlayer,
@@ -18249,7 +18821,9 @@ var drawBackground = function drawBackground(context, theme, visibleTimeStart, v
   function drawNightOrAlternateTime() {
     var colorChangeTimesteps = getColorChangeTimesteps(scale, visibleTimeStart, visibleTimeEnd);
     colorChangeTimesteps.forEach(function (timestep, i, arr) {
-      if (i === 0) return;
+      if (i === 0) {
+        return;
+      }
 
       var _map = [arr[i - 1], timestep].map(function (timestep) {
         return timestampToPixelEdges(timestep, visibleTimeStart, visibleTimeEnd, canvasWidth);
@@ -18441,7 +19015,9 @@ function useAnimationTime(animationStartTime, animationEndTime, onSetAnimationSt
 
   }, [leftMarkerDragging, rightMarkerDragging, animationAreaDragging]);
   var handleAnimationDragging = useCallback(function (x) {
-    if (!localAnimationStartTime || !localAnimationEndTime) return;
+    if (!localAnimationStartTime || !localAnimationEndTime) {
+      return;
+    }
 
     var _map = [localAnimationStartTime, localAnimationEndTime].map(function (timestamp) {
       return timestampToPixel(timestamp, centerTime, canvasWidth, secondsPerPx);
@@ -18453,7 +19029,11 @@ function useAnimationTime(animationStartTime, animationEndTime, onSetAnimationSt
     if (leftMarkerDragging) {
       var mousePosition = leftMarkerPx + x;
       var rightAnimationPosition = rightMarkerPx - DRAG_AREA_WIDTH * 2;
-      if (mousePosition >= rightAnimationPosition || mousePosition <= 0) return; // eslint-disable-next-line no-param-reassign
+
+      if (mousePosition >= rightAnimationPosition || mousePosition <= 0) {
+        return;
+      } // eslint-disable-next-line no-param-reassign
+
 
       dragTooltipPosition.current = pixelsToLeft ? mousePosition + pixelsToLeft : mousePosition;
       var mouseTimeUnix = pixelToTimestamp(mousePosition, centerTime, canvasWidth, secondsPerPx);
@@ -18466,7 +19046,11 @@ function useAnimationTime(animationStartTime, animationEndTime, onSetAnimationSt
       var _mousePosition = rightMarkerPx + x;
 
       var leftAnimationPosition = leftMarkerPx + DRAG_AREA_WIDTH * 2;
-      if (leftAnimationPosition >= _mousePosition || _mousePosition >= canvasWidth) return; // eslint-disable-next-line no-param-reassign
+
+      if (leftAnimationPosition >= _mousePosition || _mousePosition >= canvasWidth) {
+        return;
+      } // eslint-disable-next-line no-param-reassign
+
 
       dragTooltipPosition.current = pixelsToLeft ? _mousePosition + pixelsToLeft : _mousePosition;
 
@@ -18627,7 +19211,9 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
   }, [canvasWidth, centerTime, dataEndTime, dataStartTime, onSetNewDate, secondsPerPx, setUnfilteredSelectedTime, timeStep, unfilteredSelectedTime]);
   React.useEffect(function () {
     var handleMouseMove = function handleMouseMove(event) {
-      if (event.movementX === 0) return;
+      if (event.movementX === 0) {
+        return;
+      }
 
       if (mouseDownInLegend) {
         var dragDistanceTime = event.movementX * secondsPerPx;
@@ -18712,7 +19298,9 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       isClickOrDrag.current = 'drag';
     }
 
-    if (selectedTimeDragging || leftMarkerDragging || rightMarkerDragging) return;
+    if (selectedTimeDragging || leftMarkerDragging || rightMarkerDragging) {
+      return;
+    }
 
     var _map5 = [localAnimationStartTime, localAnimationEndTime, selectedTime].map(function (timestamp) {
       return timestampToPixel(timestamp, centerTime, width, secondsPerPx);
@@ -18833,7 +19421,10 @@ var HideSliderButton = function HideSliderButton(_ref) {
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var onMouseMove = function onMouseMove(x, width, selectedTime, centerTime, secondsPerPx, mouseDownInTimeBox, isTimeBoxArea, setCursorStyle) {
-  if (!selectedTime || mouseDownInTimeBox) return;
+  if (!selectedTime || mouseDownInTimeBox) {
+    return;
+  }
+
   var selectedTimePx = timestampToPixel(selectedTime, centerTime, width, secondsPerPx);
 
   if (isTimeBoxArea(x, selectedTimePx)) {
@@ -18843,7 +19434,10 @@ var onMouseMove = function onMouseMove(x, width, selectedTime, centerTime, secon
   }
 };
 var onMouseDown = function onMouseDown(x, width, selectedTime, centerTime, secondsPerPx, isTimeBoxArea, setCursorStyle, setMouseDownInTimeBox) {
-  if (!selectedTime) return;
+  if (!selectedTime) {
+    return;
+  }
+
   var selectedTimePx = timestampToPixel(selectedTime, centerTime, width, secondsPerPx);
 
   if (isTimeBoxArea(x, selectedTimePx)) {
@@ -19017,12 +19611,16 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
   }, /*#__PURE__*/React__default.createElement(CanvasComponent, {
     ref: node,
     onMouseMove: function onMouseMove$1(x, y, event, width) {
-      if (!selectedTime) return;
+      if (!selectedTime) {
+        return;
+      }
 
       onMouseMove(x, width, selectedTime, centerTime, secondsPerPx, mouseDownInTimeBox, isTimeBoxArea, setCursorStyle);
     },
     onMouseDown: function onMouseDown$1(x, y, width) {
-      if (!selectedTime) return;
+      if (!selectedTime) {
+        return;
+      }
 
       onMouseDown(x, width, selectedTime, centerTime, secondsPerPx, isTimeBoxArea, setCursorStyle, setMouseDownInTimeBox);
     },
@@ -19286,11 +19884,11 @@ var TimeStepButtonComponent = function TimeStepButtonComponent(_ref) {
   var isTimestepAuto$1 = useSelector(function (store) {
     return isTimestepAuto(store, mapId);
   });
-  var activeLayerId = useSelector(function (store) {
-    return getActiveLayerId(store, mapId);
+  var autoTimeStepLayerId = useSelector(function (store) {
+    return getAutoTimeStepLayerId(store, mapId);
   });
   var activeLayerTimeDimension = useSelector(function (store) {
-    return getLayerTimeDimension(store, activeLayerId);
+    return getLayerTimeDimension(store, autoTimeStepLayerId);
   });
   var timeStepFromLayer = getActiveLayerTimeStep(activeLayerTimeDimension);
   var onToggleTimestepAuto = React.useCallback(function () {
@@ -19805,10 +20403,12 @@ var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBox
     isAutoUpdating: isAutoUpdating,
     unfilteredSelectedTime: unfilteredSelectedTime || selectedTime,
     setUnfilteredSelectedTime: function setUnfilteredSelectedTime(timeSliderUnfilteredSelectedTime) {
-      if (setTimeSliderUnfilteredSelectedTime) setTimeSliderUnfilteredSelectedTime({
-        timeSliderUnfilteredSelectedTime: timeSliderUnfilteredSelectedTime,
-        mapId: mapId
-      });
+      if (setTimeSliderUnfilteredSelectedTime) {
+        setTimeSliderUnfilteredSelectedTime({
+          timeSliderUnfilteredSelectedTime: timeSliderUnfilteredSelectedTime,
+          mapId: mapId
+        });
+      }
     },
     onSetNewDate: function onSetNewDate(newDate) {
       if (isAnimating) {
@@ -19829,14 +20429,14 @@ var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBox
 var TimeSliderCurrentTimeBoxConnect = connectRedux(TimeSliderCurrentTimeBoxConnectComponent);
 
 var useUpdateTimestep = function useUpdateTimestep(mapId) {
-  var activeLayerId = useSelector(function (store) {
-    return getActiveLayerId(store, mapId);
+  var autoTimeStepLayerId = useSelector(function (store) {
+    return getAutoTimeStepLayerId(store, mapId);
   });
   var isTimeStepAuto = useSelector(function (store) {
     return isTimestepAuto(store, mapId);
   });
   var timeDimension = useSelector(function (store) {
-    return getLayerTimeDimension(store, activeLayerId);
+    return getLayerTimeDimension(store, autoTimeStepLayerId);
   });
   var dispatch = useDispatch();
   React.useEffect(function () {
@@ -19847,7 +20447,7 @@ var useUpdateTimestep = function useUpdateTimestep(mapId) {
         timeStep: timeStep
       }));
     }
-  }, [activeLayerId, dispatch, isTimeStepAuto, mapId, timeDimension]);
+  }, [autoTimeStepLayerId, dispatch, isTimeStepAuto, mapId, timeDimension]);
 };
 
 var TimeSliderConnect = function TimeSliderConnect(_ref) {
@@ -20986,8 +21586,11 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       var to = getProj4(proj.crs);
 
       for (var j = 0; j < featureCoords.length; j += 1) {
-        // eslint-disable-next-line no-continue
-        if (featureCoords[j].length < 2) continue;
+        if (featureCoords[j].length < 2) {
+          // eslint-disable-next-line no-continue
+          continue;
+        }
+
         var coordinates = {
           x: featureCoords[j][0],
           y: featureCoords[j][1]
@@ -21307,12 +21910,16 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
           isInEditMode = _this$props2.isInEditMode,
           featureNrToEdit = _this$props2.featureNrToEdit,
           onHoverFeature = _this$props2.onHoverFeature;
-      if (event && event.rightButton === true) return undefined;
+
+      if (event && event.rightButton === true) {
+        return undefined;
+      }
       /* adagucMouseMove is an event callback function which is triggered when the mouse moves over the map
         This event is only triggered if the map is in hover state.
         E.g. when the map is dragging/panning, this event is not triggerd
       */
 
+
       var mouseX = event.mouseX,
           mouseY = event.mouseY,
           mouseDown = event.mouseDown;
@@ -21352,7 +21959,11 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       var feature = this.geojson.features[featureNrToEdit];
-      if (!feature) return undefined;
+
+      if (!feature) {
+        return undefined;
+      }
+
       var webmapjs = this.props.webmapjs;
       this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
         x: mouseX,
@@ -21428,7 +22039,10 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
     value: function triggerMouseDownTimer(event) {
       var _this3 = this;
 
-      if (!this.doubleClickTimer) this.doubleClickTimer = {};
+      if (!this.doubleClickTimer) {
+        this.doubleClickTimer = {};
+      }
+
       var mouseX = event.mouseX,
           mouseY = event.mouseY;
 
@@ -21558,12 +22172,19 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
         if (this.myDrawMode === DRAWMODE.POINT || this.myDrawMode === DRAWMODE.MULTIPOINT) {
           /* Create points */
           var pointGeometry = feature.geometry;
-          if (pointGeometry) if (pointGeometry.coordinates === undefined) {
-            pointGeometry.coordinates = [];
+
+          if (pointGeometry) {
+            if (pointGeometry.coordinates === undefined) {
+              pointGeometry.coordinates = [];
+            }
           }
+
           var multiPointGeometry = feature.geometry;
-          if (multiPointGeometry) if (multiPointGeometry.coordinates === undefined) {
-            multiPointGeometry.coordinates = [[]];
+
+          if (multiPointGeometry) {
+            if (multiPointGeometry.coordinates === undefined) {
+              multiPointGeometry.coordinates = [[]];
+            }
           }
 
           if (this.myDrawMode === DRAWMODE.POINT) {
@@ -21604,8 +22225,11 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
         if (this.myDrawMode === DRAWMODE.POLYGON || this.myDrawMode === DRAWMODE.BOX) {
           /* Create poly's and boxes */
           this.myEditMode = EDITMODE.ADD_FEATURE;
-          if (feature.geometry) if (feature.geometry.coordinates === undefined) {
-            feature.geometry.coordinates = [[]];
+
+          if (feature.geometry) {
+            if (feature.geometry.coordinates === undefined) {
+              feature.geometry.coordinates = [[]];
+            }
           }
 
           if (feature.geometry.coordinates[0] === undefined || feature.geometry.coordinates[0].length === 0) {
@@ -21761,7 +22385,10 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
     key: "adagucMouseDown",
     value: function adagucMouseDown(event) {
       var isInEditMode = this.props.isInEditMode;
-      if (event && event.rightButton === true) return;
+
+      if (event && event.rightButton === true) {
+        return;
+      }
 
       if (isInEditMode === false) {
         return;
@@ -21787,11 +22414,14 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       // eslint-disable-next-line consistent-return
 
 
-      if (this.insertVertexInEdge(event) === false) return false;
+      if (this.insertVertexInEdge(event) === false) {
+        return false;
+      }
       /* This is trigged when a new feature is created.  */
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
 
+
       if (this.createNewFeature(event) === false) {
         /* Start with mouse move from this mouse down location,  enables sizing the box while moving the mouse */
         this.adagucMouseMove(event);
@@ -21800,13 +22430,22 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       /* This is triggered when new points are added during the addmultipoint mode. One point is added per time */
 
 
-      if (this.addPointToMultiPointFeature(event) === false) return false;
+      if (this.addPointToMultiPointFeature(event) === false) {
+        return false;
+      }
       /* This is triggered when new points are added during the addpolygon mode. One point is added per time */
 
-      if (this.addVerticesToPolygonFeature(event) === false) return false;
+
+      if (this.addVerticesToPolygonFeature(event) === false) {
+        return false;
+      }
       /* This is triggered when new points are added to a linestring */
 
-      if (this.addPointToLineStringFeature(event) === false) return false;
+
+      if (this.addPointToLineStringFeature(event) === false) {
+        return false;
+      }
+
       return false;
       /* False means that this component will take over entire controll.
          True means that it is still possible to pan and drag the map while editing */
@@ -21875,7 +22514,10 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props10 = this.props,
           isInEditMode = _this$props10.isInEditMode,
           onClickFeature = _this$props10.onClickFeature;
-      if (event && event.rightButton === true) return;
+
+      if (event && event.rightButton === true) {
+        return;
+      }
 
       if (onClickFeature) {
         var mouseX = event.mouseX,
@@ -22018,18 +22660,34 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "validateFeature",
     value: function validateFeature(feature) {
-      if (!feature.properties) feature.properties = {};
-      if (!feature.geometry) feature.geometry = {};
-      if (!feature.type) feature.type = 'Feature';
-      if (!feature.geometry.coordinates) feature.geometry.coordinates = [];
+      if (!feature.properties) {
+        feature.properties = {};
+      }
+
+      if (!feature.geometry) {
+        feature.geometry = {};
+      }
+
+      if (!feature.type) {
+        feature.type = 'Feature';
+      }
+
+      if (!feature.geometry.coordinates) {
+        feature.geometry.coordinates = [];
+      }
     }
   }, {
     key: "validatePolys",
     value: function validatePolys(fixPolys) {
-      if (!this.geojson || !this.geojson.features || !this.geojson.features.length) return;
+      if (!this.geojson || !this.geojson.features || !this.geojson.features.length) {
+        return;
+      }
 
       for (var featureIndex = 0; featureIndex < this.geojson.features.length; featureIndex += 1) {
-        if (!this.geojson.features) this.geojson.features = [];
+        if (!this.geojson.features) {
+          this.geojson.features = [];
+        }
+
         var feature = this.geojson.features[featureIndex];
         this.validateFeature(feature);
         var featureType = feature.geometry.type;
@@ -22111,7 +22769,11 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props12 = this.props,
           featureNrToEdit = _this$props12.featureNrToEdit,
           isInEditMode = _this$props12.isInEditMode;
-      if (!this.geojson || !this.geojson.features || !this.geojson.features.length) return;
+
+      if (!this.geojson || !this.geojson.features || !this.geojson.features.length) {
+        return;
+      }
+
       this.textPositions = [];
       this.mouseOverPolygonCoordinates = [];
       this.mouseOverPolygonFeatureIndex = -1;
@@ -22596,12 +23258,23 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
           isInEditMode = _this$props13.isInEditMode,
           featureNrToEdit = _this$props13.featureNrToEdit;
       var feature = this.geojson.features[featureIndex];
-      if (!feature || !feature.geometry) return;
-      if (feature.geometry.type !== 'LineString') return;
+
+      if (!feature || !feature.geometry) {
+        return;
+      }
+
+      if (feature.geometry.type !== 'LineString') {
+        return;
+      }
+
       var lineProps = feature.properties;
-      if (!lineProps) lineProps = this.defaultLineStringProps;
+
+      if (!lineProps) {
+        lineProps = this.defaultLineStringProps;
+      }
       /* Draw polygons and calculate center of poly */
 
+
       var middle = {
         x: 0,
         y: 0,
@@ -22672,12 +23345,23 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
           isInEditMode = _this$props14.isInEditMode,
           featureNrToEdit = _this$props14.featureNrToEdit;
       var feature = this.geojson.features[featureIndex];
-      if (!feature || !feature.geometry) return;
-      if (feature.geometry.type !== 'Polygon' && feature.geometry.type !== 'MultiPolygon') return;
+
+      if (!feature || !feature.geometry) {
+        return;
+      }
+
+      if (feature.geometry.type !== 'Polygon' && feature.geometry.type !== 'MultiPolygon') {
+        return;
+      }
+
       var polyProps = feature.properties;
-      if (!polyProps) polyProps = this.defaultPolyProps;
+
+      if (!polyProps) {
+        polyProps = this.defaultPolyProps;
+      }
       /* Draw polygons and calculate center of poly */
 
+
       var middle = {
         x: 0,
         y: 0,
@@ -22751,8 +23435,11 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       var XYCoords = [];
 
       for (var j = 0; j < featureCoords.length; j += 1) {
-        // eslint-disable-next-line no-continue
-        if (featureCoords[j].length < 2) continue;
+        if (featureCoords[j].length < 2) {
+          // eslint-disable-next-line no-continue
+          continue;
+        }
+
         var coord = webmapjs.getPixelCoordFromLatLong({
           x: featureCoords[j][0],
           y: featureCoords[j][1]
@@ -22785,7 +23472,10 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       } else {
         this.validateFeature(feature); // eslint-disable-next-line no-underscore-dangle
 
-        if (feature.properties._adaguctype) delete feature.properties._adaguctype; // eslint-disable-next-line default-case
+        if (feature.properties._adaguctype) {
+          delete feature.properties._adaguctype;
+        } // eslint-disable-next-line default-case
+
 
         switch (type) {
           case DRAWMODE.POINT:
@@ -22794,8 +23484,12 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
 
           case DRAWMODE.MULTIPOINT:
             feature.geometry.type = 'MultiPoint';
-            if (feature.geometry.coordinates.length === 0) // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+            if (feature.geometry.coordinates.length === 0) {
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
               feature.geometry.coordinates.push([]);
+            }
+
             break;
 
           case DRAWMODE.BOX:
@@ -22806,14 +23500,22 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
 
           case DRAWMODE.POLYGON:
             feature.geometry.type = 'Polygon';
-            if (feature.geometry.coordinates.length === 0) // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+            if (feature.geometry.coordinates.length === 0) {
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
               feature.geometry.coordinates.push([]);
+            }
+
             break;
 
           case DRAWMODE.LINESTRING:
             feature.geometry.type = 'LineString';
-            if (feature.geometry.coordinates.length === 0) // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+            if (feature.geometry.coordinates.length === 0) {
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
               feature.geometry.coordinates.push([]);
+            }
+
             break;
         }
       }
@@ -22824,7 +23526,10 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "checkIfFeatureIsBox",
     value: function checkIfFeatureIsBox(feature) {
-      if (!feature || !feature.properties || !feature.properties._adaguctype) return false;
+      if (!feature || !feature.properties || !feature.properties._adaguctype) {
+        return false;
+      }
+
       return feature.properties._adaguctype === 'box';
     }
   }, {
@@ -22955,7 +23660,9 @@ var AdagucMapDrawContainer = function AdagucMapDrawContainer(_ref) {
         }
       },
       exitDrawModeCallback: function exitDrawModeCallback() {
-        if (layer.exitDrawModeCallback) layer.exitDrawModeCallback();
+        if (layer.exitDrawModeCallback) {
+          layer.exitDrawModeCallback();
+        }
       },
       featureNrToEdit: parseInt(layer.featureNrToEdit || '0', 10)
     }));
@@ -23017,24 +23724,31 @@ var getWMJSLayerFromReactLayer = function getWMJSLayerFromReactLayer(mapId, wmLa
   var wmjsMap = getWMJSMapById(mapId);
   /* Some safety checks */
 
-  if (!wmjsMap || !wmLayers || !reactLayerId || !layerName) return {
-    layer: null,
-    layerArrayMutated: false
-  };
+  if (!wmjsMap || !wmLayers || !reactLayerId || !layerName) {
+    return {
+      layer: null,
+      layerArrayMutated: false
+    };
+  }
   /* Find the wmlayer by its react layer id */
 
+
   var matchingLayerIndex = wmLayers.findIndex(function (wmLayer) {
     return wmLayer.id === reactLayerId;
   });
-  if (matchingLayerIndex === -1) return {
-    layer: null,
-    layerArrayMutated: false
-  };
+
+  if (matchingLayerIndex === -1) {
+    return {
+      layer: null,
+      layerArrayMutated: false
+    };
+  }
   /*
      The layer order in the react children array index is
      reversed compared to the layer order in the wmLayer array index
   */
 
+
   var reactLayerIndex = wmLayers.length - 1 - wmLayerIndex;
   var isMapLayer = isAMapLayer(reactWebMapJSLayer.props);
   var mapLayerArrayShouldBeMutated = isMapLayer && matchingLayerIndex !== reactLayerIndex;
@@ -23236,7 +23950,11 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
             mapId = _this2$props.mapId,
             onMapZoomEnd = _this2$props.onMapZoomEnd;
         var wmjsMap = getWMJSMapById(mapId);
-        if (!wmjsMap) return;
+
+        if (!wmjsMap) {
+          return;
+        }
+
         var projectionInfo = wmjsMap.getProjection();
         /* Trigger onMapZoomEnd callback */
 
@@ -24410,7 +25128,7 @@ var MapViewConnect = function MapViewConnect(_a) {
       onLayerError: function onLayerError(_, error) {
         layerError({
           layerId: layer.id,
-          error: error
+          error: "".concat(error)
         });
       }
     }, layer));
@@ -24421,7 +25139,7 @@ var MapViewConnect = function MapViewConnect(_a) {
       onLayerError: function onLayerError(_, error) {
         layerError({
           layerId: layer.id,
-          error: error
+          error: "".concat(error)
         });
       },
       onClickFeature: layer.geojson ? function (event) {
@@ -24438,7 +25156,7 @@ var MapViewConnect = function MapViewConnect(_a) {
       onLayerError: function onLayerError(_, error) {
         layerError({
           layerId: layer.id,
-          error: error
+          error: "".concat(error)
         });
       }
     }, layer));
@@ -25024,7 +25742,11 @@ var getTitle = function getTitle(layerId) {
 
 var getLayersToUpdate = function getLayersToUpdate(layers, mapId) {
   var wmjsMap = getWMJSMapById(mapId);
-  if (!wmjsMap || !layers || layers.length === 0) return [];
+
+  if (!wmjsMap || !layers || layers.length === 0) {
+    return [];
+  }
+
   return layers.filter(function (layer) {
     return layer && layer.enabled && !!getWMLayerById(layer.id);
   }).map(function (layer) {
@@ -25201,7 +25923,11 @@ var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
         title = layer.title,
         url = layer.url;
     var result = gfiResultMap.get(layerId);
-    if (!result) return null;
+
+    if (!result) {
+      return null;
+    }
+
     return /*#__PURE__*/React__default.createElement(Grid, {
       key: layerId,
       sx: {
@@ -25401,6 +26127,8 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
       title = _a.title,
       _a$layers = _a.layers,
       layers = _a$layers === void 0 ? [] : _a$layers,
+      _a$dimensions = _a.dimensions,
+      dimensions = _a$dimensions === void 0 ? [] : _a$dimensions,
       _a$shouldAutoUpdate = _a.shouldAutoUpdate,
       shouldAutoUpdate = _a$shouldAutoUpdate === void 0 ? false : _a$shouldAutoUpdate,
       _a$shouldAnimate = _a.shouldAnimate,
@@ -25432,7 +26160,7 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
       _a$displayGetFeatureI = _a.displayGetFeatureInfoButtonInMap,
       displayGetFeatureInfoButtonInMap = _a$displayGetFeatureI === void 0 ? false : _a$displayGetFeatureI,
       children = _a.children,
-      props = __rest(_a, ["id", "dockedLayerManagerSize", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "shouldShowDockedLayerManager", "showClock", "displayGetFeatureInfoButtonInMap", "children"]);
+      props = __rest(_a, ["id", "dockedLayerManagerSize", "title", "layers", "dimensions", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "shouldShowDockedLayerManager", "showClock", "displayGetFeatureInfoButtonInMap", "children"]);
 
   var dispatch = useDispatch();
   var mapId = React__default.useRef(id || generateMapId()).current;
@@ -25449,6 +26177,7 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
         bbox: bbox,
         srs: srs
       },
+      dimensions: dimensions,
       shouldAutoUpdate: shouldAutoUpdate,
       shouldAnimate: shouldAnimate,
       shouldShowZoomControls: shouldShowZoomControls,
@@ -25487,6 +26216,7 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, []);
+  var mapControlsPositionTop = title ? 24 : 8;
   return /*#__PURE__*/React__default.createElement(Box, {
     sx: {
       width: '100%',
@@ -25495,13 +26225,13 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
       overflow: 'hidden'
     },
     "data-testid": "ConfigurableMap"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
+  }, title && /*#__PURE__*/React__default.createElement(Typography, {
     "data-testid": "mapTitle",
     sx: titleStyle
-  }, title || mapId), /*#__PURE__*/React__default.createElement(MapControls, {
+  }, title), /*#__PURE__*/React__default.createElement(MapControls, {
     "data-testid": "mapControls",
     style: {
-      top: 24
+      top: mapControlsPositionTop
     }
   }, /*#__PURE__*/React__default.createElement(ZoomControlConnect, {
     mapId: id
@@ -25594,7 +26324,8 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
         syncGroupAddTarget({
           groupId: syncGroupsId,
           targetId: map.id,
-          linked: true
+          linked: true,
+          origin: 'system'
         });
       });
     });
@@ -25635,12 +26366,14 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
       style: mapStyle,
       sx: mapBoxStyle
     }, /*#__PURE__*/React__default.createElement(ConfigurableMapConnect, {
-      title: map.title,
+      title: map.title || mapId,
       id: mapId,
       layers: map.layers || [],
-      activeLayerId: map.activeLayerId || undefined,
+      autoTimeStepLayerId: map.autoTimeStepLayerId,
+      autoUpdateLayerId: map.autoUpdateLayerId,
       bbox: map.bbox,
       srs: map.srs,
+      dimensions: map.dimensions || [],
       displayTimeInMap: map.displayTimeInMap || false,
       displayLayerManagerAndLegendButtonInMap: map.displayLayerManagerAndLegendButtonInMap,
       displayDimensionSelectButtonInMap: map.displayDimensionSelectButtonInMap,
@@ -25681,9 +26414,13 @@ var useHasSyncGroupWithLayerActions = function useHasSyncGroupWithLayerActions(s
   var syncGroupState = useSelector(function (store) {
     return getSynchronizationGroupState(store);
   });
-  if (!syncGroupState) return false;
+
+  if (!syncGroupState) {
+    return false;
+  }
   /* Return all syncgroups configured for this component of type SYNCGROUPS_TYPE_SETLAYERACTIONS */
 
+
   var syncGroupsWithLayerActions = syncGroupState.groups.allIds.filter(function (syncGroupId) {
     return syncGroupsIds && syncGroupsIds.includes(syncGroupId) && syncGroupState.groups.byId[syncGroupId].type === 'SYNCGROUPS_TYPE_SETLAYERACTIONS';
   });
@@ -25738,9 +26475,13 @@ var ModelRunInterval = function ModelRunInterval(_ref) {
   /* Get latest reference time for this layer */
 
   var latestReferenceTime = useGetLatestReferenceTime(layers[0]);
-  if (latestReferenceTime === '') return /*#__PURE__*/React.createElement("div", null, "Loading...");
+
+  if (latestReferenceTime === '') {
+    return /*#__PURE__*/React.createElement("div", null, "Loading...");
+  }
   /* Calculate the last time increment based on 15 maps */
 
+
   var lastTimeIncrement = startTimeIncrement + 15 * interval;
   /* Make the preset */
 
@@ -25796,9 +26537,13 @@ var HarmonieTempAndPrecipPreset = function HarmonieTempAndPrecipPreset(_ref) {
   /* Get all the reference times for this layer */
 
   var referenceTimes = useGetReferenceTimes(layers.topRow);
-  if (referenceTimes.length === 0) return /*#__PURE__*/React.createElement("div", null, "Loading...");
+
+  if (referenceTimes.length === 0) {
+    return /*#__PURE__*/React.createElement("div", null, "Loading...");
+  }
   /* Helper to make a map layer prest */
 
+
   var makeMapPreset = function makeMapPreset(referenceTime, uniqueId, layer, syncGroupsIds, col) {
     return {
       id: uniqueId,
@@ -25886,7 +26631,11 @@ var componentsLookUp = function componentsLookUp(_ref) {
         var _mapPreset = initialProps.mapPreset,
             shouldShowZoomControls = initialProps.shouldShowZoomControls,
             syncGroupsIds = initialProps.syncGroupsIds;
-        if (!_mapPreset || _mapPreset.length === 0) return null;
+
+        if (!_mapPreset || _mapPreset.length === 0) {
+          return null;
+        }
+
         return /*#__PURE__*/React__default.createElement(MultiMapViewConnect, {
           rows: 2,
           cols: 2,
@@ -25894,11 +26643,15 @@ var componentsLookUp = function componentsLookUp(_ref) {
           maps: _mapPreset.map(function (preset, index) {
             var _a, _b, _c, _d;
 
+            var layers = preset.layers,
+                autoUpdateLayerId = preset.autoUpdateLayerId,
+                autoTimeStepLayerId = preset.autoTimeStepLayerId;
             return {
               id: "".concat(id, "_").concat(index),
               syncGroupsIds: syncGroupsIds,
-              layers: preset.layers,
-              activeLayerId: preset.activeLayerId,
+              layers: layers,
+              autoUpdateLayerId: autoUpdateLayerId,
+              autoTimeStepLayerId: autoTimeStepLayerId,
               bbox: (_b = (_a = _mapPreset[0]) === null || _a === void 0 ? void 0 : _a.proj) === null || _b === void 0 ? void 0 : _b.bbox,
               srs: (_d = (_c = _mapPreset[0]) === null || _c === void 0 ? void 0 : _c.proj) === null || _d === void 0 ? void 0 : _d.srs
             };
@@ -26803,4 +27556,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, getDrawFunctionFromStore, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$8 as layerReducer, selectors$2 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$1 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$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 };