@opengeoweb/core 4.17.0 → 4.18.0

package/index.umd.js

@@ -429,7 +429,11 @@
 
     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) {
@@ -465,7 +469,11 @@
 
     var getFirstTimeStepForLayerId = function getFirstTimeStepForLayerId(layerId) {
       var wmjsTimeDim = getWMJSTimeDimensionForLayerId(layerId);
-      if (!wmjsTimeDim) return null;
+
+      if (!wmjsTimeDim) {
+        return null;
+      }
+
       return wmjsTimeDim.getFirstValue();
     };
     /**
@@ -475,7 +483,11 @@
 
     var getLastTimeStepForLayerId = function getLastTimeStepForLayerId(layerId) {
       var wmjsTimeDim = getWMJSTimeDimensionForLayerId(layerId);
-      if (!wmjsTimeDim) return null;
+
+      if (!wmjsTimeDim) {
+        return null;
+      }
+
       return wmjsTimeDim.getLastValue();
     };
 
@@ -979,32 +991,32 @@
           featureLayers = _m === void 0 ? [] : _m,
           _o = _a.dimensions,
           dimensions = _o === void 0 ? [] : _o,
-          _p = _a.activeLayerId,
-          activeLayerId = _p === void 0 ? '' : _p,
-          _q = _a.timeSliderScale,
-          timeSliderScale = _q === void 0 ? Scale.Hour : _q,
-          _r = _a.timeStep,
-          timeStep = _r === void 0 ? 5 : _r,
-          _s = _a.animationDelay,
-          animationDelay = _s === void 0 ? defaultAnimationDelayAtStart : _s,
-          _t = _a.timeSliderCenterTime,
-          timeSliderCenterTime = _t === void 0 ? moment__default["default"].utc().unix() : _t,
-          _u = _a.timeSliderSecondsPerPx,
-          timeSliderSecondsPerPx = _u === void 0 ? 30 : _u,
-          _v = _a.timeSliderDataScaleToSecondsPerPx,
-          timeSliderDataScaleToSecondsPerPx = _v === void 0 ? defaultDataScaleToSecondsPerPx : _v,
-          _w = _a.isTimestepAuto,
-          isTimestepAuto = _w === void 0 ? true : _w,
-          _x = _a.isTimeSliderHoverOn,
-          isTimeSliderHoverOn = _x === void 0 ? false : _x,
-          _y = _a.isTimeSliderVisible,
-          isTimeSliderVisible = _y === void 0 ? true : _y,
-          _z = _a.displayMapPin,
-          displayMapPin = _z === void 0 ? false : _z,
-          _0 = _a.disableMapPin,
-          disableMapPin = _0 === void 0 ? false : _0,
-          _1 = _a.shouldShowZoomControls,
-          shouldShowZoomControls = _1 === void 0 ? true : _1;
+          autoUpdateLayerId = _a.autoUpdateLayerId,
+          autoTimeStepLayerId = _a.autoTimeStepLayerId,
+          _p = _a.timeSliderScale,
+          timeSliderScale = _p === void 0 ? Scale.Hour : _p,
+          _q = _a.timeStep,
+          timeStep = _q === void 0 ? 5 : _q,
+          _r = _a.animationDelay,
+          animationDelay = _r === void 0 ? defaultAnimationDelayAtStart : _r,
+          _s = _a.timeSliderCenterTime,
+          timeSliderCenterTime = _s === void 0 ? moment__default["default"].utc().unix() : _s,
+          _t = _a.timeSliderSecondsPerPx,
+          timeSliderSecondsPerPx = _t === void 0 ? 30 : _t,
+          _u = _a.timeSliderDataScaleToSecondsPerPx,
+          timeSliderDataScaleToSecondsPerPx = _u === void 0 ? defaultDataScaleToSecondsPerPx : _u,
+          _v = _a.isTimestepAuto,
+          isTimestepAuto = _v === void 0 ? true : _v,
+          _w = _a.isTimeSliderHoverOn,
+          isTimeSliderHoverOn = _w === void 0 ? false : _w,
+          _x = _a.isTimeSliderVisible,
+          isTimeSliderVisible = _x === void 0 ? true : _x,
+          _y = _a.displayMapPin,
+          displayMapPin = _y === void 0 ? false : _y,
+          _z = _a.disableMapPin,
+          disableMapPin = _z === void 0 ? false : _z,
+          _0 = _a.shouldShowZoomControls,
+          shouldShowZoomControls = _0 === void 0 ? true : _0;
       return {
         id: id,
         isAnimating: isAnimating,
@@ -1019,7 +1031,8 @@
         mapLayers: mapLayers,
         featureLayers: featureLayers,
         dimensions: dimensions,
-        activeLayerId: activeLayerId,
+        autoUpdateLayerId: autoUpdateLayerId,
+        autoTimeStepLayerId: autoTimeStepLayerId,
         timeSliderScale: timeSliderScale,
         timeStep: timeStep,
         animationDelay: animationDelay,
@@ -1066,7 +1079,10 @@
 
     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({
@@ -1091,7 +1107,10 @@
       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;
@@ -1116,6 +1135,10 @@
      */
 
     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;
@@ -1247,7 +1270,10 @@
      */
 
     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;
       });
@@ -1270,13 +1296,24 @@
     };
 
     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) {
@@ -1308,7 +1345,10 @@
     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) {
@@ -1561,7 +1601,11 @@
               layerIdFromAction = _a.layerId,
               dimension = _a.dimension;
           var layerFromAction = draft.byId[layerIdFromAction];
-          if (!layerFromAction) return;
+
+          if (!layerFromAction) {
+            return;
+          }
+
           var mapId = layerFromAction.mapId;
           produceDraftStateForAllLayersForDimensionWithinMap(draft, dimension, mapId, layerIdFromAction);
         },
@@ -1784,7 +1828,10 @@
           }); // 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(__assign({}, layer));
             draft.availableBaseLayers.allIds.push(layer.id);
           });
@@ -1903,7 +1950,10 @@
         serviceSetLayers: function serviceSetLayers(draft, action) {
           var id = action.payload.id;
           draft.byId[id] = __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) {
@@ -1917,12 +1967,19 @@
             });
             delete draft.byId[serviceId_1];
           }
-        }
+        },
+        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;
@@ -2054,7 +2111,10 @@
     }, 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;
       });
@@ -2092,8 +2152,8 @@
      * 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 moveToTop = function moveToTop(list, element) {
       var filteredList = list.filter(function (item) {
@@ -2116,7 +2176,8 @@
         type: type,
         source: source,
         isLoading: false,
-        error: undefined
+        error: undefined,
+        focused: false
       };
     };
     var initialState$6 = {
@@ -2191,6 +2252,10 @@
           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;
@@ -2211,6 +2276,17 @@
               error = _a.error,
               type = _a.type;
           draft.dialogs[type].error = error;
+        },
+        setDialogFocused: function setDialogFocused(draft, action) {
+          var _a = action.payload,
+              focused = _a.focused,
+              type = _a.type;
+
+          if (!draft.dialogs[type]) {
+            return;
+          }
+
+          draft.dialogs[type].focused = focused;
         }
       }
     });
@@ -2267,7 +2343,10 @@
      */
 
     var createLayersWithIds = function createLayersWithIds(state, layers) {
-      if (!layers) return layers;
+      if (!layers) {
+        return layers;
+      }
+
       return produce.produce(layers, function (draft) {
         for (var j = 0; j < draft.length; j += 1) {
           var layer = draft[j];
@@ -2320,7 +2399,10 @@
 
           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 _a = action.payload,
@@ -2331,7 +2413,6 @@
             return;
           }
 
-          draft.byId[mapId].dimensions.length = 0;
           dimensions.forEach(function (dimension) {
             return produceDraftStateSetWebMapDimension(draft, mapId, dimension, true);
           });
@@ -2436,16 +2517,28 @@
 
           draft.byId[mapId].mapLayers = moveArrayElements(draft.byId[mapId].mapLayers, oldIndex, newIndex);
         },
-        setActiveLayerId: function setActiveLayerId(draft, action) {
+        setAutoLayerId: function setAutoLayerId(draft, action) {
           var _a = action.payload,
               mapId = _a.mapId,
-              layerId = _a.layerId;
+              layerId = _a.layerId,
+              autoTimeStepLayerId = _a.autoTimeStepLayerId,
+              autoUpdateLayerId = _a.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 _a = action.payload,
@@ -2621,7 +2714,8 @@
           }
 
           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);
@@ -2661,19 +2755,36 @@
 
           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_1 = draft.byId[mapId].dimensions;
+
+              if (mapDims && draftDims_1) {
+                mapDims.forEach(function (dim) {
+                  var draftMapDimIndex = draftDims_1.findIndex(function (draftDim) {
+                    return draftDim.name === dim.name;
+                  });
+
+                  if (draftMapDimIndex !== -1) {
+                    draftDims_1[draftMapDimIndex].name = dim.name;
+                    draftDims_1[draftMapDimIndex].units = dim.units;
+                    draftDims_1[draftMapDimIndex].currentValue = dim.currentValue;
+                  } else {
+                    draftDims_1.push({
+                      name: dim.name,
+                      units: dim.units,
+                      currentValue: dim.currentValue
+                    });
+                  }
                 });
               }
             }
@@ -2716,24 +2827,31 @@
           var _a = action.payload,
               mapId = _a.mapId,
               layerId = _a.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 _b = __read(draft.byId[mapId].mapLayers, 1),
-                activeLayerId = _b[0];
+          var _b = __read(map.mapLayers, 1),
+              activeLayerId = _b[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 _a = action.payload,
@@ -2805,7 +2923,9 @@
                 draft.byId[targetId].bbox = bbox;
               }
 
-              if (srs) draft.byId[targetId].srs = srs;
+              if (srs) {
+                draft.byId[targetId].srs = srs;
+              }
             }
           });
         }).addCase(setLayerActionSync, function (draft, action) {
@@ -2829,7 +2949,11 @@
           }, 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) {
@@ -2893,7 +3017,7 @@
      * */
 
     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
@@ -2921,7 +3045,9 @@
      */
 
     var getLayersById = toolkit.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
@@ -3192,7 +3318,7 @@
       }, []);
     }, selectorMemoizationOptions);
 
