@opengeoweb/store 9.9.0 → 9.10.1

package/index.esm.js

@@ -1,16 +1,16 @@
-import { current, produce } from 'immer';
-import { webmapUtils, LayerType, webmapTestSettings, WMLayer, handleMomentISOString, getCapabilities } from '@opengeoweb/webmap';
-import { createAction, createSlice, createSelector, createEntityAdapter } from '@reduxjs/toolkit';
+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 { 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"];
@@ -481,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;
@@ -1157,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
     }
@@ -1584,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;
         }
@@ -1607,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);
       }
     },
@@ -1659,7 +1669,7 @@ var slice$7 = createSlice({
         draft.byId[layerId].isInEditMode = false;
         draft.byId[layerId].drawMode = '';
         if (exitMultipleShapes) {
-          var currentGeoJSON = current(draft.byId[layerId].geojson);
+          var currentGeoJSON = draft.byId[layerId].geojson;
           var lastFeatureIndex = currentGeoJSON !== undefined && getLastEmptyFeatureIndex(currentGeoJSON);
           if (currentGeoJSON && lastFeatureIndex !== undefined) {
             var newGeoJSON = Object.assign(Object.assign({}, currentGeoJSON), {
@@ -1680,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) {
@@ -1708,7 +1721,7 @@ var slice$7 = createSlice({
       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);
@@ -2544,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;
@@ -2568,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;
@@ -2644,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;
@@ -2654,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;
@@ -2664,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].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;
       }
@@ -2806,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;
       }
@@ -2828,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;
       }
@@ -2840,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;
       }
@@ -2899,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 = [];
@@ -2931,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;
@@ -2959,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;
       }
@@ -2972,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) {
@@ -3000,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) {
@@ -3031,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);
@@ -3054,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;
@@ -3076,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;
       }
@@ -3537,32 +3567,34 @@ var setBboxOrTimeSync = function setBboxOrTimeSync(draft, action) {
         return null;
     }
   };
