@opengeoweb/store 10.1.0 → 11.0.0

package/index.esm.js

@@ -1,4 +1,4 @@
-import { createSlice, createSelector, createAction, createListenerMiddleware, isAnyOf, createEntityAdapter } from '@reduxjs/toolkit';
+import { createSlice, createSelector, createAction, createListenerMiddleware, isAnyOf, createEntityAdapter, combineReducers, configureStore } from '@reduxjs/toolkit';
 import { isEqual, isEmpty, compact } from 'lodash';
 import { dateUtils, PROJECTION, defaultDelay } from '@opengeoweb/shared';
 import { webmapUtils, parseISO8601IntervalToDateInterval, LayerType, getWMJSMapById, webmapTestSettings, WMLayer, getWMSRequests, handleDateUtilsISOString, isProjectionSupported, queryWMSLayers } from '@opengeoweb/webmap';
@@ -8,6 +8,7 @@ import { getGeoJson, moveFeature, createInterSections, getLastEmptyFeatureIndex,
 export { defaultLayers } from '@opengeoweb/webmap-react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useCallback, useEffect } from 'react';
+import * as turf from '@turf/turf';
 import { metronome } from '@opengeoweb/metronome';
 
 /* *
@@ -63,8 +64,8 @@ var slice$7 = createSlice({
     }
   }
 });
-var reducer$5 = slice$7.reducer;
-var serviceActions = slice$7.actions;
+var serviceReducer = slice$7.reducer,
+  serviceActions = slice$7.actions;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2025,7 +2026,7 @@ var slice$6 = createSlice({
           type: source && source.type
         };
         /* Handle the Layer action with the same logic, using the same reducer */
-        return reducer$4(prevState, action);
+        return layerReducer(prevState, action);
       }, draft);
     }).addCase(setMapPreset, function (draft, action) {
       var mapId = action.payload.mapId;
@@ -2045,8 +2046,8 @@ var slice$6 = createSlice({
     });
   }
 });
-var reducer$4 = slice$6.reducer;
-var layerActions = slice$6.actions;
+var layerReducer = slice$6.reducer,
+  layerActions = slice$6.actions;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2179,8 +2180,8 @@ var slice$5 = createSlice({
     }
   }
 });
-var reducer$3 = slice$5.reducer;
-var uiActions = slice$5.actions;
+var uiReducer = slice$5.reducer,
+  uiActions = slice$5.actions;
 
 /**
  * Checks if the layer id is already taken in one of the maps.
@@ -2799,7 +2800,7 @@ var slice$4 = createSlice({
           type: source && source.type
         };
         /* Handle the Layer action with the same logic, using the same reducer */