-    var selectors$2 = /*#__PURE__*/Object.freeze({
+    var selectors$3 = /*#__PURE__*/Object.freeze({
         __proto__: null,
         getLayerById: getLayerById,
         getLayersById: getLayersById,
@@ -3230,8 +3356,8 @@
      * 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) {
@@ -3356,8 +3482,11 @@
     var getDialogError = toolkit.createSelector(getDialogDetailsByType, function (details) {
       return details && details.error || '';
     });
+    var getDialogFocused = toolkit.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,
@@ -3368,7 +3497,8 @@
         getDialogSource: getDialogSource,
         getActiveWindowId: getActiveWindowId,
         getDialogIsLoading: getDialogIsLoading,
-        getDialogError: getDialogError
+        getDialogError: getDialogError,
+        getDialogFocused: getDialogFocused
     });
 
     /* *
@@ -3431,8 +3561,11 @@
       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
@@ -3570,8 +3703,15 @@
           var _a = action.payload,
               groupId = _a.groupId,
               targetId = _a.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;
@@ -3810,10 +3950,16 @@
       return null;
     };
 
-    toolkit.createSelector(getSyncSourceBySourceId, function (store) {
+    var getTime = toolkit.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.
@@ -3861,11 +4007,9 @@
      */
 
     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
@@ -3932,8 +4076,10 @@
      * @returns {array} returnType: array -  array containing all layerIds
      */
 
-    var getLayerIds = toolkit.createSelector(getMapById, function (store) {
-      return store && store.mapLayers ? store.mapLayers : [];
+    var getLayerIds = toolkit.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
@@ -3944,10 +4090,12 @@
      * @returns {array} returnType: array -  array containing all layer states for the map
      */
 
-    var getMapLayers = toolkit.createSelector(getLayerIds, getLayersById, function (layerIds, layers) {
-      return layerIds.map(function (layerId) {
-        return layers[layerId];
+    var getMapLayers = toolkit.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
@@ -4155,7 +4303,33 @@
      */
 
     var getActiveLayerId = toolkit.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 = toolkit.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 = toolkit.createSelector(getMapById, function (store) {
+      return store === null || store === void 0 ? void 0 : store.autoTimeStepLayerId;
     });
     /**
      * Gets scale of a time slider of a map
@@ -4319,8 +4493,8 @@
      * @returns {string} returnType: string - the mapId, or null if not found
      */
 
-    var getMapIdFromLayerId$1 = toolkit.createSelector(function (store) {
-      return store && store.webmap ? store.webmap : null;
+    var getMapIdFromLayerId = toolkit.createSelector(function (store) {
+      return store === null || store === void 0 ? void 0 : store.webmap;
     }, function (_store, layerId) {
       return layerId;
     }, findMapIdFromLayerId, selectorMemoizationOptions);
@@ -4357,7 +4531,7 @@
      * @returns {number} returnType: index number or -1 if not found
      */
 
-    var getLayerIndexByLayerId$1 = toolkit.createSelector(getMapLayers, function (_store, _mapId, layerId) {
+    var getLayerIndexByLayerId = toolkit.createSelector(getMapLayers, function (_store, _mapId, layerId) {
       return layerId;
     }, function (layers, layerId) {
       return layers.findIndex(function (layer) {
@@ -4374,7 +4548,7 @@
      * @returns {object} returnType: layer, or null if not found
      */
 
-    var getLayerByLayerIndex$1 = toolkit.createSelector(getMapLayers, function (_store, _mapId, layerIndex) {
+    var getLayerByLayerIndex = toolkit.createSelector(getMapLayers, function (_store, _mapId, layerIndex) {
       return layerIndex;
     }, function (layers, layerIndex) {
       if (layerIndex >= 0 && layerIndex < layers.length) {
@@ -4463,7 +4637,7 @@
      * @returns {MapPreset} returnType: MapPreset
      */
 
-    var getMapPreset = toolkit.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 = toolkit.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 = __spreadArray(__spreadArray(__spreadArray([], __read(baseLayers)), __read(overLayers)), __read(mapLayers)).map(function (_a) {
@@ -4491,6 +4665,8 @@
       return __assign({
         layers: allLayers,
         activeLayerId: activeLayerId,
+        autoTimeStepLayerId: autoTimeStepLayerId,
+        autoUpdateLayerId: autoUpdateLayerId,
         proj: {
           bbox: bbox,
           srs: srs
@@ -4578,6 +4754,8 @@
         isAutoUpdating: isAutoUpdating,
         isEndTimeOverriding: isEndTimeOverriding,
         getActiveLayerId: getActiveLayerId,
+        getAutoUpdateLayerId: getAutoUpdateLayerId,
+        getAutoTimeStepLayerId: getAutoTimeStepLayerId,
         getMapTimeSliderScale: getMapTimeSliderScale,
         getMapTimeStep: getMapTimeStep,
         getMapTimeStepWithoutDefault: getMapTimeStepWithoutDefault,
@@ -4591,10 +4769,10 @@
         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,
@@ -4703,8 +4881,8 @@
      * 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 layerSelectFilterAdapter = toolkit.createEntityAdapter();
     var layerSelectActiveServicesAdapter = toolkit.createEntityAdapter();
@@ -4754,62 +4932,6 @@
           draft.servicePopup.variant = variant;
           draft.servicePopup.serviceId = action.payload.serviceId ? action.payload.serviceId : '';
         },
-        addFiltersAndActiveServices: function addFiltersAndActiveServices(draft, action) {
-          var _a, _b;
-
-          var _c = action.payload,
-              serviceId = _c.serviceId,
-              serviceName = _c.serviceName,
-              serviceUrl = _c.serviceUrl,
-              _abstract = _c["abstract"],
-              keywords = _c.keywords,
-              scope = _c.scope,
-              groups = _c.groups,
-              isLoading = _c.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
 
@@ -4900,6 +5022,92 @@
           var layer = action.payload.layer;
           draft.activeLayerInfo = layer;
         }
+      },
+      extraReducers: function extraReducers(builder) {
+        builder.addCase(serviceActions.serviceSetLayers, function (draft, action) {
+          var _a, _b;
+
+          var _c = action.payload,
+              serviceId = _c.id,
+              serviceUrl = _c.serviceUrl,
+              serviceName = _c.name,
+              scope = _c.scope,
+              _abstract = _c["abstract"],
+              layers = _c.layers,
+              isUpdating = _c.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;
@@ -4923,7 +5131,10 @@
      * */
     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) {
@@ -5445,9 +5656,6 @@
      * 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
@@ -5458,9 +5666,12 @@
      */
 
     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;
@@ -5901,7 +6112,7 @@
         }
       });
     }
-    function setActiveLayerIdActionsSaga(_a) {
+    function setAutoLayerIdActionsSaga(_a) {
       var targets;
       var payload = _a.payload,
           type = _a.type;
@@ -5972,7 +6183,7 @@
         }
       });
     }
-    function rootSaga$6() {
+    function rootSaga$7() {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -6048,7 +6259,7 @@
 
             return [4
             /*yield*/
-            , effects.takeLatest(mapActions$1.setActiveLayerId.type, setActiveLayerIdActionsSaga)];
+            , effects.takeLatest(mapActions$1.setAutoLayerId.type, setAutoLayerIdActionsSaga)];
 
           case 11:
             _a.sent();
@@ -6220,9 +6431,12 @@
             , 6];
 
           case 2:
-            if (!group.payloadByType[SYNCGROUPS_TYPE_SETTIME]) return [2
-            /*return*/
-            ];
+            if (!group.payloadByType[SYNCGROUPS_TYPE_SETTIME]) {
+              return [2
+              /*return*/
+              ];
+            }
+
             return [4
             /*yield*/
             , effects.put(setTimeSync(group.payloadByType[SYNCGROUPS_TYPE_SETTIME], [{
@@ -6238,9 +6452,12 @@
             , 6];
 
           case 4:
-            if (!group.payloadByType[SYNCGROUPS_TYPE_SETBBOX]) return [2
-            /*return*/
-            ];
+            if (!group.payloadByType[SYNCGROUPS_TYPE_SETBBOX]) {
+              return [2
+              /*return*/
+              ];
+            }
+
             return [4
             /*yield*/
             , effects.put(setBboxSync(group.payloadByType[SYNCGROUPS_TYPE_SETBBOX], [{
@@ -6342,7 +6559,7 @@
       });
     }
 
-    function rootSaga$5() {
+    function rootSaga$6() {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -6421,7 +6638,7 @@
       reducersMap: {
         syncronizationGroupStore: reducer$4
       },
-      sagas: [rootSaga$6, rootSaga$5]
+      sagas: [rootSaga$7, rootSaga$6]
     };
 
     /* *
@@ -6543,7 +6760,7 @@
         }
       });
     }
-    function rootSaga$4() {
+    function rootSaga$5() {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -6589,7 +6806,7 @@
       reducersMap: {
         ui: reducer$6
       },
-      sagas: [rootSaga$4]
+      sagas: [rootSaga$5]
     };
 
     /* *
@@ -6608,30 +6825,100 @@
      * 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_1 = layers.findIndex(function (layer) {
+          return layer.id === autoTimeStepLayerId;
+        });
+        var autoUpdateLayerIndex_1 = layers.findIndex(function (layer) {
+          return layer.id === autoUpdateLayerId;
+        });
+        var layersWithNewIds_1 = layers.map(function (layer, index) {
+          if (layer.id && index === autoTimeStepLayerIndex_1) {
+            return __assign(__assign({}, layer), {
+              id: autoTimeStepLayerIdNew
+            });
+          }
+
+          if (layer.id && index === autoUpdateLayerIndex_1) {
+            return __assign(__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 __assign(__assign({}, layer), {
-            id: activeLayerNewId
+            id: generateLayerId()
           });
-        }
+        });
+        return {
+          layers: layersWithNewIds_1,
+          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 __assign(__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 __assign(__assign({}, layer), {
+            id: autoLayerIdNew
+          });
+        }
+
+        return __assign(__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.
@@ -7477,7 +7764,11 @@
         var _a = this.props,
             onKeyUp = _a.onKeyUp,
             loopInterval = _a.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) {
@@ -7508,7 +7799,10 @@
         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);
@@ -7546,7 +7840,10 @@
 
       CanvasComponent.prototype.onKeyUp = function (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') {
@@ -7558,7 +7855,10 @@
       CanvasComponent.prototype._documentKeyDown = function (event) {
         if (this._isFocussed) {
           var onKeyDown = this.props.onKeyDown;
-          if (onKeyDown) onKeyDown(event);
+
+          if (onKeyDown) {
+            onKeyDown(event);
+          }
         }
       };
 
@@ -7568,7 +7868,10 @@
 
       CanvasComponent.prototype.startLoop = function () {
         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);
@@ -7937,9 +8240,16 @@
       }, [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 */
@@ -8427,17 +8737,21 @@
       });
     }
     function setLayerDimensionsSaga(_a) {
-      var layerDimensions, dimensions, layerId, layer, newTimeDimension_1, mapId, activeLayerId, shouldAutoUpdate, shouldEndTimeOverride, prevTimeDimension, isAnimating$1, webmapInstance, isActiveLayer, timeStep, isTimestepAuto$1, newTimeStep, syncedMapIds, error_1;
+      var layerDimensions, dimensions, layerId, layer, newTimeDimension_1, mapId, autoUpdateLayerId, shouldAutoUpdate, shouldEndTimeOverride, prevTimeDimension, isAnimating$1, webmapInstance, isAutoUpdateLayer, syncedMapIds, error_1;
       var payload = _a.payload;
       return __generator(this, function (_b) {
         switch (_b.label) {
           case 0:
-            _b.trys.push([0, 20,, 21]);
+            _b.trys.push([0, 16,, 17]);
 
             layerDimensions = payload.layerDimensions;
-            if (!layerDimensions) return [2
-            /*return*/
-            ];
+
+            if (!layerDimensions) {
+              return [2
+              /*return*/
+              ];
+            }
+
             dimensions = layerDimensions.dimensions, layerId = layerDimensions.layerId;
             return [4
             /*yield*/
@@ -8445,19 +8759,23 @@
 
           case 1:
             layer = _b.sent();
-            if (!layer) return [2
-            /*return*/
-            ];
+
+            if (!layer) {
+              return [2
+              /*return*/
+              ];
+            }
+
             newTimeDimension_1 = dimensions.find(function (dimension) {
               return dimension.name === 'time';
             });
             mapId = layer.mapId;
             return [4
             /*yield*/
-            , effects.select(getActiveLayerId, mapId)];
+            , effects.select(getAutoUpdateLayerId, mapId)];
 
           case 2:
-            activeLayerId = _b.sent();
+            autoUpdateLayerId = _b.sent();
             return [4
             /*yield*/
             , effects.select(isAutoUpdating, mapId)];
@@ -8483,46 +8801,14 @@
           case 6:
             isAnimating$1 = _b.sent();
             webmapInstance = getWMJSMapById(mapId);
-            isActiveLayer = layerId === activeLayerId;
-            return [4
-            /*yield*/
-            , effects.select(getMapTimeStepWithoutDefault, mapId)];
-
-          case 7:
-            timeStep = _b.sent();
-            return [4
-            /*yield*/
-            , effects.select(isTimestepAuto, mapId)];
-
-          case 8:
-            isTimestepAuto$1 = _b.sent();
-            if (!(isTimestepAuto$1 && isActiveLayer && timeStep === undefined && newTimeDimension_1)) return [3
-            /*break*/
-            , 10];
-            newTimeStep = getActiveLayerTimeStep(newTimeDimension_1);
-            if (!newTimeStep) return [3
-            /*break*/
-            , 10];
-            return [4
-            /*yield*/
-            , effects.put(mapActions$1.setTimeStep({
-              mapId: mapId,
-              timeStep: newTimeStep
-            }))];
-
-          case 9:
-            _b.sent();
-
-            _b.label = 10;
-
-          case 10:
-            if (!(isActiveLayer && // only update the active layer
+            isAutoUpdateLayer = layerId === autoUpdateLayerId;
+            if (!(isAutoUpdateLayer && // only update the active layer
             shouldAutoUpdate && newTimeDimension_1 && newTimeDimension_1.maxValue && prevTimeDimension && prevTimeDimension.currentValue && prevTimeDimension.currentValue !== newTimeDimension_1.maxValue && !shouldEndTimeOverride)) return [3
             /*break*/
-            , 17];
+            , 13];
             if (!!isAnimating$1) return [3
             /*break*/
-            , 12];
+            , 8];
             return [4
             /*yield*/
             , effects.put(layerActions.layerChangeDimension({
@@ -8534,21 +8820,21 @@
               }
             }))];
 
-          case 11:
+          case 7:
             _b.sent();
 
-            _b.label = 12;
+            _b.label = 8;
 
-          case 12:
+          case 8:
             return [4
             /*yield*/
             , effects.select(getSyncedMapIdsForTimeslider)];
 
-          case 13:
+          case 9:
             syncedMapIds = _b.sent();
             if (!syncedMapIds) return [3
             /*break*/
-            , 15]; // Change time value for all other timesliders
+            , 11]; // Change time value for all other timesliders
 
             return [4
             /*yield*/
@@ -8560,51 +8846,51 @@
               }));
             }))];
 
-          case 14:
+          case 10:
             // Change time value for all other timesliders
             _b.sent();
 
-            _b.label = 15;
+            _b.label = 11;
 
-          case 15:
+          case 11:
             return [4
             /*yield*/
             , effects.call(updateAnimation, mapId, newTimeDimension_1.maxValue)];
 
-          case 16:
+          case 12:
             _b.sent();
 
             return [3
             /*break*/
-            , 19];
+            , 15];
 
-          case 17:
+          case 13:
             if (!(isAnimating$1 && !webmapInstance.isAnimating && newTimeDimension_1 && newTimeDimension_1.maxValue && !shouldEndTimeOverride)) return [3
             /*break*/
-            , 19];
+            , 15];
             return [4
             /*yield*/
             , effects.call(updateAnimation, mapId, newTimeDimension_1.maxValue)];
 
-          case 18:
+          case 14:
             _b.sent();
 
-            _b.label = 19;
+            _b.label = 15;
 
-          case 19:
+          case 15:
             return [3
             /*break*/
-            , 21];
+            , 17];
 
-          case 20:
+          case 16:
             error_1 = _b.sent(); // eslint-disable-next-line no-console
 
             console.warn(error_1);
             return [3
             /*break*/
-            , 21];
+            , 17];
 
-          case 21:
+          case 17:
             return [2
             /*return*/
             ];
@@ -8612,7 +8898,7 @@
       });
     }
     function toggleAutoUpdateSaga(_a) {
-      var shouldAutoUpdate, mapId_1, layerId, timeDimension_1, syncedMapIds, payloads, error_2;
+      var shouldAutoUpdate, mapId_1, autoUpdateLayerId, timeDimension_1, syncedMapIds, payloads, error_2;
       var payload = _a.payload;
       return __generator(this, function (_b) {
         switch (_b.label) {
@@ -8625,13 +8911,13 @@
             , 9];
             return [4
             /*yield*/
-            , effects.select(getActiveLayerId, mapId_1)];
+            , effects.select(getAutoUpdateLayerId, mapId_1)];
 
           case 1:
-            layerId = _b.sent();
+            autoUpdateLayerId = _b.sent();
             return [4
             /*yield*/
-            , effects.select(getLayerTimeDimension, layerId)];
+            , effects.select(getLayerTimeDimension, autoUpdateLayerId)];
 
           case 2:
             timeDimension_1 = _b.sent();
@@ -8641,7 +8927,7 @@
             return [4
             /*yield*/
             , effects.put(layerActions.layerChangeDimension({
-              layerId: layerId,
+              layerId: autoUpdateLayerId,
               origin: LayerActionOrigin.toggleAutoUpdateSaga,
               dimension: {
                 name: 'time',
@@ -8788,54 +9074,70 @@
       });
     }
     function setMapPresetSaga(_a) {
-      var mapId, initialProps, mapPreset, layers, activeLayerId, proj, shouldAutoUpdate, shouldAnimate, animationPayload, toggleTimestepAuto, showTimeSlider, displayMapPin, shouldShowZoomControls, shouldShowLegend, dockedLayerManagerSize, _b, mapLayers, baseLayers, overLayers, _c, layersNewIds, activeLayerNewId, newActiveLayerId, baseLayersWithDefaultLayer, overLayersWithDefaultLayer, allBaseLayers, animationLength, animationEndTime, shouldEndtimeOverride, interval, animationEnd, animationEnd, duration, animationEnd, _d, animationStart, _e, shouldOpenLegend, legendId, fiveMinuteDelayForAnimation, animationEnd, animationStart, error_3;
+      var mapId, initialProps, mapPreset, layers, activeLayerId, autoTimeStepLayerId, autoUpdateLayerId, proj, shouldAutoUpdate, shouldAnimate, animationPayload, toggleTimestepAuto, showTimeSlider, displayMapPin, shouldShowZoomControls, shouldShowLegend, dockedLayerManagerSize, _b, mapLayers, baseLayers, overLayers, autoTimeStepLayerIdNew, autoUpdateLayerIdNew, onlyActiveLayerIdIsSet, newLayerIds, firstLayerId, baseLayersWithDefaultLayer, overLayersWithDefaultLayer, allBaseLayers, animationLength, animationEndTime, shouldEndtimeOverride, interval, animationEnd, animationEnd, duration, animationEnd, _c, animationStart, _d, shouldOpenLegend, legendId, fiveMinuteDelayForAnimation, animationEnd, animationStart, error_3;
+
+      var _e, _f, _g;
 
       var payload = _a.payload;
-      return __generator(this, function (_f) {
-        switch (_f.label) {
+      return __generator(this, function (_h) {
+        switch (_h.label) {
           case 0:
-            _f.trys.push([0, 52,, 53]);
+            _h.trys.push([0, 52,, 53]);
 
             mapId = payload.mapId, initialProps = payload.initialProps;
             mapPreset = initialProps.mapPreset;
             if (!mapPreset) return [3
             /*break*/
             , 51];
-            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;
             _b = filterLayers(layers), mapLayers = _b.mapLayers, baseLayers = _b.baseLayers, overLayers = _b.overLayers;
             if (!layers) return [3
             /*break*/
             , 4];
+            autoTimeStepLayerIdNew = autoTimeStepLayerId;
+            autoUpdateLayerIdNew = autoUpdateLayerId;
+            onlyActiveLayerIdIsSet = !autoTimeStepLayerId && !autoUpdateLayerId && activeLayerId;
+
+            if (onlyActiveLayerIdIsSet) {
+              autoTimeStepLayerIdNew = activeLayerId;
+              autoUpdateLayerIdNew = activeLayerId;
+            }
+
             return [4
             /*yield*/
-            , effects.call(generateUniqueLayerIds, mapLayers, activeLayerId)];
+            , effects.call(replaceLayerIdsToEnsureUniqueLayerIdsInStore, {
+              layers: mapLayers,
+              autoTimeStepLayerId: autoTimeStepLayerIdNew,
+              autoUpdateLayerId: autoUpdateLayerIdNew
+            })];
 
           case 1:
-            _c = _f.sent(), layersNewIds = _c.layersNewIds, activeLayerNewId = _c.activeLayerNewId; //  set layers
+            newLayerIds = _h.sent(); //  set layers
 
             return [4
             /*yield*/
             , effects.put(layerActions.setLayers({
               mapId: mapId,
-              layers: layersNewIds
+              layers: newLayerIds.layers
             }))];
 
           case 2:
             //  set layers
-            _f.sent();
+            _h.sent();
 
-            newActiveLayerId = activeLayerNewId || (layersNewIds.length ? layersNewIds[0].id : undefined);
+            firstLayerId = (_e = newLayerIds.layers[0]) === null || _e === void 0 ? void 0 : _e.id;
             return [4
             /*yield*/
-            , effects.put(mapActions$1.setActiveLayerId({
+            , effects.put(mapActions$1.setAutoLayerId({
               mapId: mapId,
-              layerId: newActiveLayerId
+              autoTimeStepLayerId: (_f = newLayerIds.autoTimeStepLayerId) !== null && _f !== void 0 ? _f : firstLayerId,
+              autoUpdateLayerId: (_g = newLayerIds.autoUpdateLayerId) !== null && _g !== void 0 ? _g : firstLayerId
             }))];
 
           case 3:
-            _f.sent();
+            _h.sent();
 
-            _f.label = 4;
+            _h.label = 4;
 
           case 4:
             baseLayersWithDefaultLayer = baseLayers.length ? baseLayers : [baseLayerGrey$1];
@@ -8850,7 +9152,7 @@
             , effects.call(handleBaseLayersSaga, mapId, allBaseLayers)];
 
           case 5:
-            _f.sent();
+            _h.sent();
 
             if (!proj) return [3
             /*break*/
@@ -8866,9 +9168,9 @@
 
           case 6:
             //  set bbox
-            _f.sent();
+            _h.sent();
 
-            _f.label = 7;
+            _h.label = 7;
 
           case 7:
             animationLength = animationPayload && animationPayload.duration;
@@ -8887,9 +9189,9 @@
 
           case 8:
             //  auto update
-            _f.sent();
+            _h.sent();
 
-            _f.label = 9;
+            _h.label = 9;
 
           case 9:
             if (!(shouldAutoUpdate !== undefined && !animationEndTime)) return [3
@@ -8905,9 +9207,9 @@
 
           case 10:
             //  auto update
-            _f.sent();
+            _h.sent();
 
-            _f.label = 11;
+            _h.label = 11;
 
           case 11:
             if (!(showTimeSlider !== undefined)) return [3
@@ -8923,9 +9225,9 @@
 
           case 12:
             // toggle timeslider
-            _f.sent();
+            _h.sent();
 
-            _f.label = 13;
+            _h.label = 13;
 
           case 13:
             if (!(shouldShowZoomControls !== undefined)) return [3
@@ -8941,9 +9243,9 @@
 
           case 14:
             // toggle zoom controls
-            _f.sent();
+            _h.sent();
 
-            _f.label = 15;
+            _h.label = 15;
 
           case 15:
             if (!(displayMapPin !== undefined)) return [3
@@ -8959,9 +9261,9 @@
 
           case 16:
             //  display map pin
-            _f.sent();
+            _h.sent();
 
-            _f.label = 17;
+            _h.label = 17;
 
           case 17:
             interval = animationPayload && animationPayload.interval;
@@ -8976,9 +9278,9 @@
             }))];
 
           case 18:
-            _f.sent();
+            _h.sent();
 
-            _f.label = 19;
+            _h.label = 19;
 
           case 19:
             if (!animationEndTime) return [3
@@ -8992,7 +9294,7 @@
             }))];
 
           case 20:
-            _f.sent();
+            _h.sent();
 
             if (!!animationLength) return [3
             /*break*/
@@ -9002,7 +9304,7 @@
             , effects.select(getAnimationEndTime$1, mapId)];
 
           case 21:
-            animationEnd = _f.sent();
+            animationEnd = _h.sent();
             return [4
             /*yield*/
             , effects.put(mapActions$1.setAnimationStartTime({
@@ -9012,9 +9314,9 @@
             }))];
 
           case 22:
-            _f.sent();
+            _h.sent();
 
-            _f.label = 23;
+            _h.label = 23;
 
           case 23:
             if (!animationLength) return [3
@@ -9025,7 +9327,7 @@
             , effects.select(getAnimationEndTime$1, mapId)];
 
           case 24:
-            animationEnd = _f.sent();
+            animationEnd = _h.sent();
             return [4
             /*yield*/
             , effects.put(mapActions$1.setAnimationStartTime({
@@ -9034,9 +9336,9 @@
             }))];
 
           case 25:
-            _f.sent();
+            _h.sent();
 
-            _f.label = 26;
+            _h.label = 26;
 
           case 26:
             if (!(animationPayload && animationPayload.speed)) return [3
@@ -9050,9 +9352,9 @@
             }))];
 
           case 27:
-            _f.sent();
+            _h.sent();
 
-            _f.label = 28;
+            _h.label = 28;
 
           case 28:
             if (!(shouldAnimate === true)) return [3
@@ -9067,17 +9369,17 @@
             , effects.select(getAnimationEndTime$1, mapId)];
 
           case 29:
-            _d = _f.sent();
+            _c = _h.sent();
             return [3
             /*break*/
             , 31];
 
           case 30:
-            _d = moment__default["default"].utc().format(dateFormat);
-            _f.label = 31;
+            _c = moment__default["default"].utc().format(dateFormat);
+            _h.label = 31;
 
           case 31:
-            animationEnd = _d;
+            animationEnd = _c;
             if (!(shouldEndtimeOverride && animationLength)) return [3
             /*break*/
             , 33];
@@ -9086,17 +9388,17 @@
             , effects.select(getAnimationStartTime, mapId)];
 
           case 32:
-            _e = _f.sent();
+            _d = _h.sent();
             return [3
             /*break*/
             , 34];
 
           case 33:
-            _e = moment__default["default"].utc().subtract(duration, 'minutes').format(dateFormat);
-            _f.label = 34;
+            _d = moment__default["default"].utc().subtract(duration, 'minutes').format(dateFormat);
+            _h.label = 34;
 
           case 34:
-            animationStart = _e;
+            animationStart = _d;
             return [4
             /*yield*/
             , effects.put(mapActions$1.mapStartAnimation({
@@ -9107,7 +9409,7 @@
             }))];
 
           case 35:
-            _f.sent();
+            _h.sent();
 
             if (!interval) return [3
             /*break*/
@@ -9120,9 +9422,9 @@
             }))];
 
           case 36:
-            _f.sent();
+            _h.sent();
 
-            _f.label = 37;
+            _h.label = 37;
 
           case 37:
             return [3
@@ -9143,9 +9445,9 @@
 
           case 39:
             //  Set timestep auto based on preset if animation is off
-            _f.sent();
+            _h.sent();
 
-            _f.label = 40;
+            _h.label = 40;
 
           case 40:
             shouldOpenLegend = shouldShowLegend !== undefined ? shouldShowLegend : IS_LEGEND_OPEN_BY_DEFAULT;
@@ -9154,7 +9456,7 @@
             , effects.select(getLegendId, mapId)];
 
           case 41:
-            legendId = _f.sent();
+            legendId = _h.sent();
             if (!legendId) return [3
             /*break*/
             , 43];
@@ -9166,9 +9468,9 @@
             }))];
 
           case 42:
-            _f.sent();
+            _h.sent();
 
-            _f.label = 43;
+            _h.label = 43;
 
           case 43:
             if (!dockedLayerManagerSize) return [3
@@ -9182,9 +9484,9 @@
             }))];
 
           case 44:
-            _f.sent();
+            _h.sent();
 
-            _f.label = 45;
+            _h.label = 45;
 
           case 45:
             if (!(animationEndTime && (shouldEndtimeOverride || !(shouldAutoUpdate || shouldAnimate)))) return [3
@@ -9196,14 +9498,14 @@
             , effects.delay(fiveMinuteDelayForAnimation)];
 
           case 46:
-            _f.sent();
+            _h.sent();
 
             return [4
             /*yield*/
             , effects.select(getAnimationEndTime$1, mapId)];
 
           case 47:
-            animationEnd = _f.sent();
+            animationEnd = _h.sent();
             return [4
             /*yield*/
             , effects.put(mapActions$1.setAnimationEndTime({
@@ -9212,14 +9514,14 @@
             }))];
 
           case 48:
-            _f.sent();
+            _h.sent();
 
             return [4
             /*yield*/
             , effects.select(getAnimationStartTime, mapId)];
 
           case 49:
-            animationStart = _f.sent();
+            animationStart = _h.sent();
             return [4
             /*yield*/
             , effects.put(mapActions$1.setAnimationStartTime({
@@ -9228,7 +9530,7 @@
             }))];
 
           case 50:
-            _f.sent();
+            _h.sent();
 
             return [3
             /*break*/
@@ -9240,7 +9542,7 @@
             , 53];
 
           case 52:
-            error_3 = _f.sent();
+            error_3 = _h.sent();
             console.error(error_3);
             return [3
             /*break*/
@@ -9286,7 +9588,7 @@
         }
       });
     }
-    function rootSaga$3() {
+    function rootSaga$4() {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -9348,6 +9650,187 @@
       });
     }
 
+    /* *
+     * 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, forceReload) {
+      if (forceReload === void 0) {
+        forceReload = false;
+      }
+
+      return new Promise(function (resolve, reject) {
+        var serviceObject = webmap.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, forceReload) {
+      if (forceReload === void 0) {
+        forceReload = false;
+      }
+
+      return new Promise(function (resolve, reject) {
+        var serviceObject = webmap.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.
+     * 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)
+     * */
+    function fetchServiceSaga(service) {
+      var layers;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            _a.trys.push([0, 3,, 4]);
+
+            return [4
+            /*yield*/
+            , effects.call(getLayersFlattenedFromService, service.serviceUrl)];
+
+          case 1:
+            layers = _a.sent();
+            return [4
+            /*yield*/
+            , effects.put(serviceActions.serviceSetLayers(__assign(__assign({}, service), {
+              layers: layers
+            })))];
+
+          case 2:
+            _a.sent();
+
+            return [3
+            /*break*/
+            , 4];
+
+          case 3:
+            _a.sent();
+            return [3
+            /*break*/
+            , 4];
+
+          case 4:
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    }
+    function fetchInitialServicesSaga(_a) {
+      var services;
+      var payload = _a.payload;
+      return __generator(this, function (_b) {
+        switch (_b.label) {
+          case 0:
+            services = payload.services;
+            return [4
+            /*yield*/
+            , effects.all(services.map(function (service) {
+              return effects.call(fetchServiceSaga, service);
+            }))];
+
+          case 1:
+            _b.sent();
+
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    }
+    function rootSaga$3() {
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            return [4
+            /*yield*/
+            , effects.takeEvery(serviceActions.fetchInitialServices, fetchInitialServicesSaga)];
+
+          case 1:
+            _a.sent();
+
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    }
+
     var moduleConfig = {
       id: 'webmap-module',
       reducersMap: {
@@ -9355,7 +9838,7 @@
         services: reducer$7,
         layers: reducer$8
       },
-      sagas: [rootSaga$3]
+      sagas: [rootSaga$4, rootSaga$3]
     };
 
     function _typeof(obj) {
@@ -9427,57 +9910,6 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    function newServiceAddedSaga(capturedAction) {
-      var addedService, id, serviceUrl, name, scope, _abstract, isUpdating, keywords, groups;
-
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          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) return [2
-            /*return*/
-            ];
-            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;
-            }, []);
-            return [4
-            /*yield*/
-            , effects.put(layerSelectActions.addFiltersAndActiveServices({
-              serviceId: id,
-              serviceName: name,
-              serviceUrl: serviceUrl,
-              keywords: keywords,
-              scope: scope,
-              groups: groups,
-              "abstract": _abstract,
-              isLoading: false
-            }))];
-
-          case 1:
-            _a.sent();
-
-            return [2
-            /*return*/
-            ];
-        }
-      });
-    }
     function layerSelectCloseInfoDialogSaga(_a) {
       var _b, togglePayload, activeMapIdPayload, isLayerInfoDialogOpen, isLayerInfoDialogOpen, filteredLayers, dialogInfo;
 
@@ -9665,20 +10097,27 @@
       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(__assign(__assign({}, localStorageServices), (_b = {}, _b[serviceUrl] = {
         name: name,
         url: serviceUrl,
-        "abstract": _abstract2
+        "abstract": _abstract
       }, _b)));
     }
     function removeServiceFromLocalStorageSaga(_a) {
       var payload = _a.payload;
       var serviceUrl = payload.serviceUrl;
       var localStorageServices = getUserAddedServices();
-      if (!localStorageServices[serviceUrl]) return;
+
+      if (!localStorageServices[serviceUrl]) {
+        return;
+      }
 
       var updatedServices = __assign({}, localStorageServices);
 
@@ -9689,39 +10128,32 @@
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
-            return [4
-            /*yield*/
-            , effects.takeEvery(serviceActions.serviceSetLayers.type, newServiceAddedSaga)];
-
-          case 1:
-            _a.sent();
-
             return [4
             /*yield*/
             , effects.takeEvery(layerSelectActions.layerSelectRemoveService.type, layerSelectRemoveServiceSaga)];
 
-          case 2:
+          case 1:
             _a.sent();
 
             return [4
             /*yield*/
             , effects.takeEvery(serviceActions.serviceSetLayers.type, addServiceToLocalStorageSaga)];
 
-          case 3:
+          case 2:
             _a.sent();
 
             return [4
             /*yield*/
             , effects.takeEvery(serviceActions.mapStoreRemoveService.type, removeServiceFromLocalStorageSaga)];
 
-          case 4:
+          case 3:
             _a.sent();
 
             return [4
             /*yield*/
             , effects.takeEvery([uiActions.setToggleOpenDialog.type, uiActions.setActiveMapIdForDialog.type, layerSelectActions.disableActiveService.type, layerSelectActions.toggleFilter.type, layerSelectActions.setSearchFilter.type], layerSelectCloseInfoDialogSaga)];
 
-          case 5:
+          case 4:
             _a.sent();
 
             return [2
@@ -9901,8 +10333,8 @@
      * 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,
@@ -9923,16 +10355,19 @@
 
     var HeaderOptions = function HeaderOptions(_a) {
       var isDockedLayerManager = _a.isDockedLayerManager,
+          shortcutsEnabled = _a.shortcutsEnabled,
           onClickDockButton = _a.onClickDockButton,
           onChangeSize = _a.onChangeSize;
       React__namespace.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);
+            }
           }
         };
 
@@ -9940,7 +10375,7 @@
         return function () {
           document.removeEventListener('keydown', handleKeyDown);
         };
-      }, [onChangeSize]);
+      }, [onChangeSize, shortcutsEnabled]);
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
         title: "small"
       }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
