@opengeoweb/store 9.8.0 → 9.10.0

package/index.esm.js

@@ -1,17 +1,16 @@
-import { current, produce } from 'immer';
-import { webmapUtils, LayerType, webmapTestSettings, WMLayer, handleMomentISOString, getCapabilities } from '@opengeoweb/webmap';
-import { createAction, createSlice, createSelector, createEntityAdapter, current as current$1 } from '@reduxjs/toolkit';
-import { getGeoJson, moveFeature, createInterSections, defaultLayers, getFeatureCollection, emptyGeoJSON, defaultIntersectionStyleProperties } from '@opengeoweb/webmap-react';
+import { webmapUtils, LayerType, webmapTestSettings, WMLayer, getWMJSMapById, getMapImageStore, getAlternativeImage, handleMomentISOString, getCapabilities } from '@opengeoweb/webmap';
+import { createAction, createSlice, createSelector, createEntityAdapter, createListenerMiddleware } from '@reduxjs/toolkit';
+import { getGeoJson, moveFeature, createInterSections, getLastEmptyFeatureIndex, defaultLayers, addSelectionTypeToGeoJSON, getFeatureCollection, emptyGeoJSON, defaultIntersectionStyleProperties } from '@opengeoweb/webmap-react';
 export { defaultLayers } from '@opengeoweb/webmap-react';
-import { differenceInMinutes, isValid, fromUnixTime } from 'date-fns';
-import { dateUtils, withEggs } from '@opengeoweb/shared';
+import { dateUtils, metronome, withEggs } from '@opengeoweb/shared';
+import { produce } from 'immer';
 import { isEqual, compact } from 'lodash';
 import { createStore as createStore$1 } from '@redux-eggs/redux-toolkit';
 import { getSagaExtension } from '@redux-eggs/saga-extension';
-import { takeEvery, takeLatest, put, select, call, all, delay } from 'redux-saga/effects';
+import { call, takeEvery, takeLatest, select, put, all, take, delay } from 'redux-saga/effects';
+import { eventChannel } from 'redux-saga';
 import React, { useCallback, useEffect } from 'react';
 import { Provider, useDispatch, useSelector } from 'react-redux';