-        return reducer$2(prevState, action);
+        return mapReducer(prevState, action);
       }, draft);
     }).addCase(layerActions.onUpdateLayerInformation, function (draft, action) {
       var mapDimensions = action.payload.mapDimensions;
@@ -2849,7 +2850,7 @@ var mapActions = Object.assign({}, slice$4.actions, {
   setMapPreset: setMapPreset,
   mapChangeDimension: mapChangeDimension
 });
-var reducer$2 = slice$4.reducer;
+var mapReducer = slice$4.reducer;
 
 var layerStore = function layerStore(store) {
   return store == null ? void 0 : store.layers;
@@ -2867,6 +2868,16 @@ var getLayerById = createSelector([layerStore, function (layerStore, layerId) {
 }], function (layerState, layerId) {
   return layerState && layerState.byId && layerState.byId[layerId];
 }, selectorMemoizationOptions);
+/**
+ * Determines if layer is present
+ *
+ * @param {object} store store: object - store object
+ * @param {string} layerId layerId: string - Id of the layer
+ * @returns {boolean} returnType:boolean - true if layer is present
+ */
+var getIsLayerPresent = createSelector(getLayerById, function (layer) {
+  return !!layer;
+}, selectorMemoizationOptions);
 /**
  * Gets a layer from the layers part of the store by its Id, but without the time dimension. (All other dimensions are still included)
  *
@@ -3269,6 +3280,7 @@ var selectors$6 = /*#__PURE__*/Object.freeze({
   getFeatureLayers: getFeatureLayers,
   getHasFeatureLayerGeoJSON: getHasFeatureLayerGeoJSON,
   getIsLayerInEditMode: getIsLayerInEditMode,
+  getIsLayerPresent: getIsLayerPresent,
   getLayerById: getLayerById,
   getLayerByIdWithoutTimeDimension: getLayerByIdWithoutTimeDimension,
   getLayerCurrentTime: getLayerCurrentTime,
@@ -3954,8 +3966,8 @@ var _slice$actions = slice$3.actions;
   _slice$actions.syncGroupRemoveSource;
   _slice$actions.syncGroupRemoveTarget;
   _slice$actions.syncGroupSetViewState;
-var actions = slice$3.actions,
-  reducer$1 = slice$3.reducer;
+var syncGroupsReducer = slice$3.reducer,
+  syncGroupsActions = slice$3.actions;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -4226,7 +4238,7 @@ var selector = /*#__PURE__*/Object.freeze({
 
 var syncGroupsListener = createListenerMiddleware();
 syncGroupsListener.startListening({
-  matcher: isAnyOf(actions.syncGroupAddTarget, actions.syncGroupLinkTarget),
+  matcher: isAnyOf(syncGroupsActions.syncGroupAddTarget, syncGroupsActions.syncGroupLinkTarget),
   effect: function () {
     var _effect = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref, listenerApi) {
       var payload, groupId, linked, targetToUpdate, group;
@@ -4284,7 +4296,7 @@ syncGroupsListener.startListening({
   }()
 });
 syncGroupsListener.startListening({
-  matcher: isAnyOf(actions.syncGroupAddGroup, actions.syncGroupRemoveGroup, actions.syncGroupAddSource, actions.syncGroupRemoveSource, actions.syncGroupAddTarget, actions.syncGroupRemoveTarget, actions.syncGroupLinkTarget),
+  matcher: isAnyOf(syncGroupsActions.syncGroupAddGroup, syncGroupsActions.syncGroupRemoveGroup, syncGroupsActions.syncGroupAddSource, syncGroupsActions.syncGroupRemoveSource, syncGroupsActions.syncGroupAddTarget, syncGroupsActions.syncGroupRemoveTarget, syncGroupsActions.syncGroupLinkTarget),
   effect: function () {
     var _effect2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_, listenerApi) {
       var viewState;
@@ -4293,7 +4305,7 @@ syncGroupsListener.startListening({
           case 0:
             listenerApi.cancelActiveListeners();
             viewState = createSyncGroupViewStateSelector(listenerApi.getState());
-            listenerApi.dispatch(actions.syncGroupSetViewState({
+            listenerApi.dispatch(syncGroupsActions.syncGroupSetViewState({
               viewState: viewState
             }));
           case 3:
@@ -4481,6 +4493,18 @@ function (state, mapId) {
       name: (_selectedFeature$prop3 = selectedFeature.properties) == null ? void 0 : _selectedFeature$prop3.name
     };
   }
+  if (selectedFeature) {
+    var _selectedFeature$prop4, _selectedFeature$prop5, _selectedFeature$prop6;
+    var center = turf.center(selectedFeature);
+    return {
+      lat: center.geometry.coordinates[1],
+      lon: center.geometry.coordinates[0],
+      id: selectedFeature.id,
+      serviceId: (_selectedFeature$prop4 = selectedFeature.properties) == null ? void 0 : _selectedFeature$prop4.serviceId,
+      collectionId: (_selectedFeature$prop5 = selectedFeature.properties) == null ? void 0 : _selectedFeature$prop5.collectionId,
+      name: (_selectedFeature$prop6 = selectedFeature.properties) == null ? void 0 : _selectedFeature$prop6.name
+    };
+  }
   return null;
 });
 
@@ -4526,7 +4550,7 @@ var useUpdateSharedData = function useUpdateSharedData(data, panelId) {
   useEffect(function () {
     var diff = Object.assign({}, sharedData, data);
     if (panelId && (linkedMaps == null ? void 0 : linkedMaps.length) > 0 && !isEqual(diff, sharedData)) {
-      dispatch(actions.addSharedData({
+      dispatch(syncGroupsActions.addSharedData({
         panelId: panelId,
         data: data
       }));
@@ -4535,7 +4559,7 @@ var useUpdateSharedData = function useUpdateSharedData(data, panelId) {
   useEffect(function () {
     return function () {
       if (panelId) {
-        dispatch(actions.deleteSharedData({
+        dispatch(syncGroupsActions.deleteSharedData({
           panelId: panelId
         }));
       }
@@ -4724,7 +4748,7 @@ var selectors$2 = /*#__PURE__*/Object.freeze({
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
-var genericActions = Object.assign({}, actions, {
+var genericActions = Object.assign({}, syncGroupsActions, {
   initialSyncState: initialState$2,
   setTime: setTime,
   setBbox: setBbox
@@ -5397,7 +5421,7 @@ var getLegendId = createSelector(getMapById, function (store) {
  * @param {string} mapId mapId: string - Id of the map
  * @returns {MapPreset} returnType: MapPreset
  */
-var getMapPreset = createSelector(getMapLayers, getMapBaseLayers, getMapOverLayers, getBbox, getSrs, getActiveLayerId, getAutoTimeStepLayerId, getAutoUpdateLayerId, isAnimating, isAutoUpdating, isTimeSliderVisible, getDisplayMapPin, isZoomControlsVisible, getMapTimeStep, getMapAnimationDelay, getAnimationStartTime, getAnimationEndTime, isTimestepAuto, getLegendId, getUiStore, function (mapLayers, baseLayers, overLayers, bbox, srs, activeLayerId, autoUpdateLayerId, autoTimeStepLayerId, isAnimating, isAutoUpdating, isTimeSliderVisible, displayMapPin, isZoomControlsVisible, mapTimeStep, mapAnimationDelay, animationStartTime, animationEndTime, isTimestepAuto, legendId, uiStore) {
+var getMapPreset = createSelector(getMapLayers, getMapBaseLayers, getMapOverLayers, getBbox, getSrs, getActiveLayerId, getAutoTimeStepLayerId, getAutoUpdateLayerId, isAnimating, isAutoUpdating, isTimeSliderVisible, getDisplayMapPin, isZoomControlsVisible, getMapTimeStep, getMapAnimationDelay, getAnimationStartTime, getAnimationEndTime, getMapTimeSliderSpan, isTimestepAuto, isTimeSpanAuto, getLegendId, getUiStore, function (mapLayers, baseLayers, overLayers, bbox, srs, activeLayerId, autoUpdateLayerId, autoTimeStepLayerId, isAnimating, isAutoUpdating, isTimeSliderVisible, displayMapPin, isZoomControlsVisible, mapTimeStep, mapAnimationDelay, animationStartTime, animationEndTime, timeSliderSpan, isTimestepAuto, isTimeSpanAuto, legendId, uiStore) {
   var _uiStore$dialogs$lege;
   var allLayers = [].concat(baseLayers, overLayers, mapLayers).map(function (_ref2) {
     _ref2.mapId;
@@ -5439,7 +5463,9 @@ var getMapPreset = createSelector(getMapLayers, getMapBaseLayers, getMapOverLaye
     shouldShowZoomControls: isZoomControlsVisible,
     animationPayload: animationPayload,
     toggleTimestepAuto: isTimestepAuto,
-    shouldShowLegend: shouldShowLegend
+    toggleTimeSpanAuto: isTimeSpanAuto,
+    shouldShowLegend: shouldShowLegend,
+    timeSliderSpan: timeSliderSpan
   });
 }, selectorMemoizationOptions);
 /**
@@ -5950,218 +5976,217 @@ var storeTestSettings = /*#__PURE__*/Object.freeze({
   styleListForRADNLOPERR25PCPRRL3KNMILayer: styleListForRADNLOPERR25PCPRRL3KNMILayer
 });
 
-/* A map with all the timerIds and their current step */
-var stepMap = new Map();
-/* A map with a list of timers and their dwell */
-var timerDwellMap = new Map();
+var _excluded$1 = ["id"];
 /**
- * Returns the next step for given timerId.
- * @param timerId The timer id
- * @param numberOfStepsInAnimation Animation length in steps
- * @param numStepsToGoForward Amount of steps to go forwards, defaults to 1. Can be positive and negative
+ * 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
+ * @param mapId
+ * @param targetMapId
+ * @param payload
  * @returns
  */
-var getNextStep = function getNextStep(timerId, numberOfStepsInAnimation, numStepsToGoForward) {
-  if (numStepsToGoForward === void 0) {
-    numStepsToGoForward = 1;
+var getTargetLayerIdFromPayload = function getTargetLayerIdFromPayload(state, mapId, targetMapId, payload) {
+  if (!payload) {
+    return null;
   }
-  var currentStep = getCurrentStep(timerId);
-  var nextStep = currentStep + numStepsToGoForward;
-  var nextStepClipped = (nextStep % numberOfStepsInAnimation + numberOfStepsInAnimation) % numberOfStepsInAnimation;
-  return nextStepClipped;
+  /* Try to find the layer for the DeleteLayerPayload, it uses layerIndex to reference the layer */
+  if ('layerIndex' in payload) {
+    var tempLayerIndex = payload.layerIndex;
+    if (tempLayerIndex !== undefined) {
+      var targetLayer = getLayerByLayerIndex(state, targetMapId, tempLayerIndex);
+      return !targetLayer ? null : targetLayer.id;
+    }
+  }
+  /* Try to find the layer for the LayerActionsWithLayerIds, it uses layerId to reference the layer */
+  if ('layerId' in payload) {
+    var _targetLayer = getLayerByLayerIndex(state, targetMapId, getLayerIndexByLayerId(state, mapId, payload.layerId));
+    return !_targetLayer ? null : _targetLayer.id;
+  }
+  /* This payload probably does not reference to a layerId */
+  return null;
 };
 /**
- * Handles dwell at the end of the animation loop sequence. The number of steps to wait till proceed can be set by the dwell parameter.
- * @param timerId The timer id
- * @param numberOfStepsInAnimation Number of steps in the animation
- * @param dwell The number of steps to wait at the end of the animation sequence before to continue
- * @returns
+ * Local helper function used by getLayerDeleteActionsTargets, getLayerActionsTargets, getAddLayerActionsTargets, getTargetLayerIdFromPayload to find the targets
+ * @param state
+ * @param payload
+ * @param actionType
+ * @param sourceMapId
+ * @returns The found targets
  */
-var handleTimerDwell = function handleTimerDwell(timerId, numberOfStepsInAnimation, dwell) {
-  if (dwell === void 0) {
-    dwell = 8;
-  }
-  if (dwell > 0) {
-    var currentStep = getCurrentStep(timerId);
-    // Reset the dwell if we are not at the last animation step
-    if (currentStep < numberOfStepsInAnimation - 1) {
-      timerDwellMap.set(timerId, dwell);
-      return false;
-    }
-    // We are at the last animation step, check the dwell
-    var timerDwell = timerDwellMap.has(timerId) && timerDwellMap.get(timerId) || 0;
-    if (currentStep === numberOfStepsInAnimation - 1 && timerDwell > 0) {
-      timerDwellMap.set(timerId, timerDwell - 1);
-      return true;
-    }
+var findTargets = function findTargets(state, payload, actionType, sourceMapId) {
+  var actionPayloads = [];
+  var targetsInActionPayload = {};
+  var syncGroups = syncGroupStore(state);
+  if (syncGroups && payload) {
+    syncGroups.groups.allIds.forEach(function (id) {
+      var syncronizationGroup = syncGroups.groups.byId[id];
+      if (actionType === syncronizationGroup.type) {
+        /* Check if the source is in the target list of the synchonizationGroup */
+        var source = syncronizationGroup.targets.byId[sourceMapId];
+        /* If the source is part of the target list, and is linked, continue syncing the other targets */
+        if (source && source.linked) {
+          syncronizationGroup.targets.allIds.forEach(function (targetId) {
+            var target = syncronizationGroup.targets.byId[targetId];
+            if (targetId !== sourceMapId && target.linked && !targetsInActionPayload[targetId]) {
+              /* Remember that we have already added this target in the action payloads, prevents adding it twice */
+              targetsInActionPayload[targetId] = true;
+              var otherLayerId = getTargetLayerIdFromPayload(state, sourceMapId, targetId, payload);
+              actionPayloads.push({
+                payload: payload,
+                targetId: targetId,
+                layerId: otherLayerId
+              });
+            }
+          });
+        }
+      }
+    });
   }
-  return false;
+  return actionPayloads;
 };
 /**
- * Set step for the timerId
- * @param timerId
- * @param timerStep
+ * These targets are found for layer actions that work with a layerId like: SetLayerName, SetLayerEnabled, SetLayerOpacity, SetLayerDimension and SetLayerStyle
+ * @param state
+ * @param payload
+ * @param actionType
+ * @returns
  */
-var setStep = function setStep(timerId, timerStep) {
-  stepMap.set(timerId, timerStep);
+var getLayerActionsTargets = function getLayerActionsTargets(state, payload, actionType) {
+  var mapId = getMapIdFromLayerId(state, payload.layerId);
+  if (!mapId) {
+    return [];
+  }
+  var foundTargets = findTargets(state, payload, actionType, mapId);
+  return foundTargets.map(function (target) {
+    var payload = target.payload;
+    return Object.assign({}, payload, {
+      layerId: target.layerId,
+      origin: SyncGroupActionOrigin.layerActions,
+      mapId: payload.mapId
+    });
+  });
 };
 /**
- * Gets the current step for the timer
- * @param timerId
+ * These targets are found for the layer/map action AddLayer. AddLayer does not have a layerId (because it's new)
+ * @param state
+ * @param payload
+ * @param actionType
  * @returns
  */
-var getCurrentStep = function getCurrentStep(timerId) {
-  return stepMap.get(timerId) || 0;
+var getAddLayerActionsTargets = function getAddLayerActionsTargets(state, payload, actionType) {
+  var foundTargets = findTargets(state, payload, actionType, payload.mapId);
+  return foundTargets.map(function (_ref) {
+    var payload = _ref.payload,
+      targetId = _ref.targetId;
+    var layer = payload.layer;
+    layer.id;
+      var layerWithoutId = _objectWithoutPropertiesLoose(layer, _excluded$1);
+    var layerId = webmapUtils.generateLayerId();
+    return Object.assign({}, payload, {
+      layer: layerWithoutId,
+      layerId: layerId,
+      mapId: targetId,
+      origin: SyncGroupActionOrigin.add
+    });
+  });
 };
-var MAX_NUMBER_STEPS_FORWARD_TO_PREFETCH = 2;
-var MAX_NUMBER_OF_PARALLEL_LOADING_IMAGES = 8;
 /**
- * This prefetches all images connected to the same sync group as provided timerId
- * @param timerId The timerId
- * @param animationListValues List of animation steps in isostring to animate
- * @param targets List of targets to check
- * @returns True if all maps are ready to go forward, false if the map has no data to display yet.
+ * These targets are found for the layer/map action DeleteLayer. The layer is already gone, so there is no layerId anymore. Using layerIndex instead.
+ * @param state
+ * @param payload
+ * @param actionType
+ * @returns
  */
-var prefetchAnimationTargetsForMetronome = function prefetchAnimationTargetsForMetronome(timerId, animationListValues, targets) {
-  var timerShouldStepForward = true;
-  // The following code prefetches/buffers for all maps in the group
-  for (var numPrefetch = 0; numPrefetch < MAX_NUMBER_STEPS_FORWARD_TO_PREFETCH; numPrefetch += 1) {
-    var nextStep = getNextStep(timerId, animationListValues.length, numPrefetch + 1);
-    var nextTimeValueStepToCheck = animationListValues[nextStep];
-    for (var _iterator = _createForOfIteratorHelperLoose(targets), _step; !(_step = _iterator()).done;) {
-      var target = _step.value;
-      var targetMapId = target.targetId;
-      var wmMap = getWMJSMapById(targetMapId);
-      if (!wmMap) {
-        return true; // Map was not registered so there is nothing to prefetch, do not block going forward
-      }
-      var layersImageUrls = getWMSRequests(wmMap, [{
-        name: 'time',
-        currentValue: nextTimeValueStepToCheck
-      }]);
-      for (var _iterator2 = _createForOfIteratorHelperLoose(layersImageUrls), _step2; !(_step2 = _iterator2()).done;) {
-        var layersImageUrl = _step2.value;
-        var image = wmMap.getMapImageStore.getImage(layersImageUrl.url);
-        if (!image.isLoaded()) {
-          if (wmMap.getMapImageStore.getNumImagesLoading() < MAX_NUMBER_OF_PARALLEL_LOADING_IMAGES) {
-            image.load();
-          }
-          if (numPrefetch === 0) {
-            var altImage = wmMap.getAlternativeImage(layersImageUrl.url, wmMap.getBBOX(), true);
-            // No alternative image available yet, so skipping animation.
-            if (altImage.length === 0) {
-              // This is useful to indicate that the map is loading and has nothing yet to display.
-              // console.warn('No data available: Not stepping forward');
-              timerShouldStepForward = false;
-            }
-          }
-        } else if (image.isStale()) {
-          if (wmMap.getMapImageStore.getNumImagesLoading() < MAX_NUMBER_OF_PARALLEL_LOADING_IMAGES) {
-            image.forceReload(true);
-          }
-        }
-      }
-    }
-  }
-  return timerShouldStepForward;
+var getLayerDeleteActionsTargets = function getLayerDeleteActionsTargets(state, payload, actionType) {
+  var foundTargets = findTargets(state, payload, actionType, payload.mapId);
+  return foundTargets.map(function (target) {
+    return Object.assign({}, target.payload, {
+      mapId: target.targetId,
+      layerId: target.layerId,
+      origin: SyncGroupActionOrigin["delete"]
+    });
+  });
 };
-
 /**
- * This handler is triggered by the metronome. An array of timerIds is given as argument.
- * It will update the animation loop of multiple maps and sliders
- * It will prefetch images for maps
- * @param timerIds string[] array of timerIds
- * @param listenerApi ListenerEffectAPI<CoreAppStore, Dispatch, unknown> listenerApi as received from listener
+ * These targets are found for the layer/map action MoveLayer. Here layers are referenced by newIndex and oldIndex.
+ * @param state
+ * @param payload
+ * @param actionType
+ * @returns
  */
-var metronomeHandler = function metronomeHandler(timerIds, listenerApi) {
-  var targetsWithUpdateValue = [];
-  var _loop = function _loop() {
-    var timerId = _step.value;
-    var animationListValuesNameAndValue = getAnimationList(listenerApi.getState(), timerId);
-    var animationListValues = animationListValuesNameAndValue.map(function (nameAndValue) {
-      return nameAndValue.value;
+var getLayerMoveActionsTargets = function getLayerMoveActionsTargets(state, payload, actionType) {
+  var foundTargets = findTargets(state, payload, actionType, payload.mapId);
+  return foundTargets.map(function (target) {
+    return Object.assign({}, target.payload, {
+      mapId: target.targetId,
+      origin: SyncGroupActionOrigin.move
     });
-    var targets = getTargets(listenerApi.getState(), {
-      sourceId: timerId,
-      origin: timerId
-    }, SYNCGROUPS_TYPE_SETTIME);
-    if (targets.length === 0) {
-      // When there are no targets, default to one
-      targets.push({
-        targetId: timerId,
-        value: ''
-      });
-    }
-    var timerIsInDwell = handleTimerDwell(timerId, animationListValues.length);
-    var timerShouldStepForward = prefetchAnimationTargetsForMetronome(timerId, animationListValues, targets) && !timerIsInDwell;
-    // Determine the next step
-    var timerStep = timerShouldStepForward ? getNextStep(timerId, animationListValues.length) : getCurrentStep(timerId);
-    setStep(timerId, timerStep);
-    var updatedValue = animationListValues[timerStep];
-    targetsWithUpdateValue.push.apply(targetsWithUpdateValue, targets.map(function (target) {
-      return Object.assign({}, target, {
-        value: updatedValue
-      });
-    }));
-    var speedDelay = getMapAnimationDelay(listenerApi.getState(), timerId);
-    var speed = 1000 / (speedDelay || 1);
-    metronome.setSpeed(timerId, speed);
-  };
-  for (var _iterator = _createForOfIteratorHelperLoose(timerIds), _step; !(_step = _iterator()).done;) {
-    _loop();
-  }
-  // Update all targets of all sync groups in one action.
-  if (targetsWithUpdateValue.length > 0) {
-    listenerApi.dispatch(setTimeSync(null, targetsWithUpdateValue, ['metronomelistener']));
-  }
+  });
+};
+/**
+ * These targets are found for the map action SetAutoLayerId. It needs both a target mapId and layerId
+ * @param state
+ * @param payload
+ * @param actionType
+ * @returns
+ */
+var getSetAutoLayerIdActionsTargets = function getSetAutoLayerIdActionsTargets(state, payload, actionType) {
+  var payloadWithLayerId = Object.assign({}, payload, {
+    layerId: payload.autoUpdateLayerId || payload.autoTimeStepLayerId || payload.layerId
+  });
+  var foundTargets = findTargets(state, payloadWithLayerId, actionType, payload.mapId);
+  return foundTargets.map(function (target) {
+    return {
+      mapId: target.targetId,
+      layerId: target.layerId,
+      origin: SyncGroupActionOrigin.autoLayerId
+    };
+  });
+};
+/**
+ * These targets are found for baselayer actions that work with a mapId like: setBaseLayers
+ * @param state
+ * @param payload
+ * @param actionType
+ * @returns
+ */
+var getMapBaseLayerActionsTargets = function getMapBaseLayerActionsTargets(state, payload, actionType) {
+  var foundTargets = findTargets(state, payload, actionType, payload.mapId);
+  return foundTargets.map(function (target) {
+    return {
+      layers: payload.layers.map(function (layer) {
+        return Object.assign({}, layer, {
+          id: webmapUtils.generateLayerId()
+        });
+      }),
+      mapId: target.targetId,
+      origin: SyncGroupActionOrigin.layerActions
+    };
+  });
 };
-var metronomeListener = createListenerMiddleware();
-metronomeListener.startListening({
-  actionCreator: mapActions.mapStartAnimation,
-  effect: function () {
-    var _effect = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_, listenerApi) {
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            // register handler with access to listenerApi
-            metronome.handleTimerTicks = function (timerIds) {
-              metronomeHandler(timerIds, listenerApi);
-            };
-          case 1:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    function effect(_x, _x2) {
-      return _effect.apply(this, arguments);
-    }
-    return effect;
-  }()
-});
 
-var layersListener = createListenerMiddleware();
-layersListener.startListening({
-  actionCreator: layerActions.showLayerInfo,
+var setTimeValidatorRexexp = /^(19|20)\d\d-(0[1-9]|1[012])-([012]\d|3[01])T([01]\d|2[0-3]):([0-5]\d):([0-5]\d)Z$/;
+var genericListener = createListenerMiddleware();
+genericListener.startListening({
+  actionCreator: setTime,
   effect: function () {
     var _effect = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref, listenerApi) {
-      var payload, mapId, source, currentActiveMapId, isOpenInStore;
+      var payload, value, origin, targets, groups;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             payload = _ref.payload;
-            mapId = payload.mapId, source = payload.source;
-            currentActiveMapId = getDialogMapId(listenerApi.getState(), DialogTypes.LayerInfo);
-            isOpenInStore = getisDialogOpen(listenerApi.getState(), DialogTypes.LayerInfo);
-            if (currentActiveMapId !== mapId ? true : !isOpenInStore) {
-              listenerApi.dispatch(uiActions.setActiveMapIdForDialog({
-                type: DialogTypes.LayerInfo,
-                mapId: mapId,
-                setOpen: true,
-                source: source
-              }));
+            listenerApi.cancelActiveListeners();
+            value = payload.value, origin = payload.origin;
+            /* Test if the value is according to the expected time format */
+            if (!setTimeValidatorRexexp.test(value)) {
+              console.error("setTime value " + value + " does not conform to format [YYYY-MM-DDThh:mm:ssZ]. It was triggered by " + origin);
+            } else {
+              targets = getTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETTIME);
+              groups = getTargetGroups(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETTIME);
+              listenerApi.dispatch(setTimeSync(payload, targets, groups));
             }
-          case 5:
+          case 4:
           case "end":
             return _context.stop();
         }
@@ -6173,23 +6198,20 @@ layersListener.startListening({
     return effect;
   }()
 });
-layersListener.startListening({
-  actionCreator: uiActions.setToggleOpenDialog,
+genericListener.startListening({
+  actionCreator: setBbox,
   effect: function () {
     var _effect2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref2, listenerApi) {
-      var payload, setOpen, type, isOpenInStore;
+      var payload, targets, groups;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
             payload = _ref2.payload;
-            setOpen = payload.setOpen, type = payload.type; // close LayerInfo if open and LayerManager is closed
-            if (type === DialogTypes.LayerManager && !setOpen) {
-              isOpenInStore = getisDialogOpen(listenerApi.getState(), DialogTypes.LayerInfo);
-              if (isOpenInStore) {
-                listenerApi.dispatch(layerActions.hideLayerInfo());
-              }
-            }
-          case 3:
+            listenerApi.cancelActiveListeners();
+            targets = getTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETBBOX);
+            groups = getTargetGroups(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETBBOX);
+            listenerApi.dispatch(setBboxSync(payload, targets, groups));
+          case 5:
           case "end":
             return _context2.stop();
         }
@@ -6201,1152 +6223,1042 @@ layersListener.startListening({
     return effect;
   }()
 });
-
-var isAnimationEndTimeValid = function isAnimationEndTimeValid(animationEndTime) {
-  var hasValidPrefix = animationEndTime.split(/[-+]/)[0] === 'NOW' || animationEndTime.split(/[-+]/)[0] === 'TODAY';
-  var durationString = animationEndTime.substring(animationEndTime.indexOf('PT') + 2);
-  var hasValidDate = /^(\d+H)?(\d+M)?$/.test(durationString);
-  if (hasValidPrefix && hasValidDate) {
-    return true;
-  }
-  var parsedDate = dateUtils.parseISO(animationEndTime);
-  return dateUtils.isValid(parsedDate);
-};
-var mapListener = createListenerMiddleware();
-mapListener.startListening({
-  actionCreator: layerActions.layerDelete,
-  effect: function effect(_ref, listenerApi) {
-    var payload = _ref.payload;
-    var mapId = payload.mapId;
-    var layers = getMapLayersWithoutDimensionCurrentValue(listenerApi.getState(), mapId);
-    if (!layers.length) {
-      listenerApi.dispatch(mapActions.mapStopAnimation({
-        mapId: mapId
-      }));
-    }
-  }
-});
-// update layer, synced maps and animation on latest max time if autoupdating
-mapListener.startListening({
-  actionCreator: layerActions.onUpdateLayerInformation,
-  effect: function effect(_ref2, listenerApi) {
-    var payload = _ref2.payload;
-    try {
-      var layerDimensions = payload.layerDimensions;
-      if (!layerDimensions) {
-        return;
-      }
-      var dimensions = layerDimensions.dimensions,
-        layerId = layerDimensions.layerId;
-      var layer = getLayerById(listenerApi.getState(), layerId);
-      if (!layer) {
-        return;
-      }
-      var newTimeDimension = dimensions.find(function (dimension) {
-        return dimension.name === 'time';
-      });
-      var mapId = layer.mapId;
-      if (!mapId) {
-        return;
-      }
-      var autoUpdateLayerId = getAutoUpdateLayerId(listenerApi.getState(), mapId);
-      var shouldAutoUpdate = isAutoUpdating(listenerApi.getState(), mapId);
-      var prevTimeDimension = getLayerTimeDimension(listenerApi.getState(), layerId);
-      var isAutoUpdateLayer = layerId === autoUpdateLayerId;
-      var incomingMaxTime = newTimeDimension == null ? void 0 : newTimeDimension.maxValue;
-      var isIncomingMaxTimeLaterThanCurrentLayerTime = incomingMaxTime && (prevTimeDimension == null ? void 0 : prevTimeDimension.currentValue) && prevTimeDimension.currentValue !== incomingMaxTime;
-      if (isAutoUpdateLayer &&
-      // only update the active layer
-      shouldAutoUpdate && isIncomingMaxTimeLaterThanCurrentLayerTime) {
-        var isMapAnimating = isAnimating(listenerApi.getState(), mapId);
-        if (!isMapAnimating) {
-          listenerApi.dispatch(layerActions.layerChangeDimension({
-            layerId: layerId,
-            origin: LayerActionOrigin.updateLayerInformationListener,
-            dimension: {
-              name: 'time',
-              currentValue: incomingMaxTime
+genericListener.startListening({
+  matcher: isAnyOf(layerActions.layerChangeName, layerActions.layerChangeEnabled, layerActions.layerChangeOpacity, layerActions.layerChangeDimension, layerActions.layerChangeStyle),
+  effect: function () {
+    var _effect3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(_ref3, listenerApi) {
+      var payload, type, targets;
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            payload = _ref3.payload, type = _ref3.type;
+            listenerApi.cancelActiveListeners();
+            /* Should not listen to actions from itself */
+            if (!(payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer)) {
+              _context3.next = 4;
+              break;
             }
-          }));
-          // Each time a layer updates, set the new time for all synced timesliders
-          var syncedMapIds = getSyncedMapIdsForTimeslider(listenerApi.getState());
-          if (syncedMapIds) {
-            // Change time value for all other timesliders
-            syncedMapIds.map(function (syncedMapId) {
-              return listenerApi.dispatch(setTime({
-                origin: LayerActionOrigin.updateLayerInformationListener,
-                sourceId: syncedMapId,
-                value: incomingMaxTime
-              }));
-            });
-          }
+            return _context3.abrupt("return");
+          case 4:
+            targets = getLayerActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
+            if (targets && targets.length > 0) {
+              listenerApi.dispatch(setLayerActionSync(payload, targets, type));
+            }
+          case 6:
+          case "end":
+            return _context3.stop();
         }
-        updateAnimation(mapId, incomingMaxTime, listenerApi);
-      }
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.warn(error);
+      }, _callee3);
+    }));
+    function effect(_x5, _x6) {
+      return _effect3.apply(this, arguments);
     }
-  }
+    return effect;
+  }()
 });
-var updateAnimation = function updateAnimation(mapId, maxValue, listenerApi) {
-  var shouldEndtimeOverride$1 = shouldEndtimeOverride(listenerApi.getState(), mapId);
-  if (shouldEndtimeOverride$1 === true) {
-    return;
-  }
-  var animationStart = getAnimationStartTime(listenerApi.getState(), mapId);
-  // Calculate how much time the animation start need to move forwards
-  var animationEnd = getAnimationEndTime(listenerApi.getState(), mapId);
-  var animationEndUnix = dateUtils.unix(dateUtils.utc(animationEnd));
-  var maxTimeAsUnix = dateUtils.unix(dateUtils.utc(maxValue));
-  var timeInSecondToShiftAnimationForwards = maxTimeAsUnix - animationEndUnix;
-  var animationStartUnix = dateUtils.unix(dateUtils.utc(animationStart));
-  var newAnimationStartTime = dateUtils.dateToString(dateUtils.fromUnix(animationStartUnix + timeInSecondToShiftAnimationForwards), dateFormat);
-  var newAnimationEndTime = dateUtils.dateToString(dateUtils.fromUnix(animationEndUnix + timeInSecondToShiftAnimationForwards), dateFormat);
-  if (!newAnimationStartTime || !newAnimationEndTime) {
-    return;
-  }
-  listenerApi.dispatch(mapActions.setAnimationEndTime({
-    mapId: mapId,
-    animationEndTime: newAnimationEndTime
-  }));
-  listenerApi.dispatch(mapActions.setAnimationStartTime({
-    mapId: mapId,
-    animationStartTime: newAnimationStartTime
-  }));
-};
-mapListener.startListening({
-  actionCreator: mapActions.toggleAutoUpdate,
+genericListener.startListening({
+  actionCreator: layerActions.addLayer,
   effect: function () {
-    var _effect = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref3, listenerApi) {
-      var payload, shouldAutoUpdate, mapId, autoUpdateLayerId, timeDimension, syncedMapIds, payloads;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+    var _effect4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(_ref4, listenerApi) {
+      var payload, type, targets;
+      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
           case 0:
-            payload = _ref3.payload;
+            payload = _ref4.payload, type = _ref4.type;
             listenerApi.cancelActiveListeners();
-            shouldAutoUpdate = payload.shouldAutoUpdate, mapId = payload.mapId;
-            if (shouldAutoUpdate) {
-              _context.next = 5;
+            /* Should not listen to actions from itself */
+            if (!(payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer)) {
+              _context4.next = 4;
               break;
             }
-            return _context.abrupt("return");
-          case 5:
-            try {
-              autoUpdateLayerId = getAutoUpdateLayerId(listenerApi.getState(), mapId);
-              timeDimension = getLayerTimeDimension(listenerApi.getState(), autoUpdateLayerId);
-              syncedMapIds = getSyncedMapIdsForTimeslider(listenerApi.getState()); // go to end of active layer
-              if (timeDimension != null && timeDimension.maxValue && autoUpdateLayerId) {
-                listenerApi.dispatch(layerActions.layerChangeDimension({
-                  layerId: autoUpdateLayerId,
-                  origin: LayerActionOrigin.toggleAutoUpdateListener,
-                  dimension: {
-                    name: 'time',
-                    currentValue: timeDimension.maxValue
-                  }
-                }));
-                // Change time value for all timesliders that are synced by syncgroups
-                if (syncedMapIds.length > 0) {
-                  syncedMapIds.map(function (syncedMapId) {
-                    return listenerApi.dispatch(setTime({
-                      origin: LayerActionOrigin.toggleAutoUpdateListener,
-                      sourceId: syncedMapId,
-                      value: timeDimension.maxValue
-                    }));
-                  });
-                }
-                updateAnimation(mapId, timeDimension.maxValue, listenerApi);
-              }
-              // Toggle autoupdate off for synced timesliders
-              payloads = syncedMapIds.reduce(function (syncedMapIdList, syncedMapId) {
-                if (syncedMapId !== mapId) {
-                  return syncedMapIdList.concat({
-                    mapId: syncedMapId,
-                    shouldAutoUpdate: false
-                  });
-                }
-                return syncedMapIdList;
-              }, []);
-              if (payloads.length > 0) {
-                payloads.map(function (payload) {
-                  return listenerApi.dispatch(mapActions.toggleAutoUpdate(payload));
-                });
-              }
-            } catch (error) {
-              // eslint-disable-next-line no-console
-              console.warn(error);
+            return _context4.abrupt("return");
+          case 4:
+            targets = getAddLayerActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
+            if (targets && targets.length > 0) {
+              listenerApi.dispatch(setLayerActionSync(payload, targets, type));
             }
           case 6:
           case "end":
-            return _context.stop();
+            return _context4.stop();
         }
-      }, _callee);
+      }, _callee4);
     }));
-    function effect(_x, _x2) {
-      return _effect.apply(this, arguments);
+    function effect(_x7, _x8) {
+      return _effect4.apply(this, arguments);
     }
     return effect;
   }()
 });
-mapListener.startListening({
-  actionCreator: mapActions.mapStartAnimation,
-  effect: function effect(_ref4, listenerApi) {
-    var payload = _ref4.payload;
-    var mapId = payload.mapId,
-      initialTime = payload.initialTime;
-    var speedDelay = getMapAnimationDelay(listenerApi.getState(), mapId);
-    var speed = 1000 / (speedDelay || 1);
-    metronome.register(null, speed, mapId);
-    var timeList = getAnimationList(listenerApi.getState(), mapId);
-    // In case of the timeList
-    if (timeList && timeList.length > 0) {
-      // Determine animation step based on initialTime and timeList
-      var initalTimerStep = timeList == null ? void 0 : timeList.findIndex(function (timeNameValue) {
-        return timeNameValue.value === initialTime;
-      });
-      if (initalTimerStep !== -1) {
-        setStep(mapId, initalTimerStep);
-      }
+genericListener.startListening({
+  actionCreator: layerActions.duplicateMapLayer,
+  effect: function () {
+    var _effect5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(_ref5, listenerApi) {
+      var payload, sourceLayer, newPayload, targets;
+      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            payload = _ref5.payload;
+            listenerApi.cancelActiveListeners();
+            sourceLayer = getLayerById(listenerApi.getState(), payload.oldLayerId);
+            newPayload = {
+              mapId: payload.mapId,
+              layer: sourceLayer,
+              origin: payload.origin
+            };
+            targets = getAddLayerActionsTargets(listenerApi.getState(), newPayload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
+            if (targets && targets.length > 0) {
+              listenerApi.dispatch(setLayerActionSync(newPayload, targets, layerActions.addLayer.type));
+            }
+          case 6:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5);
+    }));
+    function effect(_x9, _x10) {
+      return _effect5.apply(this, arguments);
     }
-  }
+    return effect;
+  }()
 });
-mapListener.startListening({
-  actionCreator: mapActions.mapStopAnimation,
-  effect: function effect(_ref5) {
-    var payload = _ref5.payload;
-    var mapId = payload.mapId;
-    metronome.unregister(mapId);
-  }
+genericListener.startListening({
+  actionCreator: mapActions.layerMoveLayer,
+  effect: function () {
+    var _effect6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(_ref6, listenerApi) {
+      var payload, type, targets;
+      return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
+          case 0:
+            payload = _ref6.payload, type = _ref6.type;
+            listenerApi.cancelActiveListeners();
+            /* Should not listen to actions from itself */
+            if (!(payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer)) {
+              _context6.next = 4;
+              break;
+            }
+            return _context6.abrupt("return");
+          case 4:
+            targets = getLayerMoveActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
+            if (targets && targets.length > 0) {
+              listenerApi.dispatch(setLayerActionSync(payload, targets, type));
+            }
+          case 6:
+          case "end":
+            return _context6.stop();
+        }
+      }, _callee6);
+    }));
+    function effect(_x11, _x12) {
+      return _effect6.apply(this, arguments);
+    }
+    return effect;
+  }()
 });
-var handleBaseLayers = function handleBaseLayers(mapId, baseLayers, listenerApi) {
-  var baseLayer = baseLayers.find(function (layer) {
-    return layer.layerType === 'baseLayer';
-  });
-  var currentAvailableBaseLayers = getAvailableBaseLayersForMap(listenerApi.getState(), mapId);
-  // find a availableBaseLayer with the same name, and use that id for the active baselayer
-  var activeAvailableBaseLayer = currentAvailableBaseLayers.find(function (availableBaseLayer) {
-    return availableBaseLayer.name === baseLayer.name;
-  });
-  var activeBaseLayerId = activeAvailableBaseLayer ? activeAvailableBaseLayer.id : webmapUtils.generateLayerId();
-  // if the baseLayer can't be found in a visible available baseLayer list, add it
-  // This happens when switching to a preset that has non-default baselayers
-  if (!activeAvailableBaseLayer && currentAvailableBaseLayers.length) {
-    listenerApi.dispatch(layerActions.addAvailableBaseLayers({
-      layers: [Object.assign({}, baseLayer, {
-        mapId: mapId,
-        id: activeBaseLayerId
-      })]
+genericListener.startListening({
+  matcher: isAnyOf(mapActions.setAutoLayerId, mapActions.setAutoUpdateLayerId, mapActions.setAutoTimestepLayerId),
+  effect: function () {
+    var _effect7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(_ref7, listenerApi) {
+      var payload, type, targets;
+      return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
+          case 0:
+            payload = _ref7.payload, type = _ref7.type;
+            listenerApi.cancelActiveListeners();
+            targets = getSetAutoLayerIdActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
+            if (targets && targets.length > 0) {
+              listenerApi.dispatch(setLayerActionSync(payload, targets, type));
+            }
+          case 4:
+          case "end":
+            return _context7.stop();
+        }
+      }, _callee7);
     }));
-  }
-  var baseLayersWithActiveId = baseLayers.map(function (layer, index) {
-    return index === 0 ? Object.assign({}, layer, {
-      id: activeBaseLayerId || layer.id
-    }) : layer;
-  });
-  listenerApi.dispatch(layerActions.setBaseLayers({
-    mapId: mapId,
-    layers: baseLayersWithActiveId
-  }));
-};
-mapListener.startListening({
-  actionCreator: mapActions.setMapPreset,
+    function effect(_x13, _x14) {
+      return _effect7.apply(this, arguments);
+    }
+    return effect;
+  }()
+});
+genericListener.startListening({
+  actionCreator: layerActions.setBaseLayers,
   effect: function () {
-    var _effect2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref6, listenerApi) {
-      var payload, mapId, initialProps, mapPreset, layers, activeLayerId, autoTimeStepLayerId, autoUpdateLayerId, proj, shouldAutoUpdate, shouldAnimate, animationPayload, toggleTimestepAuto, showTimeSlider, displayMapPin, shouldShowZoomControls, shouldShowLegend, dockedLayerManagerSize, _filterLayers, mapLayers, baseLayers, overLayers, _newLayerIds$layers$f, _newLayerIds$layers$, _newLayerIds$layers$f2, _newLayerIds$layers$2, autoTimeStepLayerIdNew, autoUpdateLayerIdNew, onlyActiveLayerIdIsSet, newLayerIds, newAutoUpdateLayerId, newAutoTimeStepLayerId, customLayers, customBaseLayer, customOverLayer, baseLayersWithDefaultLayer, overLayersWithDefaultLayer, allBaseLayers, checkIsprojectionSupported, animationLength, animationEndTime, shouldEndtimeOverride, interval, endTime, startTime, centerTimeInSeconds, animationEnd, _startTime, duration, _animationEnd, animationStart, shouldOpenLegend, legendId, fiveMinuteDelayForAnimation, _animationEnd2, _animationStart;
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+    var _effect8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8(_ref8, listenerApi) {
+      var payload, type, targets;
+      return _regeneratorRuntime().wrap(function _callee8$(_context8) {
+        while (1) switch (_context8.prev = _context8.next) {
           case 0:
-            payload = _ref6.payload;
-            _context2.prev = 1;
-            mapId = payload.mapId, initialProps = payload.initialProps;
-            mapPreset = initialProps.mapPreset;
-            if (!mapPreset) {
-              _context2.next = 48;
+            payload = _ref8.payload, type = _ref8.type;
+            listenerApi.cancelActiveListeners();
+            /* Should not listen to actions from itself */
+            if (!(payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer)) {
+              _context8.next = 4;
               break;
             }
-            layers = mapPreset.layers, activeLayerId = mapPreset.activeLayerId, autoTimeStepLayerId = mapPreset.autoTimeStepLayerId, autoUpdateLayerId = mapPreset.autoUpdateLayerId, proj = mapPreset.proj, shouldAutoUpdate = mapPreset.shouldAutoUpdate, shouldAnimate = mapPreset.shouldAnimate, animationPayload = mapPreset.animationPayload, toggleTimestepAuto = mapPreset.toggleTimestepAuto, showTimeSlider = mapPreset.showTimeSlider, displayMapPin = mapPreset.displayMapPin, shouldShowZoomControls = mapPreset.shouldShowZoomControls, shouldShowLegend = mapPreset.shouldShowLegend, dockedLayerManagerSize = mapPreset.dockedLayerManagerSize;
-            _filterLayers = filterLayers(layers), mapLayers = _filterLayers.mapLayers, baseLayers = _filterLayers.baseLayers, overLayers = _filterLayers.overLayers;
-            if (layers) {
-              //  make sure all layers have a unique id before going forward
-              autoTimeStepLayerIdNew = autoTimeStepLayerId;
-              autoUpdateLayerIdNew = autoUpdateLayerId;
-              onlyActiveLayerIdIsSet = !autoTimeStepLayerId && !autoUpdateLayerId && activeLayerId;
-              if (onlyActiveLayerIdIsSet) {
-                autoTimeStepLayerIdNew = activeLayerId;
-                autoUpdateLayerIdNew = activeLayerId;
-              }
-              newLayerIds = replaceLayerIdsToEnsureUniqueLayerIdsInStore({
-                layers: mapLayers,
-                autoTimeStepLayerId: autoTimeStepLayerIdNew,
-                autoUpdateLayerId: autoUpdateLayerIdNew
-              }); //  set layers
-              listenerApi.dispatch(layerActions.setLayers({
-                mapId: mapId,
-                layers: newLayerIds.layers
-              }));
-              // make sure layer with new id exist and if not, default to first layer
-              newAutoUpdateLayerId = ((_newLayerIds$layers$f = newLayerIds.layers.find(function (layer) {
-                return layer.id === newLayerIds.autoUpdateLayerId;
-              })) == null ? void 0 : _newLayerIds$layers$f.id) || ((_newLayerIds$layers$ = newLayerIds.layers[0]) == null ? void 0 : _newLayerIds$layers$.id);
-              newAutoTimeStepLayerId = ((_newLayerIds$layers$f2 = newLayerIds.layers.find(function (layer) {
-                return layer.id === newLayerIds.autoTimeStepLayerId;
-              })) == null ? void 0 : _newLayerIds$layers$f2.id) || ((_newLayerIds$layers$2 = newLayerIds.layers[0]) == null ? void 0 : _newLayerIds$layers$2.id);
-              listenerApi.dispatch(mapActions.setAutoLayerId({
-                mapId: mapId,
-                autoUpdateLayerId: newAutoUpdateLayerId,
-                autoTimeStepLayerId: newAutoTimeStepLayerId
-              }));
-            }
-            customLayers = getdefaultMapSettingsLayers(listenerApi.getState());
-            customBaseLayer = customLayers == null ? void 0 : customLayers.find(function (layer) {
-              return layer.layerType === LayerType.baseLayer;
-            });
-            customOverLayer = customLayers == null ? void 0 : customLayers.find(function (layer) {
-              return layer.layerType === LayerType.overLayer;
-            }); // sets (default) baseLayers
-            baseLayersWithDefaultLayer = baseLayers.length ? baseLayers : [customBaseLayer || defaultLayers.baseLayerGrey]; // sets (default) overLayers
-            overLayersWithDefaultLayer = overLayers.length ? overLayers : [customOverLayer || defaultLayers.overLayer];
-            allBaseLayers = [].concat(baseLayersWithDefaultLayer, overLayersWithDefaultLayer).map(function (layer) {
-              return Object.assign({}, layer, {
-                id: webmapUtils.generateLayerId()
-              });
-            });
-            handleBaseLayers(mapId, allBaseLayers, listenerApi);
-            if (!proj) {
-              _context2.next = 20;
-              break;
-            }
-            checkIsprojectionSupported = isProjectionSupported(proj.srs);
-            if (checkIsprojectionSupported) {
-              _context2.next = 19;
-              break;
-            }
-            throw new Error("Projection " + proj.srs + " is not supported");
-          case 19:
-            //  set bbox
-            listenerApi.dispatch(mapActions.setBbox({
-              mapId: mapId,
-              bbox: proj.bbox,
-              srs: proj.srs
-            }));
-          case 20:
-            animationLength = animationPayload && animationPayload.duration;
-            animationEndTime = animationPayload && animationPayload.endTime && isAnimationEndTimeValid(animationPayload.endTime) && animationPayload.endTime;
-            shouldEndtimeOverride = animationPayload ? animationPayload.shouldEndtimeOverride : false;
-            if (shouldEndtimeOverride) {
-              //  auto update
-              listenerApi.dispatch(mapActions.setEndTimeOverriding({
-                mapId: mapId,
-                shouldEndtimeOverride: shouldEndtimeOverride
-              }));
-            }
-            if (shouldAutoUpdate !== undefined && !animationEndTime) {
-              //  auto update
-              listenerApi.dispatch(mapActions.toggleAutoUpdate({
-                mapId: mapId,
-                shouldAutoUpdate: shouldAutoUpdate
-              }));
-            }
-            if (showTimeSlider !== undefined) {
-              // toggle timeslider
-              listenerApi.dispatch(mapActions.toggleTimeSliderIsVisible({
-                mapId: mapId,
-                isTimeSliderVisible: showTimeSlider
-              }));
-            }
-            if (shouldShowZoomControls !== undefined) {
-              // toggle zoom controls
-              listenerApi.dispatch(mapActions.toggleZoomControls({
-                mapId: mapId,
-                shouldShowZoomControls: shouldShowZoomControls
-              }));
-            }
-            if (displayMapPin !== undefined) {
-              //  display map pin
-              listenerApi.dispatch(mapActions.toggleMapPinIsVisible({
-                mapId: mapId,
-                displayMapPin: displayMapPin
-              }));
-            }
-            // sets timestep by interval of animationPayload
-            interval = animationPayload && animationPayload.interval;
-            if (interval) {
-              listenerApi.dispatch(mapActions.setTimeStep({
-                mapId: mapId,
-                timeStep: interval
-              }));
-            }
-            // sets animationEndTime by endTime of animationPayload
-            if (animationEndTime) {
-              endTime = animationEndTime.includes('NOW') || animationEndTime.includes('TODAY') ? dateUtils.convertNOWandTODAYFormatsToUTC(animationEndTime) : animationEndTime;
-              listenerApi.dispatch(mapActions.setAnimationEndTime({
-                mapId: mapId,
-                animationEndTime: handleDateUtilsISOString(endTime)
-              }));
-              startTime = handleDateUtilsISOString(dateUtils.sub(dateUtils.utc(endTime), {
-                minutes: 5 * 60 // set to default of 5 hours
-              }).toISOString());
-              listenerApi.dispatch(mapActions.setAnimationStartTime({
-                mapId: mapId,
-                animationStartTime: startTime
-              }));
-              listenerApi.dispatch(genericActions.setTime({
-                origin: '',
-                sourceId: mapId,
-                value: startTime
-              }));
-              centerTimeInSeconds = new Date(handleDateUtilsISOString(endTime)).getTime();
-              listenerApi.dispatch(mapActions.setTimeSliderCenterTime({
-                mapId: mapId,
-                timeSliderCenterTime: centerTimeInSeconds
-              }));
-            }
-            // sets animationStartTime by duration of animationPayload
-            if (animationLength) {
-              animationEnd = getAnimationEndTime(listenerApi.getState(), mapId);
-              _startTime = handleDateUtilsISOString(dateUtils.sub(dateUtils.utc(animationEnd), {
-                minutes: animationLength
-              }).toISOString());
-              listenerApi.dispatch(mapActions.setAnimationStartTime({
-                mapId: mapId,
-                animationStartTime: _startTime
-              }));
-              listenerApi.dispatch(genericActions.setTime({
-                origin: '',
-                sourceId: mapId,
-                value: _startTime
-              }));
-            }
-            // sets animationDelay by speed of animationPayload
-            if (animationPayload && animationPayload.speed) {
-              listenerApi.dispatch(mapActions.setAnimationDelay({
-                mapId: mapId,
-                animationDelay: getSpeedDelay(animationPayload.speed)
-              }));
-            }
-            //  turn animation on
-            if (shouldAnimate === true) {
-              duration = animationPayload && animationPayload.duration ? animationPayload.duration : 5 * 60; //  set to default of 5 hours
-              _animationEnd = shouldEndtimeOverride && animationEndTime ? getAnimationEndTime(listenerApi.getState(), mapId) : dateUtils.dateToString(dateUtils.utc(), dateFormat);
-              animationStart = shouldEndtimeOverride && animationLength ? getAnimationStartTime(listenerApi.getState(), mapId) : dateUtils.dateToString(dateUtils.sub(dateUtils.utc(_animationEnd), {
-                minutes: duration
-              }), dateFormat);
-              listenerApi.dispatch(mapActions.mapStartAnimation({
-                mapId: mapId,
-                start: animationStart,
-                end: _animationEnd,
-                interval: interval || defaultTimeStep
-              }));
-              //  If animation interval set, set the timestep auto property to false
-              if (interval) {
-                listenerApi.dispatch(mapActions.toggleTimestepAuto({
-                  mapId: mapId,
-                  timestepAuto: false
-                }));
-              }
-            } else if (toggleTimestepAuto !== undefined) {
-              //  Set timestep auto based on preset if animation is off
-              listenerApi.dispatch(mapActions.toggleTimestepAuto({
-                mapId: mapId,
-                timestepAuto: toggleTimestepAuto
-              }));
-            }
-            // show legend
-            shouldOpenLegend = shouldShowLegend !== undefined ? shouldShowLegend : IS_LEGEND_OPEN_BY_DEFAULT;
-            legendId = getLegendId(listenerApi.getState(), mapId);
-            if (legendId) {
-              listenerApi.dispatch(uiActions.setToggleOpenDialog({
-                type: legendId,
-                setOpen: shouldOpenLegend
-              }));
-            }
-            if (dockedLayerManagerSize) {
-              listenerApi.dispatch(mapActions.setDockedLayerManagerSize({
-                mapId: mapId,
-                dockedLayerManagerSize: dockedLayerManagerSize
-              }));
-            }
-          case 38:
-            if (!(animationEndTime && (shouldEndtimeOverride || !(shouldAutoUpdate || shouldAnimate)))) {
-              _context2.next = 48;
-              break;
-            }
-            fiveMinuteDelayForAnimation = 1000 * 60 * 5; // eslint-disable-next-line no-await-in-loop
-            _context2.next = 42;
-            return listenerApi.delay(fiveMinuteDelayForAnimation);
-          case 42:
-            _animationEnd2 = getAnimationEndTime(listenerApi.getState(), mapId);
-            listenerApi.dispatch(mapActions.setAnimationEndTime({
-              mapId: mapId,
-              animationEndTime: dateUtils.add(dateUtils.utc(_animationEnd2), {
-                minutes: 5
-              }).toISOString()
-            }));
-            _animationStart = getAnimationStartTime(listenerApi.getState(), mapId);
-            listenerApi.dispatch(mapActions.setAnimationStartTime({
-              mapId: mapId,
-              animationStartTime: dateUtils.add(dateUtils.utc(_animationStart), {
-                minutes: 5
-              }).toISOString()
-            }));
-            _context2.next = 38;
-            break;
-          case 48:
-            _context2.next = 53;
-            break;
-          case 50:
-            _context2.prev = 50;
-            _context2.t0 = _context2["catch"](1);
-            if (_context2.t0 instanceof Error) {
-              listenerApi.dispatch(mapActions.setMapPresetError({
-                mapId: payload.mapId,
-                error: _context2.t0.message
-              }));
+            return _context8.abrupt("return");
+          case 4:
+            targets = getMapBaseLayerActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
+            if (targets && targets.length > 0) {
+              listenerApi.dispatch(setLayerActionSync(payload, targets, type));
             }
-          case 53:
+          case 6:
           case "end":
-            return _context2.stop();
+            return _context8.stop();
         }
-      }, _callee2, null, [[1, 50]]);
+      }, _callee8);
     }));
-    function effect(_x3, _x4) {
-      return _effect2.apply(this, arguments);
+    function effect(_x15, _x16) {
+      return _effect8.apply(this, arguments);
     }
     return effect;
   }()
 });
-mapListener.startListening({
-  actionCreator: mapActions.unregisterMap,
-  effect: function effect(_ref7, listenerApi) {
-    var payload = _ref7.payload;
-    var mapId = payload.mapId;
-    var layerList = getLayersByMapId(listenerApi.getState(), mapId);
-    metronome.unregister(mapId);
-    layerList.map(function (layer) {
-      return listenerApi.dispatch(layerActions.layerDelete({
-        mapId: mapId,
-        layerId: layer.id,
-        origin: LayerActionOrigin.unregisterMapListener
-      }));
-    });
-  }
-});
-mapListener.startListening({
-  actionCreator: mapActions.setStepBackwardOrForward,
-  effect: function effect(_ref8, listenerApi) {
-    var payload = _ref8.payload;
-    var mapId = payload.mapId,
-      isForwardStep = payload.isForwardStep;
-    var timeStep = getMapTimeStep(listenerApi.getState(), mapId);
-    var currentTime = getSelectedTime(listenerApi.getState(), mapId);
-    var _mapSelectors$getData = getDataLimitsFromLayers(listenerApi.getState(), mapId),
-      dataStartTime = _mapSelectors$getData[0],
-      dataEndTime = _mapSelectors$getData[1];
-    if (dateUtils.isValid(currentTime)) {
-      var makeForwardStep = function makeForwardStep() {
-        var nextTime = currentTime + timeStep;
-        var roundedTime = roundWithTimeStep(nextTime, timeStep, 'ceil');
-        var newTime = Math.min(roundedTime, dataEndTime || roundedTime);
-        return dateUtils.fromUnix(newTime).toISOString();
-      };
-      var makeBackwardStep = function makeBackwardStep() {
-        var nextTime = currentTime - timeStep;
-        var roundedTime = roundWithTimeStep(nextTime, timeStep, 'floor');
-        var newTime = Math.max(roundedTime, dataStartTime || roundedTime);
-        return dateUtils.fromUnix(newTime).toISOString();
-      };
-      var selectedTimeString = isForwardStep ? makeForwardStep() : makeBackwardStep();
-      var isMapAnimating = isAnimating(listenerApi.getState(), mapId);
-      if (isMapAnimating) {
-        listenerApi.dispatch(mapActions.mapStopAnimation({
-          mapId: mapId,
-          origin: MapActionOrigin.map
-        }));
-      }
-      listenerApi.dispatch(genericActions.setTime({
-        origin: '',
-        sourceId: mapId,
-        value: handleDateUtilsISOString(selectedTimeString)
-      }));
-    }
-  }
-});
-
-var _excluded$1 = ["url"];
-var serviceListener = createListenerMiddleware();
-var fetchService = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(service, listenerApi) {
-    var layers;
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          _context.prev = 0;
-          _context.next = 3;
-          return queryWMSLayers(service.serviceUrl);
-        case 3:
-          layers = _context.sent;
-          listenerApi.dispatch(serviceActions.serviceSetLayers(Object.assign({}, service, {
-            layers: layers
-          })));
-          _context.next = 10;
-          break;
-        case 7:
-          _context.prev = 7;
-          _context.t0 = _context["catch"](0);
-          if (_context.t0 instanceof Error) {
-            console.warn(_context.t0.message);
-          }
-        case 10:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee, null, [[0, 7]]);
-  }));
-  return function fetchService(_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-}();
-var fetchInitialServices = /*#__PURE__*/function () {
-  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(payload, listenerApi) {
-    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          if (!(!payload || !payload.services)) {
-            _context2.next = 2;
-            break;
-          }
-          return _context2.abrupt("return");
-        case 2:
-          _context2.prev = 2;
-          _context2.next = 5;
-          return Promise.all(payload.services.map(function (_ref3) {
-            var url = _ref3.url,
-              service = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
-            return fetchService(Object.assign({}, service, {
-              serviceUrl: url
-            }), listenerApi);
-          }));
-        case 5:
-          _context2.next = 10;
-          break;
-        case 7:
-          _context2.prev = 7;
-          _context2.t0 = _context2["catch"](2);
-          // eslint-disable-next-line no-console
-          console.warn(_context2.t0);
-        case 10:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2, null, [[2, 7]]);
-  }));
-  return function fetchInitialServices(_x3, _x4) {
-    return _ref2.apply(this, arguments);
-  };
-}();
-serviceListener.startListening({
-  actionCreator: serviceActions.fetchInitialServices,
+genericListener.startListening({
+  actionCreator: layerActions.layerDelete,
   effect: function () {
-    var _effect = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(_ref4, listenerApi) {
-      var payload;
-      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
+    var _effect9 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9(_ref9, listenerApi) {
+      var payload, type, targets;
+      return _regeneratorRuntime().wrap(function _callee9$(_context9) {
+        while (1) switch (_context9.prev = _context9.next) {
           case 0:
-            payload = _ref4.payload;
+            payload = _ref9.payload, type = _ref9.type;
             listenerApi.cancelActiveListeners();
-            _context3.next = 4;
-            return fetchInitialServices(payload, listenerApi);
+            /* Should not listen to actions from itself */
+            if (!(payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer)) {
+              _context9.next = 4;
+              break;
+            }
+            return _context9.abrupt("return");
           case 4:
+            targets = getLayerDeleteActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
+            if (targets && targets.length > 0) {
+              listenerApi.dispatch(setLayerActionSync(payload, targets, type));
+            }
+          case 6:
           case "end":
-            return _context3.stop();
+            return _context9.stop();
         }
-      }, _callee3);
+      }, _callee9);
     }));
-    function effect(_x5, _x6) {
-      return _effect.apply(this, arguments);
+    function effect(_x17, _x18) {
+      return _effect9.apply(this, arguments);
     }
     return effect;
   }()
 });
 
-// use `required` type because all props are provided
-var mapStoreReducers = {
-  webmap: reducer$2,
-  services: reducer$5,
-  layers: reducer$4
-};
-var mapStoreMiddlewares = [metronomeListener.middleware, layersListener.middleware, mapListener.middleware, serviceListener.middleware];
-var mapStoreModuleConfig = {
-  reducersMap: mapStoreReducers,
-  middlewares: mapStoreMiddlewares
+/* A map with all the timerIds and their current step */
+var stepMap = new Map();
+/* A map with a list of timers and their dwell */
+var timerDwellMap = new Map();
+/**
+ * Returns the next step for given timerId.
+ * @param timerId The timer id
+ * @param numberOfStepsInAnimation Animation length in steps
+ * @param numStepsToGoForward Amount of steps to go forwards, defaults to 1. Can be positive and negative
+ * @returns
+ */
+var getNextStep = function getNextStep(timerId, numberOfStepsInAnimation, numStepsToGoForward) {
+  if (numStepsToGoForward === void 0) {
+    numStepsToGoForward = 1;
+  }
+  var currentStep = getCurrentStep(timerId);
+  var nextStep = currentStep + numStepsToGoForward;
+  var nextStepClipped = (nextStep % numberOfStepsInAnimation + numberOfStepsInAnimation) % numberOfStepsInAnimation;
+  return nextStepClipped;
 };
-
-var _excluded = ["id"];
 /**
- * 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
- * @param mapId
- * @param targetMapId
- * @param payload
+ * Handles dwell at the end of the animation loop sequence. The number of steps to wait till proceed can be set by the dwell parameter.
+ * @param timerId The timer id
+ * @param numberOfStepsInAnimation Number of steps in the animation
+ * @param dwell The number of steps to wait at the end of the animation sequence before to continue
  * @returns
  */
-var getTargetLayerIdFromPayload = function getTargetLayerIdFromPayload(state, mapId, targetMapId, payload) {
-  if (!payload) {
-    return null;
+var handleTimerDwell = function handleTimerDwell(timerId, numberOfStepsInAnimation, dwell) {
+  if (dwell === void 0) {
+    dwell = 8;
   }
-  /* Try to find the layer for the DeleteLayerPayload, it uses layerIndex to reference the layer */
-  if ('layerIndex' in payload) {
-    var tempLayerIndex = payload.layerIndex;
-    if (tempLayerIndex !== undefined) {
-      var targetLayer = getLayerByLayerIndex(state, targetMapId, tempLayerIndex);
-      return !targetLayer ? null : targetLayer.id;
+  if (dwell > 0) {
+    var currentStep = getCurrentStep(timerId);
+    // Reset the dwell if we are not at the last animation step
+    if (currentStep < numberOfStepsInAnimation - 1) {
+      timerDwellMap.set(timerId, dwell);
+      return false;
+    }
+    // We are at the last animation step, check the dwell
+    var timerDwell = timerDwellMap.has(timerId) && timerDwellMap.get(timerId) || 0;
+    if (currentStep === numberOfStepsInAnimation - 1 && timerDwell > 0) {
+      timerDwellMap.set(timerId, timerDwell - 1);
+      return true;
     }
   }
-  /* Try to find the layer for the LayerActionsWithLayerIds, it uses layerId to reference the layer */
-  if ('layerId' in payload) {
-    var _targetLayer = getLayerByLayerIndex(state, targetMapId, getLayerIndexByLayerId(state, mapId, payload.layerId));
-    return !_targetLayer ? null : _targetLayer.id;
-  }
-  /* This payload probably does not reference to a layerId */
-  return null;
+  return false;
 };
 /**
- * Local helper function used by getLayerDeleteActionsTargets, getLayerActionsTargets, getAddLayerActionsTargets, getTargetLayerIdFromPayload to find the targets
- * @param state
- * @param payload
- * @param actionType
- * @param sourceMapId
- * @returns The found targets
+ * Set step for the timerId
+ * @param timerId
+ * @param timerStep
  */
-var findTargets = function findTargets(state, payload, actionType, sourceMapId) {
-  var actionPayloads = [];
-  var targetsInActionPayload = {};
-  var syncGroups = syncGroupStore(state);
-  if (syncGroups && payload) {
-    syncGroups.groups.allIds.forEach(function (id) {
-      var syncronizationGroup = syncGroups.groups.byId[id];
-      if (actionType === syncronizationGroup.type) {
-        /* Check if the source is in the target list of the synchonizationGroup */
-        var source = syncronizationGroup.targets.byId[sourceMapId];
-        /* If the source is part of the target list, and is linked, continue syncing the other targets */
-        if (source && source.linked) {
-          syncronizationGroup.targets.allIds.forEach(function (targetId) {
-            var target = syncronizationGroup.targets.byId[targetId];
-            if (targetId !== sourceMapId && target.linked && !targetsInActionPayload[targetId]) {
-              /* Remember that we have already added this target in the action payloads, prevents adding it twice */
-              targetsInActionPayload[targetId] = true;
-              var otherLayerId = getTargetLayerIdFromPayload(state, sourceMapId, targetId, payload);
-              actionPayloads.push({
-                payload: payload,
-                targetId: targetId,
-                layerId: otherLayerId
-              });
-            }
-          });
-        }
-      }
-    });
-  }
-  return actionPayloads;
+var setStep = function setStep(timerId, timerStep) {
+  stepMap.set(timerId, timerStep);
 };
 /**
- * These targets are found for layer actions that work with a layerId like: SetLayerName, SetLayerEnabled, SetLayerOpacity, SetLayerDimension and SetLayerStyle
- * @param state
- * @param payload
- * @param actionType
+ * Gets the current step for the timer
+ * @param timerId
  * @returns
  */
-var getLayerActionsTargets = function getLayerActionsTargets(state, payload, actionType) {
-  var mapId = getMapIdFromLayerId(state, payload.layerId);
-  if (!mapId) {
-    return [];
-  }
-  var foundTargets = findTargets(state, payload, actionType, mapId);
-  return foundTargets.map(function (target) {
-    var payload = target.payload;
-    return Object.assign({}, payload, {
-      layerId: target.layerId,
-      origin: SyncGroupActionOrigin.layerActions,
-      mapId: payload.mapId
-    });
-  });
-};
-/**
- * These targets are found for the layer/map action AddLayer. AddLayer does not have a layerId (because it's new)
- * @param state
- * @param payload
- * @param actionType
- * @returns
- */
-var getAddLayerActionsTargets = function getAddLayerActionsTargets(state, payload, actionType) {
-  var foundTargets = findTargets(state, payload, actionType, payload.mapId);
-  return foundTargets.map(function (_ref) {
-    var payload = _ref.payload,
-      targetId = _ref.targetId;
-    var layer = payload.layer;
-    layer.id;
-      var layerWithoutId = _objectWithoutPropertiesLoose(layer, _excluded);
-    var layerId = webmapUtils.generateLayerId();
-    return Object.assign({}, payload, {
-      layer: layerWithoutId,
-      layerId: layerId,
-      mapId: targetId,
-      origin: SyncGroupActionOrigin.add
-    });
-  });
-};
-/**
- * These targets are found for the layer/map action DeleteLayer. The layer is already gone, so there is no layerId anymore. Using layerIndex instead.
- * @param state
- * @param payload
- * @param actionType
- * @returns
- */
-var getLayerDeleteActionsTargets = function getLayerDeleteActionsTargets(state, payload, actionType) {
-  var foundTargets = findTargets(state, payload, actionType, payload.mapId);
-  return foundTargets.map(function (target) {
-    return Object.assign({}, target.payload, {
-      mapId: target.targetId,
-      layerId: target.layerId,
-      origin: SyncGroupActionOrigin["delete"]
-    });
-  });
-};
-/**
- * These targets are found for the layer/map action MoveLayer. Here layers are referenced by newIndex and oldIndex.
- * @param state
- * @param payload
- * @param actionType
- * @returns
- */
-var getLayerMoveActionsTargets = function getLayerMoveActionsTargets(state, payload, actionType) {
-  var foundTargets = findTargets(state, payload, actionType, payload.mapId);
-  return foundTargets.map(function (target) {
-    return Object.assign({}, target.payload, {
-      mapId: target.targetId,
-      origin: SyncGroupActionOrigin.move
-    });
-  });
-};
-/**
- * These targets are found for the map action SetAutoLayerId. It needs both a target mapId and layerId
- * @param state
- * @param payload
- * @param actionType
- * @returns
- */
-var getSetAutoLayerIdActionsTargets = function getSetAutoLayerIdActionsTargets(state, payload, actionType) {
-  var payloadWithLayerId = Object.assign({}, payload, {
-    layerId: payload.autoUpdateLayerId || payload.autoTimeStepLayerId || payload.layerId
-  });
-  var foundTargets = findTargets(state, payloadWithLayerId, actionType, payload.mapId);
-  return foundTargets.map(function (target) {
-    return {
-      mapId: target.targetId,
-      layerId: target.layerId,
-      origin: SyncGroupActionOrigin.autoLayerId
-    };
-  });
+var getCurrentStep = function getCurrentStep(timerId) {
+  return stepMap.get(timerId) || 0;
 };
+var MAX_NUMBER_STEPS_FORWARD_TO_PREFETCH = 2;
+var MAX_NUMBER_OF_PARALLEL_LOADING_IMAGES = 8;
 /**
- * These targets are found for baselayer actions that work with a mapId like: setBaseLayers
- * @param state
- * @param payload
- * @param actionType
- * @returns
+ * This prefetches all images connected to the same sync group as provided timerId
+ * @param timerId The timerId
+ * @param animationListValues List of animation steps in isostring to animate
+ * @param targets List of targets to check
+ * @returns True if all maps are ready to go forward, false if the map has no data to display yet.
  */
-var getMapBaseLayerActionsTargets = function getMapBaseLayerActionsTargets(state, payload, actionType) {
-  var foundTargets = findTargets(state, payload, actionType, payload.mapId);
-  return foundTargets.map(function (target) {
-    return {
-      layers: payload.layers.map(function (layer) {
-        return Object.assign({}, layer, {
-          id: webmapUtils.generateLayerId()
-        });
-      }),
-      mapId: target.targetId,
-      origin: SyncGroupActionOrigin.layerActions
-    };
-  });
-};
-
-var setTimeValidatorRexexp = /^(19|20)\d\d-(0[1-9]|1[012])-([012]\d|3[01])T([01]\d|2[0-3]):([0-5]\d):([0-5]\d)Z$/;
-var genericListener = createListenerMiddleware();
-genericListener.startListening({
-  actionCreator: setTime,
-  effect: function () {
-    var _effect = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref, listenerApi) {
-      var payload, value, origin, targets, groups;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            payload = _ref.payload;
-            listenerApi.cancelActiveListeners();
-            value = payload.value, origin = payload.origin;
-            /* Test if the value is according to the expected time format */
-            if (!setTimeValidatorRexexp.test(value)) {
-              console.error("setTime value " + value + " does not conform to format [YYYY-MM-DDThh:mm:ssZ]. It was triggered by " + origin);
-            } else {
-              targets = getTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETTIME);
-              groups = getTargetGroups(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETTIME);
-              listenerApi.dispatch(setTimeSync(payload, targets, groups));
+var prefetchAnimationTargetsForMetronome = function prefetchAnimationTargetsForMetronome(timerId, animationListValues, targets) {
+  var timerShouldStepForward = true;
+  // The following code prefetches/buffers for all maps in the group
+  for (var numPrefetch = 0; numPrefetch < MAX_NUMBER_STEPS_FORWARD_TO_PREFETCH; numPrefetch += 1) {
+    var nextStep = getNextStep(timerId, animationListValues.length, numPrefetch + 1);
+    var nextTimeValueStepToCheck = animationListValues[nextStep];
+    for (var _iterator = _createForOfIteratorHelperLoose(targets), _step; !(_step = _iterator()).done;) {
+      var target = _step.value;
+      var targetMapId = target.targetId;
+      var wmMap = getWMJSMapById(targetMapId);
+      if (!wmMap) {
+        return true; // Map was not registered so there is nothing to prefetch, do not block going forward
+      }
+      var layersImageUrls = getWMSRequests(wmMap, [{
+        name: 'time',
+        currentValue: nextTimeValueStepToCheck
+      }]);
+      for (var _iterator2 = _createForOfIteratorHelperLoose(layersImageUrls), _step2; !(_step2 = _iterator2()).done;) {
+        var layersImageUrl = _step2.value;
+        var image = wmMap.getMapImageStore.getImage(layersImageUrl.url);
+        if (!image.isLoaded()) {
+          if (wmMap.getMapImageStore.getNumImagesLoading() < MAX_NUMBER_OF_PARALLEL_LOADING_IMAGES) {
+            image.load();
+          }
+          if (numPrefetch === 0) {
+            var altImage = wmMap.getAlternativeImage(layersImageUrl.url, wmMap.getBBOX(), true);
+            // No alternative image available yet, so skipping animation.
+            if (altImage.length === 0) {
+              // This is useful to indicate that the map is loading and has nothing yet to display.
+              // console.warn('No data available: Not stepping forward');
+              timerShouldStepForward = false;
             }
-          case 4:
-          case "end":
-            return _context.stop();
+          }
+        } else if (image.isStale()) {
+          if (wmMap.getMapImageStore.getNumImagesLoading() < MAX_NUMBER_OF_PARALLEL_LOADING_IMAGES) {
+            image.forceReload(true);
+          }
         }
-      }, _callee);
-    }));
-    function effect(_x, _x2) {
-      return _effect.apply(this, arguments);
+      }
     }
-    return effect;
-  }()
-});
-genericListener.startListening({
-  actionCreator: setBbox,
-  effect: function () {
-    var _effect2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref2, listenerApi) {
-      var payload, targets, groups;
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            payload = _ref2.payload;
-            listenerApi.cancelActiveListeners();
-            targets = getTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETBBOX);
-            groups = getTargetGroups(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETBBOX);
-            listenerApi.dispatch(setBboxSync(payload, targets, groups));
-          case 5:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    }));
-    function effect(_x3, _x4) {
-      return _effect2.apply(this, arguments);
+  }
+  return timerShouldStepForward;
+};
+
+var isAnimationEndTimeValid = function isAnimationEndTimeValid(animationEndTime) {
+  var hasValidPrefix = animationEndTime.split(/[-+]/)[0] === 'NOW' || animationEndTime.split(/[-+]/)[0] === 'TODAY';
+  var durationString = animationEndTime.substring(animationEndTime.indexOf('PT') + 2);
+  var hasValidDate = /^(\d+H)?(\d+M)?$/.test(durationString);
+  if (hasValidPrefix && hasValidDate) {
+    return true;
+  }
+  var parsedDate = dateUtils.parseISO(animationEndTime);
+  return dateUtils.isValid(parsedDate);
+};
+var mapListener = createListenerMiddleware();
+mapListener.startListening({
+  actionCreator: layerActions.layerDelete,
+  effect: function effect(_ref, listenerApi) {
+    var payload = _ref.payload;
+    var mapId = payload.mapId;
+    var layers = getMapLayersWithoutDimensionCurrentValue(listenerApi.getState(), mapId);
+    if (!layers.length) {
+      listenerApi.dispatch(mapActions.mapStopAnimation({
+        mapId: mapId
+      }));
     }
-    return effect;
-  }()
+  }
 });
-genericListener.startListening({
-  matcher: isAnyOf(layerActions.layerChangeName, layerActions.layerChangeEnabled, layerActions.layerChangeOpacity, layerActions.layerChangeDimension, layerActions.layerChangeStyle),
-  effect: function () {
-    var _effect3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(_ref3, listenerApi) {
-      var payload, type, targets;
-      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            payload = _ref3.payload, type = _ref3.type;
-            listenerApi.cancelActiveListeners();
-            /* Should not listen to actions from itself */
-            if (!(payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer)) {
-              _context3.next = 4;
-              break;
-            }
-            return _context3.abrupt("return");
-          case 4:
-            targets = getLayerActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
-            if (targets && targets.length > 0) {
-              listenerApi.dispatch(setLayerActionSync(payload, targets, type));
-            }
-          case 6:
-          case "end":
-            return _context3.stop();
-        }
-      }, _callee3);
-    }));
-    function effect(_x5, _x6) {
-      return _effect3.apply(this, arguments);
+// update layer, synced maps and animation on latest max time if autoupdating
+mapListener.startListening({
+  actionCreator: layerActions.onUpdateLayerInformation,
+  effect: function effect(_ref2, listenerApi) {
+    var payload = _ref2.payload;
+    try {
+      var layerDimensions = payload.layerDimensions;
+      if (!layerDimensions) {
+        return;
+      }
+      var dimensions = layerDimensions.dimensions,
+        layerId = layerDimensions.layerId;
+      var layer = getLayerById(listenerApi.getState(), layerId);
+      if (!layer) {
+        return;
+      }
+      var newTimeDimension = dimensions.find(function (dimension) {
+        return dimension.name === 'time';
+      });
+      var mapId = layer.mapId;
+      if (!mapId) {
+        return;
+      }
+      var autoUpdateLayerId = getAutoUpdateLayerId(listenerApi.getState(), mapId);
+      var shouldAutoUpdate = isAutoUpdating(listenerApi.getState(), mapId);
+      var prevTimeDimension = getLayerTimeDimension(listenerApi.getState(), layerId);
+      var isAutoUpdateLayer = layerId === autoUpdateLayerId;
+      var incomingMaxTime = newTimeDimension == null ? void 0 : newTimeDimension.maxValue;
+      var isIncomingMaxTimeLaterThanCurrentLayerTime = incomingMaxTime && (prevTimeDimension == null ? void 0 : prevTimeDimension.currentValue) && prevTimeDimension.currentValue !== incomingMaxTime;
+      if (isAutoUpdateLayer &&
+      // only update the active layer
+      shouldAutoUpdate && isIncomingMaxTimeLaterThanCurrentLayerTime) {
+        var isMapAnimating = isAnimating(listenerApi.getState(), mapId);
+        if (!isMapAnimating) {
+          listenerApi.dispatch(layerActions.layerChangeDimension({
+            layerId: layerId,
+            origin: LayerActionOrigin.updateLayerInformationListener,
+            dimension: {
+              name: 'time',
+              currentValue: incomingMaxTime
+            }
+          }));
+          // Each time a layer updates, set the new time for all synced timesliders
+          var syncedMapIds = getSyncedMapIdsForTimeslider(listenerApi.getState());
+          if (syncedMapIds) {
+            // Change time value for all other timesliders
+            syncedMapIds.map(function (syncedMapId) {
+              return listenerApi.dispatch(setTime({
+                origin: LayerActionOrigin.updateLayerInformationListener,
+                sourceId: syncedMapId,
+                value: incomingMaxTime
+              }));
+            });
+          }
+        }
+        updateAnimation(mapId, incomingMaxTime, listenerApi);
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.warn(error);
     }
-    return effect;
-  }()
+  }
 });
-genericListener.startListening({
-  actionCreator: layerActions.addLayer,
+var updateAnimation = function updateAnimation(mapId, maxValue, listenerApi) {
+  var shouldEndtimeOverride$1 = shouldEndtimeOverride(listenerApi.getState(), mapId);
+  if (shouldEndtimeOverride$1 === true) {
+    return;
+  }
+  var animationStart = getAnimationStartTime(listenerApi.getState(), mapId);
+  // Calculate how much time the animation start need to move forwards
+  var animationEnd = getAnimationEndTime(listenerApi.getState(), mapId);
+  var animationEndUnix = dateUtils.unix(dateUtils.utc(animationEnd));
+  var maxTimeAsUnix = dateUtils.unix(dateUtils.utc(maxValue));
+  var timeInSecondToShiftAnimationForwards = maxTimeAsUnix - animationEndUnix;
+  var animationStartUnix = dateUtils.unix(dateUtils.utc(animationStart));
+  var newAnimationStartTime = dateUtils.dateToString(dateUtils.fromUnix(animationStartUnix + timeInSecondToShiftAnimationForwards), dateFormat);
+  var newAnimationEndTime = dateUtils.dateToString(dateUtils.fromUnix(animationEndUnix + timeInSecondToShiftAnimationForwards), dateFormat);
+  if (!newAnimationStartTime || !newAnimationEndTime) {
+    return;
+  }
+  // Check if the mapId is part of a syncgroup
+  var syncedMapIds = getSyncedMapIdsForTimeslider(listenerApi.getState());
+  var isSyncedMap = syncedMapIds.includes(mapId);
+  var mapIdsToUpdate = isSyncedMap ? syncedMapIds : [mapId];
+  // Update new animation times for the map or in case of syncgroup, all maps in the syncgroup
+  mapIdsToUpdate.forEach(function (id) {
+    listenerApi.dispatch(mapActions.setAnimationEndTime({
+      mapId: id,
+      animationEndTime: newAnimationEndTime
+    }));
+    listenerApi.dispatch(mapActions.setAnimationStartTime({
+      mapId: id,
+      animationStartTime: newAnimationStartTime
+    }));
+  });
+};
+mapListener.startListening({
+  actionCreator: mapActions.toggleAutoUpdate,
   effect: function () {
-    var _effect4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(_ref4, listenerApi) {
-      var payload, type, targets;
-      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
+    var _effect = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref3, listenerApi) {
+      var payload, shouldAutoUpdate, mapId, autoUpdateLayerId, timeDimension, syncedMapIds, payloads;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
           case 0:
-            payload = _ref4.payload, type = _ref4.type;
+            payload = _ref3.payload;
             listenerApi.cancelActiveListeners();
-            /* Should not listen to actions from itself */
-            if (!(payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer)) {
-              _context4.next = 4;
+            shouldAutoUpdate = payload.shouldAutoUpdate, mapId = payload.mapId;
+            if (shouldAutoUpdate) {
+              _context.next = 5;
               break;
             }
-            return _context4.abrupt("return");
-          case 4:
-            targets = getAddLayerActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
-            if (targets && targets.length > 0) {
-              listenerApi.dispatch(setLayerActionSync(payload, targets, type));
+            return _context.abrupt("return");
+          case 5:
+            try {
+              autoUpdateLayerId = getAutoUpdateLayerId(listenerApi.getState(), mapId);
+              timeDimension = getLayerTimeDimension(listenerApi.getState(), autoUpdateLayerId);
+              syncedMapIds = getSyncedMapIdsForTimeslider(listenerApi.getState()); // go to end of active layer
+              if (timeDimension != null && timeDimension.maxValue && autoUpdateLayerId) {
+                listenerApi.dispatch(layerActions.layerChangeDimension({
+                  layerId: autoUpdateLayerId,
+                  origin: LayerActionOrigin.toggleAutoUpdateListener,
+                  dimension: {
+                    name: 'time',
+                    currentValue: timeDimension.maxValue
+                  }
+                }));
+                // Change time value for all timesliders that are synced by syncgroups
+                if (syncedMapIds.length > 0) {
+                  syncedMapIds.map(function (syncedMapId) {
+                    return listenerApi.dispatch(setTime({
+                      origin: LayerActionOrigin.toggleAutoUpdateListener,
+                      sourceId: syncedMapId,
+                      value: timeDimension.maxValue
+                    }));
+                  });
+                }
+                updateAnimation(mapId, timeDimension.maxValue, listenerApi);
+              }
+              // Toggle autoupdate off for synced timesliders
+              payloads = syncedMapIds.reduce(function (syncedMapIdList, syncedMapId) {
+                if (syncedMapId !== mapId) {
+                  return syncedMapIdList.concat({
+                    mapId: syncedMapId,
+                    shouldAutoUpdate: false
+                  });
+                }
+                return syncedMapIdList;
+              }, []);
+              if (payloads.length > 0) {
+                payloads.map(function (payload) {
+                  return listenerApi.dispatch(mapActions.toggleAutoUpdate(payload));
+                });
+              }
+            } catch (error) {
+              // eslint-disable-next-line no-console
+              console.warn(error);
             }
           case 6:
           case "end":
-            return _context4.stop();
+            return _context.stop();
         }
-      }, _callee4);
+      }, _callee);
     }));
-    function effect(_x7, _x8) {
-      return _effect4.apply(this, arguments);
+    function effect(_x, _x2) {
+      return _effect.apply(this, arguments);
     }
     return effect;
   }()
 });
-genericListener.startListening({
-  actionCreator: layerActions.duplicateMapLayer,
+mapListener.startListening({
+  actionCreator: mapActions.mapStartAnimation,
+  effect: function effect(_ref4, listenerApi) {
+    var payload = _ref4.payload;
+    var mapId = payload.mapId,
+      initialTime = payload.initialTime;
+    // Check if the mapId is part of a syncgroup
+    var syncedMapIds = getSyncedMapIdsForTimeslider(listenerApi.getState());
+    var isSyncedMap = syncedMapIds.includes(mapId);
+    var autoUpdateMapId = syncedMapIds.find(function (syncedMapId) {
+      return isAutoUpdating(listenerApi.getState(), syncedMapId);
+    });
+    // Start animation with the mapId that started the animation or in case of syncgroup, the map that is auto updating
+    var useMapId = isSyncedMap ? autoUpdateMapId || mapId : mapId;
+    var speedDelay = getMapAnimationDelay(listenerApi.getState(), useMapId);
+    var speed = 1000 / (speedDelay || 1);
+    metronome.register(null, speed, useMapId);
+    var timeList = getAnimationList(listenerApi.getState(), useMapId);
+    // In case of the timeList
+    if (timeList && timeList.length > 0) {
+      // Determine animation step based on initialTime and timeList
+      var initalTimerStep = timeList == null ? void 0 : timeList.findIndex(function (timeNameValue) {
+        return timeNameValue.value === initialTime;
+      });
+      if (initalTimerStep !== -1) {
+        setStep(useMapId, initalTimerStep);
+      }
+    }
+  }
+});
+mapListener.startListening({
+  actionCreator: mapActions.mapStopAnimation,
+  effect: function effect(_ref5, listenerApi) {
+    var mapId = _ref5.payload.mapId;
+    // Check if the mapId is part of a syncgroup
+    var syncedMapIds = getSyncedMapIdsForTimeslider(listenerApi.getState());
+    var isSyncedMap = syncedMapIds.includes(mapId);
+    var mapIdsToUnregister = isSyncedMap ? syncedMapIds : [mapId];
+    mapIdsToUnregister.forEach(function (mapId) {
+      return metronome.unregister(mapId);
+    });
+  }
+});
+var handleBaseLayers = function handleBaseLayers(mapId, baseLayers, listenerApi) {
+  var baseLayer = baseLayers.find(function (layer) {
+    return layer.layerType === 'baseLayer';
+  });
+  var currentAvailableBaseLayers = getAvailableBaseLayersForMap(listenerApi.getState(), mapId);
+  // find a availableBaseLayer with the same name, and use that id for the active baselayer
+  var activeAvailableBaseLayer = currentAvailableBaseLayers.find(function (availableBaseLayer) {
+    return availableBaseLayer.name === baseLayer.name;
+  });
+  var activeBaseLayerId = activeAvailableBaseLayer ? activeAvailableBaseLayer.id : webmapUtils.generateLayerId();
+  // if the baseLayer can't be found in a visible available baseLayer list, add it
+  // This happens when switching to a preset that has non-default baselayers
+  if (!activeAvailableBaseLayer && currentAvailableBaseLayers.length) {
+    listenerApi.dispatch(layerActions.addAvailableBaseLayers({
+      layers: [Object.assign({}, baseLayer, {
+        mapId: mapId,
+        id: activeBaseLayerId
+      })]
+    }));
+  }
+  var baseLayersWithActiveId = baseLayers.map(function (layer, index) {
+    return index === 0 ? Object.assign({}, layer, {
+      id: activeBaseLayerId || layer.id
+    }) : layer;
+  });
+  listenerApi.dispatch(layerActions.setBaseLayers({
+    mapId: mapId,
+    layers: baseLayersWithActiveId
+  }));
+};
+mapListener.startListening({
+  actionCreator: mapActions.setMapPreset,
   effect: function () {
-    var _effect5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(_ref5, listenerApi) {
-      var payload, sourceLayer, newPayload, targets;
-      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
+    var _effect2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref6, listenerApi) {
+      var payload, mapId, initialProps, mapPreset, layers, activeLayerId, autoTimeStepLayerId, autoUpdateLayerId, proj, shouldAutoUpdate, shouldAnimate, animationPayload, toggleTimestepAuto, showTimeSlider, displayMapPin, shouldShowZoomControls, shouldShowLegend, dockedLayerManagerSize, timeSliderSpan, toggleTimeSpanAuto, _filterLayers, mapLayers, baseLayers, overLayers, _newLayerIds$layers$f, _newLayerIds$layers$, _newLayerIds$layers$f2, _newLayerIds$layers$2, autoTimeStepLayerIdNew, autoUpdateLayerIdNew, onlyActiveLayerIdIsSet, newLayerIds, newAutoUpdateLayerId, newAutoTimeStepLayerId, customLayers, customBaseLayer, customOverLayer, baseLayersWithDefaultLayer, overLayersWithDefaultLayer, allBaseLayers, checkIsprojectionSupported, animationLength, animationEndTime, shouldEndtimeOverride, interval, endTime, startTime, centerTimeInSeconds, animationEnd, _startTime, duration, _animationEnd, animationStart, shouldOpenLegend, legendId, fiveMinuteDelayForAnimation, _animationEnd2, _animationStart;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            payload = _ref5.payload;
-            listenerApi.cancelActiveListeners();
-            sourceLayer = getLayerById(listenerApi.getState(), payload.oldLayerId);
-            newPayload = {
-              mapId: payload.mapId,
-              layer: sourceLayer,
-              origin: payload.origin
-            };
-            targets = getAddLayerActionsTargets(listenerApi.getState(), newPayload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
-            if (targets && targets.length > 0) {
-              listenerApi.dispatch(setLayerActionSync(newPayload, targets, layerActions.addLayer.type));
+            payload = _ref6.payload;
+            _context2.prev = 1;
+            mapId = payload.mapId, initialProps = payload.initialProps;
+            mapPreset = initialProps.mapPreset;
+            if (!mapPreset) {
+              _context2.next = 50;
+              break;
+            }
+            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, timeSliderSpan = mapPreset.timeSliderSpan, toggleTimeSpanAuto = mapPreset.toggleTimeSpanAuto;
+            _filterLayers = filterLayers(layers), mapLayers = _filterLayers.mapLayers, baseLayers = _filterLayers.baseLayers, overLayers = _filterLayers.overLayers;
+            if (layers) {
+              //  make sure all layers have a unique id before going forward
+              autoTimeStepLayerIdNew = autoTimeStepLayerId;
+              autoUpdateLayerIdNew = autoUpdateLayerId;
+              onlyActiveLayerIdIsSet = !autoTimeStepLayerId && !autoUpdateLayerId && activeLayerId;
+              if (onlyActiveLayerIdIsSet) {
+                autoTimeStepLayerIdNew = activeLayerId;
+                autoUpdateLayerIdNew = activeLayerId;
+              }
+              newLayerIds = replaceLayerIdsToEnsureUniqueLayerIdsInStore({
+                layers: mapLayers,
+                autoTimeStepLayerId: autoTimeStepLayerIdNew,
+                autoUpdateLayerId: autoUpdateLayerIdNew
+              }); //  set layers
+              listenerApi.dispatch(layerActions.setLayers({
+                mapId: mapId,
+                layers: newLayerIds.layers
+              }));
+              // make sure layer with new id exist and if not, default to first layer
+              newAutoUpdateLayerId = ((_newLayerIds$layers$f = newLayerIds.layers.find(function (layer) {
+                return layer.id === newLayerIds.autoUpdateLayerId;
+              })) == null ? void 0 : _newLayerIds$layers$f.id) || ((_newLayerIds$layers$ = newLayerIds.layers[0]) == null ? void 0 : _newLayerIds$layers$.id);
+              newAutoTimeStepLayerId = ((_newLayerIds$layers$f2 = newLayerIds.layers.find(function (layer) {
+                return layer.id === newLayerIds.autoTimeStepLayerId;
+              })) == null ? void 0 : _newLayerIds$layers$f2.id) || ((_newLayerIds$layers$2 = newLayerIds.layers[0]) == null ? void 0 : _newLayerIds$layers$2.id);
+              listenerApi.dispatch(mapActions.setAutoLayerId({
+                mapId: mapId,
+                autoUpdateLayerId: newAutoUpdateLayerId,
+                autoTimeStepLayerId: newAutoTimeStepLayerId
+              }));
+            }
+            customLayers = getdefaultMapSettingsLayers(listenerApi.getState());
+            customBaseLayer = customLayers == null ? void 0 : customLayers.find(function (layer) {
+              return layer.layerType === LayerType.baseLayer;
+            });
+            customOverLayer = customLayers == null ? void 0 : customLayers.find(function (layer) {
+              return layer.layerType === LayerType.overLayer;
+            }); // sets (default) baseLayers
+            baseLayersWithDefaultLayer = baseLayers.length ? baseLayers : [customBaseLayer || defaultLayers.baseLayerGrey]; // sets (default) overLayers
+            overLayersWithDefaultLayer = overLayers.length ? overLayers : [customOverLayer || defaultLayers.overLayer];
+            allBaseLayers = [].concat(baseLayersWithDefaultLayer, overLayersWithDefaultLayer).map(function (layer) {
+              return Object.assign({}, layer, {
+                id: webmapUtils.generateLayerId()
+              });
+            });
+            handleBaseLayers(mapId, allBaseLayers, listenerApi);
+            if (!proj) {
+              _context2.next = 20;
+              break;
+            }
+            checkIsprojectionSupported = isProjectionSupported(proj.srs);
+            if (checkIsprojectionSupported) {
+              _context2.next = 19;
+              break;
+            }
+            throw new Error("Projection " + proj.srs + " is not supported");
+          case 19:
+            //  set bbox
+            listenerApi.dispatch(mapActions.setBbox({
+              mapId: mapId,
+              bbox: proj.bbox,
+              srs: proj.srs
+            }));
+          case 20:
+            animationLength = animationPayload && animationPayload.duration;
+            animationEndTime = animationPayload && animationPayload.endTime && isAnimationEndTimeValid(animationPayload.endTime) && animationPayload.endTime;
+            shouldEndtimeOverride = animationPayload ? animationPayload.shouldEndtimeOverride : false;
+            if (shouldEndtimeOverride) {
+              //  auto update
+              listenerApi.dispatch(mapActions.setEndTimeOverriding({
+                mapId: mapId,
+                shouldEndtimeOverride: shouldEndtimeOverride
+              }));
+            }
+            if (shouldAutoUpdate !== undefined && !animationEndTime) {
+              //  auto update
+              listenerApi.dispatch(mapActions.toggleAutoUpdate({
+                mapId: mapId,
+                shouldAutoUpdate: shouldAutoUpdate
+              }));
+            }
+            if (showTimeSlider !== undefined) {
+              // toggle timeslider
+              listenerApi.dispatch(mapActions.toggleTimeSliderIsVisible({
+                mapId: mapId,
+                isTimeSliderVisible: showTimeSlider
+              }));
+            }
+            if (timeSliderSpan !== undefined) {
+              // set timeslider span
+              listenerApi.dispatch(mapActions.setTimeSliderSpan({
+                mapId: mapId,
+                timeSliderSpan: timeSliderSpan
+              }));
+            }
+            if (toggleTimeSpanAuto !== undefined) {
+              // toggle timeslider span auto
+              listenerApi.dispatch(mapActions.toggleTimeSpanAuto({
+                mapId: mapId,
+                timeSpanAuto: toggleTimeSpanAuto
+              }));
+            }
+            if (shouldShowZoomControls !== undefined) {
+              // toggle zoom controls
+              listenerApi.dispatch(mapActions.toggleZoomControls({
+                mapId: mapId,
+                shouldShowZoomControls: shouldShowZoomControls
+              }));
+            }
+            if (displayMapPin !== undefined) {
+              //  display map pin
+              listenerApi.dispatch(mapActions.toggleMapPinIsVisible({
+                mapId: mapId,
+                displayMapPin: displayMapPin
+              }));
+            }
+            // sets timestep by interval of animationPayload
+            interval = animationPayload && animationPayload.interval;
+            if (interval) {
+              listenerApi.dispatch(mapActions.setTimeStep({
+                mapId: mapId,
+                timeStep: interval
+              }));
+            }
+            // sets animationEndTime by endTime of animationPayload
+            if (animationEndTime) {
+              endTime = animationEndTime.includes('NOW') || animationEndTime.includes('TODAY') ? dateUtils.convertNOWandTODAYFormatsToUTC(animationEndTime) : animationEndTime;
+              listenerApi.dispatch(mapActions.setAnimationEndTime({
+                mapId: mapId,
+                animationEndTime: handleDateUtilsISOString(endTime)
+              }));
+              startTime = handleDateUtilsISOString(dateUtils.sub(dateUtils.utc(endTime), {
+                minutes: 5 * 60 // set to default of 5 hours
+              }).toISOString());
+              listenerApi.dispatch(mapActions.setAnimationStartTime({
+                mapId: mapId,
+                animationStartTime: startTime
+              }));
+              listenerApi.dispatch(genericActions.setTime({
+                origin: '',
+                sourceId: mapId,
+                value: startTime
+              }));
+              centerTimeInSeconds = new Date(handleDateUtilsISOString(endTime)).getTime();
+              listenerApi.dispatch(mapActions.setTimeSliderCenterTime({
+                mapId: mapId,
+                timeSliderCenterTime: centerTimeInSeconds
+              }));
+            }
+            // sets animationStartTime by duration of animationPayload
+            if (animationLength) {
+              animationEnd = getAnimationEndTime(listenerApi.getState(), mapId);
+              _startTime = handleDateUtilsISOString(dateUtils.sub(dateUtils.utc(animationEnd), {
+                minutes: animationLength
+              }).toISOString());
+              listenerApi.dispatch(mapActions.setAnimationStartTime({
+                mapId: mapId,
+                animationStartTime: _startTime
+              }));
+              listenerApi.dispatch(genericActions.setTime({
+                origin: '',
+                sourceId: mapId,
+                value: _startTime
+              }));
+            }
+            // sets animationDelay by speed of animationPayload
+            if (animationPayload && animationPayload.speed) {
+              listenerApi.dispatch(mapActions.setAnimationDelay({
+                mapId: mapId,
+                animationDelay: getSpeedDelay(animationPayload.speed)
+              }));
+            }
+            //  turn animation on
+            if (shouldAnimate === true) {
+              duration = animationPayload && animationPayload.duration ? animationPayload.duration : 5 * 60; //  set to default of 5 hours
+              _animationEnd = shouldEndtimeOverride && animationEndTime ? getAnimationEndTime(listenerApi.getState(), mapId) : dateUtils.dateToString(dateUtils.utc(), dateFormat);
+              animationStart = shouldEndtimeOverride && animationLength ? getAnimationStartTime(listenerApi.getState(), mapId) : dateUtils.dateToString(dateUtils.sub(dateUtils.utc(_animationEnd), {
+                minutes: duration
+              }), dateFormat);
+              listenerApi.dispatch(mapActions.mapStartAnimation({
+                mapId: mapId,
+                start: animationStart,
+                end: _animationEnd,
+                interval: interval || defaultTimeStep
+              }));
+              //  If animation interval set, set the timestep auto property to false
+              if (interval) {
+                listenerApi.dispatch(mapActions.toggleTimestepAuto({
+                  mapId: mapId,
+                  timestepAuto: false
+                }));
+              }
+            } else if (toggleTimestepAuto !== undefined) {
+              //  Set timestep auto based on preset if animation is off
+              listenerApi.dispatch(mapActions.toggleTimestepAuto({
+                mapId: mapId,
+                timestepAuto: toggleTimestepAuto
+              }));
+            }
+            // show legend
+            shouldOpenLegend = shouldShowLegend !== undefined ? shouldShowLegend : IS_LEGEND_OPEN_BY_DEFAULT;
+            legendId = getLegendId(listenerApi.getState(), mapId);
+            if (legendId) {
+              listenerApi.dispatch(uiActions.setToggleOpenDialog({
+                type: legendId,
+                setOpen: shouldOpenLegend
+              }));
+            }
+            if (dockedLayerManagerSize) {
+              listenerApi.dispatch(mapActions.setDockedLayerManagerSize({
+                mapId: mapId,
+                dockedLayerManagerSize: dockedLayerManagerSize
+              }));
             }
-          case 6:
-          case "end":
-            return _context5.stop();
-        }
-      }, _callee5);
-    }));
-    function effect(_x9, _x10) {
-      return _effect5.apply(this, arguments);
-    }
-    return effect;
-  }()
-});
-genericListener.startListening({
-  actionCreator: mapActions.layerMoveLayer,
-  effect: function () {
-    var _effect6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(_ref6, listenerApi) {
-      var payload, type, targets;
-      return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-        while (1) switch (_context6.prev = _context6.next) {
-          case 0:
-            payload = _ref6.payload, type = _ref6.type;
-            listenerApi.cancelActiveListeners();
-            /* Should not listen to actions from itself */
-            if (!(payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer)) {
-              _context6.next = 4;
+          case 40:
+            if (!(animationEndTime && (shouldEndtimeOverride || !(shouldAutoUpdate || shouldAnimate)))) {
+              _context2.next = 50;
               break;
             }
-            return _context6.abrupt("return");
-          case 4:
-            targets = getLayerMoveActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
-            if (targets && targets.length > 0) {
-              listenerApi.dispatch(setLayerActionSync(payload, targets, type));
+            fiveMinuteDelayForAnimation = 1000 * 60 * 5; // eslint-disable-next-line no-await-in-loop
+            _context2.next = 44;
+            return listenerApi.delay(fiveMinuteDelayForAnimation);
+          case 44:
+            _animationEnd2 = getAnimationEndTime(listenerApi.getState(), mapId);
+            listenerApi.dispatch(mapActions.setAnimationEndTime({
+              mapId: mapId,
+              animationEndTime: dateUtils.add(dateUtils.utc(_animationEnd2), {
+                minutes: 5
+              }).toISOString()
+            }));
+            _animationStart = getAnimationStartTime(listenerApi.getState(), mapId);
+            listenerApi.dispatch(mapActions.setAnimationStartTime({
+              mapId: mapId,
+              animationStartTime: dateUtils.add(dateUtils.utc(_animationStart), {
+                minutes: 5
+              }).toISOString()
+            }));
+            _context2.next = 40;
+            break;
+          case 50:
+            _context2.next = 55;
+            break;
+          case 52:
+            _context2.prev = 52;
+            _context2.t0 = _context2["catch"](1);
+            if (_context2.t0 instanceof Error) {
+              listenerApi.dispatch(mapActions.setMapPresetError({
+                mapId: payload.mapId,
+                error: _context2.t0.message
+              }));
             }
-          case 6:
+          case 55:
           case "end":
-            return _context6.stop();
+            return _context2.stop();
         }
-      }, _callee6);
+      }, _callee2, null, [[1, 52]]);
     }));
-    function effect(_x11, _x12) {
-      return _effect6.apply(this, arguments);
+    function effect(_x3, _x4) {
+      return _effect2.apply(this, arguments);
     }
     return effect;
   }()
 });
-genericListener.startListening({
-  matcher: isAnyOf(mapActions.setAutoLayerId, mapActions.setAutoUpdateLayerId, mapActions.setAutoTimestepLayerId),
-  effect: function () {
-    var _effect7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(_ref7, listenerApi) {
-      var payload, type, targets;
-      return _regeneratorRuntime().wrap(function _callee7$(_context7) {
-        while (1) switch (_context7.prev = _context7.next) {
-          case 0:
-            payload = _ref7.payload, type = _ref7.type;
-            listenerApi.cancelActiveListeners();
-            targets = getSetAutoLayerIdActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
-            if (targets && targets.length > 0) {
-              listenerApi.dispatch(setLayerActionSync(payload, targets, type));
-            }
-          case 4:
-          case "end":
-            return _context7.stop();
-        }
-      }, _callee7);
-    }));
-    function effect(_x13, _x14) {
-      return _effect7.apply(this, arguments);
-    }
-    return effect;
-  }()
+mapListener.startListening({
+  actionCreator: mapActions.unregisterMap,
+  effect: function effect(_ref7, listenerApi) {
+    var payload = _ref7.payload;
+    var mapId = payload.mapId;
+    var layerList = getLayersByMapId(listenerApi.getState(), mapId);
+    metronome.unregister(mapId);
+    layerList.map(function (layer) {
+      return listenerApi.dispatch(layerActions.layerDelete({
+        mapId: mapId,
+        layerId: layer.id,
+        origin: LayerActionOrigin.unregisterMapListener
+      }));
+    });
+  }
 });
-genericListener.startListening({
-  actionCreator: layerActions.setBaseLayers,
-  effect: function () {
-    var _effect8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8(_ref8, listenerApi) {
-      var payload, type, targets;
-      return _regeneratorRuntime().wrap(function _callee8$(_context8) {
-        while (1) switch (_context8.prev = _context8.next) {
-          case 0:
-            payload = _ref8.payload, type = _ref8.type;
-            listenerApi.cancelActiveListeners();
-            /* Should not listen to actions from itself */
-            if (!(payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer)) {
-              _context8.next = 4;
-              break;
-            }
-            return _context8.abrupt("return");
-          case 4:
-            targets = getMapBaseLayerActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
-            if (targets && targets.length > 0) {
-              listenerApi.dispatch(setLayerActionSync(payload, targets, type));
-            }
-          case 6:
-          case "end":
-            return _context8.stop();
-        }
-      }, _callee8);
-    }));
-    function effect(_x15, _x16) {
-      return _effect8.apply(this, arguments);
+mapListener.startListening({
+  actionCreator: mapActions.setStepBackwardOrForward,
+  effect: function effect(_ref8, listenerApi) {
+    var payload = _ref8.payload;
+    var mapId = payload.mapId,
+      isForwardStep = payload.isForwardStep;
+    var timeStep = getMapTimeStep(listenerApi.getState(), mapId);
+    var currentTime = getSelectedTime(listenerApi.getState(), mapId);
+    var _mapSelectors$getData = getDataLimitsFromLayers(listenerApi.getState(), mapId),
+      dataStartTime = _mapSelectors$getData[0],
+      dataEndTime = _mapSelectors$getData[1];
+    if (dateUtils.isValid(currentTime)) {
+      var makeForwardStep = function makeForwardStep() {
+        var nextTime = currentTime + timeStep;
+        var roundedTime = roundWithTimeStep(nextTime, timeStep, 'ceil');
+        var newTime = Math.min(roundedTime, dataEndTime || roundedTime);
+        return dateUtils.fromUnix(newTime).toISOString();
+      };
+      var makeBackwardStep = function makeBackwardStep() {
+        var nextTime = currentTime - timeStep;
+        var roundedTime = roundWithTimeStep(nextTime, timeStep, 'floor');
+        var newTime = Math.max(roundedTime, dataStartTime || roundedTime);
+        return dateUtils.fromUnix(newTime).toISOString();
+      };
+      var selectedTimeString = isForwardStep ? makeForwardStep() : makeBackwardStep();
+      var isMapAnimating = isAnimating(listenerApi.getState(), mapId);
+      if (isMapAnimating) {
+        listenerApi.dispatch(mapActions.mapStopAnimation({
+          mapId: mapId,
+          origin: MapActionOrigin.map
+        }));
+      }
+      listenerApi.dispatch(genericActions.setTime({
+        origin: '',
+        sourceId: mapId,
+        value: handleDateUtilsISOString(selectedTimeString)
+      }));
     }
-    return effect;
-  }()
+  }
 });
-genericListener.startListening({
-  actionCreator: layerActions.layerDelete,
-  effect: function () {
-    var _effect9 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9(_ref9, listenerApi) {
-      var payload, type, targets;
-      return _regeneratorRuntime().wrap(function _callee9$(_context9) {
-        while (1) switch (_context9.prev = _context9.next) {
+
+var _excluded = ["url"];
+var serviceListener = createListenerMiddleware();
+var fetchService = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(service, listenerApi) {
+    var layers;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          _context.next = 3;
+          return queryWMSLayers(service.serviceUrl);
+        case 3:
+          layers = _context.sent;
+          listenerApi.dispatch(serviceActions.serviceSetLayers(Object.assign({}, service, {
+            layers: layers
+          })));
+          _context.next = 10;
+          break;
+        case 7:
+          _context.prev = 7;
+          _context.t0 = _context["catch"](0);
+          if (_context.t0 instanceof Error) {
+            console.warn(_context.t0.message);
+          }
+        case 10:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[0, 7]]);
+  }));
+  return function fetchService(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var fetchInitialServices = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(payload, listenerApi) {
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          if (!(!payload || !payload.services)) {
+            _context2.next = 2;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 2:
+          _context2.prev = 2;
+          _context2.next = 5;
+          return Promise.all(payload.services.map(function (_ref3) {
+            var url = _ref3.url,
+              service = _objectWithoutPropertiesLoose(_ref3, _excluded);
+            return fetchService(Object.assign({}, service, {
+              serviceUrl: url
+            }), listenerApi);
+          }));
+        case 5:
+          _context2.next = 10;
+          break;
+        case 7:
+          _context2.prev = 7;
+          _context2.t0 = _context2["catch"](2);
+          // eslint-disable-next-line no-console
+          console.warn(_context2.t0);
+        case 10:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2, null, [[2, 7]]);
+  }));
+  return function fetchInitialServices(_x3, _x4) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+serviceListener.startListening({
+  actionCreator: serviceActions.fetchInitialServices,
+  effect: function () {
+    var _effect = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(_ref4, listenerApi) {
+      var payload;
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
           case 0:
-            payload = _ref9.payload, type = _ref9.type;
+            payload = _ref4.payload;
             listenerApi.cancelActiveListeners();
-            /* Should not listen to actions from itself */
-            if (!(payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer)) {
-              _context9.next = 4;
-              break;
-            }
-            return _context9.abrupt("return");
+            _context3.next = 4;
+            return fetchInitialServices(payload, listenerApi);
           case 4:
-            targets = getLayerDeleteActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
-            if (targets && targets.length > 0) {
-              listenerApi.dispatch(setLayerActionSync(payload, targets, type));
-            }
-          case 6:
           case "end":
-            return _context9.stop();
+            return _context3.stop();
         }
-      }, _callee9);
+      }, _callee3);
     }));
-    function effect(_x17, _x18) {
-      return _effect9.apply(this, arguments);
+    function effect(_x5, _x6) {
+      return _effect.apply(this, arguments);
     }
     return effect;
   }()
@@ -7381,8 +7293,8 @@ var slice$1 = createSlice({
     action) {}
   }
 });
-var reducer = slice$1.reducer;
-var routerActions = slice$1.actions;
+var routerReducer = slice$1.reducer,
+  routerActions = slice$1.actions;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -7933,57 +7845,141 @@ drawingToolListener.startListening({
   }()
 });
 
-/* *
- * 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)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var routerReducersMap = {
-  router: reducer
-};
-var routerMiddlewares = [routerListener.middleware];
-var routerModuleConfig = {
-  reducersMap: routerReducersMap,
-  middlewares: routerMiddlewares
-};
+var layersListener = createListenerMiddleware();
+layersListener.startListening({
+  actionCreator: layerActions.showLayerInfo,
+  effect: function () {
+    var _effect = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref, listenerApi) {
+      var payload, mapId, source, currentActiveMapId, isOpenInStore;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            payload = _ref.payload;
+            mapId = payload.mapId, source = payload.source;
+            currentActiveMapId = getDialogMapId(listenerApi.getState(), DialogTypes.LayerInfo);
+            isOpenInStore = getisDialogOpen(listenerApi.getState(), DialogTypes.LayerInfo);
+            if (currentActiveMapId !== mapId ? true : !isOpenInStore) {
+              listenerApi.dispatch(uiActions.setActiveMapIdForDialog({
+                type: DialogTypes.LayerInfo,
+                mapId: mapId,
+                setOpen: true,
+                source: source
+              }));
+            }
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    function effect(_x, _x2) {
+      return _effect.apply(this, arguments);
+    }
+    return effect;
+  }()
+});
+layersListener.startListening({
+  actionCreator: uiActions.setToggleOpenDialog,
+  effect: function () {
+    var _effect2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref2, listenerApi) {
+      var payload, setOpen, type, isOpenInStore;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            payload = _ref2.payload;
+            setOpen = payload.setOpen, type = payload.type; // close LayerInfo if open and LayerManager is closed
+            if (type === DialogTypes.LayerManager && !setOpen) {
+              isOpenInStore = getisDialogOpen(listenerApi.getState(), DialogTypes.LayerInfo);
+              if (isOpenInStore) {
+                listenerApi.dispatch(layerActions.hideLayerInfo());
+              }
+            }
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    function effect(_x3, _x4) {
+      return _effect2.apply(this, arguments);
+    }
+    return effect;
+  }()
+});
 
-/* *
- * 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)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var drawtoolReducersMap = {
-  drawingtools: drawingToolReducer
-};
-var drawtoolMiddlewares = [drawingToolListener.middleware];
-var drawtoolModuleConfig = {
-  reducersMap: drawtoolReducersMap,
-  middlewares: drawtoolMiddlewares
+/**
+ * This handler is triggered by the metronome. An array of timerIds is given as argument.
+ * It will update the animation loop of multiple maps and sliders
+ * It will prefetch images for maps
+ * @param timerIds string[] array of timerIds
+ * @param listenerApi ListenerEffectAPI<CoreAppStore, Dispatch, unknown> listenerApi as received from listener
+ */
+var metronomeHandler = function metronomeHandler(timerIds, listenerApi) {
+  var targetsWithUpdateValue = [];
+  var _loop = function _loop() {
+    var timerId = _step.value;
+    var animationListValuesNameAndValue = getAnimationList(listenerApi.getState(), timerId);
+    var animationListValues = animationListValuesNameAndValue.map(function (nameAndValue) {
+      return nameAndValue.value;
+    });
+    var targets = getTargets(listenerApi.getState(), {
+      sourceId: timerId,
+      origin: timerId
+    }, SYNCGROUPS_TYPE_SETTIME);
+    if (targets.length === 0) {
+      // When there are no targets, default to one
+      targets.push({
+        targetId: timerId,
+        value: ''
+      });
+    }
+    var timerIsInDwell = handleTimerDwell(timerId, animationListValues.length);
+    var timerShouldStepForward = prefetchAnimationTargetsForMetronome(timerId, animationListValues, targets) && !timerIsInDwell;
+    // Determine the next step
+    var timerStep = timerShouldStepForward ? getNextStep(timerId, animationListValues.length) : getCurrentStep(timerId);
+    setStep(timerId, timerStep);
+    var updatedValue = animationListValues[timerStep];
+    targetsWithUpdateValue.push.apply(targetsWithUpdateValue, targets.map(function (target) {
+      return Object.assign({}, target, {
+        value: updatedValue
+      });
+    }));
+    var speedDelay = getMapAnimationDelay(listenerApi.getState(), timerId);
+    var speed = 1000 / (speedDelay || 1);
+    metronome.setSpeed(timerId, speed);
+  };
+  for (var _iterator = _createForOfIteratorHelperLoose(timerIds), _step; !(_step = _iterator()).done;) {
+    _loop();
+  }
+  // Update all targets of all sync groups in one action.
+  if (targetsWithUpdateValue.length > 0) {
+    listenerApi.dispatch(setTimeSync(null, targetsWithUpdateValue, ['metronomelistener']));
+  }
 };
+var metronomeListener = createListenerMiddleware();
+metronomeListener.startListening({
+  actionCreator: mapActions.mapStartAnimation,
+  effect: function () {
+    var _effect = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_, listenerApi) {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            // register handler with access to listenerApi
+            metronome.handleTimerTicks = function (timerIds) {
+              metronomeHandler(timerIds, listenerApi);
+            };
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    function effect(_x, _x2) {
+      return _effect.apply(this, arguments);
+    }
+    return effect;
+  }()
+});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -8364,17 +8360,6 @@ var storeTestUtils = /*#__PURE__*/Object.freeze({
   webmapStateWithAddedLayer: webmapStateWithAddedLayer
 });
 
-var synchronizationGroupReducersMap = {
-  syncGroups: reducer$1,
-  loadingIndicator: loadingIndicatorReducer
-};
-var synchronizationGroupMiddlewares = [genericListener.middleware, syncGroupsListener.middleware];
-var synchronizationGroupConfig = {
-  id: 'syncGroups-module',
-  reducersMap: synchronizationGroupReducersMap,
-  middlewares: synchronizationGroupMiddlewares
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -8388,37 +8373,22 @@ var synchronizationGroupConfig = {
  * 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 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
-var uiReducersMap = {
-  ui: reducer$3
-};
-var uiModuleConfig = {
-  reducersMap: uiReducersMap
-};
+var SupportedComponentTypes;
+(function (SupportedComponentTypes) {
+  SupportedComponentTypes["WarningList"] = "WarningList";
+  SupportedComponentTypes["TimeSeries"] = "TimeSeries";
+})(SupportedComponentTypes || (SupportedComponentTypes = {}));
+var supportedComponentTypesForLinking = [SupportedComponentTypes.WarningList, SupportedComponentTypes.TimeSeries];
 
-/* *
- * 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var coreModuleConfig = [mapStoreModuleConfig, synchronizationGroupConfig, uiModuleConfig, drawtoolModuleConfig];
-var coreModuleReducersMap = Object.assign({}, mapStoreReducers, synchronizationGroupReducersMap, uiReducersMap, drawtoolReducersMap);
-var coreModuleMiddlewares = [].concat(mapStoreMiddlewares, synchronizationGroupMiddlewares, drawtoolMiddlewares);
+var constants = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  get SupportedComponentTypes () { return SupportedComponentTypes; },
+  supportedComponentTypesForLinking: supportedComponentTypesForLinking
+});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -8433,21 +8403,30 @@ var coreModuleMiddlewares = [].concat(mapStoreMiddlewares, synchronizationGroupM
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2024 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
-var SupportedComponentTypes;
-(function (SupportedComponentTypes) {
-  SupportedComponentTypes["WarningList"] = "WarningList";
-  SupportedComponentTypes["TimeSeries"] = "TimeSeries";
-})(SupportedComponentTypes || (SupportedComponentTypes = {}));
-var supportedComponentTypesForLinking = [SupportedComponentTypes.WarningList, SupportedComponentTypes.TimeSeries];
-
-var constants = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  get SupportedComponentTypes () { return SupportedComponentTypes; },
-  supportedComponentTypesForLinking: supportedComponentTypesForLinking
-});
+var storeReducerMap = {
+  webmap: mapReducer,
+  services: serviceReducer,
+  layers: layerReducer,
+  syncGroups: syncGroupsReducer,
+  loadingIndicator: loadingIndicatorReducer,
+  ui: uiReducer,
+  drawingtools: drawingToolReducer,
+  router: routerReducer
+};
+var storeMiddlewares = [mapListener.middleware, serviceListener.middleware, layersListener.middleware, metronomeListener.middleware, syncGroupsListener.middleware, genericListener.middleware, drawingToolListener.middleware, routerListener.middleware];
+var storeRootReducer = combineReducers(storeReducerMap);
+var createMockStore = function createMockStore(mockState) {
+  return configureStore({
+    reducer: storeRootReducer,
+    preloadedState: mockState,
+    middleware: function middleware(getDefaultMiddleware) {
+      return getDefaultMiddleware().concat(storeMiddlewares);
+    }
+  });
+};
 
-export { IS_LEGEND_OPEN_BY_DEFAULT, coreModuleConfig, coreModuleMiddlewares, coreModuleReducersMap, drawingToolActions, drawingToolListener, drawingToolReducer, drawtoolMiddlewares, drawtoolModuleConfig, drawtoolReducersMap, selectors as drawtoolSelectors, filterLayers$1 as filterLayers, genericActions, genericListener, selectors$3 as genericSelectors, types as genericTypes, getSingularDrawtoolDrawLayerId, getUserAddedServices, initialState$2 as initialState, layerActions, reducer$4 as layerReducer, selectors$6 as layerSelectors, types$3 as layerTypes, utils$1 as layerUtils, layersListener, constants as linkComponentTypesConstants, loadingIndicatorActions, constants$1 as loadingIndicatorConstants, loadingIndicatorReducer, selectors$2 as loadingIndicatorSelectors, mapActions, enums as mapEnums, mapListener, selectors$1 as mapSelectors, mapStoreMiddlewares, mapStoreModuleConfig, mapStoreReducers, types$4 as mapTypes, mapUtils, metronomeListener, routerActions, routerListener, routerMiddlewares, routerModuleConfig, reducer as routerReducer, routerReducersMap, utils as routerUtils, selectorMemoizationOptions, serviceActions, serviceListener, reducer$5 as serviceReducer, selectors$7 as serviceSelectors, types$5 as serviceTypes, setUserAddedServices, storeTestSettings, storeTestUtils, utils$3 as storeUtils, constants$2 as syncConstants, actions as syncGroupsActions, syncGroupsListener, reducer$1 as syncGroupsReducer, selector as syncGroupsSelector, selectors$4 as syncGroupsSelectors, types$1 as syncGroupsTypes, types$1 as types, uiActions, uiModuleConfig, reducer$3 as uiReducer, selectors$5 as uiSelectors, types$2 as uiTypes, useSetupDialog, useUpdateSharedData, reducer$2 as webmapReducer };
+export { IS_LEGEND_OPEN_BY_DEFAULT, createMockStore, drawingToolActions, drawingToolListener, drawingToolReducer, selectors as drawingToolSelectors, filterLayers$1 as filterLayers, genericActions, genericListener, selectors$3 as genericSelectors, types as genericTypes, getSingularDrawtoolDrawLayerId, getUserAddedServices, initialState$2 as initialState, layerActions, layerReducer, selectors$6 as layerSelectors, types$3 as layerTypes, utils$1 as layerUtils, layersListener, constants as linkComponentTypesConstants, loadingIndicatorActions, constants$1 as loadingIndicatorConstants, loadingIndicatorReducer, selectors$2 as loadingIndicatorSelectors, mapActions, enums as mapEnums, mapListener, mapReducer, selectors$1 as mapSelectors, types$4 as mapTypes, mapUtils, metronomeListener, routerActions, routerListener, routerReducer, utils as routerUtils, selectorMemoizationOptions, serviceActions, serviceListener, serviceReducer, selectors$7 as serviceSelectors, types$5 as serviceTypes, setUserAddedServices, storeMiddlewares, storeReducerMap, storeTestSettings, storeTestUtils, utils$3 as storeUtils, constants$2 as syncConstants, syncGroupsActions, syncGroupsListener, syncGroupsReducer, selector as syncGroupsSelector, selectors$4 as syncGroupsSelectors, types$1 as syncGroupsTypes, types$1 as types, uiActions, uiReducer, selectors$5 as uiSelectors, types$2 as uiTypes, useSetupDialog, useUpdateSharedData };