@@ -10164,9 +10599,18 @@
       }
     };
     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;
     };
 
@@ -10352,11 +10796,18 @@
         } // 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) {
@@ -10370,11 +10821,18 @@
       };
 
       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();
@@ -10405,7 +10863,11 @@
       var dimValueCurrentIndex = valuesToDisplay.findIndex(function (value) {
         return value === activeDim.currentValue;
       });
-      if (dimValueCurrentIndex === -1) return null;
+
+      if (dimValueCurrentIndex === -1) {
+        return null;
+      }
+
       return /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         direction: "row",
@@ -10686,7 +11148,9 @@
         }
       }, [anchorEl]);
       var onMouseEnter = React__namespace.useCallback(function () {
-        if (!isOpen) setTooltipOpen(true);
+        if (!isOpen) {
+          setTooltipOpen(true);
+        }
       }, [isOpen, setTooltipOpen]);
       var onMouseLeave = React__namespace.useCallback(function () {
         setTooltipOpen(false);
@@ -10917,15 +11381,15 @@
         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) {
@@ -10963,8 +11427,6 @@
           isActive = _a.isActive,
           isEnabled = _a.isEnabled;
       var style = {
-        backgroundColor: isActive ? 'geowebColors.buttons.primary.active.fill' : 'transparent!important',
-        borderRadius: '5px',
         color: getIconColor(isActive, isEnabled)
       };
       var Icon = isActive ? /*#__PURE__*/React__namespace.createElement(theme.Both, {
@@ -10977,9 +11439,10 @@
         "aria-label": "Auto update " + optionSelected,
         sx: {
           '&.MuiButtonBase-root': {
-            backgroundColor: 'transparent'
+            backgroundColor: 'inherit'
           }
-        }
+        },
+        active: isActive
       }, Icon);
     };
 