-import { ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 
 function _iterableToArrayLimit(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
@@ -403,6 +402,57 @@ function _nonIterableSpread() {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _createForOfIteratorHelper(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (!it) {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+      if (it) o = it;
+      var i = 0;
+      var F = function () {};
+      return {
+        s: F,
+        n: function () {
+          if (i >= o.length) return {
+            done: true
+          };
+          return {
+            done: false,
+            value: o[i++]
+          };
+        },
+        e: function (e) {
+          throw e;
+        },
+        f: F
+      };
+    }
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+  var normalCompletion = true,
+    didErr = false,
+    err;
+  return {
+    s: function () {
+      it = it.call(o);
+    },
+    n: function () {
+      var step = it.next();
+      normalCompletion = step.done;
+      return step;
+    },
+    e: function (e) {
+      didErr = true;
+      err = e;
+    },
+    f: function () {
+      try {
+        if (!normalCompletion && it.return != null) it.return();
+      } finally {
+        if (didErr) throw err;
+      }
+    }
+  };
+}
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -431,6 +481,16 @@ function __rest(s, e) {
     return t;
 }
 
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -562,17 +622,17 @@ var createMap = function createMap(_ref) {
     _ref$isAnimating = _ref.isAnimating,
     isAnimating = _ref$isAnimating === void 0 ? false : _ref$isAnimating,
     _ref$animationStartTi = _ref.animationStartTime,
-    animationStartTime = _ref$animationStartTi === void 0 ? dateUtils.dateToString(dateUtils.sub(dateUtils.fromUnix(dateUtils.unix(dateUtils.utc())), {
+    animationStartTime = _ref$animationStartTi === void 0 ? dateUtils.dateToString(dateUtils.sub(dateUtils.getNowUtc(), {
       hours: 5
     }), dateFormat) : _ref$animationStartTi,
     _ref$animationEndTime = _ref.animationEndTime,
-    animationEndTime = _ref$animationEndTime === void 0 ? dateUtils.dateToString(dateUtils.sub(dateUtils.fromUnix(dateUtils.unix(dateUtils.utc())), {
+    animationEndTime = _ref$animationEndTime === void 0 ? dateUtils.dateToString(dateUtils.sub(dateUtils.getNowUtc(), {
       minutes: 10
     }), dateFormat) : _ref$animationEndTime,
     _ref$isAutoUpdating = _ref.isAutoUpdating,
     isAutoUpdating = _ref$isAutoUpdating === void 0 ? false : _ref$isAutoUpdating,
-    _ref$isEndTimeOverrid = _ref.isEndTimeOverriding,
-    isEndTimeOverriding = _ref$isEndTimeOverrid === void 0 ? false : _ref$isEndTimeOverrid,
+    _ref$shouldEndtimeOve = _ref.shouldEndtimeOverride,
+    shouldEndtimeOverride = _ref$shouldEndtimeOve === void 0 ? false : _ref$shouldEndtimeOve,
     _ref$bbox = _ref.bbox,
     bbox = _ref$bbox === void 0 ? {
       left: -19000000,
@@ -626,7 +686,7 @@ var createMap = function createMap(_ref) {
     animationStartTime: animationStartTime,
     animationEndTime: animationEndTime,
     isAutoUpdating: isAutoUpdating,
-    isEndTimeOverriding: isEndTimeOverriding,
+    shouldEndtimeOverride: shouldEndtimeOverride,
     srs: srs,
     bbox: bbox,
     baseLayers: baseLayers,
@@ -654,19 +714,28 @@ var createMap = function createMap(_ref) {
 var checkValidLayersPayload = function checkValidLayersPayload(layers, mapId) {
   /* Check for duplicate ids */
   var layerIds = {};
-  for (var i = 0; i < layers.length; i += 1) {
-    if (layers[i].id) {
-      /* Check if layer is already added to a different map */
-      if (layers[i].mapId && mapId && layers[i].mapId !== mapId) {
-        return false;
-      }
-      /* Check duplicate */
-      if (!layerIds[layers[i].id]) {
-        layerIds[layers[i].id] = true;
-      } else {
-        return false;
+  var _iterator = _createForOfIteratorHelper(layers),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var layer = _step.value;
+      if (layer.id) {
+        /* Check if layer is already added to a different map */
+        if (layer.mapId && mapId && layer.mapId !== mapId) {
+          return false;
+        }
+        /* Check duplicate */
+        if (!layerIds[layer.id]) {
+          layerIds[layer.id] = true;
+        } else {
+          return false;
+        }
       }
     }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
   }
   return true;
 };
@@ -799,7 +868,7 @@ var getSpeedFactor = function getSpeedFactor(speedDelay) {
   return defaultDelay / speedDelay;
 };
 var getAnimationDuration = function getAnimationDuration(animationEndTime, animationStartTime) {
-  return animationEndTime && animationStartTime ? differenceInMinutes(new Date(animationEndTime), new Date(animationStartTime)) : 0;
+  return animationEndTime && animationStartTime ? dateUtils.differenceInMinutes(new Date(animationEndTime), new Date(animationStartTime)) : 0;
 };
 /**
  * Returns speed delay for given speedFactor. For options, see defined above in "speedFactors"
@@ -1098,10 +1167,10 @@ var setBbox = createAction('GENERIC_SETBBOX');
  *
  * These actions should not be used by components directly. Components should only use the generic actions.
  */
-var setTimeSync = createAction('GENERIC_SYNC_SETTIME', function (payload, targets, groups) {
+var setTimeSync = createAction('GENERIC_SYNC_SETTIME', function (setTimePayload, targets, groups) {
   return {
     payload: {
-      source: setTime(payload),
+      source: setTimePayload && setTime(setTimePayload),
       groups: groups,
       targets: targets
     }
@@ -1300,17 +1369,15 @@ var slice$7 = createSlice({
       }
       /*
           All layer id's for the specified mapId should be removed.
-          This is done by clearing the allId object, and then adding back the layer ids for the other maps we want to keep.
+          This is done by filtering the allId array. Keeping only the layer id's which don't exist in the byId object
           At the same time the byId object is synchronized.
         */
-      var state = current(draft);
-      draft.allIds = [];
-      state.allIds.forEach(function (layerId) {
-        if (state.byId[layerId] && state.byId[layerId].layerType !== LayerType.baseLayer && state.byId[layerId].layerType !== LayerType.overLayer && state.byId[layerId].mapId === mapId) {
+      draft.allIds = draft.allIds.filter(function (layerId) {
+        if (draft.byId[layerId] && draft.byId[layerId].layerType !== LayerType.baseLayer && draft.byId[layerId].layerType !== LayerType.overLayer && draft.byId[layerId].mapId === mapId) {
           delete draft.byId[layerId];
-        } else {
-          draft.allIds.push(layerId);
+          return false;
         }
+        return true;
       });
       /*
           Here we set the layers for the mapId from the action. byId and allIds is updated.
@@ -1340,14 +1407,13 @@ var slice$7 = createSlice({
           layerTypes.push(layer.layerType);
         }
       });
-      var state = current(draft);
       // remove current layers with same type as one of the passed layers
-      state.allIds.forEach(function (layerId) {
-        if (state.byId[layerId] && layerTypes.includes(state.byId[layerId].layerType) && state.byId[layerId].mapId === mapId) {
+      draft.allIds = draft.allIds.filter(function (layerId) {
+        if (draft.byId[layerId] && layerTypes.includes(draft.byId[layerId].layerType) && draft.byId[layerId].mapId === mapId) {
           delete draft.byId[layerId];
-          var index = draft.allIds.indexOf(layerId);
-          draft.allIds.splice(index, 1);
+          return false;
         }
+        return true;
       });
       // set over and base layers
       filtererdBaseLayers.forEach(function (layer) {
@@ -1412,14 +1478,13 @@ var slice$7 = createSlice({
       var _action$payload13 = action.payload,
         layers = _action$payload13.layers,
         mapId = _action$payload13.mapId;
-      var state = current(draft);
       // remove current baselayers for passed map
-      state.availableBaseLayers.allIds.forEach(function (layerId) {
-        if (state.availableBaseLayers.byId[layerId] && state.availableBaseLayers.byId[layerId].mapId === mapId) {
+      draft.availableBaseLayers.allIds = draft.availableBaseLayers.allIds.filter(function (layerId) {
+        if (draft.availableBaseLayers.byId[layerId] && draft.availableBaseLayers.byId[layerId].mapId === mapId) {
           delete draft.availableBaseLayers.byId[layerId];
-          var index = draft.availableBaseLayers.allIds.indexOf(layerId);
-          draft.availableBaseLayers.allIds.splice(index, 1);
+          return false;
         }
+        return true;
       });
       // add new available baselayers
       layers.forEach(function (layer) {
@@ -1529,18 +1594,18 @@ var slice$7 = createSlice({
         _action$payload17$rea = _action$payload17.reason,
         reason = _action$payload17$rea === void 0 ? '' : _action$payload17$rea,
         geoJSONIntersectionLayerId = _action$payload17.geoJSONIntersectionLayerId,
-        geoJSONIntersectionBoundsLayerId = _action$payload17.geoJSONIntersectionBoundsLayerId;
+        geoJSONIntersectionBoundsLayerId = _action$payload17.geoJSONIntersectionBoundsLayerId,
+        selectionType = _action$payload17.selectionType;
       var currentLayer = draft.byId[layerId];
       if (!currentLayer) {
         return;
       }
       var updatedGeoJSON = getGeoJson(geojson, shouldAllowMultipleShapes);
       if (shouldAllowMultipleShapes) {
-        var _current = current(currentLayer),
-          currentGeoJSON = _current.geojson,
-          _current$selectedFeat = _current.selectedFeatureIndex,
-          selectedFeatureIndex = _current$selectedFeat === void 0 ? 0 : _current$selectedFeat;
-        var newFeatureIndex = moveFeature(currentGeoJSON, updatedGeoJSON, selectedFeatureIndex, reason);
+        var currentGeoJSON = currentLayer.geojson,
+          _currentLayer$selecte = currentLayer.selectedFeatureIndex,
+          selectedFeatureIndex = _currentLayer$selecte === void 0 ? 0 : _currentLayer$selecte;
+        var newFeatureIndex = moveFeature(currentGeoJSON, updatedGeoJSON, selectedFeatureIndex, reason, selectionType);
         if (newFeatureIndex !== undefined) {
           currentLayer.selectedFeatureIndex = newFeatureIndex;
         }
@@ -1552,8 +1617,8 @@ var slice$7 = createSlice({
         if (!intersectionLayer || !intersectionBoundsLayer) {
           return;
         }
-        var bounds = current(intersectionBoundsLayer).geojson;
-        var geoJSONProperties = current(intersectionLayer).defaultGeoJSONProperties || ((_b = (_a = current(currentLayer).geojson) === null || _a === void 0 ? void 0 : _a.features[0]) === null || _b === void 0 ? void 0 : _b.properties);
+        var bounds = intersectionBoundsLayer.geojson;
+        var geoJSONProperties = intersectionLayer.defaultGeoJSONProperties || ((_b = (_a = currentLayer.geojson) === null || _a === void 0 ? void 0 : _a.features[0]) === null || _b === void 0 ? void 0 : _b.properties);
         intersectionLayer.geojson = createInterSections(updatedGeoJSON, bounds, geoJSONProperties);
       }
     },
@@ -1599,9 +1664,23 @@ var slice$7 = createSlice({
       if (!draft.byId[layerId]) {
         return;
       }
-      if (!shouldAllowMultipleShapes || shouldAllowMultipleShapes && reason === 'escaped') {
+      var exitMultipleShapes = shouldAllowMultipleShapes && reason === 'escaped';
+      if (!shouldAllowMultipleShapes || exitMultipleShapes) {
         draft.byId[layerId].isInEditMode = false;
         draft.byId[layerId].drawMode = '';
+        if (exitMultipleShapes) {
+          var currentGeoJSON = draft.byId[layerId].geojson;
+          var lastFeatureIndex = currentGeoJSON !== undefined && getLastEmptyFeatureIndex(currentGeoJSON);
+          if (currentGeoJSON && lastFeatureIndex !== undefined) {
+            var newGeoJSON = Object.assign(Object.assign({}, currentGeoJSON), {
+              features: currentGeoJSON.features.filter(function (_feature, index) {
+                return index !== lastFeatureIndex;
+              })
+            });
+            draft.byId[layerId].geojson = newGeoJSON;
+            draft.byId[layerId].selectedFeatureIndex = newGeoJSON.features.length > 0 ? newGeoJSON.features.length - 1 : 0;
+          }
+        }
       }
     }
   },
@@ -1611,10 +1690,13 @@ var slice$7 = createSlice({
         targetsFromAction = _action$payload21.targets,
         source = _action$payload21.source;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
-      var targets = [{
-        targetId: source.payload.sourceId,
-        value: source.payload.value
-      }];
+      var targets = [];
+      if (source) {
+        targets.push({
+          targetId: source.payload.sourceId,
+          value: source.payload.value
+        });
+      }
       /* And then append the targets form the action */
       targets.push.apply(targets, _toConsumableArray(targetsFromAction));
       targets.forEach(function (payload) {
@@ -1636,15 +1718,14 @@ var slice$7 = createSlice({
       var _action$payload22 = action.payload,
         targets = _action$payload22.targets,
         source = _action$payload22.source;
-      var state = current(draft);
       return targets.reduce(function (prevState, target) {
         var action = {
           payload: target,
-          type: source.type
+          type: source && source.type
         };
         /* Handle the Layer action with the same logic, using the same reducer */
         return reducer$7(prevState, action);
-      }, state);
+      }, draft);
     }).addCase(setMapPreset, function (draft, action) {
       var mapId = action.payload.mapId;
       var layers = draft.allIds.map(function (id) {
@@ -2402,14 +2483,22 @@ var createLayersWithIds = function createLayersWithIds(state, layers) {
     return layers;
   }
   return produce(layers, function (draft) {
-    for (var j = 0; j < draft.length; j += 1) {
-      var layer = draft[j];
-      if (!layer.id) {
-        layer.id = webmapUtils.generateLayerId();
-      } else if (checkIfMapLayerIdIsAlreadyTaken(state, layer.id)) {
-        console.warn("Warning: Layer id ".concat(layer.id, " was already taken: Generating new one."));
-        layer.id = webmapUtils.generateLayerId();
+    var _iterator = _createForOfIteratorHelper(draft),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var layer = _step.value;
+        if (!layer.id) {
+          layer.id = webmapUtils.generateLayerId();
+        } else if (checkIfMapLayerIdIsAlreadyTaken(state, layer.id)) {
+          console.warn("Warning: Layer id ".concat(layer.id, " was already taken: Generating new one."));
+          layer.id = webmapUtils.generateLayerId();
+        }
       }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
     }
   });
 };
@@ -2468,16 +2557,27 @@ var slice$5 = createSlice({
       });
     },
     mapStartAnimation: function mapStartAnimation(draft, action) {
-      var mapId = action.payload.mapId;
+      var _action$payload3 = action.payload,
+        mapId = _action$payload3.mapId,
+        timeList = _action$payload3.timeList,
+        start = _action$payload3.start,
+        end = _action$payload3.end;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].isAnimating = true;
-      if (action.payload.start) {
-        draft.byId[mapId].animationStartTime = action.payload.start;
-      }
-      if (action.payload.end) {
-        draft.byId[mapId].animationEndTime = action.payload.end;
+      // Animation is defined by one of the following:
+      // - start, end and interval for a continuous animation loop with constant interval
+      // - timeList, for a custom timeList
+      if (start && end) {
+        draft.byId[mapId].animationStartTime = start;
+        draft.byId[mapId].animationEndTime = end;
+        draft.byId[mapId].timeList = undefined;
+      }
+      if (timeList && timeList.length >= 0) {
+        draft.byId[mapId].animationStartTime = undefined;
+        draft.byId[mapId].animationEndTime = undefined;
+        draft.byId[mapId].timeList = timeList;
       }
       if (action.payload.interval && action.payload.interval !== draft.byId[mapId].timeStep) {
         draft.byId[mapId].timeStep = action.payload.interval;
@@ -2492,66 +2592,66 @@ var slice$5 = createSlice({
       draft.byId[mapId].isAnimating = false;
     },
     setTimeSliderSpan: function setTimeSliderSpan(draft, action) {
-      var _action$payload3 = action.payload,
-        mapId = _action$payload3.mapId,
-        timeSliderSpan = _action$payload3.timeSliderSpan;
+      var _action$payload4 = action.payload,
+        mapId = _action$payload4.mapId,
+        timeSliderSpan = _action$payload4.timeSliderSpan;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].timeSliderSpan = timeSliderSpan;
     },
     setTimeStep: function setTimeStep(draft, action) {
-      var _action$payload4 = action.payload,
-        mapId = _action$payload4.mapId,
-        timeStep = _action$payload4.timeStep;
+      var _action$payload5 = action.payload,
+        mapId = _action$payload5.mapId,
+        timeStep = _action$payload5.timeStep;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].timeStep = timeStep;
     },
     setAnimationStartTime: function setAnimationStartTime(draft, action) {
-      var _action$payload5 = action.payload,
-        mapId = _action$payload5.mapId,
-        animationStartTime = _action$payload5.animationStartTime;
+      var _action$payload6 = action.payload,
+        mapId = _action$payload6.mapId,
+        animationStartTime = _action$payload6.animationStartTime;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].animationStartTime = animationStartTime;
     },
     setAnimationEndTime: function setAnimationEndTime(draft, action) {
-      var _action$payload6 = action.payload,
-        mapId = _action$payload6.mapId,
-        animationEndTime = _action$payload6.animationEndTime;
+      var _action$payload7 = action.payload,
+        mapId = _action$payload7.mapId,
+        animationEndTime = _action$payload7.animationEndTime;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].animationEndTime = animationEndTime;
     },
     setAnimationDelay: function setAnimationDelay(draft, action) {
-      var _action$payload7 = action.payload,
-        mapId = _action$payload7.mapId,
-        animationDelay = _action$payload7.animationDelay;
+      var _action$payload8 = action.payload,
+        mapId = _action$payload8.mapId,
+        animationDelay = _action$payload8.animationDelay;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].animationDelay = animationDelay;
     },
     layerMoveLayer: function layerMoveLayer(draft, action) {
-      var _action$payload8 = action.payload,
-        oldIndex = _action$payload8.oldIndex,
-        newIndex = _action$payload8.newIndex,
-        mapId = _action$payload8.mapId;
+      var _action$payload9 = action.payload,
+        oldIndex = _action$payload9.oldIndex,
+        newIndex = _action$payload9.newIndex,
+        mapId = _action$payload9.mapId;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].mapLayers = moveArrayElements(draft.byId[mapId].mapLayers, oldIndex, newIndex);
     },
     setAutoLayerId: function setAutoLayerId(draft, action) {
-      var _action$payload9 = action.payload,
-        mapId = _action$payload9.mapId,
-        layerId = _action$payload9.layerId,
-        autoTimeStepLayerId = _action$payload9.autoTimeStepLayerId,
-        autoUpdateLayerId = _action$payload9.autoUpdateLayerId;
+      var _action$payload10 = action.payload,
+        mapId = _action$payload10.mapId,
+        layerId = _action$payload10.layerId,
+        autoTimeStepLayerId = _action$payload10.autoTimeStepLayerId,
+        autoUpdateLayerId = _action$payload10.autoUpdateLayerId;
       var map = draft.byId[mapId];
       if (!map) {
         return;
@@ -2568,9 +2668,9 @@ var slice$5 = createSlice({
       }
     },
     setAutoTimestepLayerId: function setAutoTimestepLayerId(draft, action) {
-      var _action$payload10 = action.payload,
-        mapId = _action$payload10.mapId,
-        autoTimestepLayerId = _action$payload10.autoTimestepLayerId;
+      var _action$payload11 = action.payload,
+        mapId = _action$payload11.mapId,
+        autoTimestepLayerId = _action$payload11.autoTimestepLayerId;
       var map = draft.byId[mapId];
       if (!map) {
         return;
@@ -2578,9 +2678,9 @@ var slice$5 = createSlice({
       map.autoTimeStepLayerId = autoTimestepLayerId;
     },
     setAutoUpdateLayerId: function setAutoUpdateLayerId(draft, action) {
-      var _action$payload11 = action.payload,
-        mapId = _action$payload11.mapId,
-        autoUpdateLayerId = _action$payload11.autoUpdateLayerId;
+      var _action$payload12 = action.payload,
+        mapId = _action$payload12.mapId,
+        autoUpdateLayerId = _action$payload12.autoUpdateLayerId;
       var map = draft.byId[mapId];
       if (!map) {
         return;
@@ -2588,135 +2688,135 @@ var slice$5 = createSlice({
       map.autoUpdateLayerId = autoUpdateLayerId;
     },
     setTimeSliderWidth: function setTimeSliderWidth(draft, action) {
-      var _action$payload12 = action.payload,
-        mapId = _action$payload12.mapId,
-        timeSliderWidth = _action$payload12.timeSliderWidth;
+      var _action$payload13 = action.payload,
+        mapId = _action$payload13.mapId,
+        timeSliderWidth = _action$payload13.timeSliderWidth;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].timeSliderWidth = timeSliderWidth;
     },
     setTimeSliderCenterTime: function setTimeSliderCenterTime(draft, action) {
-      var _action$payload13 = action.payload,
-        mapId = _action$payload13.mapId,
-        timeSliderCenterTime = _action$payload13.timeSliderCenterTime;
+      var _action$payload14 = action.payload,
+        mapId = _action$payload14.mapId,
+        timeSliderCenterTime = _action$payload14.timeSliderCenterTime;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].timeSliderCenterTime = timeSliderCenterTime;
     },
     setTimeSliderUnfilteredSelectedTime: function setTimeSliderUnfilteredSelectedTime(draft, action) {
-      var _action$payload14 = action.payload,
-        mapId = _action$payload14.mapId,
-        timeSliderUnfilteredSelectedTime = _action$payload14.timeSliderUnfilteredSelectedTime;
+      var _action$payload15 = action.payload,
+        mapId = _action$payload15.mapId,
+        timeSliderUnfilteredSelectedTime = _action$payload15.timeSliderUnfilteredSelectedTime;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].timeSliderUnfilteredSelectedTime = timeSliderUnfilteredSelectedTime;
     },
     setTimeSliderSecondsPerPx: function setTimeSliderSecondsPerPx(draft, action) {
-      var _action$payload15 = action.payload,
-        mapId = _action$payload15.mapId,
-        timeSliderSecondsPerPx = _action$payload15.timeSliderSecondsPerPx;
+      var _action$payload16 = action.payload,
+        mapId = _action$payload16.mapId,
+        timeSliderSecondsPerPx = _action$payload16.timeSliderSecondsPerPx;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].timeSliderSecondsPerPx = timeSliderSecondsPerPx;
     },
     toggleAutoUpdate: function toggleAutoUpdate(draft, action) {
-      var _action$payload16 = action.payload,
-        mapId = _action$payload16.mapId,
-        shouldAutoUpdate = _action$payload16.shouldAutoUpdate;
+      var _action$payload17 = action.payload,
+        mapId = _action$payload17.mapId,
+        shouldAutoUpdate = _action$payload17.shouldAutoUpdate;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].isAutoUpdating = shouldAutoUpdate;
     },
     setEndTimeOverriding: function setEndTimeOverriding(draft, action) {
-      var _action$payload17 = action.payload,
-        mapId = _action$payload17.mapId,
-        shouldEndtimeOverride = _action$payload17.shouldEndtimeOverride;
+      var _action$payload18 = action.payload,
+        mapId = _action$payload18.mapId,
+        shouldEndtimeOverride = _action$payload18.shouldEndtimeOverride;
       if (!draft.byId[mapId]) {
         return;
       }
-      draft.byId[mapId].isEndTimeOverriding = shouldEndtimeOverride;
+      draft.byId[mapId].shouldEndtimeOverride = shouldEndtimeOverride;
     },
     toggleTimestepAuto: function toggleTimestepAuto(draft, action) {
-      var _action$payload18 = action.payload,
-        mapId = _action$payload18.mapId,
-        timestepAuto = _action$payload18.timestepAuto;
+      var _action$payload19 = action.payload,
+        mapId = _action$payload19.mapId,
+        timestepAuto = _action$payload19.timestepAuto;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].isTimestepAuto = timestepAuto;
     },
     toggleTimeSpanAuto: function toggleTimeSpanAuto(draft, action) {
-      var _action$payload19 = action.payload,
-        mapId = _action$payload19.mapId,
-        timeSpanAuto = _action$payload19.timeSpanAuto;
+      var _action$payload20 = action.payload,
+        mapId = _action$payload20.mapId,
+        timeSpanAuto = _action$payload20.timeSpanAuto;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].isTimeSpanAuto = timeSpanAuto;
     },
     toggleTimeSliderHover: function toggleTimeSliderHover(draft, action) {
-      var _action$payload20 = action.payload,
-        mapId = _action$payload20.mapId,
-        isTimeSliderHoverOn = _action$payload20.isTimeSliderHoverOn;
+      var _action$payload21 = action.payload,
+        mapId = _action$payload21.mapId,
+        isTimeSliderHoverOn = _action$payload21.isTimeSliderHoverOn;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].isTimeSliderHoverOn = isTimeSliderHoverOn;
     },
     toggleTimeSliderIsVisible: function toggleTimeSliderIsVisible(draft, action) {
-      var _action$payload21 = action.payload,
-        mapId = _action$payload21.mapId,
-        isTimeSliderVisible = _action$payload21.isTimeSliderVisible;
+      var _action$payload22 = action.payload,
+        mapId = _action$payload22.mapId,
+        isTimeSliderVisible = _action$payload22.isTimeSliderVisible;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].isTimeSliderVisible = isTimeSliderVisible;
     },
     toggleZoomControls: function toggleZoomControls(draft, action) {
-      var _action$payload22 = action.payload,
-        mapId = _action$payload22.mapId,
-        shouldShowZoomControls = _action$payload22.shouldShowZoomControls;
+      var _action$payload23 = action.payload,
+        mapId = _action$payload23.mapId,
+        shouldShowZoomControls = _action$payload23.shouldShowZoomControls;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].shouldShowZoomControls = shouldShowZoomControls;
     },
     setMapPinLocation: function setMapPinLocation(draft, action) {
-      var _action$payload23 = action.payload,
-        mapId = _action$payload23.mapId,
-        mapPinLocation = _action$payload23.mapPinLocation;
+      var _action$payload24 = action.payload,
+        mapId = _action$payload24.mapId,
+        mapPinLocation = _action$payload24.mapPinLocation;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].mapPinLocation = mapPinLocation;
     },
     setDisableMapPin: function setDisableMapPin(draft, action) {
-      var _action$payload24 = action.payload,
-        mapId = _action$payload24.mapId,
-        disableMapPin = _action$payload24.disableMapPin;
+      var _action$payload25 = action.payload,
+        mapId = _action$payload25.mapId,
+        disableMapPin = _action$payload25.disableMapPin;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].disableMapPin = disableMapPin;
     },
     toggleMapPinIsVisible: function toggleMapPinIsVisible(draft, action) {
-      var _action$payload25 = action.payload,
-        mapId = _action$payload25.mapId,
-        displayMapPin = _action$payload25.displayMapPin;
+      var _action$payload26 = action.payload,
+        mapId = _action$payload26.mapId,
+        displayMapPin = _action$payload26.displayMapPin;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].displayMapPin = displayMapPin;
     },
     setDockedLayerManagerSize: function setDockedLayerManagerSize(draft, action) {
-      var _action$payload26 = action.payload,
-        mapId = _action$payload26.mapId,
-        dockedLayerManagerSize = _action$payload26.dockedLayerManagerSize;
+      var _action$payload27 = action.payload,
+        mapId = _action$payload27.mapId,
+        dockedLayerManagerSize = _action$payload27.dockedLayerManagerSize;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2730,10 +2830,10 @@ var slice$5 = createSlice({
   },
   extraReducers: function extraReducers(builder) {
     builder.addCase(layerActions.addLayer, function (draft, action) {
-      var _action$payload27 = action.payload,
-        layerId = _action$payload27.layerId,
-        mapId = _action$payload27.mapId,
-        layer = _action$payload27.layer;
+      var _action$payload28 = action.payload,
+        layerId = _action$payload28.layerId,
+        mapId = _action$payload28.mapId,
+        layer = _action$payload28.layer;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2752,9 +2852,9 @@ var slice$5 = createSlice({
         draft.byId[mapId].mapLayers.unshift(layerId);
       }
     }).addCase(layerActions.duplicateMapLayer, function (draft, action) {
-      var _action$payload28 = action.payload,
-        newLayerId = _action$payload28.newLayerId,
-        mapId = _action$payload28.mapId;
+      var _action$payload29 = action.payload,
+        newLayerId = _action$payload29.newLayerId,
+        mapId = _action$payload29.mapId;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2764,10 +2864,10 @@ var slice$5 = createSlice({
       }
       draft.byId[mapId].mapLayers.unshift(newLayerId);
     }).addCase(layerActions.addBaseLayer, function (draft, action) {
-      var _action$payload29 = action.payload,
-        layer = _action$payload29.layer,
-        layerId = _action$payload29.layerId,
-        mapId = _action$payload29.mapId;
+      var _action$payload30 = action.payload,
+        layer = _action$payload30.layer,
+        layerId = _action$payload30.layerId,
+        mapId = _action$payload30.mapId;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2823,9 +2923,9 @@ var slice$5 = createSlice({
         }
       }
     }).addCase(layerActions.setBaseLayers, function (draft, action) {
-      var _action$payload30 = action.payload,
-        layers = _action$payload30.layers,
-        mapId = _action$payload30.mapId;
+      var _action$payload31 = action.payload,
+        layers = _action$payload31.layers,
+        mapId = _action$payload31.mapId;
       // Split into base and overlayers
       var baseLayers = [];
       var overLayers = [];
@@ -2855,9 +2955,9 @@ var slice$5 = createSlice({
         }
       }
     }).addCase(layerActions.layerDelete, function (draft, action) {
-      var _action$payload31 = action.payload,
-        mapId = _action$payload31.mapId,
-        layerId = _action$payload31.layerId;
+      var _action$payload32 = action.payload,
+        mapId = _action$payload32.mapId,
+        layerId = _action$payload32.layerId;
       var map = draft.byId[mapId];
       if (!map) {
         return;
@@ -2883,9 +2983,9 @@ var slice$5 = createSlice({
         return id !== layerId;
       });
     }).addCase(layerActions.baseLayerDelete, function (draft, action) {
-      var _action$payload32 = action.payload,
-        mapId = _action$payload32.mapId,
-        layerId = _action$payload32.layerId;
+      var _action$payload33 = action.payload,
+        mapId = _action$payload33.mapId,
+        layerId = _action$payload33.layerId;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2896,19 +2996,22 @@ var slice$5 = createSlice({
         return id !== layerId;
       });
     }).addCase(layerActions.layerChangeDimension, function (draft, action) {
-      var _action$payload33 = action.payload,
-        layerId = _action$payload33.layerId,
-        dimension = _action$payload33.dimension;
+      var _action$payload34 = action.payload,
+        layerId = _action$payload34.layerId,
+        dimension = _action$payload34.dimension;
       produceDraftStateSetMapDimensionFromLayerChangeDimension(draft, layerId, dimension);
     }).addCase(setTimeSync, function (draft, action) {
-      var _action$payload34 = action.payload,
-        targetsFromAction = _action$payload34.targets,
-        source = _action$payload34.source;
+      var _action$payload35 = action.payload,
+        targetsFromAction = _action$payload35.targets,
+        source = _action$payload35.source;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
-      var targets = [{
-        targetId: source.payload.sourceId,
-        value: source.payload.value
-      }];
+      var targets = [];
+      if (source) {
+        targets.push({
+          targetId: source.payload.sourceId,
+          value: source.payload.value
+        });
+      }
       /* And then append the targets form the action */
       targets.push.apply(targets, _toConsumableArray(targetsFromAction));
       targets.forEach(function (target) {
@@ -2924,15 +3027,18 @@ var slice$5 = createSlice({
         }
       });
     }).addCase(setBboxSync, function (draft, action) {
-      var _action$payload35 = action.payload,
-        targetsFromAction = _action$payload35.targets,
-        source = _action$payload35.source;
+      var _action$payload36 = action.payload,
+        targetsFromAction = _action$payload36.targets,
+        source = _action$payload36.source;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
-      var targets = [{
-        targetId: source.payload.sourceId,
-        bbox: source.payload.bbox,
-        srs: source.payload.srs
-      }];
+      var targets = [];
+      if (source) {
+        targets.push({
+          targetId: source.payload.sourceId,
+          bbox: source.payload.bbox,
+          srs: source.payload.srs
+        });
+      }
       /* And then append the targets form the action */
       targets.push.apply(targets, _toConsumableArray(targetsFromAction));
       targets.forEach(function (payload) {
@@ -2955,13 +3061,13 @@ var slice$5 = createSlice({
        * These targets can be used as payloads in new Layer actions.
        * These actions are here handled via the layer reducer, as it is the same logic
        */
-      var _action$payload36 = action.payload,
-        targets = _action$payload36.targets,
-        source = _action$payload36.source;
+      var _action$payload37 = action.payload,
+        targets = _action$payload37.targets,
+        source = _action$payload37.source;
       return targets.reduce(function (prevState, target) {
         var action = {
           payload: target,
-          type: source.type
+          type: source && source.type
         };
         /* Handle the Layer action with the same logic, using the same reducer */
         return reducer$5(prevState, action);
@@ -2978,9 +3084,9 @@ var slice$5 = createSlice({
       });
       return draft;
     }).addCase(mapChangeDimension, function (draft, action) {
-      var _action$payload37 = action.payload,
-        mapId = _action$payload37.mapId,
-        dimensionFromAction = _action$payload37.dimension;
+      var _action$payload38 = action.payload,
+        mapId = _action$payload38.mapId,
+        dimensionFromAction = _action$payload38.dimension;
       produceDraftStateSetWebMapDimension(draft, mapId, dimensionFromAction, true);
     }).addCase(setMapPreset, function (draft, action) {
       var mapId = action.payload.mapId;
@@ -3000,9 +3106,9 @@ var slice$5 = createSlice({
       draft.byId[mapId].animationDelay = defaultAnimationDelayAtStart;
       draft.byId[mapId].dockedLayerManagerSize = '';
     }).addCase(uiActions.registerDialog, function (draft, action) {
-      var _action$payload38 = action.payload,
-        mapId = _action$payload38.mapId,
-        type = _action$payload38.type;
+      var _action$payload39 = action.payload,
+        mapId = _action$payload39.mapId,
+        type = _action$payload39.type;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -3346,12 +3452,13 @@ var slice$4 = createSlice({
       }
     },
     syncGroupAddTarget: function syncGroupAddTarget(draft, action) {
-      var state = current(draft);
+      var _a;
       var _action$payload2 = action.payload,
         groupId = _action$payload2.groupId,
         targetId = _action$payload2.targetId,
         linked = _action$payload2.linked;
-      if (!draft.groups.byId[groupId]) {
+      var synchronizationGroup = draft.groups.byId[groupId];
+      if (!synchronizationGroup) {
         console.warn("SYNCGROUPS_ADD_TARGET: Group ".concat(groupId, " does not exist."));
         return;
       }
@@ -3359,21 +3466,17 @@ var slice$4 = createSlice({
         console.warn("SYNCGROUPS_ADD_TARGET: targetId is not defined.");
         return;
       }
-      if (draft.groups.byId[groupId].targets.allIds.includes(targetId)) {
+      if (synchronizationGroup.targets.allIds.includes(targetId)) {
         return;
       }
-      draft.groups.byId[groupId].targets.allIds.push(targetId);
-      draft.groups.byId[groupId].targets.byId[targetId] = {
+      var isSourceLinked = (_a = synchronizationGroup.targets.byId[targetId]) === null || _a === void 0 ? void 0 : _a.linked;
+      synchronizationGroup.targets.allIds.push(targetId);
+      synchronizationGroup.targets.byId[targetId] = {
         linked: linked !== false
       };
-      /* Now try to initialize with the correct values from the state */
-      var syncronizationGroup = state.groups.byId[groupId];
-      /* Check if the source is in the target list of the synchonizationGroup */
-      var source = state.groups.byId[groupId].targets.byId[targetId];
-      /* If the source is part of the target list, and is linked, continue syncing the other targets */
-      if (source && source.linked) {
-        var type = syncronizationGroup.type;
-        draft.sources.byId[targetId].payloadByType[type] = syncronizationGroup.payloadByType[type];
+      if (isSourceLinked) {
+        var type = synchronizationGroup.type;
+        draft.sources.byId[targetId].payloadByType[type] = synchronizationGroup.payloadByType[type];
       }
     },
     syncGroupRemoveTarget: function syncGroupRemoveTarget(draft, action) {
@@ -3449,22 +3552,22 @@ var slice$4 = createSlice({
     });
   }
 });
-var setBboxOrTimeSync = function setBboxOrTimeSync(state, action) {
-  return produce(state, function (draft) {
-    var _action$payload6 = action.payload,
-      targets = _action$payload6.targets,
-      source = _action$payload6.source,
-      groups = _action$payload6.groups;
-    var getPayLoadKey = function getPayLoadKey(type) {
-      switch (type) {
-        case setTimeSync.type:
-          return SYNCGROUPS_TYPE_SETTIME;
-        case setBboxSync.type:
-          return SYNCGROUPS_TYPE_SETBBOX;
-        default:
-          return null;
-      }
-    };
+var setBboxOrTimeSync = function setBboxOrTimeSync(draft, action) {
+  var _action$payload6 = action.payload,
+    targets = _action$payload6.targets,
+    source = _action$payload6.source,
+    groups = _action$payload6.groups;
+  var getPayLoadKey = function getPayLoadKey(type) {
+    switch (type) {
+      case setTimeSync.type:
+        return SYNCGROUPS_TYPE_SETTIME;
+      case setBboxSync.type:
+        return SYNCGROUPS_TYPE_SETBBOX;
+      default:
+        return null;
+    }
+  };
+  if (source) {
     var payloadKey = getPayLoadKey(action.type);
     if (!source.payload || !payloadKey) {
       console.warn('Wrong sync action: ', action);
@@ -3491,7 +3594,7 @@ var setBboxOrTimeSync = function setBboxOrTimeSync(state, action) {
         draft.groups.byId[group].payloadByType[payloadKey] = source.payload;
       }
     });
-  });
+  }
 };
 var _slice$actions = slice$4.actions,
   syncGroupAddGroup = _slice$actions.syncGroupAddGroup,
@@ -4203,13 +4306,13 @@ var isAutoUpdating = createSelector(getMapById, function (store) {
 /**
  * Gets if endTime and duration of animationPayload are overriding maxValue and minValue of leading layer
  *
- * Example: isEndTimeOverriding = isEndTimeOverriding(store, 'mapid_1')
+ * Example: shouldEndtimeOverride = shouldEndtimeOverride(store, 'mapid_1')
  * @param {object} store store: object - store object
  * @param {string} mapId mapId: string - Id of the map
  * @returns {boolean} returnType: boolean
  */
-var isEndTimeOverriding = createSelector(getMapById, function (store) {
-  return store ? store.isEndTimeOverriding : false;
+var shouldEndtimeOverride = createSelector(getMapById, function (store) {
+  return store ? store.shouldEndtimeOverride : false;
 }, selectorMemoizationOptions);
 /**
  * Gets activeLayerId for map
@@ -4623,6 +4726,35 @@ var getIsEnabledLayersForMapDimension = createSelector(getMapLayerIdsEnabled, fu
 var getDockedLayerManagerSize = createSelector(getMapById, function (store) {
   return store ? store.dockedLayerManagerSize : 'sizeSmall';
 }, selectorMemoizationOptions);
+/**
+ * Returns the animation list for given map id
+ * @param {object} store store: object - store object
+ * @param {string} mapId mapId: string - Id of the map
+ * @returns {animationList} returnType: WebMapAnimationList, list of timesteps to animate for this map.
+ */
+var getAnimationList = createSelector(getMapById, getAnimationStartTime, getAnimationEndTime$1, getMapTimeStep, function (mapStore, animationStart, animationEnd, animationInterval) {
+  // Animation is defined by one of the following:
+  // - start, end and interval for a continuous animation loop with constant interval
+  // - timeList, for a custom timeList
+  // Here the animation is defined by a timeList
+  if (mapStore && (mapStore === null || mapStore === void 0 ? void 0 : mapStore.timeList) && mapStore.timeList.length > 0) {
+    return mapStore.timeList;
+  }
+  // Here the animation is defined by a start/stop/interval
+  var roundedStart = roundWithTimeStep(Number(animationStart && dateUtils.unix(dateUtils.utc(animationStart))), animationInterval, 'ceil');
+  var roundedEnd = roundWithTimeStep(Number(animationEnd && dateUtils.unix(dateUtils.utc(animationEnd))), animationInterval, 'floor');
+  var timeList = [];
+  var unixStart = dateUtils.unix(dateUtils.fromUnix(roundedStart));
+  var unixEnd = dateUtils.unix(dateUtils.fromUnix(roundedEnd));
+  var intervalSeconds = animationInterval * 60;
+  for (var j = unixStart; j <= unixEnd; j += intervalSeconds) {
+    timeList.push({
+      name: 'time',
+      value: dateUtils.fromUnix(j).toISOString()
+    });
+  }
+  return timeList;
+}, selectorMemoizationOptions);
 
 var selectors$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -4650,7 +4782,7 @@ var selectors$2 = /*#__PURE__*/Object.freeze({
   getAnimationStartTime: getAnimationStartTime,
   getAnimationEndTime: getAnimationEndTime$1,
   isAutoUpdating: isAutoUpdating,
-  isEndTimeOverriding: isEndTimeOverriding,
+  shouldEndtimeOverride: shouldEndtimeOverride,
   getActiveLayerId: getActiveLayerId,
   getAutoUpdateLayerId: getAutoUpdateLayerId,
   getAutoTimeStepLayerId: getAutoTimeStepLayerId,
@@ -4680,7 +4812,8 @@ var selectors$2 = /*#__PURE__*/Object.freeze({
   getMapPreset: getMapPreset,
   getMapLayerIdsEnabled: getMapLayerIdsEnabled,
   getIsEnabledLayersForMapDimension: getIsEnabledLayersForMapDimension,
-  getDockedLayerManagerSize: getDockedLayerManagerSize
+  getDockedLayerManagerSize: getDockedLayerManagerSize,
+  getAnimationList: getAnimationList
 });
 
 /* *
@@ -5137,24 +5270,115 @@ var storeTestSettings = /*#__PURE__*/Object.freeze({
   WmMultiDimensionServices: WmMultiDimensionServices
 });
 
-var _marked$6 = /*#__PURE__*/_regeneratorRuntime().mark(updateAnimation),
-  _marked2$4 = /*#__PURE__*/_regeneratorRuntime().mark(handleBaseLayersSaga),
-  _marked3$2 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$5);
-// Expects start, end time as Date object and interval in minutes
-var generateTimeList = function generateTimeList(start, end, interval) {
-  var timeList = [];
-  var unixStart = dateUtils.unix(start);
-  var unixEnd = dateUtils.unix(end);
-  var intervalSeconds = interval * 60;
-  for (var j = unixStart; j <= unixEnd; j += intervalSeconds) {
-    timeList.push({
-      name: 'time',
-      value: dateUtils.fromUnix(j).toISOString()
-    });
+/* A map with all the timerIds and their current step */
+var stepMap = 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) {
+  var numStepsToGoForward = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  var currentStep = getCurrentStep(timerId);
+  var nextStep = currentStep + numStepsToGoForward;
+  var nextStepClipped = (nextStep % numberOfStepsInAnimation + numberOfStepsInAnimation) % numberOfStepsInAnimation;
+  return nextStepClipped;
+};
+/**
+ * Set step for the timerId
+ * @param timerId
+ * @param timerStep
+ */
+var setStep = function setStep(timerId, timerStep) {
+  stepMap.set(timerId, timerStep);
+};
+/**
+ * Gets the current step for the timer
+ * @param timerId
+ * @returns
+ */
+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;
+/**
+ * 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 prefetchAnimationTargetsForSaga = function prefetchAnimationTargetsForSaga(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];
+    var _iterator = _createForOfIteratorHelper(targets),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var target = _step.value;
+        var targetMapId = target.targetId;
+        var wmMap = getWMJSMapById(targetMapId);
+        if (wmMap) {
+          var layersImageUrls = wmMap.getWMSRequests([{
+            name: 'time',
+            currentValue: nextTimeValueStepToCheck
+          }]);
+          var _iterator2 = _createForOfIteratorHelper(layersImageUrls),
+            _step2;
+          try {
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var layersImageUrl = _step2.value;
+              var image = getMapImageStore.getImage(layersImageUrl.url);
+              if (!image.isLoaded()) {
+                if (getMapImageStore.getNumImagesLoading() < MAX_NUMBER_OF_PARALLEL_LOADING_IMAGES) {
+                  image.load();
+                }
+                if (numPrefetch === 0) {
+                  var altImage = getAlternativeImage(layersImageUrl.url, getMapImageStore, wmMap.getBBOX());
+                  // No alternative image available yet, so skipping animation.
+                  if (!altImage) {
+                    // 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;
+                  }
+                }
+              }
+            }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
+          }
+        } else {
+          return false; // Map was not registered so there is nothing to prefetch
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
   }
-  return timeList;
+  return timerShouldStepForward;
 };
+
+var _marked$5 = /*#__PURE__*/_regeneratorRuntime().mark(updateAnimation),
+  _marked2$3 = /*#__PURE__*/_regeneratorRuntime().mark(handleBaseLayersSaga),
+  _marked3$1 = /*#__PURE__*/_regeneratorRuntime().mark(metronomeSaga),
+  _marked4 = /*#__PURE__*/_regeneratorRuntime().mark(metronomeSagaWithChannel),
+  _marked5 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$4);
+// Expects start, end time as Date object and interval in minutes
 var getAnimationEndTime = function getAnimationEndTime(animationEndTime) {
+  var ISOtime = dateUtils.parseISO(animationEndTime);
+  if (dateUtils.isValid(ISOtime)) {
+    return ISOtime.toISOString();
+  }
   var calculateFromNow = animationEndTime.split(/[-+]/)[0] === 'NOW';
   var isAddingTime = animationEndTime.indexOf('+') !== -1;
   var duration = animationEndTime.substring(animationEndTime.indexOf('PT') + 2);
@@ -5175,51 +5399,48 @@ 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);
-  return hasValidPrefix && hasValidDate;
-};
-var validInitialAnimationStep = function validInitialAnimationStep(initialAnimationStep, draw) {
-  return !!initialAnimationStep && !!(draw === null || draw === void 0 ? void 0 : draw.length) && initialAnimationStep >= 0 && draw.length > initialAnimationStep;
-};
-function updateMapDraw(mapId, draw, initialAnimationStep) {
-  var webMap = webmapUtils.getWMJSMapById(mapId);
-  if (webMap) {
-    webMap.getListener().suspendEvents();
-    webMap.stopAnimating();
-    if (initialAnimationStep && validInitialAnimationStep(initialAnimationStep, draw)) {
-      webMap.initialAnimationStep = initialAnimationStep;
-    } else {
-      webMap.initialAnimationStep = 0;
-    }
-    webMap.draw(draw);
-    webMap.getListener().resumeEvents();
+  if (hasValidPrefix && hasValidDate) {
+    return true;
   }
-}
+  var parsedDate = dateUtils.parseISO(animationEndTime);
+  return dateUtils.isValid(parsedDate);
+};
 function startAnimationSaga(_ref) {
   var payload = _ref.payload;
   return /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-    var mapId, start, initialTime, end, interval, timeList, roundedStart, roundedEnd, animationList, initialAnimationStep;
+    var mapId, initialTime, speedDelay, speed, timeList, initalTimerStep;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          mapId = payload.mapId, start = payload.start, initialTime = payload.initialTime, end = payload.end, interval = payload.interval, timeList = payload.timeList;
-          roundedStart = roundWithTimeStep(Number(start && dateUtils.unix(dateUtils.utc(start))), interval, 'ceil');
-          roundedEnd = roundWithTimeStep(Number(end && dateUtils.unix(dateUtils.utc(end))), interval, 'floor');
-          animationList = timeList || generateTimeList(dateUtils.fromUnix(roundedStart), dateUtils.fromUnix(roundedEnd), interval);
-          _context.next = 6;
-          return animationList;
-        case 6:
-          initialAnimationStep = initialTime && animationList ? animationList.findIndex(function (time) {
-            return new Date(time.value) >= new Date(initialTime);
-          }) : undefined;
-          _context.next = 9;
-          return updateMapDraw(mapId, animationList, initialAnimationStep);
-        case 9:
+          mapId = payload.mapId, initialTime = payload.initialTime;
+          _context.next = 3;
+          return select(getMapAnimationDelay, mapId);
+        case 3:
+          speedDelay = _context.sent;
+          speed = 1000 / (speedDelay || 1);
+          metronome.register(null, speed, mapId);
+          _context.next = 8;
+          return select(getAnimationList, mapId);
+        case 8:
+          timeList = _context.sent;
+          // In case of the timeList
+          if (timeList && timeList.length > 0) {
+            // Determine animation step based on initialTime and timeList
+            initalTimerStep = timeList === null || timeList === void 0 ? void 0 : timeList.findIndex(function (timeNameValue) {
+              return timeNameValue.value === initialTime;
+            });
+            if (initalTimerStep !== -1) {
+              setStep(mapId, initalTimerStep);
+            }
+          }
+        case 10:
         case "end":
           return _context.stop();
       }
     }, _callee);
   })();
 }
+// eslint-disable-next-line require-yield
 function stopAnimationSaga(_ref2) {
   var payload = _ref2.payload;
   return /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
@@ -5228,9 +5449,8 @@ function stopAnimationSaga(_ref2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
           mapId = payload.mapId;
-          _context2.next = 3;
-          return updateMapDraw(mapId, 'opengeoweb-core-map-reducer');
-        case 3:
+          metronome.unregister(mapId);
+        case 2:
         case "end":
           return _context2.stop();
       }
@@ -5265,65 +5485,61 @@ function deleteLayerSaga(_ref3) {
   })();
 }
 function updateAnimation(mapId, maxValue) {
-  var animationStart, animationStartUnix, animationEnd, animationEndUnix, t, deltaT, start, end, isAnimating$1, timeStep;
+  var shouldEndtimeOverride$1, animationStart, animationEnd, animationEndUnix, maxTimeAsUnix, timeInSecondToShiftAnimationForwards, animationStartUnix, newAnimationStartTime, newAnimationEndTime;
   return _regeneratorRuntime().wrap(function updateAnimation$(_context4) {
     while (1) switch (_context4.prev = _context4.next) {
       case 0:
         _context4.next = 2;
-        return select(getAnimationStartTime, mapId);
+        return select(shouldEndtimeOverride, mapId);
       case 2:
+        shouldEndtimeOverride$1 = _context4.sent;
+        if (!(shouldEndtimeOverride$1 === true)) {
+          _context4.next = 5;
+          break;
+        }
+        return _context4.abrupt("return");
+      case 5:
+        _context4.next = 7;
+        return select(getAnimationStartTime, mapId);
+      case 7:
         animationStart = _context4.sent;
-        animationStartUnix = dateUtils.unix(dateUtils.utc(animationStart));
-        _context4.next = 6;
+        _context4.next = 10;
         return select(getAnimationEndTime$1, mapId);
-      case 6:
+      case 10:
         animationEnd = _context4.sent;
         animationEndUnix = dateUtils.unix(dateUtils.utc(animationEnd));
-        t = dateUtils.unix(dateUtils.utc(maxValue));
-        deltaT = t - animationEndUnix;
-        start = dateUtils.dateToString(dateUtils.fromUnix(animationStartUnix + deltaT), dateFormat);
-        end = dateUtils.dateToString(dateUtils.fromUnix(animationEndUnix + deltaT), dateFormat);
-        _context4.next = 14;
+        maxTimeAsUnix = dateUtils.unix(dateUtils.utc(maxValue));
+        timeInSecondToShiftAnimationForwards = maxTimeAsUnix - animationEndUnix;
+        animationStartUnix = dateUtils.unix(dateUtils.utc(animationStart));
+        newAnimationStartTime = dateUtils.dateToString(dateUtils.fromUnix(animationStartUnix + timeInSecondToShiftAnimationForwards), dateFormat);
+        newAnimationEndTime = dateUtils.dateToString(dateUtils.fromUnix(animationEndUnix + timeInSecondToShiftAnimationForwards), dateFormat);
+        if (!(!newAnimationStartTime || !newAnimationEndTime)) {
+          _context4.next = 19;
+          break;
+        }
+        return _context4.abrupt("return");
+      case 19:
+        _context4.next = 21;
         return put(mapActions.setAnimationEndTime({
           mapId: mapId,
-          animationEndTime: end
+          animationEndTime: newAnimationEndTime
         }));
-      case 14:
-        _context4.next = 16;
+      case 21:
+        _context4.next = 23;
         return put(mapActions.setAnimationStartTime({
           mapId: mapId,
-          animationStartTime: start
+          animationStartTime: newAnimationStartTime
         }));
-      case 16:
-        _context4.next = 18;
-        return select(isAnimating, mapId);
-      case 18:
-        isAnimating$1 = _context4.sent;
-        if (!isAnimating$1) {
-          _context4.next = 25;
-          break;
-        }
-        _context4.next = 22;
-        return select(getMapTimeStep, mapId);
-      case 22:
-        timeStep = _context4.sent;
-        _context4.next = 25;
-        return put(mapActions.mapStartAnimation({
-          mapId: mapId,
-          start: start,
-          end: end,
-          interval: timeStep
-        }));
-      case 25:
+      case 23:
       case "end":
         return _context4.stop();
     }
-  }, _marked$6);
+  }, _marked$5);
 }
-function setLayerDimensionsSaga(_ref4) {
+function updateAnimationWithLatestUpdate(_ref4) {
   var payload = _ref4.payload;
   return /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-    var layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, autoUpdateLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance, isAutoUpdateLayer, incomingMaxTime, isIncomingMaxTimeLaterThanCurrentLayerTime, syncedMapIds;
+    var layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, autoUpdateLayerId, shouldAutoUpdate, prevTimeDimension, isAutoUpdateLayer, incomingMaxTime, isIncomingMaxTimeLaterThanCurrentLayerTime;
     return _regeneratorRuntime().wrap(function _callee4$(_context5) {
       while (1) switch (_context5.prev = _context5.next) {
         case 0:
@@ -5362,76 +5578,30 @@ function setLayerDimensionsSaga(_ref4) {
           return select(getLayerTimeDimension, layerId);
         case 20:
           prevTimeDimension = _context5.sent;
-          _context5.next = 23;
-          return select(isAnimating, mapId);
-        case 23:
-          isAnimating$1 = _context5.sent;
-          webmapInstance = webmapUtils.getWMJSMapById(mapId);
           isAutoUpdateLayer = layerId === autoUpdateLayerId;
           incomingMaxTime = newTimeDimension === null || newTimeDimension === void 0 ? void 0 : newTimeDimension.maxValue;
           isIncomingMaxTimeLaterThanCurrentLayerTime = incomingMaxTime && (prevTimeDimension === null || prevTimeDimension === void 0 ? void 0 : prevTimeDimension.currentValue) && prevTimeDimension.currentValue !== incomingMaxTime;
           if (!(isAutoUpdateLayer &&
           // only update the active layer
           shouldAutoUpdate && isIncomingMaxTimeLaterThanCurrentLayerTime)) {
-            _context5.next = 42;
-            break;
-          }
-          if (isAnimating$1) {
-            _context5.next = 32;
-            break;
-          }
-          _context5.next = 32;
-          return put(layerActions.layerChangeDimension({
-            layerId: layerId,
-            origin: LayerActionOrigin.setLayerDimensionSaga,
-            dimension: {
-              name: 'time',
-              currentValue: incomingMaxTime
-            }
-          }));
-        case 32:
-          _context5.next = 34;
-          return select(getSyncedMapIdsForTimeslider);
-        case 34:
-          syncedMapIds = _context5.sent;
-          if (!syncedMapIds) {
-            _context5.next = 38;
-            break;
-          }
-          _context5.next = 38;
-          return all(syncedMapIds.map(function (syncedMapId) {
-            return put(setTime({
-              origin: 'mapStore saga',
-              sourceId: syncedMapId,
-              value: incomingMaxTime
-            }));
-          }));
-        case 38:
-          _context5.next = 40;
-          return call(updateAnimation, mapId, incomingMaxTime);
-        case 40:
-          _context5.next = 45;
-          break;
-        case 42:
-          if (!(isAnimating$1 && !webmapInstance.isAnimating && incomingMaxTime)) {
-            _context5.next = 45;
+            _context5.next = 27;
             break;
           }
-          _context5.next = 45;
+          _context5.next = 27;
           return call(updateAnimation, mapId, incomingMaxTime);
-        case 45:
-          _context5.next = 50;
+        case 27:
+          _context5.next = 32;
           break;
-        case 47:
-          _context5.prev = 47;
+        case 29:
+          _context5.prev = 29;
           _context5.t0 = _context5["catch"](0);
           // eslint-disable-next-line no-console
           console.warn(_context5.t0);
-        case 50:
+        case 32:
         case "end":
           return _context5.stop();
       }
-    }, _callee4, null, [[0, 47]]);
+    }, _callee4, null, [[0, 29]]);
   })();
 }
 function toggleAutoUpdateSaga(_ref5) {
@@ -5569,7 +5739,7 @@ function handleBaseLayersSaga(mapId, baseLayers) {
       case "end":
         return _context7.stop();
     }
-  }, _marked2$4);
+  }, _marked2$3);
 }
 function setMapPresetSaga(_ref6) {
   var payload = _ref6.payload;
@@ -5924,7 +6094,8 @@ function unregisterMapSaga(_ref7) {
           return select(getLayersByMapId, mapId);
         case 3:
           layerList = _context9.sent;
-          _context9.next = 6;
+          metronome.unregister(mapId);
+          _context9.next = 7;
           return all(layerList.map(function (layer) {
             return put(layerActions.layerDelete({
               mapId: mapId,
@@ -5933,7 +6104,7 @@ function unregisterMapSaga(_ref7) {
               origin: LayerActionOrigin.unregisterMapSaga
             }));
           }));
-        case 6:
+        case 7:
         case "end":
           return _context9.stop();
       }
@@ -5963,7 +6134,7 @@ function setStepBackwardOrForwardSaga(_ref8) {
           _yield$select2 = _slicedToArray(_yield$select, 2);
           dataStartTime = _yield$select2[0];
           dataEndTime = _yield$select2[1];
-          if (!isValid(currentTime)) {
+          if (!dateUtils.isValid(currentTime)) {
             _context10.next = 23;
             break;
           }
@@ -5971,13 +6142,13 @@ function setStepBackwardOrForwardSaga(_ref8) {
             var nextTime = currentTime + timeStep;
             var roundedTime = mapUtils.roundWithTimeStep(nextTime, timeStep, 'ceil');
             var newTime = Math.min(roundedTime, dataEndTime || roundedTime);
-            return fromUnixTime(newTime).toISOString();
+            return dateUtils.fromUnix(newTime).toISOString();
           };
           makeBackwardStep = function makeBackwardStep() {
             var nextTime = currentTime - timeStep;
             var roundedTime = mapUtils.roundWithTimeStep(nextTime, timeStep, 'floor');
             var newTime = Math.max(roundedTime, dataStartTime || roundedTime);
-            return fromUnixTime(newTime).toISOString();
+            return dateUtils.fromUnix(newTime).toISOString();
           };
           selectedTimeString = isForwardStep ? makeForwardStep() : makeBackwardStep();
           _context10.next = 19;
@@ -6005,42 +6176,184 @@ function setStepBackwardOrForwardSaga(_ref8) {
     }, _callee8);
   })();
 }
-function rootSaga$5() {
-  return _regeneratorRuntime().wrap(function rootSaga$(_context11) {
-    while (1) switch (_context11.prev = _context11.next) {
+/**
+ * This saga 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
+ */
+function metronomeSaga(timerIds) {
+  var targetsWithUpdateValue, _iterator, _step, _loop;
+  return _regeneratorRuntime().wrap(function metronomeSaga$(_context12) {
+    while (1) switch (_context12.prev = _context12.next) {
       case 0:
-        _context11.next = 2;
+        targetsWithUpdateValue = [];
+        _iterator = _createForOfIteratorHelper(timerIds);
+        _context12.prev = 2;
+        _loop = /*#__PURE__*/_regeneratorRuntime().mark(function _loop() {
+          var timerId, animationListValuesNameAndValue, animationListValues, targets, timerShouldStepForward, timerStep, updatedValue, speedDelay, speed;
+          return _regeneratorRuntime().wrap(function _loop$(_context11) {
+            while (1) switch (_context11.prev = _context11.next) {
+              case 0:
+                timerId = _step.value;
+                _context11.next = 3;
+                return select(getAnimationList, timerId);
+              case 3:
+                animationListValuesNameAndValue = _context11.sent;
+                animationListValues = animationListValuesNameAndValue.map(function (nameAndValue) {
+                  return nameAndValue.value;
+                });
+                _context11.next = 7;
+                return select(getTargets, {
+                  sourceId: timerId,
+                  origin: timerId
+                }, SYNCGROUPS_TYPE_SETTIME);
+              case 7:
+                targets = _context11.sent;
+                if (targets.length === 0) {
+                  // When there are no targets, default to one
+                  targets.push({
+                    targetId: timerId,
+                    value: ''
+                  });
+                }
+                timerShouldStepForward = prefetchAnimationTargetsForSaga(timerId, animationListValues, targets); // Determine the next step
+                timerStep = timerShouldStepForward ? getNextStep(timerId, animationListValues.length) : getCurrentStep(timerId);
+                setStep(timerId, timerStep);
+                updatedValue = animationListValues[timerStep];
+                targetsWithUpdateValue.push.apply(targetsWithUpdateValue, _toConsumableArray(targets.map(function (target) {
+                  return Object.assign(Object.assign({}, target), {
+                    value: updatedValue
+                  });
+                })));
+                _context11.next = 16;
+                return select(getMapAnimationDelay, timerId);
+              case 16:
+                speedDelay = _context11.sent;
+                speed = 1000 / (speedDelay || 1);
+                metronome.setSpeed(timerId, speed);
+              case 19:
+              case "end":
+                return _context11.stop();
+            }
+          }, _loop);
+        });
+        _iterator.s();
+      case 5:
+        if ((_step = _iterator.n()).done) {
+          _context12.next = 9;
+          break;
+        }
+        return _context12.delegateYield(_loop(), "t0", 7);
+      case 7:
+        _context12.next = 5;
+        break;
+      case 9:
+        _context12.next = 14;
+        break;
+      case 11:
+        _context12.prev = 11;
+        _context12.t1 = _context12["catch"](2);
+        _iterator.e(_context12.t1);
+      case 14:
+        _context12.prev = 14;
+        _iterator.f();
+        return _context12.finish(14);
+      case 17:
+        if (!(targetsWithUpdateValue.length > 0)) {
+          _context12.next = 20;
+          break;
+        }
+        _context12.next = 20;
+        return put(setTimeSync(null, targetsWithUpdateValue, ['metronomesaga']));
+      case 20:
+      case "end":
+        return _context12.stop();
+    }
+  }, _marked3$1, null, [[2, 11, 14, 17]]);
+}
+/**
+ * Creates a channel for the metronome
+ * @returns
+ */
+function metronomeTicker() {
+  return eventChannel(function (emitter) {
+    metronome.handleTimerTicks = function (timerIds) {
+      emitter(timerIds);
+    };
+    // The subscriber must return an unsubscribe function
+    return function () {
+      metronome.unregisterAllTimers();
+    };
+  });
+}
+/**
+ * Makes a saga channel for the metronome ticker
+ */
+function metronomeSagaWithChannel() {
+  var channel, metronomeHandler;
+  return _regeneratorRuntime().wrap(function metronomeSagaWithChannel$(_context13) {
+    while (1) switch (_context13.prev = _context13.next) {
+      case 0:
+        _context13.next = 2;
+        return call(metronomeTicker);
+      case 2:
+        channel = _context13.sent;
+      case 3:
+        _context13.next = 6;
+        return take(channel);
+      case 6:
+        metronomeHandler = _context13.sent;
+        _context13.next = 9;
+        return call(metronomeSaga, metronomeHandler);
+      case 9:
+        _context13.next = 3;
+        break;
+      case 11:
+      case "end":
+        return _context13.stop();
+    }
+  }, _marked4);
+}
+function rootSaga$4() {
+  return _regeneratorRuntime().wrap(function rootSaga$(_context14) {
+    while (1) switch (_context14.prev = _context14.next) {
+      case 0:
+        _context14.next = 2;
         return takeLatest(mapActions.mapStopAnimation.type, stopAnimationSaga);
       case 2:
-        _context11.next = 4;
+        _context14.next = 4;
         return takeLatest(mapActions.mapStartAnimation.type, startAnimationSaga);
       case 4:
-        _context11.next = 6;
+        _context14.next = 6;
         return takeLatest(layerActions.layerDelete.type, deleteLayerSaga);
       case 6:
-        _context11.next = 8;
-        return takeLatest(layerActions.onUpdateLayerInformation.type, setLayerDimensionsSaga);
+        _context14.next = 8;
+        return takeLatest(layerActions.onUpdateLayerInformation.type, updateAnimationWithLatestUpdate);
       case 8:
-        _context11.next = 10;
+        _context14.next = 10;
         return takeLatest(mapActions.toggleAutoUpdate.type, toggleAutoUpdateSaga);
       case 10:
-        _context11.next = 12;
+        _context14.next = 12;
         return takeEvery(mapActions.setMapPreset.type, setMapPresetSaga);
       case 12:
-        _context11.next = 14;
+        _context14.next = 14;
         return takeEvery(mapActions.unregisterMap.type, unregisterMapSaga);
       case 14:
-        _context11.next = 16;
+        _context14.next = 16;
         return takeEvery(mapActions.setStepBackwardOrForward.type, setStepBackwardOrForwardSaga);
       case 16:
+        _context14.next = 18;
+        return call(metronomeSagaWithChannel);
+      case 18:
       case "end":
-        return _context11.stop();
+        return _context14.stop();
     }
-  }, _marked3$2);
+  }, _marked5);
 }
 
-var _marked$5 = /*#__PURE__*/_regeneratorRuntime().mark(fetchServiceSaga),
-  _marked2$3 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$4);
+var _marked$4 = /*#__PURE__*/_regeneratorRuntime().mark(fetchServiceSaga),
+  _marked2$2 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$3);
 function fetchServiceSaga(service) {
   var layers;
   return _regeneratorRuntime().wrap(function fetchServiceSaga$(_context) {
@@ -6065,7 +6378,7 @@ function fetchServiceSaga(service) {
       case "end":
         return _context.stop();
     }
-  }, _marked$5, null, [[0, 8]]);
+  }, _marked$4, null, [[0, 8]]);
 }
 function fetchInitialServicesSaga(_ref) {
   var payload = _ref.payload;
@@ -6086,7 +6399,7 @@ function fetchInitialServicesSaga(_ref) {
     }, _callee);
   })();
 }
-function rootSaga$4() {
+function rootSaga$3() {
   return _regeneratorRuntime().wrap(function rootSaga$(_context3) {
     while (1) switch (_context3.prev = _context3.next) {
       case 0:
@@ -6096,7 +6409,7 @@ function rootSaga$4() {
       case "end":
         return _context3.stop();
     }
-  }, _marked2$3);
+  }, _marked2$2);
 }
 
 // TODO: This fixes typecheck errors but maybe there is a better way to do that
@@ -6111,7 +6424,7 @@ var mapStoreReducers = {
 var mapStoreModuleConfig = {
   id: 'webmap-module',
   reducersMap: mapStoreReducers,
-  sagas: [rootSaga$5, rootSaga$4]
+  sagas: [rootSaga$4, rootSaga$3]
 };
 
 /* *
@@ -6334,7 +6647,7 @@ var getMapBaseLayerActionsTargets = function getMapBaseLayerActionsTargets(state
   });
 };
 
-var _marked$4 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$3);
+var _marked$3 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$2);
 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$/;
 function setTimeSaga(_ref) {
   var payload = _ref.payload;
@@ -6607,7 +6920,7 @@ function mapBaseLayerActionsSaga(_ref9) {
     }, _callee9);
   })();
 }
-function rootSaga$3() {
+function rootSaga$2() {
   return _regeneratorRuntime().wrap(function rootSaga$(_context10) {
     while (1) switch (_context10.prev = _context10.next) {
       case 0:
@@ -6653,7 +6966,7 @@ function rootSaga$3() {
       case "end":
         return _context10.stop();
     }
-  }, _marked$4);
+  }, _marked$3);
 }
 
 /* *
@@ -6714,8 +7027,8 @@ var utils = /*#__PURE__*/Object.freeze({
   historyDict: historyDict
 });
 
-var _marked$3 = /*#__PURE__*/_regeneratorRuntime().mark(navigateToUrlSaga),
-  _marked2$2 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$2);
+var _marked$2 = /*#__PURE__*/_regeneratorRuntime().mark(navigateToUrlSaga),
+  _marked2$1 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$1);
 function navigateToUrlSaga(action) {
   var payload;
   return _regeneratorRuntime().wrap(function navigateToUrlSaga$(_context) {
@@ -6728,9 +7041,9 @@ function navigateToUrlSaga(action) {
       case "end":
         return _context.stop();
     }
-  }, _marked$3);
+  }, _marked$2);
 }
-function rootSaga$2() {
+function rootSaga$1() {
   return _regeneratorRuntime().wrap(function rootSaga$(_context2) {
     while (1) switch (_context2.prev = _context2.next) {
       case 0:
@@ -6740,7 +7053,7 @@ function rootSaga$2() {
       case "end":
         return _context2.stop();
     }
-  }, _marked2$2);
+  }, _marked2$1);
 }
 
 /* *
@@ -6764,7 +7077,7 @@ var routerModuleConfig = {
   reducersMap: {
     router: reducer$2
   },
-  sagas: [rootSaga$2]
+  sagas: [rootSaga$1]
 };
 
 /* *
@@ -6844,9 +7157,8 @@ var drawAdapter = createEntityAdapter({
   }
 });
 var getDrawToolByLayerId = function getDrawToolByLayerId(draft, layerId) {
-  var state = current$1(draft);
-  var drawTool = state.ids.map(function (id) {
-    return state.entities[id];
+  var drawTool = draft.ids.map(function (id) {
+    return draft.entities[id];
   }).find(function (tool) {
     return (tool === null || tool === void 0 ? void 0 : tool.geoJSONLayerId) === layerId;
   });
@@ -7059,6 +7371,11 @@ var getGeoJSONIntersectionBoundsLayerId = createSelector(selectDrawToolById, fun
 var getShouldAllowMultipleShapes = createSelector(selectDrawToolById, function (drawingTool) {
   return (drawingTool === null || drawingTool === void 0 ? void 0 : drawingTool.shouldAllowMultipleShapes) || false;
 });
+var getActiveDrawMode = createSelector(selectDrawToolById, function (drawingTool) {
+  return drawingTool === null || drawingTool === void 0 ? void 0 : drawingTool.drawModes.find(function (mode) {
+    return mode.drawModeId === drawingTool.activeDrawModeId;
+  });
+});
 
 var selectors = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -7071,10 +7388,11 @@ var selectors = /*#__PURE__*/Object.freeze({
   getDrawToolGeoJSONLayerId: getDrawToolGeoJSONLayerId,
   getGeoJSONIntersectionLayerId: getGeoJSONIntersectionLayerId,
   getGeoJSONIntersectionBoundsLayerId: getGeoJSONIntersectionBoundsLayerId,
-  getShouldAllowMultipleShapes: getShouldAllowMultipleShapes
+  getShouldAllowMultipleShapes: getShouldAllowMultipleShapes,
+  getActiveDrawMode: getActiveDrawMode
 });
 
-var _marked$2 = /*#__PURE__*/_regeneratorRuntime().mark(drawingSaga);
+var _marked$1 = /*#__PURE__*/_regeneratorRuntime().mark(drawingSaga);
 var registerOrigin = 'drawings saga:registerDrawToolSaga';
 function registerDrawToolSaga(_ref) {
   var payload = _ref.payload;
@@ -7153,7 +7471,7 @@ function registerDrawToolSaga(_ref) {
 function changeDrawToolSaga(_ref2) {
   var payload = _ref2.payload;
   return /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-    var _a, _b, _c, _d, drawModeId, drawToolId, _payload$shouldUpdate, shouldUpdateShape, drawingTool, _drawingTool$shouldAl, shouldAllowMultipleShapes, geoJSONIntersectionLayerId, geoJSONIntersectionBoundsLayerId, newDrawMode, currentGeoJSONLayer, _ref3, currentGeoJSON, _ref3$selectedFeature, selectedFeatureIndex, currentSelectionType, newSelectionType, isNewToolSelected, shouldUpdateNewShape, geoJSONFeatureCollection, newGeoJSON;
+    var _a, _b, _c, drawModeId, drawToolId, _payload$shouldUpdate, shouldUpdateShape, drawingTool, _drawingTool$shouldAl, shouldAllowMultipleShapes, geoJSONIntersectionLayerId, geoJSONIntersectionBoundsLayerId, newDrawMode, geoJSONLayer, geoJSON, lastFeatureIndex, newGeoJSON, currentGeoJSONLayer, _ref3, currentGeoJSON, _ref3$selectedFeature, selectedFeatureIndex, currentSelectionType, newSelectionType, isNewToolSelected, shouldUpdateNewShape, shapeWithSelectionType, geoJSONFeatureCollection, _newGeoJSON;
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
@@ -7169,7 +7487,7 @@ function changeDrawToolSaga(_ref2) {
         case 8:
           newDrawMode = _context2.sent;
           if (!(!newDrawMode || !drawingTool.activeDrawModeId && newDrawMode.isSelectable)) {
-            _context2.next = 13;
+            _context2.next = 24;
             break;
           }
           _context2.next = 12;
@@ -7179,90 +7497,118 @@ function changeDrawToolSaga(_ref2) {
             drawMode: ''
           }));
         case 12:
+          _context2.next = 14;
+          return select(getLayerById, drawingTool.geoJSONLayerId);
+        case 14:
+          geoJSONLayer = _context2.sent;
+          geoJSON = geoJSONLayer === null || geoJSONLayer === void 0 ? void 0 : geoJSONLayer.geojson;
+          lastFeatureIndex = geoJSON !== undefined ? getLastEmptyFeatureIndex(geoJSON) : undefined;
+          if (!(lastFeatureIndex !== undefined)) {
+            _context2.next = 23;
+            break;
+          }
+          newGeoJSON = Object.assign(Object.assign({}, geoJSON), {
+            features: geoJSON.features.filter(function (_feature, index) {
+              return index !== lastFeatureIndex;
+            })
+          });
+          _context2.next = 21;
+          return put(layerActions.updateFeature({
+            layerId: drawingTool.geoJSONLayerId,
+            geojson: newGeoJSON
+          }));
+        case 21:
+          _context2.next = 23;
+          return put(layerActions.setSelectedFeature({
+            layerId: drawingTool.geoJSONLayerId,
+            selectedFeatureIndex: newGeoJSON.features.length > 0 ? newGeoJSON.features.length - 1 : 0
+          }));
+        case 23:
           return _context2.abrupt("return");
-        case 13:
+        case 24:
           if (!(newDrawMode.value === 'DELETE')) {
-            _context2.next = 22;
+            _context2.next = 33;
             break;
           }
-          _context2.next = 16;
+          _context2.next = 27;
           return put(layerActions.layerChangeGeojson({
             layerId: drawingTool.geoJSONLayerId,
             geojson: emptyGeoJSON
           }));
-        case 16:
+        case 27:
           if (!geoJSONIntersectionLayerId) {
-            _context2.next = 19;
+            _context2.next = 30;
             break;
           }
-          _context2.next = 19;
+          _context2.next = 30;
           return put(layerActions.layerChangeGeojson({
             layerId: geoJSONIntersectionLayerId,
             geojson: emptyGeoJSON
           }));
-        case 19:
-          _context2.next = 21;
+        case 30:
+          _context2.next = 32;
           return put(layerActions.toggleFeatureMode({
             layerId: drawingTool.geoJSONLayerId,
             isInEditMode: false,
             drawMode: ''
           }));
-        case 21:
+        case 32:
           return _context2.abrupt("return");
-        case 22:
-          _context2.next = 24;
+        case 33:
+          _context2.next = 35;
           return select(getLayerById, drawingTool.geoJSONLayerId);
-        case 24:
+        case 35:
           currentGeoJSONLayer = _context2.sent;
           _ref3 = currentGeoJSONLayer || {}, currentGeoJSON = _ref3.geojson, _ref3$selectedFeature = _ref3.selectedFeatureIndex, selectedFeatureIndex = _ref3$selectedFeature === void 0 ? 0 : _ref3$selectedFeature;
           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;
-          newSelectionType = (_c = newDrawMode.shape.properties) === null || _c === void 0 ? void 0 : _c.selectionType;
+          newSelectionType = newDrawMode.selectionType;
           isNewToolSelected = currentSelectionType !== newSelectionType;
-          shouldUpdateNewShape = !((_d = currentGeoJSON === null || currentGeoJSON === void 0 ? void 0 : currentGeoJSON.features) === null || _d === void 0 ? void 0 : _d.length) || shouldAllowMultipleShapes || isNewToolSelected; // don't change anything if same tool is selected again
+          shouldUpdateNewShape = !((_c = currentGeoJSON === null || currentGeoJSON === void 0 ? void 0 : currentGeoJSON.features) === null || _c === void 0 ? void 0 : _c.length) || isNewToolSelected; // don't change anything if same tool is selected again
           if (!(shouldUpdateNewShape && shouldUpdateShape)) {
-            _context2.next = 38;
+            _context2.next = 50;
             break;
           }
-          geoJSONFeatureCollection = getFeatureCollection(newDrawMode.shape, shouldAllowMultipleShapes, currentGeoJSON);
-          newGeoJSON = getGeoJson(geoJSONFeatureCollection, shouldAllowMultipleShapes);
+          shapeWithSelectionType = addSelectionTypeToGeoJSON(newDrawMode.shape, newDrawMode.selectionType);
+          geoJSONFeatureCollection = getFeatureCollection(shapeWithSelectionType, shouldAllowMultipleShapes, currentGeoJSON);
+          _newGeoJSON = getGeoJson(geoJSONFeatureCollection, shouldAllowMultipleShapes);
           if (shouldAllowMultipleShapes) {
-            moveFeature(currentGeoJSON, newGeoJSON, selectedFeatureIndex, '');
+            moveFeature(currentGeoJSON, _newGeoJSON, selectedFeatureIndex, '');
           }
-          _context2.next = 36;
+          _context2.next = 48;
           return put(layerActions.setSelectedFeature({
             layerId: drawingTool.geoJSONLayerId,
-            selectedFeatureIndex: newGeoJSON.features.length - 1
+            selectedFeatureIndex: _newGeoJSON.features.length - 1
           }));
-        case 36:
-          _context2.next = 38;
+        case 48:
+          _context2.next = 50;
           return put(layerActions.updateFeature(Object.assign(Object.assign({
             layerId: drawingTool.geoJSONLayerId,
-            geojson: newGeoJSON
+            geojson: _newGeoJSON
           }, geoJSONIntersectionLayerId && {
             geoJSONIntersectionLayerId: geoJSONIntersectionLayerId
           }), geoJSONIntersectionBoundsLayerId && {
             geoJSONIntersectionBoundsLayerId: geoJSONIntersectionBoundsLayerId
           })));
-        case 38:
-          _context2.next = 40;
+        case 50:
+          _context2.next = 52;
           return put(layerActions.toggleFeatureMode({
             layerId: drawingTool.geoJSONLayerId,
             isInEditMode: newDrawMode.isSelectable,
             drawMode: newDrawMode.value
           }));
-        case 40:
-          _context2.next = 45;
+        case 52:
+          _context2.next = 57;
           break;
-        case 42:
-          _context2.prev = 42;
+        case 54:
+          _context2.prev = 54;
           _context2.t0 = _context2["catch"](0);
           // eslint-disable-next-line no-console
           console.log('error changeDrawToolSaga', _context2.t0);
-        case 45:
+        case 57:
         case "end":
           return _context2.stop();
       }
-    }, _callee2, null, [[0, 42]]);
+    }, _callee2, null, [[0, 54]]);
   })();
 }
 function changeIntersectionSaga(_ref4) {
@@ -7317,7 +7663,7 @@ function drawingSaga() {
       case "end":
         return _context4.stop();
     }
-  }, _marked$2);
+  }, _marked$1);
 }
 
 /* *
@@ -7386,17 +7732,26 @@ var createMultipleLayersState = function createMultipleLayersState(layers, mapId
       byId: {}
     }
   };
-  for (var i = 0; i < layers.length; i += 1) {
-    var layerState = createLayer(Object.assign(Object.assign({}, layers[i]), {
-      id: layers[i].id,
-      mapId: mapId
-    }));
-    mockState.byId[layers[i].id] = Object.assign({}, layerState);
-    mockState.allIds.push(layers[i].id);
-    if (layers[i].layerType === LayerType.baseLayer) {
-      mockState.availableBaseLayers.byId[layers[i].id] = Object.assign({}, layerState);
-      mockState.availableBaseLayers.allIds.push(layers[i].id);
+  var _iterator = _createForOfIteratorHelper(layers),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var layer = _step.value;
+      var layerState = createLayer(Object.assign(Object.assign({}, layer), {
+        id: layer.id,
+        mapId: mapId
+      }));
+      mockState.byId[layer.id] = Object.assign({}, layerState);
+      mockState.allIds.push(layer.id);
+      if (layer.layerType === LayerType.baseLayer) {
+        mockState.availableBaseLayers.byId[layer.id] = Object.assign({}, layerState);
+        mockState.availableBaseLayers.allIds.push(layer.id);
+      }
     }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
   }
   return mockState;
 };
@@ -7408,12 +7763,13 @@ var createWebmapState = function createWebmapState() {
   for (var _len = arguments.length, mapIds = new Array(_len), _key = 0; _key < _len; _key++) {
     mapIds[_key] = arguments[_key];
   }
-  for (var i = 0; i < mapIds.length; i += 1) {
+  for (var _i = 0, _mapIds = mapIds; _i < _mapIds.length; _i++) {
+    var mapId = _mapIds[_i];
     var mapState = createMap({
-      id: mapIds[i]
+      id: mapId
     });
-    mockState.byId[mapIds[i]] = Object.assign({}, mapState);
-    mockState.allIds.push(mapIds[i]);
+    mockState.byId[mapId] = Object.assign({}, mapState);
+    mockState.allIds.push(mapId);
   }
   return mockState;
 };
@@ -7425,13 +7781,14 @@ var createMapDimensionsState = function createMapDimensionsState(dimensions) {
   for (var _len2 = arguments.length, mapIds = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
     mapIds[_key2 - 1] = arguments[_key2];
   }
-  for (var i = 0; i < mapIds.length; i += 1) {
+  for (var _i2 = 0, _mapIds2 = mapIds; _i2 < _mapIds2.length; _i2++) {
+    var mapId = _mapIds2[_i2];
     var mapState = createMap({
-      id: mapIds[i]
+      id: mapId
     });
-    mockState.byId[mapIds[i]] = Object.assign({}, mapState);
-    mockState.byId[mapIds[i]].dimensions = dimensions;
-    mockState.allIds.push(mapIds[i]);
+    mockState.byId[mapId] = Object.assign({}, mapState);
+    mockState.byId[mapId].dimensions = dimensions;
+    mockState.allIds.push(mapId);
   }
   return mockState;
 };
@@ -7650,9 +8007,9 @@ var storeTestUtils = /*#__PURE__*/Object.freeze({
   mockStateMapWithTimeStepWithoutLayers: mockStateMapWithTimeStepWithoutLayers
 });
 
-var _marked$1 = /*#__PURE__*/_regeneratorRuntime().mark(updateSourceValueWhenLinkingComponentToGroupSaga),
-  _marked2$1 = /*#__PURE__*/_regeneratorRuntime().mark(updateViewStateSaga),
-  _marked3$1 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$1);
+var _marked = /*#__PURE__*/_regeneratorRuntime().mark(updateSourceValueWhenLinkingComponentToGroupSaga),
+  _marked2 = /*#__PURE__*/_regeneratorRuntime().mark(updateViewStateSaga),
+  _marked3 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga);
 function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdate) {
   var group;
   return _regeneratorRuntime().wrap(function updateSourceValueWhenLinkingComponentToGroupSaga$(_context) {
@@ -7704,7 +8061,7 @@ function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdat
       case "end":
         return _context.stop();
     }
-  }, _marked$1);
+  }, _marked);
 }
 function addGroupTargetSaga(_ref) {
   var payload = _ref.payload;
@@ -7765,9 +8122,9 @@ function updateViewStateSaga() {
       case "end":
         return _context4.stop();
     }
-  }, _marked2$1);
+  }, _marked2);
 }