-  var payloadKey = getPayLoadKey(action.type);
-  if (!source.payload || !payloadKey) {
-    console.warn('Wrong sync action: ', action);
-    return;
-  }
-  if (draft.sources.byId[source.payload.sourceId]) {
-    if (!draft.sources.byId[source.payload.sourceId].payloadByType) {
-      draft.sources.byId[source.payload.sourceId].payloadByType = {};
+  if (source) {
+    var payloadKey = getPayLoadKey(action.type);
+    if (!source.payload || !payloadKey) {
+      console.warn('Wrong sync action: ', action);
+      return;
     }
-    draft.sources.byId[source.payload.sourceId].payloadByType[payloadKey] = source.payload;
-  }
-  /* Update all targets */
-  targets.forEach(function (target) {
-    if (draft.sources.byId[target.targetId]) {
-      if (!draft.sources.byId[target.targetId].payloadByType) {
-        draft.sources.byId[target.targetId].payloadByType = {};
+    if (draft.sources.byId[source.payload.sourceId]) {
+      if (!draft.sources.byId[source.payload.sourceId].payloadByType) {
+        draft.sources.byId[source.payload.sourceId].payloadByType = {};
       }
-      draft.sources.byId[target.targetId].payloadByType[payloadKey] = source.payload;
-    }
-  });
-  /* Set the value in the group */
-  groups.forEach(function (group) {
-    if (draft.groups.byId[group]) {
-      draft.groups.byId[group].payloadByType[payloadKey] = source.payload;
+      draft.sources.byId[source.payload.sourceId].payloadByType[payloadKey] = source.payload;
     }
-  });
+    /* Update all targets */
+    targets.forEach(function (target) {
+      if (draft.sources.byId[target.targetId]) {
+        if (!draft.sources.byId[target.targetId].payloadByType) {
+          draft.sources.byId[target.targetId].payloadByType = {};
+        }
+        draft.sources.byId[target.targetId].payloadByType[payloadKey] = source.payload;
+      }
+    });
+    /* Set the value in the group */
+    groups.forEach(function (group) {
+      if (draft.groups.byId[group]) {
+        draft.groups.byId[group].payloadByType[payloadKey] = source.payload;
+      }
+    });
+  }
 };
 var _slice$actions = slice$4.actions,
   syncGroupAddGroup = _slice$actions.syncGroupAddGroup,
@@ -4694,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,
@@ -4751,7 +4812,8 @@ var selectors$2 = /*#__PURE__*/Object.freeze({
   getMapPreset: getMapPreset,
   getMapLayerIdsEnabled: getMapLayerIdsEnabled,
   getIsEnabledLayersForMapDimension: getIsEnabledLayersForMapDimension,
-  getDockedLayerManagerSize: getDockedLayerManagerSize
+  getDockedLayerManagerSize: getDockedLayerManagerSize,
+  getAnimationList: getAnimationList
 });
 
 /* *
@@ -5208,23 +5270,110 @@ 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)) {
@@ -5256,49 +5405,42 @@ var isAnimationEndTimeValid = function isAnimationEndTimeValid(animationEndTime)
   var parsedDate = dateUtils.parseISO(animationEndTime);
   return dateUtils.isValid(parsedDate);
 };
-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();
-  }
-}
 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() {
@@ -5307,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();
       }
@@ -5344,7 +5485,7 @@ function deleteLayerSaga(_ref3) {
   })();
 }
 function updateAnimation(mapId, maxValue) {
-  var shouldEndtimeOverride$1, 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:
@@ -5362,17 +5503,17 @@ function updateAnimation(mapId, maxValue) {
         return select(getAnimationStartTime, mapId);
       case 7:
         animationStart = _context4.sent;
-        animationStartUnix = dateUtils.unix(dateUtils.utc(animationStart));
-        _context4.next = 11;
+        _context4.next = 10;
         return select(getAnimationEndTime$1, mapId);
-      case 11:
+      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);
-        if (!(!start || !end)) {
+        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;
         }
@@ -5381,44 +5522,24 @@ function updateAnimation(mapId, maxValue) {
         _context4.next = 21;
         return put(mapActions.setAnimationEndTime({
           mapId: mapId,
-          animationEndTime: end
+          animationEndTime: newAnimationEndTime
         }));
       case 21:
         _context4.next = 23;
         return put(mapActions.setAnimationStartTime({
           mapId: mapId,
-          animationStartTime: start
+          animationStartTime: newAnimationStartTime
         }));
       case 23:
-        _context4.next = 25;
-        return select(isAnimating, mapId);
-      case 25:
-        isAnimating$1 = _context4.sent;
-        if (!isAnimating$1) {
-          _context4.next = 32;
-          break;
-        }
-        _context4.next = 29;
-        return select(getMapTimeStep, mapId);
-      case 29:
-        timeStep = _context4.sent;
-        _context4.next = 32;
-        return put(mapActions.mapStartAnimation({
-          mapId: mapId,
-          start: start,
-          end: end,
-          interval: timeStep
-        }));
-      case 32:
       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:
@@ -5457,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) {
@@ -5664,7 +5739,7 @@ function handleBaseLayersSaga(mapId, baseLayers) {
       case "end":
         return _context7.stop();
     }
-  }, _marked2$4);
+  }, _marked2$3);
 }
 function setMapPresetSaga(_ref6) {
   var payload = _ref6.payload;
@@ -6019,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,
@@ -6028,7 +6104,7 @@ function unregisterMapSaga(_ref7) {
               origin: LayerActionOrigin.unregisterMapSaga
             }));
           }));
-        case 6:
+        case 7:
         case "end":
           return _context9.stop();
       }
@@ -6100,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) {
@@ -6160,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;
@@ -6181,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:
@@ -6191,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
@@ -6206,7 +6424,7 @@ var mapStoreReducers = {
 var mapStoreModuleConfig = {
   id: 'webmap-module',
   reducersMap: mapStoreReducers,
-  sagas: [rootSaga$5, rootSaga$4]
+  sagas: [rootSaga$4, rootSaga$3]
 };
 
 /* *
@@ -6429,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;
@@ -6702,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:
@@ -6748,7 +6966,7 @@ function rootSaga$3() {
       case "end":
         return _context10.stop();
     }
-  }, _marked$4);
+  }, _marked$3);
 }
 
 /* *
@@ -6809,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) {
@@ -6823,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:
@@ -6835,7 +7053,7 @@ function rootSaga$2() {
       case "end":
         return _context2.stop();
     }
-  }, _marked2$2);
+  }, _marked2$1);
 }
 
 /* *
@@ -6859,7 +7077,7 @@ var routerModuleConfig = {
   reducersMap: {
     router: reducer$2
   },
-  sagas: [rootSaga$2]
+  sagas: [rootSaga$1]
 };
 
 /* *
@@ -7153,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,
@@ -7165,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;
@@ -7278,7 +7502,7 @@ function changeDrawToolSaga(_ref2) {
         case 14:
           geoJSONLayer = _context2.sent;
           geoJSON = geoJSONLayer === null || geoJSONLayer === void 0 ? void 0 : geoJSONLayer.geojson;
-          lastFeatureIndex = geoJSON !== undefined && getLastEmptyFeatureIndex(geoJSON) || undefined;
+          lastFeatureIndex = geoJSON !== undefined ? getLastEmptyFeatureIndex(geoJSON) : undefined;
           if (!(lastFeatureIndex !== undefined)) {
             _context2.next = 23;
             break;
@@ -7439,7 +7663,7 @@ function drawingSaga() {
       case "end":
         return _context4.stop();
     }
-  }, _marked$2);
+  }, _marked$1);
 }
 
 /* *
@@ -7783,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) {
@@ -7837,7 +8061,7 @@ function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdat
       case "end":
         return _context.stop();
     }
-  }, _marked$1);
+  }, _marked);
 }
 function addGroupTargetSaga(_ref) {
   var payload = _ref.payload;
@@ -7898,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:
@@ -7934,7 +8158,7 @@ function rootSaga$1() {
       case "end":
         return _context5.stop();
     }
-  }, _marked3$1);
+  }, _marked3);
 }
 
 var synchronizationGroupConfig = {
@@ -7942,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");
@@ -8057,7 +8249,7 @@ var uiModuleConfig = {
   reducersMap: {
     ui: reducer$6
   },
-  sagas: [rootSaga]
+  middlewares: [uiListener.middleware]
 };
 
 /* *
@@ -8099,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.
@@ -8112,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));
 };
 
 /* *
@@ -8225,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 };