@@ -11083,16 +11546,18 @@
             padding: 0
           }
         },
-        title: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, dragHandle, layerEnableLayout || /*#__PURE__*/React__default["default"].createElement(shared.EnableButton, {
+        title: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, dragHandle, layerEnableLayout || /*#__PURE__*/React__default["default"].createElement(shared.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["default"].createElement(theme.Visibility, null) : /*#__PURE__*/React__default["default"].createElement(theme.VisibilityOff, null)
         }), layerActiveLayout || /*#__PURE__*/React__default["default"].createElement(ActivateLayer, {
           onChange: onClickRow,
           isActive: false,
@@ -11154,26 +11619,31 @@
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         sx: {}
-      }, layerDeleteLayout || /*#__PURE__*/React__default["default"].createElement(shared.ManagerDeleteButton, {
+      }, layerDeleteLayout || /*#__PURE__*/React__default["default"].createElement(shared.ManagerButton, {
         tooltipTitle: "Delete",
-        onClickDelete: function onClickDelete() {
+        onClick: function onClick() {
           onLayerDelete({
             mapId: mapId,
             layerId: layerId
           });
-        }
+        },
+        icon: /*#__PURE__*/React__default["default"].createElement(theme.Delete, null),
+        "data-testid": "deleteButton"
       }))))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         className: columnClasses.column1
