@opengeoweb/store 9.22.0 → 9.24.0

package/index.esm.js

@@ -1,5 +1,5 @@
-import { webmapUtils, LayerType, getWMJSMapById, WMLayer, webmapTestSettings, getWMSRequests, isProjectionSupported, handleDateUtilsISOString, getCapabilities } from '@opengeoweb/webmap';
-import { createAction, createSlice, createSelector, createEntityAdapter, createListenerMiddleware } from '@reduxjs/toolkit';
+import { webmapUtils, LayerType, getWMJSMapById, WMLayer, webmapTestSettings, isProjectionSupported, handleDateUtilsISOString, getCapabilities, getWMSRequests } from '@opengeoweb/webmap';
+import { createAction, createSlice, createSelector, createEntityAdapter, createListenerMiddleware, isAnyOf } from '@reduxjs/toolkit';
 import { getGeoJson, moveFeature, createInterSections, getLastEmptyFeatureIndex, defaultLayers, emptyGeoJSON, addSelectionTypeToGeoJSON, getFeatureCollection, defaultIntersectionStyleProperties } from '@opengeoweb/webmap-react';
 export { defaultLayers } from '@opengeoweb/webmap-react';
 import { dateUtils, defaultDelay, withEggs } from '@opengeoweb/shared';
@@ -2000,7 +2000,7 @@ var LayerActionOrigin;
   LayerActionOrigin["wmsLoader"] = "WMSLayerTreeConnect";
   LayerActionOrigin["ReactMapViewParseLayer"] = "ReactMapViewParseLayer";
   LayerActionOrigin["setLayerDimensionSaga"] = "setLayerDimensionSaga";
-  LayerActionOrigin["toggleAutoUpdateSaga"] = "toggleAutoUpdateSaga";
+  LayerActionOrigin["toggleAutoUpdateListener"] = "toggleAutoUpdateListener";
   LayerActionOrigin["unregisterMapSaga"] = "unregisterMapSaga";
 })(LayerActionOrigin || (LayerActionOrigin = {}));
 
@@ -4635,6 +4635,7 @@ var DialogTypes;
   DialogTypes["ObjectManager"] = "objectManager";
   DialogTypes["PublicWarnings"] = "publicWarnings";
   DialogTypes["Search"] = "search";
+  DialogTypes["AreaObjectLoader"] = "areaObjectLoader";
 })(DialogTypes || (DialogTypes = {}));
 
 var types$3 = /*#__PURE__*/Object.freeze({
@@ -4999,17 +5000,7 @@ const setBboxOrTimeSync = (draft, action) => {
     });
   }
 };
-const {
-  syncGroupAddGroup,
-  syncGroupAddSource,
-  syncGroupAddTarget,
-  syncGroupClear,
-  syncGroupLinkTarget,
-  syncGroupRemoveGroup,
-  syncGroupRemoveSource,
-  syncGroupRemoveTarget,
-  syncGroupSetViewState
-} = slice$4.actions;
+slice$4.actions;
 const {
   actions,
   reducer: reducer$3
@@ -7630,115 +7621,6 @@ fixRegExpWellKnownSymbolLogic('split', function (SPLIT, nativeSplit, maybeCallNa
   ];
 }, BUGGY || !SPLIT_WORKS_WITH_OVERWRITTEN_EXEC, UNSUPPORTED_Y);
 
-/* A map with all the timerIds and their current step */
-const stepMap = new Map();
-/* A map with a list of timers and their dwell */
-const 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
- */
-const getNextStep = (timerId, numberOfStepsInAnimation, numStepsToGoForward = 1) => {
-  const currentStep = getCurrentStep(timerId);
-  const nextStep = currentStep + numStepsToGoForward;
-  const nextStepClipped = (nextStep % numberOfStepsInAnimation + numberOfStepsInAnimation) % numberOfStepsInAnimation;
-  return nextStepClipped;
-};
-/**
- * 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
- */
-const handleTimerDwell = (timerId, numberOfStepsInAnimation, dwell = 8) => {
-  if (dwell > 0) {
-    const 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
-    const timerDwell = timerDwellMap.has(timerId) && timerDwellMap.get(timerId) || 0;
-    if (currentStep === numberOfStepsInAnimation - 1 && timerDwell > 0) {
-      timerDwellMap.set(timerId, timerDwell - 1);
-      return true;
-    }
-  }
-  return false;
-};
-/**
- * Set step for the timerId
- * @param timerId
- * @param timerStep
- */
-const setStep = (timerId, timerStep) => {
-  stepMap.set(timerId, timerStep);
-};
-/**
- * Gets the current step for the timer
- * @param timerId
- * @returns
- */
-const getCurrentStep = timerId => {
-  return stepMap.get(timerId) || 0;
-};
-const MAX_NUMBER_STEPS_FORWARD_TO_PREFETCH = 2;
-const 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.
- */
-const prefetchAnimationTargetsForMetronome = (timerId, animationListValues, targets) => {
-  let timerShouldStepForward = true;
-  // The following code prefetches/buffers for all maps in the group
-  for (let numPrefetch = 0; numPrefetch < MAX_NUMBER_STEPS_FORWARD_TO_PREFETCH; numPrefetch += 1) {
-    const nextStep = getNextStep(timerId, animationListValues.length, numPrefetch + 1);
-    const nextTimeValueStepToCheck = animationListValues[nextStep];
-    for (const target of targets) {
-      const targetMapId = target.targetId;
-      const wmMap = getWMJSMapById(targetMapId);
-      if (wmMap) {
-        const layersImageUrls = getWMSRequests(wmMap, [{
-          name: 'time',
-          currentValue: nextTimeValueStepToCheck
-        }]);
-        for (const layersImageUrl of layersImageUrls) {
-          const image = wmMap.getMapImageStore.getImage(layersImageUrl.url);
-          if (!image.isLoaded()) {
-            if (wmMap.getMapImageStore.getNumImagesLoading() < MAX_NUMBER_OF_PARALLEL_LOADING_IMAGES) {
-              image.load();
-            }
-            if (numPrefetch === 0) {
-              const 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);
-            }
-          }
-        }
-      } else {
-        return false; // Map was not registered so there is nothing to prefetch
-      }
-    }
-  }
-  return timerShouldStepForward;
-};
-
 const isAnimationEndTimeValid = animationEndTime => {
   const hasValidPrefix = animationEndTime.split(/[-+]/)[0] === 'NOW' || animationEndTime.split(/[-+]/)[0] === 'TODAY';
   const durationString = animationEndTime.substring(animationEndTime.indexOf('PT') + 2);
@@ -7749,37 +7631,6 @@ const isAnimationEndTimeValid = animationEndTime => {
   const parsedDate = dateUtils.parseISO(animationEndTime);
   return dateUtils.isValid(parsedDate);
 };
-function* startAnimationSaga({
-  payload
-}) {
-  const {
-    mapId,
-    initialTime
-  } = payload;
-  const speedDelay = yield select(getMapAnimationDelay, mapId);
-  const speed = 1000 / (speedDelay || 1);
-  metronome.register(null, speed, mapId);
-  const timeList = yield select(getAnimationList, mapId);
-  // In case of the timeList
-  if (timeList && timeList.length > 0) {
-    // Determine animation step based on initialTime and timeList
-    const initalTimerStep = timeList === null || timeList === void 0 ? void 0 : timeList.findIndex(timeNameValue => {
-      return timeNameValue.value === initialTime;
-    });
-    if (initalTimerStep !== -1) {
-      setStep(mapId, initalTimerStep);
-    }
-  }
-}
-// eslint-disable-next-line require-yield
-function* stopAnimationSaga({
-  payload
-}) {
-  const {
-    mapId
-  } = payload;
-  metronome.unregister(mapId);
-}
 function* deleteLayerSaga({
   payload
 }) {
@@ -7793,7 +7644,7 @@ function* deleteLayerSaga({
     }));
   }
 }