-function rootSaga$1() {
+function rootSaga() {
   return _regeneratorRuntime().wrap(function rootSaga$(_context5) {
     while (1) switch (_context5.prev = _context5.next) {
       case 0:
@@ -7801,7 +8158,7 @@ function rootSaga$1() {
       case "end":
         return _context5.stop();
     }
-  }, _marked3$1);
+  }, _marked3);
 }
 
 var synchronizationGroupConfig = {
@@ -7809,99 +8166,67 @@ var synchronizationGroupConfig = {
   reducersMap: {
     syncronizationGroupStore: reducer$4
   },
-  sagas: [rootSaga$3, rootSaga$1]
+  sagas: [rootSaga$2, rootSaga]
 };
 
-var _marked = /*#__PURE__*/_regeneratorRuntime().mark(registerMapUISaga),
-  _marked2 = /*#__PURE__*/_regeneratorRuntime().mark(unregisterUIMapSaga),
-  _marked3 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga);
-function registerMapUISaga() {
-  var fields, source;
-  return _regeneratorRuntime().wrap(function registerMapUISaga$(_context) {
-    while (1) switch (_context.prev = _context.next) {
-      case 0:
-        _context.next = 2;
-        return select(getAllMapIds);
-      case 2:
-        fields = _context.sent;
-        if (!(fields.length === 1)) {
-          _context.next = 9;
-          break;
-        }
-        _context.next = 6;
-        return select(getDialogSource, 'legend');
-      case 6:
-        source = _context.sent;
-        _context.next = 9;
-        return put(uiActions.setActiveMapIdForDialog({
-          type: 'legend',
-          mapId: fields[0],
-          setOpen: true,
-          source: source
-        }));
-      case 9:
-      case "end":
-        return _context.stop();
-    }
-  }, _marked);
-}
-function unregisterUIMapSaga() {
-  var fields, activeUI;
-  return _regeneratorRuntime().wrap(function unregisterUIMapSaga$(_context2) {
-    while (1) switch (_context2.prev = _context2.next) {
-      case 0:
-        _context2.next = 2;
-        return select(getAllMapIds);
-      case 2:
-        fields = _context2.sent;
-        _context2.next = 5;
-        return select(getDialogDetailsByType, 'legend');
-      case 5:
-        activeUI = _context2.sent;
-        if (!(fields.length && activeUI && !fields.includes(activeUI.activeMapId))) {
-          _context2.next = 11;
-          break;
+var uiListener = createListenerMiddleware();
+uiListener.startListening({
+  actionCreator: mapActions.registerMap,
+  effect: function effect(_, listenerApi) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var fields, source;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            fields = getAllMapIds(listenerApi.getState());
+            if (fields.length === 1) {
+              source = getDialogSource(listenerApi.getState(), 'legend');
+              listenerApi.dispatch(uiActions.setActiveMapIdForDialog({
+                type: 'legend',
+                mapId: fields[0],
+                setOpen: true,
+                source: source
+              }));
+            }
+          case 2:
+          case "end":
+            return _context.stop();
         }
-        _context2.next = 9;
-        return put(uiActions.setActiveMapIdForDialog({
-          type: 'legend',
-          mapId: fields[0],
-          setOpen: activeUI.isOpen
-        }));
-      case 9:
-        _context2.next = 14;
-        break;
-      case 11:
-        if (fields.length) {
-          _context2.next = 14;
-          break;
+      }, _callee);
+    }));
+  }
+});
+uiListener.startListening({
+  actionCreator: mapActions.unregisterMap,
+  effect: function effect(_, listenerApi) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var fields, activeUI;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            fields = getAllMapIds(listenerApi.getState());
+            activeUI = getDialogDetailsByType(listenerApi.getState(), 'legend');
+            if (fields.length && activeUI && !fields.includes(activeUI.activeMapId)) {
+              listenerApi.dispatch(uiActions.setActiveMapIdForDialog({
+                type: 'legend',
+                mapId: fields[0],
+                setOpen: activeUI.isOpen
+              }));
+            } else if (!fields.length) {
+              // if no more maps, we hide the legend
+              listenerApi.dispatch(uiActions.setToggleOpenDialog({
+                type: 'legend',
+                setOpen: false
+              }));
+            }
+          case 3:
+          case "end":
+            return _context2.stop();
         }
-        _context2.next = 14;
-        return put(uiActions.setToggleOpenDialog({
-          type: 'legend',
-          setOpen: false
-        }));
-      case 14:
-      case "end":
-        return _context2.stop();
-    }
-  }, _marked2);
-}
-function rootSaga() {
-  return _regeneratorRuntime().wrap(function rootSaga$(_context3) {
-    while (1) switch (_context3.prev = _context3.next) {
-      case 0:
-        _context3.next = 2;
-        return takeLatest(mapActions.registerMap.type, registerMapUISaga);
-      case 2:
-        _context3.next = 4;
-        return takeLatest(mapActions.unregisterMap.type, unregisterUIMapSaga);
-      case 4:
-      case "end":
-        return _context3.stop();
-    }
-  }, _marked3);
-}
+      }, _callee2);
+    }));
+  }
+});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -7924,7 +8249,7 @@ var uiModuleConfig = {
   reducersMap: {
     ui: reducer$6
   },
-  sagas: [rootSaga]
+  middlewares: [uiListener.middleware]
 };
 
 /* *
@@ -7966,12 +8291,9 @@ var createStore = function createStore() {
     extensions: [getSagaExtension({})]
   });
 };
-var ThemeWrapperWithModules = withEggs(coreModuleConfig)(function (_ref) {
-  var theme = _ref.theme,
-    children = _ref.children;
-  return /*#__PURE__*/React.createElement(ThemeWrapper, {
-    theme: theme
-  }, children, " ");
+var WrapperWithModules = withEggs(coreModuleConfig)(function (_ref) {
+  var children = _ref.children;
+  return children;
 });
 /**
  * A Provider component which provides the GeoWeb theme and store for the core.
@@ -7979,16 +8301,12 @@ var ThemeWrapperWithModules = withEggs(coreModuleConfig)(function (_ref) {
  * @param children
  * @returns
  */