-      }, dragHandle, layerEnableLayout || /*#__PURE__*/React__default["default"].createElement(shared.EnableButton, {
+      }, dragHandle, layerEnableLayout || /*#__PURE__*/React__default["default"].createElement(shared.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["default"].createElement(theme.Visibility, null) : /*#__PURE__*/React__default["default"].createElement(theme.VisibilityOff, null),
+        "data-testid": "enableButton"
       }), layerActiveLayout || /*#__PURE__*/React__default["default"].createElement(ActivateLayer, {
         onChange: onClickRow,
         isActive: false,
@@ -11240,14 +11710,16 @@
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         className: columnClasses.column6
-      }, layerDeleteLayout || /*#__PURE__*/React__default["default"].createElement(shared.ManagerDeleteButton, {
+      }, layerDeleteLayout || /*#__PURE__*/React__default["default"].createElement(shared.ManagerButton, {
         tooltipTitle: "Delete",
-        onClickDelete: function onClickDelete() {
+        onClick: function onClick() {
           onLayerDelete({
             mapId: mapId,
             layerId: layerId
           });
-        }
+        },
+        icon: /*#__PURE__*/React__default["default"].createElement(theme.Delete, null),
+        "data-testid": "deleteButton"
       }), layerMenuLayout || /*#__PURE__*/React__default["default"].createElement(LayerManagerMenuButton, {
         mapId: mapId,
         layerId: layerId,
@@ -11291,16 +11763,18 @@
       var isLayerEnabled = reactRedux.useSelector(function (store) {
         return getLayerEnabled(store, layerId);
       });
-      return /*#__PURE__*/React__namespace.createElement(shared.ManagerDeleteButton, {
+      return /*#__PURE__*/React__namespace.createElement(shared.ManagerButton, {
         tooltipTitle: "Delete",
-        onClickDelete: function onClickDelete() {
+        onClick: function onClick() {
           layerDelete({
             mapId: mapId,
             layerId: layerId,
             layerIndex: layerIndex
           });
         },
-        isEnabled: isLayerEnabled
+        isEnabled: isLayerEnabled,
+        icon: /*#__PURE__*/React__namespace.createElement(theme.Delete, null),
+        "data-testid": "deleteButton"
       });
     };
 
@@ -11339,26 +11813,32 @@
           origin: LayerActionOrigin.layerManager
         }));
       }, [dispatch, mapId]);
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(shared.EnableButton, {
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(shared.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__namespace.createElement(shared.EnableButton, {
+        className: "enable-btn",
+        icon: isEnabled ? /*#__PURE__*/React__namespace.createElement(theme.Visibility, null) : /*#__PURE__*/React__namespace.createElement(theme.VisibilityOff, null),
+        "data-testid": "enableButton"
+      }), /*#__PURE__*/React__namespace.createElement(shared.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__namespace.createElement(theme.Visibility, null) : /*#__PURE__*/React__namespace.createElement(theme.VisibilityOff, null),
+        "data-testid": "enableButton"
       }));
     };
 
@@ -11509,92 +11989,6 @@
       });
     };
 