-function* updateAnimation(mapId, maxValue) {
+function* updateAnimation$1(mapId, maxValue) {
   const shouldEndtimeOverride$1 = yield select(shouldEndtimeOverride, mapId);
   if (shouldEndtimeOverride$1 === true) {
     return;
@@ -7871,59 +7722,7 @@ function* setLayerDimensionsSaga({
           }))));
         }
       }
-      yield call$e(updateAnimation, mapId, incomingMaxTime);
-    }
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.warn(error);
-  }
-}
-function* toggleAutoUpdateSaga({
-  payload
-}) {
-  const {
-    shouldAutoUpdate,
-    mapId
-  } = payload;
-  if (!shouldAutoUpdate) {
-    return;
-  }
-  try {
-    // go to end of active layer
-    const autoUpdateLayerId = yield select(getAutoUpdateLayerId, mapId);
-    const timeDimension = yield select(getLayerTimeDimension, autoUpdateLayerId);
-    if (timeDimension === null || timeDimension === void 0 ? void 0 : timeDimension.maxValue) {
-      yield put(layerActions.layerChangeDimension({
-        layerId: autoUpdateLayerId,
-        origin: LayerActionOrigin.toggleAutoUpdateSaga,
-        dimension: {
-          name: 'time',
-          currentValue: timeDimension.maxValue
-        }
-      }));
-      // Change time value for all other timesliders that are synced by syncgroups
-      const syncedMapIds = yield select(getSyncedMapIdsForTimeslider);
-      if (syncedMapIds.length > 0) {
-        yield all(syncedMapIds.map(syncedMapId => put(setTime({
-          origin: 'mapStore saga',
-          sourceId: syncedMapId,
-          value: timeDimension.maxValue
-        }))));
-        // When timesliders are synced by syncgrous autoupdate is toggled on, toggle autoupdate off for other timesliders
-        const payloads = syncedMapIds.reduce((syncedMapIdList, syncedMapId) => {
-          if (syncedMapId !== mapId) {
-            return syncedMapIdList.concat({
-              mapId: syncedMapId,
-              shouldAutoUpdate: false
-            });
-          }
-          return syncedMapIdList;
-        }, []);
-        if (payloads.length > 0) {
-          yield all(payloads.map(payload => put(mapActions.toggleAutoUpdate(payload))));
-        }
-      }
-      yield call$e(updateAnimation, mapId, timeDimension.maxValue);
+      yield call$e(updateAnimation$1, mapId, incomingMaxTime);
     }
   } catch (error) {
     // eslint-disable-next-line no-console
@@ -8257,13 +8056,10 @@ function* setStepBackwardOrForwardSaga({
     }));
   }
 }
-function* rootSaga$4() {
+function* rootSaga$2() {
   // resets IWMJSMap state
-  yield takeLatest(mapActions.mapStopAnimation.type, stopAnimationSaga);
-  yield takeLatest(mapActions.mapStartAnimation.type, startAnimationSaga);
   yield takeLatest(layerActions.layerDelete.type, deleteLayerSaga);
   yield takeLatest(layerActions.onUpdateLayerInformation.type, setLayerDimensionsSaga);
-  yield takeLatest(mapActions.toggleAutoUpdate.type, toggleAutoUpdateSaga);
   yield takeEvery(mapActions.setMapPreset.type, setMapPresetSaga);
   yield takeEvery(mapActions.unregisterMap.type, unregisterMapSaga);
   yield takeEvery(mapActions.setStepBackwardOrForward.type, setStepBackwardOrForwardSaga);
@@ -8295,85 +8091,194 @@ function* fetchInitialServicesSaga({
     }));
   }));
 }