-var ThemeStoreProvider = function ThemeStoreProvider(_ref2) {
+var StoreProvider = function StoreProvider(_ref2) {
   var children = _ref2.children,
-    _ref2$theme = _ref2.theme,
-    theme = _ref2$theme === void 0 ? lightTheme : _ref2$theme,
     store = _ref2.store;
   return /*#__PURE__*/React.createElement(Provider, {
     store: store
-  }, /*#__PURE__*/React.createElement(ThemeWrapperWithModules, {
-    theme: theme
-  }, children));
+  }, /*#__PURE__*/React.createElement(WrapperWithModules, null, children));
 };
 
 /* *
@@ -8092,4 +8410,4 @@ var useSetupDialog = function useSetupDialog(dialogType) {
   };
 };
 
-export { ThemeStoreProvider, appActions, appModuleConfig, coreModuleConfig, createStore, drawtoolActions, drawtoolModuleConfig, reducer as drawtoolReducer, selectors as drawtoolSelectors, filterLayers$1 as filterLayers, genericActions, rootSaga$3 as genericSaga, selectors$3 as genericSelectors, types$1 as genericTypes, getSingularDrawtoolDrawLayerId, initialState$4 as initialState, layerActions, reducer$7 as layerReducer, selectors$6 as layerSelectors, types$5 as layerTypes, utils$2 as layerUtils, mapActions, constants$1 as mapConstants, enums as mapEnums, rootSaga$5 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, storeTestSettings, storeTestUtils, utils$1 as storeUtils, constants as syncConstants, actions as syncGroupsActions, reducer$4 as syncGroupsReducer, selector as syncGroupsSelector, selectors$4 as syncGroupsSelectors, types$2 as syncGroupsTypes, types$2 as types, uiActions, uiModuleConfig, reducer$6 as uiReducer, selectors$5 as uiSelectors, types$3 as uiTypes, useSetupDialog, reducer$5 as webmapReducer };
+export { StoreProvider, appActions, appModuleConfig, coreModuleConfig, createStore, drawtoolActions, drawtoolModuleConfig, reducer as drawtoolReducer, selectors as drawtoolSelectors, filterLayers$1 as filterLayers, genericActions, rootSaga$2 as genericSaga, selectors$3 as genericSelectors, types$1 as genericTypes, getSingularDrawtoolDrawLayerId, initialState$4 as initialState, layerActions, reducer$7 as layerReducer, selectors$6 as layerSelectors, types$5 as layerTypes, utils$2 as layerUtils, mapActions, constants$1 as mapConstants, 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, storeTestSettings, storeTestUtils, utils$1 as storeUtils, constants as syncConstants, actions as syncGroupsActions, reducer$4 as syncGroupsReducer, selector as syncGroupsSelector, selectors$4 as syncGroupsSelectors, types$2 as syncGroupsTypes, types$2 as types, uiActions, uiModuleConfig, reducer$6 as uiReducer, selectors$5 as uiSelectors, types$3 as uiTypes, useSetupDialog, reducer$5 as webmapReducer };