-    /* *
-     * 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, forceReload) {
-      if (forceReload === void 0) {
-        forceReload = false;
-      }
-
-      return new Promise(function (resolve, reject) {
-        var serviceObject = webmap.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, forceReload) {
-      if (forceReload === void 0) {
-        forceReload = false;
-      }
-
-      return new Promise(function (resolve, reject) {
-        var serviceObject = webmap.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.
@@ -11783,8 +12177,9 @@
       var setActiveLayerId = React__namespace.useCallback(function (_a) {
         var layerId = _a.layerId,
             mapId = _a.mapId;
-        return dispatch(mapActions$1.setActiveLayerId({
-          layerId: layerId,
+        return dispatch(mapActions$1.setAutoLayerId({
+          autoTimeStepLayerId: layerId,
+          autoUpdateLayerId: layerId,
           mapId: mapId,
           origin: LayerActionOrigin.layerManager
         }));
@@ -11934,11 +12329,10 @@
       return /*#__PURE__*/React__default["default"].createElement(shared.ManagerButton, {
         tooltipTitle: tooltipTitle,
         icon: /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, null),
-        testId: "dragHandle" + (index !== undefined ? "-" + index : ''),
+        "data-testid": "dragHandle" + (index !== undefined ? "-" + index : ''),
         className: "handle",
         tabIndex: -1,
         isEnabled: !isDisabled,
-        disableFocusRipple: true,
         disableTouchRipple: true,
         disabled: isDisabled,
         isAccessible: true,
@@ -12005,7 +12399,10 @@
       var onStart = React__namespace.useCallback(function (_a) {
         var oldIndex = _a.oldIndex;
         setActiveDragIndex(oldIndex);
-        if (Sortable__default["default"].ghost) Sortable__default["default"].ghost.style.opacity = '1';
+
+        if (Sortable__default["default"].ghost) {
+          Sortable__default["default"].ghost.style.opacity = '1';
+        }
       }, []);
       var onEnd = React__namespace.useCallback(function () {
         if (activeDragIndex !== null) {
@@ -12625,7 +13022,9 @@
         onClickLayer: function onClickLayer(serviceURL, layerName) {
           if (layerType === LayerType.baseLayer) {
             addBaseLayer(serviceURL, layerName);
-          } else addMapLayer(serviceURL, layerName);
+          } else {
+            addMapLayer(serviceURL, layerName);
+          }
         },
         highlightedLayers: loadedLayers
       });
@@ -12776,9 +13175,16 @@
      * */
 
     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;
     };
 