-function* rootSaga$3() {
+function* rootSaga$1() {
   yield takeEvery(serviceActions.fetchInitialServices, fetchInitialServicesSaga);
 }
 
+/* A map with all the timerIds and their current step */
+const stepMap = new Map();
+/* A map with a list of timers and their dwell */
+const timerDwellMap = new Map();
 /**
- * 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
+ * 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
  */
-const metronomeHandler = (timerIds, listenerApi) => {
-  const targetsWithUpdateValue = [];
-  for (const timerId of timerIds) {
-    const animationListValuesNameAndValue = getAnimationList(listenerApi.getState(), timerId);
-    const animationListValues = animationListValuesNameAndValue.map(nameAndValue => nameAndValue.value);
-    const 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: ''
-      });
+const getNextStep = (timerId, numberOfStepsInAnimation, numStepsToGoForward = 1) => {
+  const currentStep = getCurrentStep(timerId);
+  const nextStep = currentStep + numStepsToGoForward;
+  const nextStepClipped = (nextStep % numberOfStepsInAnimation + numberOfStepsInAnimation) % numberOfStepsInAnimation;
+  return nextStepClipped;
+};
+/**
+ * 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
+ */
+const handleTimerDwell = (timerId, numberOfStepsInAnimation, dwell = 8) => {
+  if (dwell > 0) {
+    const 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
+    const timerDwell = timerDwellMap.has(timerId) && timerDwellMap.get(timerId) || 0;
+    if (currentStep === numberOfStepsInAnimation - 1 && timerDwell > 0) {
+      timerDwellMap.set(timerId, timerDwell - 1);
+      return true;
     }
-    const timerIsInDwell = handleTimerDwell(timerId, animationListValues.length);
-    const timerShouldStepForward = prefetchAnimationTargetsForMetronome(timerId, animationListValues, targets) && !timerIsInDwell;
-    // Determine the next step
-    const timerStep = timerShouldStepForward ? getNextStep(timerId, animationListValues.length) : getCurrentStep(timerId);
-    setStep(timerId, timerStep);
-    const updatedValue = animationListValues[timerStep];
-    targetsWithUpdateValue.push(...targets.map(target => {
-      return Object.assign(Object.assign({}, target), {
-        value: updatedValue
-      });
-    }));
-    const speedDelay = getMapAnimationDelay(listenerApi.getState(), timerId);
-    const speed = 1000 / (speedDelay || 1);
-    metronome.setSpeed(timerId, speed);
-  }
-  // Update all targets of all sync groups in one action.
-  if (targetsWithUpdateValue.length > 0) {
-    listenerApi.dispatch(setTimeSync(null, targetsWithUpdateValue, ['metronomesaga']));
   }
+  return false;
 };
-const metronomeListener = createListenerMiddleware();
-metronomeListener.startListening({
-  actionCreator: mapActions.mapStartAnimation,
-  effect: (_, listenerApi) => __awaiter(void 0, void 0, void 0, function* () {
-    // register handler with access to listenerApi
-    metronome.handleTimerTicks = timerIds => {
-      metronomeHandler(timerIds, listenerApi);
-    };
-  })
-});
-
-/* *
- * 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 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2024 - Finnish Meteorological Institute (FMI)
- * */
-const layersListener = createListenerMiddleware();
-layersListener.startListening({
-  actionCreator: layerActions.showLayerInfo,
-  effect: ({
-    payload
+/**
+ * Set step for the timerId
+ * @param timerId
+ * @param timerStep
+ */
+const setStep = (timerId, timerStep) => {
+  stepMap.set(timerId, timerStep);
+};
+/**
+ * Gets the current step for the timer
+ * @param timerId
+ * @returns
+ */
+const getCurrentStep = timerId => {
+  return stepMap.get(timerId) || 0;
+};
+const MAX_NUMBER_STEPS_FORWARD_TO_PREFETCH = 2;
+const 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.
+ */
+const prefetchAnimationTargetsForMetronome = (timerId, animationListValues, targets) => {
+  let timerShouldStepForward = true;
+  // The following code prefetches/buffers for all maps in the group
+  for (let numPrefetch = 0; numPrefetch < MAX_NUMBER_STEPS_FORWARD_TO_PREFETCH; numPrefetch += 1) {
+    const nextStep = getNextStep(timerId, animationListValues.length, numPrefetch + 1);
+    const nextTimeValueStepToCheck = animationListValues[nextStep];
+    for (const target of targets) {
+      const targetMapId = target.targetId;
+      const wmMap = getWMJSMapById(targetMapId);
+      if (wmMap) {
+        const layersImageUrls = getWMSRequests(wmMap, [{
+          name: 'time',
+          currentValue: nextTimeValueStepToCheck
+        }]);
+        for (const layersImageUrl of layersImageUrls) {
+          const image = wmMap.getMapImageStore.getImage(layersImageUrl.url);
+          if (!image.isLoaded()) {
+            if (wmMap.getMapImageStore.getNumImagesLoading() < MAX_NUMBER_OF_PARALLEL_LOADING_IMAGES) {
+              image.load();
+            }
+            if (numPrefetch === 0) {
+              const 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);
+            }
+          }
+        }
+      } else {
+        return false; // Map was not registered so there is nothing to prefetch
+      }
+    }
+  }
+  return timerShouldStepForward;
+};
+
+/**
+ * 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
+ */
+const metronomeHandler = (timerIds, listenerApi) => {
+  const targetsWithUpdateValue = [];
+  for (const timerId of timerIds) {
+    const animationListValuesNameAndValue = getAnimationList(listenerApi.getState(), timerId);
+    const animationListValues = animationListValuesNameAndValue.map(nameAndValue => nameAndValue.value);
+    const 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: ''
+      });
+    }
+    const timerIsInDwell = handleTimerDwell(timerId, animationListValues.length);
+    const timerShouldStepForward = prefetchAnimationTargetsForMetronome(timerId, animationListValues, targets) && !timerIsInDwell;
+    // Determine the next step
+    const timerStep = timerShouldStepForward ? getNextStep(timerId, animationListValues.length) : getCurrentStep(timerId);
+    setStep(timerId, timerStep);
+    const updatedValue = animationListValues[timerStep];
+    targetsWithUpdateValue.push(...targets.map(target => {
+      return Object.assign(Object.assign({}, target), {
+        value: updatedValue
+      });
+    }));
+    const speedDelay = getMapAnimationDelay(listenerApi.getState(), timerId);
+    const speed = 1000 / (speedDelay || 1);
+    metronome.setSpeed(timerId, speed);
+  }
+  // Update all targets of all sync groups in one action.
+  if (targetsWithUpdateValue.length > 0) {
+    listenerApi.dispatch(setTimeSync(null, targetsWithUpdateValue, ['metronomesaga']));
+  }
+};
+const metronomeListener = createListenerMiddleware();
+metronomeListener.startListening({
+  actionCreator: mapActions.mapStartAnimation,
+  effect: (_, listenerApi) => __awaiter(void 0, void 0, void 0, function* () {
+    // register handler with access to listenerApi
+    metronome.handleTimerTicks = timerIds => {
+      metronomeHandler(timerIds, listenerApi);
+    };
+  })
+});
+
+/* *
+ * 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 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * */
+const layersListener = createListenerMiddleware();
+layersListener.startListening({
+  actionCreator: layerActions.showLayerInfo,
+  effect: ({
+    payload
   }, listenerApi) => __awaiter(void 0, void 0, void 0, function* () {
     const {
       mapId,
@@ -8461,6 +8366,126 @@ mapUiListener.startListening({
   })
 });
 
+const mapListener = createListenerMiddleware();
+const updateAnimation = (mapId, maxValue, listenerApi) => {
+  const shouldEndtimeOverride$1 = shouldEndtimeOverride(listenerApi.getState(), mapId);
+  if (shouldEndtimeOverride$1 === true) {
+    return;
+  }
+  const animationStart = getAnimationStartTime(listenerApi.getState(), mapId);
+  // Calculate how much time the animation start need to move forwards
+  const animationEnd = getAnimationEndTime(listenerApi.getState(), mapId);
+  const animationEndUnix = dateUtils.unix(dateUtils.utc(animationEnd));
+  const maxTimeAsUnix = dateUtils.unix(dateUtils.utc(maxValue));
+  const timeInSecondToShiftAnimationForwards = maxTimeAsUnix - animationEndUnix;
+  const animationStartUnix = dateUtils.unix(dateUtils.utc(animationStart));
+  const newAnimationStartTime = dateUtils.dateToString(dateUtils.fromUnix(animationStartUnix + timeInSecondToShiftAnimationForwards), dateFormat);
+  const newAnimationEndTime = dateUtils.dateToString(dateUtils.fromUnix(animationEndUnix + timeInSecondToShiftAnimationForwards), dateFormat);
+  if (!newAnimationStartTime || !newAnimationEndTime) {
+    return;
+  }
+  listenerApi.dispatch(mapActions.setAnimationEndTime({
+    mapId,
+    animationEndTime: newAnimationEndTime
+  }));
+  listenerApi.dispatch(mapActions.setAnimationStartTime({
+    mapId,
+    animationStartTime: newAnimationStartTime
+  }));
+};
+mapListener.startListening({
+  actionCreator: mapActions.toggleAutoUpdate,
+  effect: ({
+    payload
+  }, listenerApi) => __awaiter(void 0, void 0, void 0, function* () {
+    listenerApi.cancelActiveListeners();
+    const {
+      shouldAutoUpdate,
+      mapId
+    } = payload;
+    if (!shouldAutoUpdate) {
+      return;
+    }
+    try {
+      const autoUpdateLayerId = getAutoUpdateLayerId(listenerApi.getState(), mapId);
+      const timeDimension = getLayerTimeDimension(listenerApi.getState(), autoUpdateLayerId);
+      const syncedMapIds = getSyncedMapIdsForTimeslider(listenerApi.getState());
+      // go to end of active layer
+      if ((timeDimension === null || timeDimension === void 0 ? void 0 : 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(syncedMapId => listenerApi.dispatch(setTime({
+            origin: LayerActionOrigin.toggleAutoUpdateListener,
+            sourceId: syncedMapId,
+            value: timeDimension.maxValue
+          })));
+        }
+        updateAnimation(mapId, timeDimension.maxValue, listenerApi);
+      }
+      // Toggle autoupdate off for synced timesliders
+      const payloads = syncedMapIds.reduce((syncedMapIdList, syncedMapId) => {
+        if (syncedMapId !== mapId) {
+          return syncedMapIdList.concat({
+            mapId: syncedMapId,
+            shouldAutoUpdate: false
+          });
+        }
+        return syncedMapIdList;
+      }, []);
+      if (payloads.length > 0) {
+        payloads.map(payload => listenerApi.dispatch(mapActions.toggleAutoUpdate(payload)));
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.warn(error);
+    }
+  })
+});
+mapListener.startListening({
+  actionCreator: mapActions.mapStartAnimation,
+  effect: ({
+    payload
+  }, listenerApi) => {
+    const {
+      mapId,
+      initialTime
+    } = payload;
+    const speedDelay = getMapAnimationDelay(listenerApi.getState(), mapId);
+    const speed = 1000 / (speedDelay || 1);
+    metronome.register(null, speed, mapId);
+    const timeList = getAnimationList(listenerApi.getState(), mapId);
+    // In case of the timeList
+    if (timeList && timeList.length > 0) {
+      // Determine animation step based on initialTime and timeList
+      const initalTimerStep = timeList === null || timeList === void 0 ? void 0 : timeList.findIndex(timeNameValue => {
+        return timeNameValue.value === initialTime;
+      });
+      if (initalTimerStep !== -1) {
+        setStep(mapId, initalTimerStep);
+      }
+    }
+  }
+});
+mapListener.startListening({
+  actionCreator: mapActions.mapStopAnimation,
+  effect: ({
+    payload
+  }) => {
+    const {
+      mapId
+    } = payload;
+    metronome.unregister(mapId);
+  }
+});
+
 // TODO: This fixes typecheck errors but maybe there is a better way to do that
 createStore$1({
   extensions: [getSagaExtension()]
@@ -8473,8 +8498,8 @@ const mapStoreReducers = {
 const mapStoreModuleConfig = {
   id: 'webmap-module',
   reducersMap: mapStoreReducers,
-  sagas: [rootSaga$4, rootSaga$3],
-  middlewares: [metronomeListener.middleware, layersListener.middleware, mapUiListener.middleware]
+  sagas: [rootSaga$2, rootSaga$1],
+  middlewares: [metronomeListener.middleware, layersListener.middleware, mapUiListener.middleware, mapListener.middleware]
 };
 
 const mapStoreActions = Object.assign(Object.assign(Object.assign({}, layerActions), mapActions), serviceActions);
@@ -8673,132 +8698,55 @@ const getMapBaseLayerActionsTargets = (state, payload, actionType) => {
 };
 
 const 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$/;
-function* setTimeSaga({
-  payload
-}) {
-  const {
-    value,
-    origin
-  } = payload;
-  /* 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 {
-    const targets = yield select(getTargets, payload, SYNCGROUPS_TYPE_SETTIME);
-    const groups = yield select(getTargetGroups, payload, SYNCGROUPS_TYPE_SETTIME);
-    yield put(setTimeSync(payload, targets, groups));
-  }
-}
-function* setBBoxSaga({
-  payload
-}) {
-  const targets = yield select(getTargets, payload, SYNCGROUPS_TYPE_SETBBOX);
-  const groups = yield select(getTargetGroups, payload, SYNCGROUPS_TYPE_SETBBOX);
-  yield put(setBboxSync(payload, targets, groups));
-}
-function* layerActionsSaga({
-  payload,
-  type
-}) {
-  /* Should not listen to actions from itself */
-  if (payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer) {
-    return;
-  }
-  const targets = yield select(getLayerActionsTargets, payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
-  if (targets && targets.length > 0) {
-    yield put(setLayerActionSync(payload, targets, type));
-  }
-}
-function* addLayerActionsSaga({
-  payload,
-  type
-}) {
-  /* Should not listen to actions from itself */
-  if (payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer) {
-    return;
-  }
-  const targets = yield select(getAddLayerActionsTargets, payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
-  if (targets && targets.length > 0) {
-    yield put(setLayerActionSync(payload, targets, type));
-  }
-}
-function* duplicateMapLayerActionsSaga({
-  payload
-}) {
-  const sourceLayer = yield select(getLayerById, payload.oldLayerId);
-  const newPayload = {
-    mapId: payload.mapId,
-    layer: sourceLayer,
-    origin: payload.origin
-  };
-  const targets = yield select(getAddLayerActionsTargets, newPayload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
-  if (targets && targets.length > 0) {
-    yield put(setLayerActionSync(newPayload, targets, layerActions.addLayer.type));
-  }
-}
-function* deleteLayerActionsSaga({
-  payload,
-  type
-}) {
-  /* Should not listen to actions from itself */
-  if (payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer) {
-    return;
-  }
-  const targets = yield select(getLayerDeleteActionsTargets, payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
-  if (targets && targets.length > 0) {
-    yield put(setLayerActionSync(payload, targets, type));
-  }
-}
-function* moveLayerActionsSaga({
-  payload,
-  type
-}) {
-  /* Should not listen to actions from itself */
-  if (payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer) {
-    return;
-  }
-  const targets = yield select(getLayerMoveActionsTargets, payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
-  if (targets && targets.length > 0) {
-    yield put(setLayerActionSync(payload, targets, type));
-  }
-}
-function* setAutoLayerIdActionsSaga({
-  payload,
-  type
-}) {
-  const targets = yield select(getSetActiveLayerIdActionsTargets, payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
-  if (targets && targets.length > 0) {
-    yield put(setLayerActionSync(payload, targets, type));
-  }
-}
-function* mapBaseLayerActionsSaga({
-  payload,
-  type
-}) {
-  /* Should not listen to actions from itself */
-  if (payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer) {
-    return;
-  }
-  const targets = yield select(getMapBaseLayerActionsTargets, payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
-  if (targets && targets.length > 0) {
-    yield put(setLayerActionSync(payload, targets, type));
-  }
-}
-function* rootSaga$2() {
-  yield takeLatest(setTime.type, setTimeSaga);
-  yield takeLatest(setBbox.type, setBBoxSaga);
-  yield takeLatest(layerActions.layerChangeName.type, layerActionsSaga);
-  yield takeLatest(layerActions.layerChangeEnabled.type, layerActionsSaga);
-  yield takeLatest(layerActions.layerChangeOpacity.type, layerActionsSaga);
-  yield takeLatest(layerActions.layerChangeDimension.type, layerActionsSaga);
-  yield takeLatest(layerActions.layerChangeStyle.type, layerActionsSaga);
-  yield takeLatest(layerActions.layerDelete.type, deleteLayerActionsSaga);
-  yield takeLatest(layerActions.addLayer.type, addLayerActionsSaga);
-  yield takeLatest(layerActions.duplicateMapLayer.type, duplicateMapLayerActionsSaga);
-  yield takeLatest(mapActions.layerMoveLayer.type, moveLayerActionsSaga);
-  yield takeLatest(mapActions.setAutoLayerId.type, setAutoLayerIdActionsSaga);
-  yield takeLatest(layerActions.setBaseLayers.type, mapBaseLayerActionsSaga);
-}
+const genericListener = createListenerMiddleware();
+genericListener.startListening({
+  actionCreator: setTime,
+  effect: ({
+    payload
+  }, listenerApi) => __awaiter(void 0, void 0, void 0, function* () {
+    listenerApi.cancelActiveListeners();
+    const {
+      value,
+      origin
+    } = payload;
+    /* 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 {
+      const targets = getTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETTIME);
+      const groups = getTargetGroups(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETTIME);
+      listenerApi.dispatch(setTimeSync(payload, targets, groups));
+    }
+  })
+});
+genericListener.startListening({
+  actionCreator: setBbox,
+  effect: ({
+    payload
+  }, listenerApi) => __awaiter(void 0, void 0, void 0, function* () {
+    listenerApi.cancelActiveListeners();
+    const targets = getTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETBBOX);
+    const groups = getTargetGroups(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETBBOX);
+    listenerApi.dispatch(setBboxSync(payload, targets, groups));
+  })
+});
+genericListener.startListening({
+  matcher: isAnyOf(layerActions.layerChangeName, layerActions.layerChangeEnabled, layerActions.layerChangeOpacity, layerActions.layerChangeDimension, layerActions.layerChangeStyle),
+  effect: ({
+    payload,
+    type
+  }, listenerApi) => __awaiter(void 0, void 0, void 0, function* () {
+    listenerApi.cancelActiveListeners();
+    /* Should not listen to actions from itself */
+    if (payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer) {
+      return;
+    }
+    const targets = getLayerActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
+    if (targets && targets.length > 0) {
+      listenerApi.dispatch(setLayerActionSync(payload, targets, type));
+    }
+  })
+});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -8873,18 +8821,19 @@ var utils = /*#__PURE__*/Object.freeze({
  * 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 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
  * */
-function* navigateToUrlSaga(action) {
-  const {
+const routerListener = createListenerMiddleware();
+routerListener.startListening({
+  actionCreator: routerActions.navigateToUrl,
+  effect: ({
     payload
-  } = action;
-  yield call$e(historyDict.navigate, payload.url);
-}
-function* rootSaga$1() {
-  yield takeLatest(routerActions.navigateToUrl.type, navigateToUrlSaga);
-}
+  }, listenerApi) => __awaiter(void 0, void 0, void 0, function* () {
+    listenerApi.cancelActiveListeners();
+    historyDict.navigate(payload.url);
+  })
+});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -8907,7 +8856,7 @@ const routerModuleConfig = {
   reducersMap: {
     router: reducer$1
   },
-  sagas: [rootSaga$1]
+  middlewares: [routerListener.middleware]
 };
 
 // reducer utils
@@ -9133,195 +9082,212 @@ var selectors = /*#__PURE__*/Object.freeze({
 	selectDrawToolById: selectDrawToolById
 });
 
+const drawingToolListener = createListenerMiddleware();
 const registerOrigin = 'drawings saga:registerDrawToolSaga';
-function* registerDrawToolSaga({
-  payload
-}) {
-  const {
-    mapId,
-    geoJSONLayerId,
-    geoJSONIntersectionLayerId,
-    geoJSONIntersectionBoundsLayerId,
-    defaultGeoJSON = emptyGeoJSON,
-    defaultGeoJSONIntersection = emptyGeoJSON,
-    defaultGeoJSONIntersectionBounds,
-    defaultGeoJSONIntersectionProperties = defaultIntersectionStyleProperties
-  } = payload;
-  // create for every drawTool a draw layer
-  if (geoJSONLayerId && mapId) {
-    yield put(mapStoreActions.addLayer({
-      mapId,
-      layer: {
-        // empty geoJSON
-        geojson: defaultGeoJSON,
-        layerType: LayerType.featureLayer
-      },
-      layerId: geoJSONLayerId,
-      origin: registerOrigin
-    }));
-  }
-  // create intersection layer
-  if (geoJSONIntersectionLayerId && mapId) {
-    yield put(mapStoreActions.addLayer({
+// register draw tool
+drawingToolListener.startListening({
+  actionCreator: drawtoolActions.registerDrawTool,
+  effect: ({
+    payload
+  }, listenerApi) => __awaiter(void 0, void 0, void 0, function* () {
+    listenerApi.cancelActiveListeners();
+    const {
       mapId,
-      layer: {
-        geojson: defaultGeoJSONIntersection,
-        layerType: LayerType.featureLayer,
-        defaultGeoJSONProperties: defaultGeoJSONIntersectionProperties
-      },
-      layerId: geoJSONIntersectionLayerId,
-      origin: registerOrigin
-    }));
-  }
-  // create intersection bounds layer
-  if (geoJSONIntersectionBoundsLayerId && mapId) {
-    const existingBoundsLayer = yield select(getLayerById, geoJSONIntersectionBoundsLayerId);
-    // don't add a new boundslayer when another drawtool using that same boundslayer
-    if (!existingBoundsLayer) {
-      yield put(mapStoreActions.addLayer({
+      geoJSONLayerId,
+      geoJSONIntersectionLayerId,
+      geoJSONIntersectionBoundsLayerId,
+      defaultGeoJSON = emptyGeoJSON,
+      defaultGeoJSONIntersection = emptyGeoJSON,
+      defaultGeoJSONIntersectionBounds,
+      defaultGeoJSONIntersectionProperties = defaultIntersectionStyleProperties
+    } = payload;
+    // create for every drawTool a draw layer
+    if (geoJSONLayerId && mapId) {
+      listenerApi.dispatch(mapStoreActions.addLayer({
         mapId,
         layer: {
-          geojson: defaultGeoJSONIntersectionBounds,
+          // empty geoJSON
+          geojson: defaultGeoJSON,
           layerType: LayerType.featureLayer
         },
-        layerId: geoJSONIntersectionBoundsLayerId,
+        layerId: geoJSONLayerId,
         origin: registerOrigin
       }));
     }
-    yield put(layerActions.orderLayerToFront({
-      layerId: geoJSONIntersectionBoundsLayerId
-    }));
-  }
-}
-function* changeDrawToolSaga({
-  payload
-}) {
-  var _a, _b, _c;
-  try {
-    const {
-      drawModeId,
-      drawToolId,
-      shouldUpdateShape = true
-    } = payload;
-    const drawingTool = yield select(selectDrawToolById, drawToolId);
-    const {
-      shouldAllowMultipleShapes = false,
-      geoJSONIntersectionLayerId,
-      geoJSONIntersectionBoundsLayerId
-    } = drawingTool;
-    const newDrawMode = yield select(getDrawModeById, drawToolId, drawModeId);
-    // disable layer when no new drawmode or when selecting same tool and is selectable
-    if (!newDrawMode || !drawingTool.activeDrawModeId && newDrawMode.isSelectable) {
-      yield put(layerActions.toggleFeatureMode({
-        layerId: drawingTool.geoJSONLayerId,
-        isInEditMode: false,
-        drawMode: ''
+    // create intersection layer
+    if (geoJSONIntersectionLayerId && mapId) {
+      listenerApi.dispatch(mapStoreActions.addLayer({
+        mapId,
+        layer: {
+          geojson: defaultGeoJSONIntersection,
+          layerType: LayerType.featureLayer,
+          defaultGeoJSONProperties: defaultGeoJSONIntersectionProperties
+        },
+        layerId: geoJSONIntersectionLayerId,
+        origin: registerOrigin
       }));
-      const geoJSONLayer = yield select(getLayerById, drawingTool.geoJSONLayerId);
-      const geoJSON = geoJSONLayer === null || geoJSONLayer === void 0 ? void 0 : geoJSONLayer.geojson;
-      const lastFeatureIndex = geoJSON !== undefined ? getLastEmptyFeatureIndex(geoJSON) : undefined;
-      if (lastFeatureIndex !== undefined) {
-        const newGeoJSON = Object.assign(Object.assign({}, geoJSON), {
-          features: geoJSON.features.filter((_feature, index) => index !== lastFeatureIndex)
-        });
-        yield put(layerActions.updateFeature({
-          layerId: drawingTool.geoJSONLayerId,
-          geojson: newGeoJSON
+    }
+    // create intersection bounds layer
+    if (geoJSONIntersectionBoundsLayerId && mapId) {
+      const existingBoundsLayer = getLayerById(listenerApi.getState(), geoJSONIntersectionBoundsLayerId);
+      // don't add a new boundslayer when another drawtool using that same boundslayer
+      if (!existingBoundsLayer) {
+        listenerApi.dispatch(mapStoreActions.addLayer({
+          mapId,
+          layer: {
+            geojson: defaultGeoJSONIntersectionBounds,
+            layerType: LayerType.featureLayer
+          },
+          layerId: geoJSONIntersectionBoundsLayerId,
+          origin: registerOrigin
         }));
-        yield put(layerActions.setSelectedFeature({
+      }
+      listenerApi.dispatch(layerActions.orderLayerToFront({
+        layerId: geoJSONIntersectionBoundsLayerId
+      }));
+    }
+  })
+});
+// change draw tool
+drawingToolListener.startListening({
+  actionCreator: drawtoolActions.changeDrawToolMode,
+  effect: ({
+    payload
+  }, listenerApi) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b, _c;
+    listenerApi.cancelActiveListeners();
+    try {
+      const {
+        drawModeId,
+        drawToolId,
+        shouldUpdateShape = true
+      } = payload;
+      const drawingTool = selectDrawToolById(listenerApi.getState(), drawToolId);
+      if (!drawingTool) {
+        return;
+      }
+      const {
+        shouldAllowMultipleShapes = false,
+        geoJSONIntersectionLayerId,
+        geoJSONIntersectionBoundsLayerId
+      } = drawingTool;
+      const newDrawMode = getDrawModeById(listenerApi.getState(), drawToolId, drawModeId);
+      // disable layer when no new drawmode or when selecting same tool and is selectable
+      if (!newDrawMode || !drawingTool.activeDrawModeId && newDrawMode.isSelectable) {
+        listenerApi.dispatch(layerActions.toggleFeatureMode({
           layerId: drawingTool.geoJSONLayerId,
-          selectedFeatureIndex: newGeoJSON.features.length > 0 ? newGeoJSON.features.length - 1 : 0
+          isInEditMode: false,
+          drawMode: ''
         }));
+        const geoJSONLayer = getLayerById(listenerApi.getState(), drawingTool.geoJSONLayerId);
+        const geoJSON = geoJSONLayer === null || geoJSONLayer === void 0 ? void 0 : geoJSONLayer.geojson;
+        const lastFeatureIndex = geoJSON !== undefined ? getLastEmptyFeatureIndex(geoJSON) : undefined;
+        if (lastFeatureIndex !== undefined) {
+          const newGeoJSON = Object.assign(Object.assign({}, geoJSON), {
+            features: geoJSON.features.filter((_feature, index) => index !== lastFeatureIndex)
+          });
+          listenerApi.dispatch(layerActions.updateFeature({
+            layerId: drawingTool.geoJSONLayerId,
+            geojson: newGeoJSON
+          }));
+          listenerApi.dispatch(layerActions.setSelectedFeature({
+            layerId: drawingTool.geoJSONLayerId,
+            selectedFeatureIndex: newGeoJSON.features.length > 0 ? newGeoJSON.features.length - 1 : 0
+          }));
+        }
+        return;
       }
-      return;
-    }
-    // delete shape
-    if (newDrawMode.value === 'DELETE') {
-      yield put(layerActions.layerChangeGeojson({
-        layerId: drawingTool.geoJSONLayerId,
-        geojson: emptyGeoJSON
-      }));
-      // clear intersection shape
-      if (geoJSONIntersectionLayerId) {
-        yield put(layerActions.layerChangeGeojson({
-          layerId: geoJSONIntersectionLayerId,
+      // delete shape
+      if (newDrawMode.value === 'DELETE') {
+        listenerApi.dispatch(layerActions.layerChangeGeojson({
+          layerId: drawingTool.geoJSONLayerId,
           geojson: emptyGeoJSON
         }));
+        // clear intersection shape
+        if (geoJSONIntersectionLayerId) {
+          listenerApi.dispatch(layerActions.layerChangeGeojson({
+            layerId: geoJSONIntersectionLayerId,
+            geojson: emptyGeoJSON
+          }));
+        }
+        listenerApi.dispatch(layerActions.toggleFeatureMode({
+          layerId: drawingTool.geoJSONLayerId,
+          isInEditMode: false,
+          drawMode: ''
+        }));
+        return;
+      }
+      // check tool is selected of existing drawn shape
+      const currentGeoJSONLayer = getLayerById(listenerApi.getState(), drawingTool.geoJSONLayerId);
+      const {
+        geojson: currentGeoJSON,
+        selectedFeatureIndex = 0
+      } = currentGeoJSONLayer || {};
+      const currentSelectionType = (_b = (_a = currentGeoJSON === null || currentGeoJSON === void 0 ? void 0 : currentGeoJSON.features[selectedFeatureIndex]) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.selectionType;
+      const newSelectionType = newDrawMode.selectionType;
+      const isNewToolSelected = currentSelectionType !== newSelectionType;
+      const shouldUpdateNewShape = !((_c = currentGeoJSON === null || currentGeoJSON === void 0 ? void 0 : currentGeoJSON.features) === null || _c === void 0 ? void 0 : _c.length) || isNewToolSelected || !newDrawMode.isSelectable && shouldAllowMultipleShapes;
+      // don't change anything if same tool is selected again
+      if (shouldUpdateNewShape && shouldUpdateShape) {
+        const shapeWithSelectionType = addSelectionTypeToGeoJSON(newDrawMode.shape, newDrawMode.selectionType);
+        const geoJSONFeatureCollection = getFeatureCollection(shapeWithSelectionType, shouldAllowMultipleShapes, currentGeoJSON);
+        const newGeoJSON = getGeoJson(geoJSONFeatureCollection, shouldAllowMultipleShapes);
+        if (shouldAllowMultipleShapes) {
+          moveFeature(currentGeoJSON, newGeoJSON, selectedFeatureIndex, '');
+        }
+        listenerApi.dispatch(layerActions.setSelectedFeature({
+          layerId: drawingTool.geoJSONLayerId,
+          selectedFeatureIndex: newGeoJSON.features.length - 1
+        }));
+        listenerApi.dispatch(layerActions.updateFeature(Object.assign(Object.assign({
+          layerId: drawingTool.geoJSONLayerId,
+          geojson: newGeoJSON
+        }, geoJSONIntersectionLayerId && {
+          geoJSONIntersectionLayerId
+        }), geoJSONIntersectionBoundsLayerId && {
+          geoJSONIntersectionBoundsLayerId
+        })));
       }
-      yield put(layerActions.toggleFeatureMode({
+      listenerApi.dispatch(layerActions.toggleFeatureMode({
         layerId: drawingTool.geoJSONLayerId,
-        isInEditMode: false,
-        drawMode: ''
+        isInEditMode: newDrawMode.isSelectable,
+        drawMode: newDrawMode.value
       }));
-      return;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log('error changeDrawToolSaga', error);
     }
-    // check tool is selected of existing drawn shape
-    const currentGeoJSONLayer = yield select(getLayerById, drawingTool.geoJSONLayerId);
+  })
+});
+// change intersection
+drawingToolListener.startListening({
+  actionCreator: drawtoolActions.changeIntersectionBounds,
+  effect: ({
+    payload
+  }, listenerApi) => __awaiter(void 0, void 0, void 0, function* () {
+    listenerApi.cancelActiveListeners();
     const {
-      geojson: currentGeoJSON,
-      selectedFeatureIndex = 0
-    } = currentGeoJSONLayer || {};
-    const currentSelectionType = (_b = (_a = currentGeoJSON === null || currentGeoJSON === void 0 ? void 0 : currentGeoJSON.features[selectedFeatureIndex]) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.selectionType;
-    const newSelectionType = newDrawMode.selectionType;
-    const isNewToolSelected = currentSelectionType !== newSelectionType;
-    const shouldUpdateNewShape = !((_c = currentGeoJSON === null || currentGeoJSON === void 0 ? void 0 : currentGeoJSON.features) === null || _c === void 0 ? void 0 : _c.length) || isNewToolSelected || !newDrawMode.isSelectable && shouldAllowMultipleShapes;
-    // don't change anything if same tool is selected again
-    if (shouldUpdateNewShape && shouldUpdateShape) {
-      const shapeWithSelectionType = addSelectionTypeToGeoJSON(newDrawMode.shape, newDrawMode.selectionType);
-      const geoJSONFeatureCollection = getFeatureCollection(shapeWithSelectionType, shouldAllowMultipleShapes, currentGeoJSON);
-      const newGeoJSON = getGeoJson(geoJSONFeatureCollection, shouldAllowMultipleShapes);
-      if (shouldAllowMultipleShapes) {
-        moveFeature(currentGeoJSON, newGeoJSON, selectedFeatureIndex, '');
-      }
-      yield put(layerActions.setSelectedFeature({
-        layerId: drawingTool.geoJSONLayerId,
-        selectedFeatureIndex: newGeoJSON.features.length - 1
-      }));
-      yield put(layerActions.updateFeature(Object.assign(Object.assign({
-        layerId: drawingTool.geoJSONLayerId,
-        geojson: newGeoJSON
-      }, geoJSONIntersectionLayerId && {
-        geoJSONIntersectionLayerId
-      }), geoJSONIntersectionBoundsLayerId && {
-        geoJSONIntersectionBoundsLayerId
-      })));
+      drawToolId,
+      geoJSON
+    } = payload;
+    const drawtool = selectDrawToolById(listenerApi.getState(), drawToolId);
+    if (!drawtool) {
+      return;
     }
-    yield put(layerActions.toggleFeatureMode({
-      layerId: drawingTool.geoJSONLayerId,
-      isInEditMode: newDrawMode.isSelectable,
-      drawMode: newDrawMode.value
+    listenerApi.dispatch(layerActions.layerChangeGeojson({
+      layerId: drawtool.geoJSONIntersectionBoundsLayerId,
+      geojson: geoJSON
     }));
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.log('error changeDrawToolSaga', error);
-  }
-}
-function* changeIntersectionSaga({
-  payload
-}) {
-  const {
-    drawToolId,
-    geoJSON
-  } = payload;
-  const drawtool = yield select(selectDrawToolById, drawToolId);
-  yield put(layerActions.layerChangeGeojson({
-    layerId: drawtool.geoJSONIntersectionBoundsLayerId,
-    geojson: geoJSON
-  }));
-  yield put(layerActions.layerChangeGeojson({
-    layerId: drawtool.geoJSONLayerId,
-    geojson: emptyGeoJSON
-  }));
-  yield put(layerActions.layerChangeGeojson({
-    layerId: drawtool.geoJSONIntersectionLayerId,
-    geojson: emptyGeoJSON
-  }));
-}
-function* drawingSaga() {
-  yield takeLatest(drawtoolActions.registerDrawTool, registerDrawToolSaga);
-  yield takeLatest(drawtoolActions.changeDrawToolMode, changeDrawToolSaga);
-  yield takeLatest(drawtoolActions.changeIntersectionBounds, changeIntersectionSaga);
-}
+    listenerApi.dispatch(layerActions.layerChangeGeojson({
+      layerId: drawtool.geoJSONLayerId,
+      geojson: emptyGeoJSON
+    }));
+    listenerApi.dispatch(layerActions.layerChangeGeojson({
+      layerId: drawtool.geoJSONIntersectionLayerId,
+      geojson: emptyGeoJSON
+    }));
+  })
+});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -9344,7 +9310,7 @@ const drawtoolModuleConfig = {
   reducersMap: {
     drawingtools: reducer
   },
-  sagas: [drawingSaga]
+  middlewares: [drawingToolListener.middleware]
 };
 
 /* *
@@ -9648,82 +9614,163 @@ var storeTestUtils = /*#__PURE__*/Object.freeze({
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-function* updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdate) {
-  const group = yield select(getSynchronizationGroup, groupId);
-  if (!group) {
+function* addLayerActionsSaga({
+  payload,
+  type
+}) {
+  /* Should not listen to actions from itself */
+  if (payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer) {
     return;
   }
-  switch (group.type) {
-    case SYNCGROUPS_TYPE_SETTIME:
-      if (!group.payloadByType[SYNCGROUPS_TYPE_SETTIME]) {
-        return;
-      }
-      yield put(setTimeSync(group.payloadByType[SYNCGROUPS_TYPE_SETTIME], [{
-        targetId: targetToUpdate,
-        value: group.payloadByType[SYNCGROUPS_TYPE_SETTIME].value
-      }], [groupId]));
-      break;
-    case SYNCGROUPS_TYPE_SETBBOX:
-      if (!group.payloadByType[SYNCGROUPS_TYPE_SETBBOX]) {
-        return;
-      }
-      yield put(setBboxSync(group.payloadByType[SYNCGROUPS_TYPE_SETBBOX], [{
-        targetId: targetToUpdate,
-        bbox: group.payloadByType[SYNCGROUPS_TYPE_SETBBOX].bbox,
-        srs: group.payloadByType[SYNCGROUPS_TYPE_SETBBOX].srs
-      }], [groupId]));
-      break;
+  const targets = yield select(getAddLayerActionsTargets, payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
+  if (targets && targets.length > 0) {
+    yield put(setLayerActionSync(payload, targets, type));
   }
 }
-function* addGroupTargetSaga({
+function* duplicateMapLayerActionsSaga({
   payload
 }) {
-  const {
-    groupId,
-    linked,
-    targetId: targetToUpdate
-  } = payload;
-  if (!linked) {
-    yield call$e(updateSourceValueWhenLinkingComponentToGroupSaga, groupId, targetToUpdate);
+  const sourceLayer = yield select(getLayerById, payload.oldLayerId);
+  const newPayload = {
+    mapId: payload.mapId,
+    layer: sourceLayer,
+    origin: payload.origin
+  };
+  const targets = yield select(getAddLayerActionsTargets, newPayload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
+  if (targets && targets.length > 0) {
+    yield put(setLayerActionSync(newPayload, targets, layerActions.addLayer.type));
   }
 }
-function* linkGroupTargetSaga({
-  payload
+function* deleteLayerActionsSaga({
+  payload,
+  type
 }) {
-  const {
-    groupId,
-    linked,
-    targetId: targetToUpdate
-  } = payload;
-  if (!linked) {
-    yield call$e(updateSourceValueWhenLinkingComponentToGroupSaga, groupId, targetToUpdate);
+  /* Should not listen to actions from itself */
+  if (payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer) {
+    return;
+  }
+  const targets = yield select(getLayerDeleteActionsTargets, payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
+  if (targets && targets.length > 0) {
+    yield put(setLayerActionSync(payload, targets, type));
   }
 }
-function* updateViewStateSaga() {
-  const viewState = yield select(createSyncGroupViewStateSelector);
-  yield put(syncGroupSetViewState({
-    viewState
-  }));
+function* moveLayerActionsSaga({
+  payload,
+  type
+}) {
+  /* Should not listen to actions from itself */
+  if (payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer) {
+    return;
+  }
+  const targets = yield select(getLayerMoveActionsTargets, payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
+  if (targets && targets.length > 0) {
+    yield put(setLayerActionSync(payload, targets, type));
+  }
+}
+function* setAutoLayerIdActionsSaga({
+  payload,
+  type
+}) {
+  const targets = yield select(getSetActiveLayerIdActionsTargets, payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
+  if (targets && targets.length > 0) {
+    yield put(setLayerActionSync(payload, targets, type));
+  }
+}
+function* mapBaseLayerActionsSaga({
+  payload,
+  type
+}) {
+  /* Should not listen to actions from itself */
+  if (payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer) {
+    return;
+  }
+  const targets = yield select(getMapBaseLayerActionsTargets, payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
+  if (targets && targets.length > 0) {
+    yield put(setLayerActionSync(payload, targets, type));
+  }
 }
 function* rootSaga() {
-  yield takeLatest(syncGroupAddTarget.type, addGroupTargetSaga);
-  yield takeLatest(syncGroupLinkTarget.type, linkGroupTargetSaga);
-  yield takeLatest(syncGroupAddGroup.type, updateViewStateSaga);
-  yield takeLatest(syncGroupRemoveGroup.type, updateViewStateSaga);
-  yield takeLatest(syncGroupAddSource.type, updateViewStateSaga);
-  yield takeLatest(syncGroupRemoveSource.type, updateViewStateSaga);
-  yield takeLatest(syncGroupAddTarget.type, updateViewStateSaga);
-  yield takeLatest(syncGroupRemoveTarget.type, updateViewStateSaga);
-  yield takeLatest(syncGroupLinkTarget.type, updateViewStateSaga);
+  yield takeLatest(layerActions.layerDelete.type, deleteLayerActionsSaga);
+  yield takeLatest(layerActions.addLayer.type, addLayerActionsSaga);
+  yield takeLatest(layerActions.duplicateMapLayer.type, duplicateMapLayerActionsSaga);
+  yield takeLatest(mapActions.layerMoveLayer.type, moveLayerActionsSaga);
+  yield takeLatest(mapActions.setAutoLayerId.type, setAutoLayerIdActionsSaga);
+  yield takeLatest(layerActions.setBaseLayers.type, mapBaseLayerActionsSaga);
 }
 
+/* *
+ * 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 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * */
+const syncGroupsListener = createListenerMiddleware();
+syncGroupsListener.startListening({
+  matcher: isAnyOf(actions.syncGroupAddTarget, actions.syncGroupLinkTarget),
+  effect: ({
+    payload
+  }, listenerApi) => __awaiter(void 0, void 0, void 0, function* () {
+    listenerApi.cancelActiveListeners();
+    const {
+      groupId,
+      linked,
+      targetId: targetToUpdate
+    } = payload;
+    const group = getSynchronizationGroup(listenerApi.getState(), groupId);
+    if (!linked && group) {
+      switch (group.type) {
+        case SYNCGROUPS_TYPE_SETTIME:
+          if (!group.payloadByType[SYNCGROUPS_TYPE_SETTIME]) {
+            return;
+          }
+          listenerApi.dispatch(setTimeSync(group.payloadByType[SYNCGROUPS_TYPE_SETTIME], [{
+            targetId: targetToUpdate,
+            value: group.payloadByType[SYNCGROUPS_TYPE_SETTIME].value
+          }], [groupId]));
+          break;
+        case SYNCGROUPS_TYPE_SETBBOX:
+          if (!group.payloadByType[SYNCGROUPS_TYPE_SETBBOX]) {
+            return;
+          }
+          listenerApi.dispatch(setBboxSync(group.payloadByType[SYNCGROUPS_TYPE_SETBBOX], [{
+            targetId: targetToUpdate,
+            bbox: group.payloadByType[SYNCGROUPS_TYPE_SETBBOX].bbox,
+            srs: group.payloadByType[SYNCGROUPS_TYPE_SETBBOX].srs
+          }], [groupId]));
+          break;
+      }
+    }
+  })
+});
+syncGroupsListener.startListening({
+  matcher: isAnyOf(actions.syncGroupAddGroup, actions.syncGroupRemoveGroup, actions.syncGroupAddSource, actions.syncGroupRemoveSource, actions.syncGroupAddTarget, actions.syncGroupRemoveTarget, actions.syncGroupLinkTarget),
+  effect: (_, listenerApi) => __awaiter(void 0, void 0, void 0, function* () {
+    listenerApi.cancelActiveListeners();
+    const viewState = createSyncGroupViewStateSelector(listenerApi.getState());
+    listenerApi.dispatch(actions.syncGroupSetViewState({
+      viewState
+    }));
+  })
+});
+
 const synchronizationGroupConfig = {
   id: 'syncronizationGroupStore-module',
   reducersMap: {
     syncronizationGroupStore: reducer$3,
     loadingIndicatorStore: loadingIndicatorReducer
   },
-  sagas: [rootSaga$2, rootSaga]
+  sagas: [rootSaga],
+  middlewares: [genericListener.middleware, syncGroupsListener.middleware]
 };
 
 /* *
@@ -9769,7 +9816,7 @@ const coreModuleConfig = [mapStoreModuleConfig, synchronizationGroupConfig, uiMo
 
 const createStore = () => createStore$1({
   extensions: [getSagaExtension({}), {
-    middlewares: [metronomeListener.middleware]
+    middlewares: [metronomeListener.middleware, mapListener.middleware]
   }]
 });
 const WrapperWithModules = withEggs(coreModuleConfig)(({
@@ -9792,4 +9839,4 @@ const StoreProvider = ({
   })
 }));
 
-export { IS_LEGEND_OPEN_BY_DEFAULT, StoreProvider, coreModuleConfig, createStore, drawtoolActions, drawtoolModuleConfig, reducer as drawtoolReducer, selectors as drawtoolSelectors, filterLayers$1 as filterLayers, genericActions, rootSaga$2 as genericSaga, selectors$4 as genericSelectors, types$1 as genericTypes, getSingularDrawtoolDrawLayerId, getUserAddedServices, initialState$3 as initialState, layerActions, reducer$6 as layerReducer, selectors$7 as layerSelectors, types$5 as layerTypes, utils$2 as layerUtils, loadingIndicatorActions, constants as loadingIndicatorConstants, loadingIndicatorReducer, selectors$3 as loadingIndicatorSelectors, mapActions, enums as mapEnums, rootSaga$4 as mapSaga, selectors$2 as mapSelectors, mapStoreActions, mapStoreModuleConfig, mapStoreReducers, types$4 as mapTypes, mapUtils, routerActions, routerModuleConfig, utils as routerUtils, selectorMemoizationOptions, serviceActions, selectors$1 as serviceSelectors, types as serviceTypes, setUserAddedServices, storeTestSettings, storeTestUtils, utils$1 as storeUtils, constants$1 as syncConstants, actions as syncGroupsActions, reducer$3 as syncGroupsReducer, selector as syncGroupsSelector, selectors$5 as syncGroupsSelectors, types$2 as syncGroupsTypes, types$2 as types, uiActions, uiModuleConfig, reducer$5 as uiReducer, selectors$6 as uiSelectors, types$3 as uiTypes, useSetupDialog, reducer$4 as webmapReducer };
+export { IS_LEGEND_OPEN_BY_DEFAULT, StoreProvider, coreModuleConfig, createStore, drawtoolActions, drawtoolModuleConfig, reducer as drawtoolReducer, selectors as drawtoolSelectors, filterLayers$1 as filterLayers, genericActions, genericListener, selectors$4 as genericSelectors, types$1 as genericTypes, getSingularDrawtoolDrawLayerId, getUserAddedServices, initialState$3 as initialState, layerActions, reducer$6 as layerReducer, selectors$7 as layerSelectors, types$5 as layerTypes, utils$2 as layerUtils, loadingIndicatorActions, constants as loadingIndicatorConstants, loadingIndicatorReducer, selectors$3 as loadingIndicatorSelectors, mapActions, enums as mapEnums, rootSaga$2 as mapSaga, selectors$2 as mapSelectors, mapStoreActions, mapStoreModuleConfig, mapStoreReducers, types$4 as mapTypes, mapUtils, routerActions, routerModuleConfig, utils as routerUtils, selectorMemoizationOptions, serviceActions, selectors$1 as serviceSelectors, types as serviceTypes, setUserAddedServices, storeTestSettings, storeTestUtils, utils$1 as storeUtils, constants$1 as syncConstants, actions as syncGroupsActions, reducer$3 as syncGroupsReducer, selector as syncGroupsSelector, selectors$5 as syncGroupsSelectors, types$2 as syncGroupsTypes, types$2 as types, uiActions, uiModuleConfig, reducer$5 as uiReducer, selectors$6 as uiSelectors, types$3 as uiTypes, useSetupDialog, reducer$4 as webmapReducer };