@@ -13113,8 +13519,56 @@
      * 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 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(_a) {
+      var isDockedLayerManager = _a.isDockedLayerManager,
+          mapId = _a.mapId,
+          onClickDockButton = _a.onClickDockButton,
+          onChangeSize = _a.onChangeSize;
+      var activeMapId = reactRedux.useSelector(function (store) {
+        return getActiveWindowId(store);
+      });
+      var floatingLmFocused = reactRedux.useSelector(function (store) {
+        return getDialogFocused(store, DialogTypes.LayerManager);
+      });
+      var shortcutsEnabled = areShortcutsEnabled(activeMapId, mapId, floatingLmFocused, isDockedLayerManager);
+      return /*#__PURE__*/React__namespace.createElement(HeaderOptions, {
+        isDockedLayerManager: isDockedLayerManager,
+        shortcutsEnabled: shortcutsEnabled,
+        onClickDockButton: onClickDockButton,
+        onChangeSize: onChangeSize
+      });
+    };
+
+    /* *
+     * 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 styles$2 = {
       layerRowContainer: {
@@ -13171,16 +13625,18 @@
           startPosition = _k === void 0 ? {
         top: 85,
         left: 50
-      } : _k;
+      } : _k,
+          _l = _a.setFocused,
+          setFocused = _l === void 0 ? function () {} : _l;
       var minSize = {
         width: 100,
         height: 126
       };
       var startSizeCalc = calculateStartSize(minSize, size, startPosition);
 
-      var _l = __read(React__namespace.useState(startSizeCalc), 2),
-          sizeInState = _l[0],
-          setSizeInState = _l[1];
+      var _m = __read(React__namespace.useState(startSizeCalc), 2),
+          sizeInState = _m[0],
+          setSizeInState = _m[1];
 
       React__namespace.useEffect(function () {
         if (size !== sizeInState && isDockedLayerManager && isOpen) {
@@ -13200,11 +13656,18 @@
         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__namespace.createElement(HeaderOptions, {
+        rightHeaderComponent: /*#__PURE__*/React__namespace.createElement(HeaderOptionsConnect, {
           isDockedLayerManager: isDockedLayerManager,
+          mapId: mapId,
           onClickDockButton: onToggleDock,
           onChangeSize: function onChangeSize(_a) {
             var width = _a.width;
@@ -13279,8 +13742,8 @@
      * 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, source) {
       if (source === void 0) {
@@ -13350,6 +13813,14 @@
       var uiError = reactRedux.useSelector(function (store) {
         return getDialogError(store, dialogType);
       });
+
+      var setFocused = function setFocused(focused) {
+        dispatch(uiActions.setDialogFocused({
+          type: dialogType,
+          focused: focused
+        }));
+      };
+
       return {
         setDialogOrder: setDialogOrder,
         dialogOrder: dialogOrder,
@@ -13357,7 +13828,8 @@
         uiSource: uiSource,
         isDialogOpen: isDialogOpen,
         uiIsLoading: uiIsLoading,
-        uiError: uiError
+        uiError: uiError,
+        setFocused: setFocused
       };
     };
 
@@ -13374,62 +13846,42 @@
      * 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 getServicesToLoad = function getServicesToLoad(services) {
+      return services.map(function (service) {
+        var wmService = webmap.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, preloadedServices) {
       if (preloadedServices === void 0) {
         preloadedServices = preloadedDefaultMapServices;
       }
 
       var dispatch = reactRedux.useDispatch();
-      var isMounted = shared.useIsMounted().isMounted;
       var isOpenInStore = reactRedux.useSelector(function (store) {
         return getisDialogOpen(store, dialogType);
       });
-      var serviceSetLayers = React__namespace.useCallback(function (payload) {
-        dispatch(serviceActions.serviceSetLayers(payload));
-      }, [dispatch]);
-      var addFiltersAndActiveServices = React__namespace.useCallback(function (payload) {
-        dispatch(layerSelectActions.addFiltersAndActiveServices(payload));
+      var fetchInitialServices = React__namespace.useCallback(function (services) {
+        dispatch(serviceActions.fetchInitialServices({
+          services: services
+        }));
       }, [dispatch]);
       React__namespace.useEffect(function () {
         if (isOpenInStore && preloadedServices && preloadedServices.length > 0) {
-          mergePresetsAndUserAddedServices(preloadedServices, getUserAddedServices()).forEach(function (service) {
-            var wmService = webmap.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(__assign(__assign({}, presets.reduce(function (byUrl, preset) {
@@ -13452,8 +13904,8 @@
      * 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;
     /**
@@ -13489,7 +13941,8 @@
           isDialogOpen = _d.isDialogOpen,
           uiSource = _d.uiSource,
           uiIsLoading = _d.uiIsLoading,
-          uiError = _d.uiError;
+          uiError = _d.uiError,
+          setFocused = _d.setFocused;
 
       useFetchServices(dialogType, preloadedMapServices);
 
@@ -13517,7 +13970,8 @@
         leftHeaderComponent: leftHeaderComponent,
         isLoading: uiIsLoading,
         error: uiError,
-        onToggleDock: onToggleDock
+        onToggleDock: onToggleDock,
+        setFocused: setFocused
       });
     };
 
@@ -13755,7 +14209,12 @@
 
       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__namespace.useEffect(function () {
@@ -13782,7 +14241,10 @@
       }, [urlIsValid, localSearchString, onOpenServicePopup]); // mirror store unless typing a URL
 
       React__namespace.useEffect(function () {
-        if (isURL(localSearchString)) return;
+        if (isURL(localSearchString)) {
+          return;
+        }
+
         setLocalSearchString(searchFilter); // eslint-disable-next-line react-hooks/exhaustive-deps
       }, [searchFilter]);
       return /*#__PURE__*/React__namespace.createElement(material.TextField, {
@@ -14446,13 +14908,19 @@
     };
     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) {
@@ -15177,7 +15645,9 @@
         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
@@ -15238,7 +15708,11 @@
         var foundService = selectedLayers.find(function (object) {
           return object.service === serviceUrl;
         });
-        if (foundService) return true;
+
+        if (foundService) {
+          return true;
+        }
+
         return false;
       };
 
@@ -15471,7 +15945,11 @@
 
         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]];
     };
 
@@ -16149,7 +16627,10 @@
           uiSource = _a.uiSource,
           isDialogOpen = _a.isDialogOpen;
 
-      if (!layer) return null;
+      if (!layer) {
+        return null;
+      }
+
       return /*#__PURE__*/React__default["default"].createElement(LayerInfoDialog, {
         isOpen: isDialogOpen,
         onClose: onCloseDialog,
@@ -17114,7 +17595,10 @@
         onKeyDown: upDownNavigation,
         onChange: function onChange(e, val) {
           onChangeDimensionValue(values[val].toString());
-          if (!managedValue) setCurrentIndex(val);
+
+          if (!managedValue) {
+            setCurrentIndex(val);
+          }
         }
       }))), /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
         title: layerTitle
@@ -17146,7 +17630,10 @@
      * 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;
       });
@@ -17172,7 +17659,9 @@
 
     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);
@@ -17906,7 +18395,10 @@
       };
 
       var handleToggleTimeStep = function handleToggleTimeStep() {
-        if (isTimestepAuto) return;
+        if (isTimestepAuto) {
+          return;
+        }
+
         onToggleTimestepAuto();
         timeStepFromLayer && onChangeTimeStep(timeStepFromLayer, MapActionOrigin.map);
       };
@@ -18406,32 +18898,53 @@
         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;
             }
         }
@@ -18441,7 +18954,10 @@
             {
               var weekday = moment__default["default"].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;
             }
 
@@ -18449,15 +18965,24 @@
             {
               var month = moment__default["default"].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;
             }
 
@@ -18475,31 +19000,52 @@
       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;
           }
 
@@ -18507,7 +19053,10 @@
           {
             var weekday = moment__default["default"].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;
           }
 
@@ -18515,14 +19064,20 @@
           {
             var month = moment__default["default"].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;
           }
 
@@ -18562,7 +19117,10 @@
     };
 
     var drawUpperText = function drawUpperText(ctx, theme, newDate, stepPx, height, minOffset) {
-      if (stepPx <= 0) return;
+      if (stepPx <= 0) {
+        return;
+      }
+
       var ctx2 = ctx;
       var _a = theme.palette.geowebColors.timeSlider.timelineText,
           fontSize = _a.fontSize,
@@ -18946,7 +19504,10 @@
       } // 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 _c = __read(getCustomRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, timestepUnit), 2),
@@ -18984,7 +19545,10 @@
      * 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 _a = theme.palette.geowebColors.timeSlider,
           playerNeedlePlayer = _a.playerNeedlePlayer,
@@ -19125,7 +19689,9 @@
       function drawNightOrAlternateTime() {
         var colorChangeTimesteps = getColorChangeTimesteps(scale, visibleTimeStart, visibleTimeEnd);
         colorChangeTimesteps.forEach(function (timestep, i, arr) {
-          if (i === 0) return;
+          if (i === 0) {
+            return;
+          }
 
           var _a = __read([arr[i - 1], timestep].map(function (timestep) {
             return timestampToPixelEdges(timestep, visibleTimeStart, visibleTimeEnd, canvasWidth);
@@ -19343,7 +19909,9 @@
 
       }, [leftMarkerDragging, rightMarkerDragging, animationAreaDragging]);
       var handleAnimationDragging = React.useCallback(function (x) {
-        if (!localAnimationStartTime || !localAnimationEndTime) return;
+        if (!localAnimationStartTime || !localAnimationEndTime) {
+          return;
+        }
 
         var _a = __read([localAnimationStartTime, localAnimationEndTime].map(function (timestamp) {
           return timestampToPixel(timestamp, centerTime, canvasWidth, secondsPerPx);
@@ -19523,7 +20091,9 @@
       }, [canvasWidth, centerTime, dataEndTime, dataStartTime, onSetNewDate, secondsPerPx, setUnfilteredSelectedTime, timeStep, unfilteredSelectedTime]);
       React__namespace.useEffect(function () {
         var handleMouseMove = function handleMouseMove(event) {
-          if (event.movementX === 0) return;
+          if (event.movementX === 0) {
+            return;
+          }
 
           if (mouseDownInLegend) {
             var dragDistanceTime = event.movementX * secondsPerPx;
@@ -19729,7 +20299,10 @@
      * 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)) {
@@ -19739,7 +20312,10 @@
       }
     };
     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)) {
@@ -19942,12 +20518,16 @@
       }, /*#__PURE__*/React__default["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);
         },
@@ -20227,11 +20807,11 @@
       var isTimestepAuto$1 = reactRedux.useSelector(function (store) {
         return isTimestepAuto(store, mapId);
       });
-      var activeLayerId = reactRedux.useSelector(function (store) {
-        return getActiveLayerId(store, mapId);
+      var autoTimeStepLayerId = reactRedux.useSelector(function (store) {
+        return getAutoTimeStepLayerId(store, mapId);
       });
       var activeLayerTimeDimension = reactRedux.useSelector(function (store) {
-        return getLayerTimeDimension(store, activeLayerId);
+        return getLayerTimeDimension(store, autoTimeStepLayerId);
       });
       var timeStepFromLayer = getActiveLayerTimeStep(activeLayerTimeDimension);
       var onToggleTimestepAuto = React__namespace.useCallback(function () {
@@ -20844,14 +21424,14 @@
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
     var useUpdateTimestep = function useUpdateTimestep(mapId) {
-      var activeLayerId = reactRedux.useSelector(function (store) {
-        return getActiveLayerId(store, mapId);
+      var autoTimeStepLayerId = reactRedux.useSelector(function (store) {
+        return getAutoTimeStepLayerId(store, mapId);
       });
       var isTimeStepAuto = reactRedux.useSelector(function (store) {
         return isTimestepAuto(store, mapId);
       });
       var timeDimension = reactRedux.useSelector(function (store) {
-        return getLayerTimeDimension(store, activeLayerId);
+        return getLayerTimeDimension(store, autoTimeStepLayerId);
       });
       var dispatch = reactRedux.useDispatch();
       React__namespace.useEffect(function () {
@@ -20862,7 +21442,7 @@
             timeStep: timeStep
           }));
         }
-      }, [activeLayerId, dispatch, isTimeStepAuto, mapId, timeDimension]);
+      }, [autoTimeStepLayerId, dispatch, isTimeStepAuto, mapId, timeDimension]);
     };
 
     var TimeSliderConnect = function TimeSliderConnect(_a) {
@@ -22008,8 +22588,11 @@
         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]
@@ -22321,12 +22904,16 @@
             isInEditMode = _a.isInEditMode,
             featureNrToEdit = _a.featureNrToEdit,
             onHoverFeature = _a.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;
@@ -22366,7 +22953,11 @@
         }
 
         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,
@@ -22441,7 +23032,10 @@
       AdagucMapDraw.prototype.triggerMouseDownTimer = function (event) {
         var _this = this;
 
-        if (!this.doubleClickTimer) this.doubleClickTimer = {};
+        if (!this.doubleClickTimer) {
+          this.doubleClickTimer = {};
+        }
+
         var mouseX = event.mouseX,
             mouseY = event.mouseY;
 
@@ -22769,7 +23363,10 @@
 
       AdagucMapDraw.prototype.adagucMouseDown = function (event) {
         var isInEditMode = this.props.isInEditMode;
-        if (event && event.rightButton === true) return;
+
+        if (event && event.rightButton === true) {
+          return;
+        }
 
         if (isInEditMode === false) {
           return;
@@ -22795,11 +23392,14 @@
         // 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);
@@ -22808,13 +23408,22 @@
         /* 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 */
@@ -22880,7 +23489,10 @@
         var _a = this.props,
             isInEditMode = _a.isInEditMode,
             onClickFeature = _a.onClickFeature;
-        if (event && event.rightButton === true) return;
+
+        if (event && event.rightButton === true) {
+          return;
+        }
 
         if (onClickFeature) {
           var mouseX = event.mouseX,
@@ -23020,10 +23632,21 @@
 
 
       AdagucMapDraw.prototype.validateFeature = function (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 = [];
+        }
       };
 
       AdagucMapDraw.prototype.validatePolys = function (fixPolys) {
@@ -23032,7 +23655,10 @@
         }
 
         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;
@@ -23587,12 +24213,23 @@
             isInEditMode = _a.isInEditMode,
             featureNrToEdit = _a.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,
@@ -23662,16 +24299,23 @@
             isInEditMode = _a.isInEditMode,
             featureNrToEdit = _a.featureNrToEdit;
         var feature = this.geojson.features[featureIndex];
-        if (!feature || !feature.geometry) 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,
@@ -23744,8 +24388,11 @@
         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]
@@ -23961,7 +24608,9 @@
             }
           },
           exitDrawModeCallback: function exitDrawModeCallback() {
-            if (layer.exitDrawModeCallback) layer.exitDrawModeCallback();
+            if (layer.exitDrawModeCallback) {
+              layer.exitDrawModeCallback();
+            }
           },
           featureNrToEdit: parseInt(layer.featureNrToEdit || '0', 10)
         }));
@@ -24242,7 +24891,11 @@
               mapId = _a.mapId,
               onMapZoomEnd = _a.onMapZoomEnd;
           var wmjsMap = getWMJSMapById(mapId);
-          if (!wmjsMap) return;
+
+          if (!wmjsMap) {
+            return;
+          }
+
           var projectionInfo = wmjsMap.getProjection();
           /* Trigger onMapZoomEnd callback */
 
@@ -25408,7 +26061,7 @@
           onLayerError: function onLayerError(_, error) {
             layerError({
               layerId: layer.id,
-              error: error
+              error: "" + error
             });
           }
         }, layer));
@@ -25419,7 +26072,7 @@
           onLayerError: function onLayerError(_, error) {
             layerError({
               layerId: layer.id,
-              error: error
+              error: "" + error
             });
           },
           onClickFeature: layer.geojson ? function (event) {
@@ -25436,7 +26089,7 @@
           onLayerError: function onLayerError(_, error) {
             layerError({
               layerId: layer.id,
-              error: error
+              error: "" + error
             });
           }
         }, layer));
@@ -26029,7 +26682,11 @@
 
     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) {
@@ -26223,7 +26880,11 @@
             title = layer.title,
             url = layer.url;
         var result = gfiResultMap.get(layerId);
-        if (!result) return null;
+
+        if (!result) {
+          return null;
+        }
+
         return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           key: layerId,
           sx: {
@@ -26440,38 +27101,40 @@
           title = _a.title,
           _b = _a.layers,
           layers = _b === void 0 ? [] : _b,
-          _c = _a.shouldAutoUpdate,
-          shouldAutoUpdate = _c === void 0 ? false : _c,
-          _d = _a.shouldAnimate,
-          shouldAnimate = _d === void 0 ? false : _d,
-          _e = _a.bbox,
-          bbox = _e === void 0 ? defaultBbox.bbox : _e,
-          _f = _a.srs,
-          srs = _f === void 0 ? defaultBbox.srs : _f,
-          _g = _a.shouldShowZoomControls,
-          shouldShowZoomControls = _g === void 0 ? true : _g,
-          _h = _a.displayMapPin,
-          displayMapPin = _h === void 0 ? false : _h,
-          _j = _a.showTimeSlider,
-          showTimeSlider = _j === void 0 ? true : _j,
-          _k = _a.disableTimeSlider,
-          disableTimeSlider = _k === void 0 ? false : _k,
-          _l = _a.displayTimeInMap,
-          displayTimeInMap = _l === void 0 ? false : _l,
-          _m = _a.displayLayerManagerAndLegendButtonInMap,
-          displayLayerManagerAndLegendButtonInMap = _m === void 0 ? true : _m,
-          _o = _a.displayDimensionSelectButtonInMap,
-          displayDimensionSelectButtonInMap = _o === void 0 ? true : _o,
-          _p = _a.multiLegend,
-          multiLegend = _p === void 0 ? true : _p,
+          _c = _a.dimensions,
+          dimensions = _c === void 0 ? [] : _c,
+          _d = _a.shouldAutoUpdate,
+          shouldAutoUpdate = _d === void 0 ? false : _d,
+          _e = _a.shouldAnimate,
+          shouldAnimate = _e === void 0 ? false : _e,
+          _f = _a.bbox,
+          bbox = _f === void 0 ? defaultBbox.bbox : _f,
+          _g = _a.srs,
+          srs = _g === void 0 ? defaultBbox.srs : _g,
+          _h = _a.shouldShowZoomControls,
+          shouldShowZoomControls = _h === void 0 ? true : _h,
+          _j = _a.displayMapPin,
+          displayMapPin = _j === void 0 ? false : _j,
+          _k = _a.showTimeSlider,
+          showTimeSlider = _k === void 0 ? true : _k,
+          _l = _a.disableTimeSlider,
+          disableTimeSlider = _l === void 0 ? false : _l,
+          _m = _a.displayTimeInMap,
+          displayTimeInMap = _m === void 0 ? false : _m,
+          _o = _a.displayLayerManagerAndLegendButtonInMap,
+          displayLayerManagerAndLegendButtonInMap = _o === void 0 ? true : _o,
+          _p = _a.displayDimensionSelectButtonInMap,
+          displayDimensionSelectButtonInMap = _p === void 0 ? true : _p,
+          _q = _a.multiLegend,
+          multiLegend = _q === void 0 ? true : _q,
           shouldShowLayerManager = _a.shouldShowLayerManager,
           shouldShowDockedLayerManager = _a.shouldShowDockedLayerManager,
-          _q = _a.showClock,
-          showClock = _q === void 0 ? true : _q,
-          _r = _a.displayGetFeatureInfoButtonInMap,
-          displayGetFeatureInfoButtonInMap = _r === void 0 ? false : _r,
+          _r = _a.showClock,
+          showClock = _r === void 0 ? true : _r,
+          _s = _a.displayGetFeatureInfoButtonInMap,
+          displayGetFeatureInfoButtonInMap = _s === void 0 ? false : _s,
           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 = reactRedux.useDispatch();
       var mapId = React__default["default"].useRef(id || generateMapId()).current;
@@ -26489,6 +27152,7 @@
             bbox: bbox,
             srs: srs
           },
+          dimensions: dimensions,
           shouldAutoUpdate: shouldAutoUpdate,
           shouldAnimate: shouldAnimate,
           shouldShowZoomControls: shouldShowZoomControls,
@@ -26636,7 +27300,8 @@
             syncGroupAddTarget({
               groupId: syncGroupsId,
               targetId: map.id,
-              linked: true
+              linked: true,
+              origin: 'system'
             });
           });
         });
@@ -26680,9 +27345,11 @@
           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,
@@ -26739,9 +27406,13 @@
       var syncGroupState = reactRedux.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';
       });
@@ -26796,9 +27467,13 @@
       /* Get latest reference time for this layer */
 
       var latestReferenceTime = useGetLatestReferenceTime(layers[0]);
-      if (latestReferenceTime === '') return /*#__PURE__*/React__namespace.createElement("div", null, "Loading...");
+
+      if (latestReferenceTime === '') {
+        return /*#__PURE__*/React__namespace.createElement("div", null, "Loading...");
+      }
       /* Calculate the last time increment based on 15 maps */
 
+
       var lastTimeIncrement = startTimeIncrement + 15 * interval;
       /* Make the preset */
 
@@ -26870,9 +27545,13 @@
       /* Get all the reference times for this layer */
 
       var referenceTimes = useGetReferenceTimes(layers.topRow);
-      if (referenceTimes.length === 0) return /*#__PURE__*/React__namespace.createElement("div", null, "Loading...");
+
+      if (referenceTimes.length === 0) {
+        return /*#__PURE__*/React__namespace.createElement("div", null, "Loading...");
+      }
       /* Helper to make a map layer prest */
 
+
       var makeMapPreset = function makeMapPreset(referenceTime, uniqueId, layer, syncGroupsIds, col) {
         return {
           id: uniqueId,
@@ -26961,7 +27640,11 @@
                 mapPreset_1 = _b.mapPreset,
                 shouldShowZoomControls = _b.shouldShowZoomControls,
                 syncGroupsIds_1 = _b.syncGroupsIds;
-            if (!mapPreset_1 || mapPreset_1.length === 0) return null;
+
+            if (!mapPreset_1 || mapPreset_1.length === 0) {
+              return null;
+            }
+
             return /*#__PURE__*/React__default["default"].createElement(MultiMapViewConnect, {
               rows: 2,
               cols: 2,
@@ -26969,11 +27652,15 @@
               maps: mapPreset_1.map(function (preset, index) {
                 var _a, _b, _c, _d;
 
+                var layers = preset.layers,
+                    autoUpdateLayerId = preset.autoUpdateLayerId,
+                    autoTimeStepLayerId = preset.autoTimeStepLayerId;
                 return {
                   id: id + "_" + index,
                   syncGroupsIds: syncGroupsIds_1,
-                  layers: preset.layers,
-                  activeLayerId: preset.activeLayerId,
+                  layers: layers,
+                  autoUpdateLayerId: autoUpdateLayerId,
+                  autoTimeStepLayerId: autoTimeStepLayerId,
                   bbox: (_b = (_a = mapPreset_1[0]) === null || _a === void 0 ? void 0 : _a.proj) === null || _b === void 0 ? void 0 : _b.bbox,
                   srs: (_d = (_c = mapPreset_1[0]) === null || _c === void 0 ? void 0 : _c.proj) === null || _d === void 0 ? void 0 : _d.srs
                 };
@@ -27968,6 +28655,7 @@
     exports.generateLayerId = generateLayerId;
     exports.generateMapId = generateMapId;
     exports.generateTimesliderId = generateTimesliderId;
+    exports.genericSelectors = selectors$1;
     exports.getDrawFunctionFromStore = getDrawFunctionFromStore;
     exports.getFirstTimeStepForLayerId = getFirstTimeStepForLayerId;
     exports.getInitialAppPresets = getInitialAppPresets;
@@ -27980,7 +28668,7 @@
     exports.getWMLayerById = getWMLayerById;
     exports.layerActions = layerActions;
     exports.layerReducer = reducer$8;
-    exports.layerSelectors = selectors$2;
+    exports.layerSelectors = selectors$3;
     exports.layerTypes = types$3;
     exports.mapActions = mapActions;
     exports.mapModuleConfig = moduleConfig;
@@ -28004,7 +28692,7 @@
     exports.timeSliderUtils = timeSliderUtils;
     exports.uiActions = uiActions;
     exports.uiModuleConfig = uiModuleConfig;
-    exports.uiSelectors = selectors$1;
+    exports.uiSelectors = selectors$2;
     exports.uiTypes = types;
     exports.unRegisterWMJSLayer = unRegisterWMJSLayer;
     exports.unRegisterWMJSMap = unRegisterWMJSMap;