@opengeoweb/store 19.6.1 → 20.0.0-nightly-20260919

package/dist/index.esm.js

@@ -3,7 +3,7 @@ import { isEqual, mergeWith, merge, isEmpty, compact } from 'lodash';
 import { webmapUtils, parseISO8601IntervalToDateInterval, LayerType, handleDateUtilsISOString, webmapTestSettings, WMLayer, getWMLayerById, WMInvalidDateValues, isProjectionSupported, queryWMSLayers } from '@opengeoweb/webmap';
 export { LayerType } from '@opengeoweb/webmap';
 import { dateUtils, PROJECTION, defaultDelay, useDebounce } from '@opengeoweb/shared';
-import { secondsPerPxFromCanvasWidth, defaultTimeSpan, defaultSecondsPerPx, defaultAnimationDelayAtStart, defaultTimeStep, roundWithTimeStep, getSpeedDelay } from '@opengeoweb/time-slider';
+import { secondsPerPxFromCanvasWidth, defaultTimeSpan, defaultSecondsPerPx, defaultAnimationDelayAtStart, defaultTimeStep, AnimationLengthMode, defaultExactSelections, roundWithTimeStep, resolveAnimationRange, isValidAnimationLength, defaultOffsetSelections, isAnchoredMode, getAnimationLengthFromRange, withModeSelections, getSpeedDelay, isWithinAnimationStepLimit } from '@opengeoweb/time-slider';
 import { produce } from 'immer';
 import { getLastEmptyFeatureIndex, getGeoJson, moveFeature, createInterSections, defaultLayers, fetchStacCatalogRoot, stacCatalogCollectionToLayerProps, fetchStacCatalogCollections, emptyGeoJSON, defaultIntersectionStyleProperties, addSelectionTypeToGeoJSON, getFeatureCollection } from '@opengeoweb/webmap-react';
 export { defaultLayers } from '@opengeoweb/webmap-react';
@@ -1556,21 +1556,40 @@ var utils$1 = /*#__PURE__*/Object.freeze({
 });
 
 var _excluded$3 = ["id", "opacity", "acceptanceTimeInMinutes", "enabled", "layerType", "status", "useLatestReferenceTime"];
-var createLayer = function createLayer(_ref) {
-  var id = _ref.id,
-    _ref$opacity = _ref.opacity,
-    opacity = _ref$opacity === void 0 ? 1 : _ref$opacity,
-    _ref$acceptanceTimeIn = _ref.acceptanceTimeInMinutes,
-    acceptanceTimeInMinutes = _ref$acceptanceTimeIn === void 0 ? 60 : _ref$acceptanceTimeIn,
-    _ref$enabled = _ref.enabled,
-    enabled = _ref$enabled === void 0 ? true : _ref$enabled,
-    _ref$layerType = _ref.layerType,
-    layerType = _ref$layerType === void 0 ? 'mapLayer' : _ref$layerType,
-    _ref$status = _ref.status,
-    status = _ref$status === void 0 ? 'default' : _ref$status,
-    _ref$useLatestReferen = _ref.useLatestReferenceTime,
-    useLatestReferenceTime = _ref$useLatestReferen === void 0 ? true : _ref$useLatestReferen,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+var updateIntersectionLayers = function updateIntersectionLayers(_ref) {
+  var _currentLayer$geojson;
+  var draft = _ref.draft,
+    currentLayer = _ref.currentLayer,
+    geojson = _ref.geojson,
+    geoJSONIntersectionLayerId = _ref.geoJSONIntersectionLayerId,
+    geoJSONIntersectionBoundsLayerId = _ref.geoJSONIntersectionBoundsLayerId;
+  if (!geoJSONIntersectionBoundsLayerId || !geoJSONIntersectionLayerId) {
+    return;
+  }
+  var intersectionLayer = draft.byId[geoJSONIntersectionLayerId];
+  var intersectionBoundsLayer = draft.byId[geoJSONIntersectionBoundsLayerId];
+  if (!intersectionLayer || !intersectionBoundsLayer) {
+    return;
+  }
+  var bounds = intersectionBoundsLayer.geojson;
+  var geoJSONProperties = intersectionLayer.defaultGeoJSONProperties || ((_currentLayer$geojson = currentLayer.geojson) === null || _currentLayer$geojson === void 0 || (_currentLayer$geojson = _currentLayer$geojson.features[0]) === null || _currentLayer$geojson === void 0 ? void 0 : _currentLayer$geojson.properties);
+  intersectionLayer.geojson = createInterSections(geojson, bounds, geoJSONProperties);
+};
+var createLayer = function createLayer(_ref2) {
+  var id = _ref2.id,
+    _ref2$opacity = _ref2.opacity,
+    opacity = _ref2$opacity === void 0 ? 1 : _ref2$opacity,
+    _ref2$acceptanceTimeI = _ref2.acceptanceTimeInMinutes,
+    acceptanceTimeInMinutes = _ref2$acceptanceTimeI === void 0 ? 60 : _ref2$acceptanceTimeI,
+    _ref2$enabled = _ref2.enabled,
+    enabled = _ref2$enabled === void 0 ? true : _ref2$enabled,
+    _ref2$layerType = _ref2.layerType,
+    layerType = _ref2$layerType === void 0 ? 'mapLayer' : _ref2$layerType,
+    _ref2$status = _ref2.status,
+    status = _ref2$status === void 0 ? 'default' : _ref2$status,
+    _ref2$useLatestRefere = _ref2.useLatestReferenceTime,
+    useLatestReferenceTime = _ref2$useLatestRefere === void 0 ? true : _ref2$useLatestRefere,
+    props = _objectWithoutProperties(_ref2, _excluded$3);
   var wmjsLayer = webmapUtils.getWMLayerById(id);
   var dimensions = props.dimensions || (wmjsLayer ? wmjsLayer.getDimensions() : []).map(function (dim) {
     return {
@@ -2095,17 +2114,13 @@ var slice$7 = createSlice({
         var selectedFeatureKey = getFeatureSelectionKey(selectedFeature);
         currentLayer.selectedFeatureIds = selectedFeatureKey ? [selectedFeatureKey] : [];
       }
-      if (geoJSONIntersectionBoundsLayerId && geoJSONIntersectionLayerId) {
-        var _currentLayer$geojson;
-        var intersectionLayer = draft.byId[geoJSONIntersectionLayerId];
-        var intersectionBoundsLayer = draft.byId[geoJSONIntersectionBoundsLayerId];
-        if (!intersectionLayer || !intersectionBoundsLayer) {
-          return;
-        }
-        var bounds = intersectionBoundsLayer.geojson;
-        var geoJSONProperties = intersectionLayer.defaultGeoJSONProperties || ((_currentLayer$geojson = currentLayer.geojson) === null || _currentLayer$geojson === void 0 || (_currentLayer$geojson = _currentLayer$geojson.features[0]) === null || _currentLayer$geojson === void 0 ? void 0 : _currentLayer$geojson.properties);
-        intersectionLayer.geojson = createInterSections(updatedGeoJSONWithIds, bounds, geoJSONProperties);
-      }
+      updateIntersectionLayers({
+        draft: draft,
+        currentLayer: currentLayer,
+        geojson: updatedGeoJSONWithIds,
+        geoJSONIntersectionLayerId: geoJSONIntersectionLayerId,
+        geoJSONIntersectionBoundsLayerId: geoJSONIntersectionBoundsLayerId
+      });
     },
     updateFeatureProperties: function updateFeatureProperties(draft, action) {
       var _currentLayer$geojson2;
@@ -2127,13 +2142,59 @@ var slice$7 = createSlice({
         });
       }
     },
-    deleteFeature: function deleteFeature(draft, action) {
-      var _currentLayer$geojson3, _currentLayer$selecte, _currentLayer$hovered;
+    moveFeatures: function moveFeatures(draft, action) {
+      var _currentLayer$geojson3;
       var _action$payload21 = action.payload,
         layerId = _action$payload21.layerId,
-        featureId = _action$payload21.featureId;
+        movedFeatures = _action$payload21.movedFeatures,
+        geoJSONIntersectionLayerId = _action$payload21.geoJSONIntersectionLayerId,
+        geoJSONIntersectionBoundsLayerId = _action$payload21.geoJSONIntersectionBoundsLayerId;
       var currentLayer = draft.byId[layerId];
-      if (!(currentLayer !== null && currentLayer !== void 0 && (_currentLayer$geojson3 = currentLayer.geojson) !== null && _currentLayer$geojson3 !== void 0 && _currentLayer$geojson3.features.length)) {
+      if (!(currentLayer !== null && currentLayer !== void 0 && (_currentLayer$geojson3 = currentLayer.geojson) !== null && _currentLayer$geojson3 !== void 0 && _currentLayer$geojson3.features.length) || !(movedFeatures !== null && movedFeatures !== void 0 && movedFeatures.length)) {
+        return;
+      }
+      var geometryByFeatureId = new Map(movedFeatures.map(function (_ref3) {
+        var featureId = _ref3.featureId,
+          geometry = _ref3.geometry;
+        return [featureId, geometry];
+      }));
+      var hasChanges = false;
+      var features = currentLayer.geojson.features.map(function (feature) {
+        var _feature$properties;
+        if (((_feature$properties = feature.properties) === null || _feature$properties === void 0 ? void 0 : _feature$properties.isReadonly) === true) {
+          return feature;
+        }
+        var featureKey = getFeatureSelectionKey(feature);
+        var geometry = featureKey ? geometryByFeatureId.get(featureKey) : undefined;
+        if (!geometry) {
+          return feature;
+        }
+        hasChanges = true;
+        return _objectSpread2(_objectSpread2({}, feature), {}, {
+          geometry: geometry
+        });
+      });
+      if (!hasChanges) {
+        return;
+      }
+      currentLayer.geojson = _objectSpread2(_objectSpread2({}, currentLayer.geojson), {}, {
+        features: features
+      });
+      updateIntersectionLayers({
+        draft: draft,
+        currentLayer: currentLayer,
+        geojson: currentLayer.geojson,
+        geoJSONIntersectionLayerId: geoJSONIntersectionLayerId,
+        geoJSONIntersectionBoundsLayerId: geoJSONIntersectionBoundsLayerId
+      });
+    },
+    deleteFeature: function deleteFeature(draft, action) {
+      var _currentLayer$geojson4, _currentLayer$selecte, _currentLayer$hovered;
+      var _action$payload22 = action.payload,
+        layerId = _action$payload22.layerId,
+        featureId = _action$payload22.featureId;
+      var currentLayer = draft.byId[layerId];
+      if (!(currentLayer !== null && currentLayer !== void 0 && (_currentLayer$geojson4 = currentLayer.geojson) !== null && _currentLayer$geojson4 !== void 0 && _currentLayer$geojson4.features.length)) {
         return;
       }
       var features = currentLayer.geojson.features;
@@ -2164,10 +2225,10 @@ var slice$7 = createSlice({
       });
     },
     toggleFeatureMode: function toggleFeatureMode(draft, action) {
-      var _action$payload22 = action.payload,
-        layerId = _action$payload22.layerId,
-        isInEditMode = _action$payload22.isInEditMode,
-        drawMode = _action$payload22.drawMode;
+      var _action$payload23 = action.payload,
+        layerId = _action$payload23.layerId,
+        isInEditMode = _action$payload23.isInEditMode,
+        drawMode = _action$payload23.drawMode;
       if (!draft.byId[layerId]) {
         return;
       }
@@ -2179,10 +2240,10 @@ var slice$7 = createSlice({
       }
     },
     exitFeatureDrawMode: function exitFeatureDrawMode(draft, action) {
-      var _action$payload23 = action.payload,
-        layerId = _action$payload23.layerId,
-        shouldAllowMultipleShapes = _action$payload23.shouldAllowMultipleShapes,
-        reason = _action$payload23.reason;
+      var _action$payload24 = action.payload,
+        layerId = _action$payload24.layerId,
+        shouldAllowMultipleShapes = _action$payload24.shouldAllowMultipleShapes,
+        reason = _action$payload24.reason;
       if (!draft.byId[layerId]) {
         return;
       }
@@ -2218,10 +2279,10 @@ var slice$7 = createSlice({
     },
     // layer info actions
     showLayerInfo: function showLayerInfo(draft, action) {
-      var _action$payload24 = action.payload,
-        serviceUrl = _action$payload24.serviceUrl,
-        layerName = _action$payload24.layerName,
-        style = _action$payload24.style;
+      var _action$payload25 = action.payload,
+        serviceUrl = _action$payload25.serviceUrl,
+        layerName = _action$payload25.layerName,
+        style = _action$payload25.style;
       draft.activeLayerInfo = {
         serviceUrl: serviceUrl,
         layerName: layerName,
@@ -2232,9 +2293,9 @@ var slice$7 = createSlice({
       delete draft.activeLayerInfo;
     },
     SetLayerLegendVisibilityPayload: function SetLayerLegendVisibilityPayload(draft, action) {
-      var _action$payload25 = action.payload,
-        layerId = _action$payload25.layerId,
-        showLayerLegend = _action$payload25.showLayerLegend;
+      var _action$payload26 = action.payload,
+        layerId = _action$payload26.layerId,
+        showLayerLegend = _action$payload26.showLayerLegend;
       var layer = draft.byId[layerId];
       if (!layer) {
         return;
@@ -2247,9 +2308,9 @@ var slice$7 = createSlice({
   },
   extraReducers: function extraReducers(builder) {
     builder.addCase(setTimeSync, function (draft, action) {
-      var _action$payload26 = action.payload,
-        targetsFromAction = _action$payload26.targets,
-        source = _action$payload26.source;
+      var _action$payload27 = action.payload,
+        targetsFromAction = _action$payload27.targets,
+        source = _action$payload27.source;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
       var targets = [];
       if (source) {
@@ -2279,9 +2340,9 @@ var slice$7 = 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$payload27 = action.payload,
-        targets = _action$payload27.targets,
-        source = _action$payload27.source;
+      var _action$payload28 = action.payload,
+        targets = _action$payload28.targets,
+        source = _action$payload28.source;
       return targets.reduce(function (prevState, target) {
         var actionType = (source === null || source === void 0 ? void 0 : source.type) || 'GENERIC_SYNC_SETLAYERACTIONS';
         var action = {
@@ -2364,6 +2425,15 @@ var initialState$5 = {
   byId: {},
   allIds: []
 };
+/** Dragging the slider selects an exact window, so the mode needs its own range stored with it. */
+var exactSelectionsFrom = function exactSelectionsFrom(animationLength, animationStartTime, animationEndTime) {
+  var _animationLength$exac;
+  var current = (_animationLength$exac = animationLength === null || animationLength === void 0 ? void 0 : animationLength.exact) !== null && _animationLength$exac !== void 0 ? _animationLength$exac : defaultExactSelections();
+  return {
+    animationStartTime: animationStartTime !== null && animationStartTime !== void 0 ? animationStartTime : current.animationStartTime,
+    animationEndTime: animationEndTime !== null && animationEndTime !== void 0 ? animationEndTime : current.animationEndTime
+  };
+};
 var slice$6 = createSlice({
   initialState: initialState$5,
   name: 'mapReducer',
@@ -2468,7 +2538,10 @@ var slice$6 = createSlice({
         return;
       }
       draft.byId[mapId].animationStartTime = animationStartTime;
-      draft.byId[mapId].isAnimationLengthAuto = false;
+      draft.byId[mapId].animationLength = _objectSpread2(_objectSpread2({}, draft.byId[mapId].animationLength), {}, {
+        mode: AnimationLengthMode.Exact,
+        exact: exactSelectionsFrom(draft.byId[mapId].animationLength, animationStartTime, draft.byId[mapId].animationEndTime)
+      });
     },
     setAnimationEndTime: function setAnimationEndTime(draft, action) {
       var _action$payload7 = action.payload,
@@ -2478,23 +2551,54 @@ var slice$6 = createSlice({
         return;
       }
       draft.byId[mapId].animationEndTime = animationEndTime;
-      draft.byId[mapId].isAnimationLengthAuto = false;
+      draft.byId[mapId].animationLength = _objectSpread2(_objectSpread2({}, draft.byId[mapId].animationLength), {}, {
+        mode: AnimationLengthMode.Exact,
+        exact: exactSelectionsFrom(draft.byId[mapId].animationLength, draft.byId[mapId].animationStartTime, animationEndTime)
+      });
     },
-    setAnimationDelay: function setAnimationDelay(draft, action) {
+    setAnimationLength: function setAnimationLength(draft, action) {
       var _action$payload8 = action.payload,
         mapId = _action$payload8.mapId,
-        animationDelay = _action$payload8.animationDelay;
+        animationLength = _action$payload8.animationLength,
+        animationStartTime = _action$payload8.animationStartTime,
+        animationEndTime = _action$payload8.animationEndTime;
       if (!draft.byId[mapId]) {
         return;
       }
-      draft.byId[mapId].animationDelay = animationDelay;
+      draft.byId[mapId].animationLength = animationLength;
+      if (animationStartTime) {
+        draft.byId[mapId].animationStartTime = animationStartTime;
+      }
+      if (animationEndTime) {
+        draft.byId[mapId].animationEndTime = animationEndTime;
+      }
     },
-    layerMoveLayer: function layerMoveLayer(draft, action) {
+    refreshAnimationRange: function refreshAnimationRange(draft, action) {
       var _action$payload9 = action.payload,
-        oldIndex = _action$payload9.oldIndex,
-        newIndex = _action$payload9.newIndex,
         mapId = _action$payload9.mapId,
-        layerType = _action$payload9.layerType;
+        animationStartTime = _action$payload9.animationStartTime,
+        animationEndTime = _action$payload9.animationEndTime;
+      if (!draft.byId[mapId]) {
+        return;
+      }
+      draft.byId[mapId].animationStartTime = animationStartTime;
+      draft.byId[mapId].animationEndTime = animationEndTime;
+    },
+    setAnimationDelay: function setAnimationDelay(draft, action) {
+      var _action$payload0 = action.payload,
+        mapId = _action$payload0.mapId,
+        animationDelay = _action$payload0.animationDelay;
+      if (!draft.byId[mapId]) {
+        return;
+      }
+      draft.byId[mapId].animationDelay = animationDelay;
+    },
+    layerMoveLayer: function layerMoveLayer(draft, action) {
+      var _action$payload1 = action.payload,
+        oldIndex = _action$payload1.oldIndex,
+        newIndex = _action$payload1.newIndex,
+        mapId = _action$payload1.mapId,
+        layerType = _action$payload1.layerType;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2505,11 +2609,11 @@ var slice$6 = createSlice({
       }
     },
     setAutoLayerId: function setAutoLayerId(draft, action) {
-      var _action$payload0 = action.payload,
-        mapId = _action$payload0.mapId,
-        layerId = _action$payload0.layerId,
-        autoTimeStepLayerId = _action$payload0.autoTimeStepLayerId,
-        autoUpdateLayerId = _action$payload0.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;
@@ -2526,9 +2630,9 @@ var slice$6 = createSlice({
       }
     },
     setAutoTimestepLayerId: function setAutoTimestepLayerId(draft, action) {
-      var _action$payload1 = action.payload,
-        mapId = _action$payload1.mapId,
-        autoTimestepLayerId = _action$payload1.autoTimestepLayerId;
+      var _action$payload11 = action.payload,
+        mapId = _action$payload11.mapId,
+        autoTimestepLayerId = _action$payload11.autoTimestepLayerId;
       var map = draft.byId[mapId];
       if (!map) {
         return;
@@ -2536,9 +2640,9 @@ var slice$6 = createSlice({
       map.autoTimeStepLayerId = autoTimestepLayerId;
     },
     setAutoUpdateLayerId: function setAutoUpdateLayerId(draft, action) {
-      var _action$payload10 = action.payload,
-        mapId = _action$payload10.mapId,
-        autoUpdateLayerId = _action$payload10.autoUpdateLayerId;
+      var _action$payload12 = action.payload,
+        mapId = _action$payload12.mapId,
+        autoUpdateLayerId = _action$payload12.autoUpdateLayerId;
       var map = draft.byId[mapId];
       if (!map) {
         return;
@@ -2546,9 +2650,9 @@ var slice$6 = createSlice({
       map.autoUpdateLayerId = autoUpdateLayerId;
     },
     setTimeSliderWidth: function setTimeSliderWidth(draft, action) {
-      var _action$payload11 = action.payload,
-        mapId = _action$payload11.mapId,
-        timeSliderWidth = _action$payload11.timeSliderWidth;
+      var _action$payload13 = action.payload,
+        mapId = _action$payload13.mapId,
+        timeSliderWidth = _action$payload13.timeSliderWidth;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2556,157 +2660,172 @@ var slice$6 = createSlice({
       draft.byId[mapId].timeSliderSecondsPerPx = secondsPerPxFromCanvasWidth(timeSliderWidth, draft.byId[mapId].timeSliderSpan || defaultTimeSpan);
     },
     setTimeSliderCenterTime: function setTimeSliderCenterTime(draft, action) {
-      var _action$payload12 = action.payload,
-        mapId = _action$payload12.mapId,
-        timeSliderCenterTime = _action$payload12.timeSliderCenterTime;
+      var _action$payload14 = action.payload,
+        mapId = _action$payload14.mapId,
+        timeSliderCenterTime = _action$payload14.timeSliderCenterTime;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].timeSliderCenterTime = timeSliderCenterTime;
     },
     toggleAutoUpdate: function toggleAutoUpdate(draft, action) {
-      var _action$payload13 = action.payload,
-        mapId = _action$payload13.mapId,
-        shouldAutoUpdate = _action$payload13.shouldAutoUpdate;
+      var _action$payload15 = action.payload,
+        mapId = _action$payload15.mapId,
+        shouldAutoUpdate = _action$payload15.shouldAutoUpdate;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].isAutoUpdating = shouldAutoUpdate;
     },
     setEndTimeOverriding: function setEndTimeOverriding(draft, action) {
-      var _action$payload14 = action.payload,
-        mapId = _action$payload14.mapId,
-        shouldEndtimeOverride = _action$payload14.shouldEndtimeOverride;
+      var _action$payload16 = action.payload,
+        mapId = _action$payload16.mapId,
+        shouldEndtimeOverride = _action$payload16.shouldEndtimeOverride;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].shouldEndtimeOverride = shouldEndtimeOverride;
     },
     toggleTimestepAuto: function toggleTimestepAuto(draft, action) {
-      var _action$payload15 = action.payload,
-        mapId = _action$payload15.mapId,
-        timestepAuto = _action$payload15.timestepAuto;
+      var _action$payload17 = action.payload,
+        mapId = _action$payload17.mapId,
+        timestepAuto = _action$payload17.timestepAuto;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].isTimestepAuto = timestepAuto;
     },
     toggleTimeSpanAuto: function toggleTimeSpanAuto(draft, action) {
-      var _action$payload16 = action.payload,
-        mapId = _action$payload16.mapId,
-        timeSpanAuto = _action$payload16.timeSpanAuto;
+      var _action$payload18 = action.payload,
+        mapId = _action$payload18.mapId,
+        timeSpanAuto = _action$payload18.timeSpanAuto;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].isTimeSpanAuto = timeSpanAuto;
     },
+    /** Superseded by setAnimationLength; removed together with the old animation length button. */
     toggleAnimationLengthAuto: function toggleAnimationLengthAuto(draft, action) {
-      var _action$payload17 = action.payload,
-        mapId = _action$payload17.mapId,
-        autoAnimationLength = _action$payload17.autoAnimationLength;
+      var _action$payload19 = action.payload,
+        mapId = _action$payload19.mapId,
+        autoAnimationLength = _action$payload19.autoAnimationLength;
       if (!draft.byId[mapId]) {
         return;
       }
-      draft.byId[mapId].isAnimationLengthAuto = autoAnimationLength;
+      draft.byId[mapId].animationLength = autoAnimationLength ? _objectSpread2(_objectSpread2({}, draft.byId[mapId].animationLength), {}, {
+        mode: AnimationLengthMode.Auto
+      }) : _objectSpread2(_objectSpread2({}, draft.byId[mapId].animationLength), {}, {
+        mode: AnimationLengthMode.Exact,
+        exact: exactSelectionsFrom(draft.byId[mapId].animationLength, draft.byId[mapId].animationStartTime, draft.byId[mapId].animationEndTime)
+      });
     },
     toggleTimeSliderHover: function toggleTimeSliderHover(draft, action) {
-      var _action$payload18 = action.payload,
-        mapId = _action$payload18.mapId,
-        isTimeSliderHoverOn = _action$payload18.isTimeSliderHoverOn;
+      var _action$payload20 = action.payload,
+        mapId = _action$payload20.mapId,
+        isTimeSliderHoverOn = _action$payload20.isTimeSliderHoverOn;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].isTimeSliderHoverOn = isTimeSliderHoverOn;
     },
     toggleTimeSliderIsVisible: function toggleTimeSliderIsVisible(draft, action) {
-      var _action$payload19 = action.payload,
-        mapId = _action$payload19.mapId,
-        isTimeSliderVisible = _action$payload19.isTimeSliderVisible;
+      var _action$payload21 = action.payload,
+        mapId = _action$payload21.mapId,
+        isTimeSliderVisible = _action$payload21.isTimeSliderVisible;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].isTimeSliderVisible = isTimeSliderVisible;
     },
     toggleZoomControls: function toggleZoomControls(draft, action) {
-      var _action$payload20 = action.payload,
-        mapId = _action$payload20.mapId,
-        shouldShowZoomControls = _action$payload20.shouldShowZoomControls;
+      var _action$payload22 = action.payload,
+        mapId = _action$payload22.mapId,
+        shouldShowZoomControls = _action$payload22.shouldShowZoomControls;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].shouldShowZoomControls = shouldShowZoomControls;
     },
     setMapPinLocation: function setMapPinLocation(draft, action) {
-      var _action$payload21 = action.payload,
-        mapId = _action$payload21.mapId,
-        mapPinLocation = _action$payload21.mapPinLocation;
+      var _action$payload23 = action.payload,
+        mapId = _action$payload23.mapId,
+        mapPinLocation = _action$payload23.mapPinLocation;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].mapPinLocation = mapPinLocation;
     },
     setDisableMapPin: function setDisableMapPin(draft, action) {
-      var _action$payload22 = action.payload,
-        mapId = _action$payload22.mapId,
-        disableMapPin = _action$payload22.disableMapPin;
+      var _action$payload24 = action.payload,
+        mapId = _action$payload24.mapId,
+        disableMapPin = _action$payload24.disableMapPin;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].disableMapPin = disableMapPin;
     },
     toggleMapPinIsVisible: function toggleMapPinIsVisible(draft, action) {
-      var _action$payload23 = action.payload,
-        mapId = _action$payload23.mapId,
-        displayMapPin = _action$payload23.displayMapPin;
+      var _action$payload25 = action.payload,
+        mapId = _action$payload25.mapId,
+        displayMapPin = _action$payload25.displayMapPin;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].displayMapPin = displayMapPin;
     },
     setDockedLayerManagerSize: function setDockedLayerManagerSize(draft, action) {
-      var _action$payload24 = action.payload,
-        mapId = _action$payload24.mapId,
-        dockedLayerManagerSize = _action$payload24.dockedLayerManagerSize;
+      var _action$payload26 = action.payload,
+        mapId = _action$payload26.mapId,
+        dockedLayerManagerSize = _action$payload26.dockedLayerManagerSize;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].dockedLayerManagerSize = dockedLayerManagerSize;
     },
     setDockedLayerManagerPosition: function setDockedLayerManagerPosition(draft, action) {
-      var _action$payload25 = action.payload,
-        mapId = _action$payload25.mapId,
-        dockedLayerManagerPosition = _action$payload25.dockedLayerManagerPosition;
+      var _action$payload27 = action.payload,
+        mapId = _action$payload27.mapId,
+        dockedLayerManagerPosition = _action$payload27.dockedLayerManagerPosition;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].dockedLayerManagerPosition = dockedLayerManagerPosition;
     },
     setDockedLayerManagerDimensions: function setDockedLayerManagerDimensions(draft, action) {
-      var _action$payload26 = action.payload,
-        mapId = _action$payload26.mapId,
-        dockedLayerManagerDimensions = _action$payload26.dockedLayerManagerDimensions;
+      var _action$payload28 = action.payload,
+        mapId = _action$payload28.mapId,
+        dockedLayerManagerDimensions = _action$payload28.dockedLayerManagerDimensions;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].dockedLayerManagerDimensions = dockedLayerManagerDimensions;
     },
+    setPendingInitialZoomToLayer: function setPendingInitialZoomToLayer(draft, action) {
+      var _action$payload29 = action.payload,
+        mapId = _action$payload29.mapId,
+        layerId = _action$payload29.layerId;
+      if (!draft.byId[mapId]) {
+        return;
+      }
+      draft.byId[mapId].initialZoomToLayerId = layerId;
+    },
     setMapPresetError: function setMapPresetError(_draft, _action) {},
     setDefaultMapSettings: function setDefaultMapSettings(draft, action) {
       draft.defaultMapSettings = action.payload.preset;
     },
     changeOverlayer: function changeOverlayer(draft, action) {
-      var _action$payload27 = action.payload,
-        mapId = _action$payload27.mapId,
-        selectedOverlayer = _action$payload27.selectedOverlayer;
+      var _action$payload30 = action.payload,
+        mapId = _action$payload30.mapId,
+        selectedOverlayer = _action$payload30.selectedOverlayer;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].overLayers = [selectedOverlayer];
     },
     toggleClock: function toggleClock(draft, action) {
-      var _action$payload28 = action.payload,
-        mapId = _action$payload28.mapId,
-        isClockVisible = _action$payload28.isClockVisible;
+      var _action$payload31 = action.payload,
+        mapId = _action$payload31.mapId,
+        isClockVisible = _action$payload31.isClockVisible;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2717,19 +2836,19 @@ var slice$6 = createSlice({
       }
     },
     toggleClockOptions: function toggleClockOptions(draft, action) {
-      var _action$payload29 = action.payload,
-        mapId = _action$payload29.mapId,
-        isClockOptionsMenuVisible = _action$payload29.isClockOptionsMenuVisible;
+      var _action$payload32 = action.payload,
+        mapId = _action$payload32.mapId,
+        isClockOptionsMenuVisible = _action$payload32.isClockOptionsMenuVisible;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].isClockOptionsMenuVisible = isClockOptionsMenuVisible;
     },
     setClockPositionSize: function setClockPositionSize(draft, action) {
-      var _action$payload30 = action.payload,
-        mapId = _action$payload30.mapId,
-        position = _action$payload30.position,
-        size = _action$payload30.size;
+      var _action$payload33 = action.payload,
+        mapId = _action$payload33.mapId,
+        position = _action$payload33.position,
+        size = _action$payload33.size;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2741,10 +2860,10 @@ var slice$6 = createSlice({
       }
     },
     setLegendPositionSize: function setLegendPositionSize(draft, action) {
-      var _action$payload31 = action.payload,
-        mapId = _action$payload31.mapId,
-        position = _action$payload31.position,
-        size = _action$payload31.size;
+      var _action$payload34 = action.payload,
+        mapId = _action$payload34.mapId,
+        position = _action$payload34.position,
+        size = _action$payload34.size;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2758,10 +2877,10 @@ var slice$6 = createSlice({
   },
   extraReducers: function extraReducers(builder) {
     builder.addCase(layerActions.addLayer, function (draft, action) {
-      var _action$payload32 = action.payload,
-        layerId = _action$payload32.layerId,
-        mapId = _action$payload32.mapId,
-        layer = _action$payload32.layer;
+      var _action$payload35 = action.payload,
+        layerId = _action$payload35.layerId,
+        mapId = _action$payload35.mapId,
+        layer = _action$payload35.layer;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2780,10 +2899,10 @@ var slice$6 = createSlice({
         draft.byId[mapId].mapLayers.unshift(layerId);
       }
     }).addCase(layerActions.duplicateMapLayer, function (draft, action) {
-      var _action$payload33 = action.payload,
-        newLayerId = _action$payload33.newLayerId,
-        oldLayerId = _action$payload33.oldLayerId,
-        mapId = _action$payload33.mapId;
+      var _action$payload36 = action.payload,
+        newLayerId = _action$payload36.newLayerId,
+        oldLayerId = _action$payload36.oldLayerId,
+        mapId = _action$payload36.mapId;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2800,10 +2919,10 @@ var slice$6 = createSlice({
         draft.byId[mapId].featureLayers.unshift(newLayerId);
       }
     }).addCase(layerActions.addBaseLayer, function (draft, action) {
-      var _action$payload34 = action.payload,
-        layer = _action$payload34.layer,
-        layerId = _action$payload34.layerId,
-        mapId = _action$payload34.mapId;
+      var _action$payload37 = action.payload,
+        layer = _action$payload37.layer,
+        layerId = _action$payload37.layerId,
+        mapId = _action$payload37.mapId;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2833,9 +2952,9 @@ var slice$6 = createSlice({
         draft.byId[mapId].autoTimeStepLayerId = activeLayerId;
       }
     }).addCase(layerActions.setBaseLayers, function (draft, action) {
-      var _action$payload35 = action.payload,
-        layers = _action$payload35.layers,
-        mapId = _action$payload35.mapId;
+      var _action$payload38 = action.payload,
+        layers = _action$payload38.layers,
+        mapId = _action$payload38.mapId;
       // Split into base and overlayers
       var baseLayers = [];
       var overLayers = [];
@@ -2865,9 +2984,9 @@ var slice$6 = createSlice({
         }
       }
     }).addCase(layerActions.layerDelete, function (draft, action) {
-      var _action$payload36 = action.payload,
-        mapId = _action$payload36.mapId,
-        layerId = _action$payload36.layerId;
+      var _action$payload39 = action.payload,
+        mapId = _action$payload39.mapId,
+        layerId = _action$payload39.layerId;
       var map = draft.byId[mapId];
       if (!map) {
         return;
@@ -2893,9 +3012,9 @@ var slice$6 = createSlice({
         map.autoTimeStepLayerId = activeLayerId;
       }
     }).addCase(layerActions.baseLayerDelete, function (draft, action) {
-      var _action$payload37 = action.payload,
-        mapId = _action$payload37.mapId,
-        layerId = _action$payload37.layerId;
+      var _action$payload40 = action.payload,
+        mapId = _action$payload40.mapId,
+        layerId = _action$payload40.layerId;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2906,14 +3025,14 @@ var slice$6 = createSlice({
         return id !== layerId;
       });
     }).addCase(layerActions.layerChangeDimension, function (draft, action) {
-      var _action$payload38 = action.payload,
-        layerId = _action$payload38.layerId,
-        dimension = _action$payload38.dimension;
+      var _action$payload41 = action.payload,
+        layerId = _action$payload41.layerId,
+        dimension = _action$payload41.dimension;
       produceDraftStateSetMapDimensionFromLayerChangeDimension(draft, layerId, dimension);
     }).addCase(setTimeSync, function (draft, action) {
-      var _action$payload39 = action.payload,
-        targetsFromAction = _action$payload39.targets,
-        source = _action$payload39.source;
+      var _action$payload42 = action.payload,
+        targetsFromAction = _action$payload42.targets,
+        source = _action$payload42.source;
       var sourceMapId = source === null || source === void 0 ? void 0 : source.payload.sourceId;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
       var targets = [];
@@ -2929,6 +3048,7 @@ var slice$6 = createSlice({
         var targetId = target.targetId,
           value = target.value;
         if (draft.byId[targetId]) {
+          var _draft$byId$targetId$;
           // SetTimeSliderSpan
           if (value !== null && value !== void 0 && value.timeSliderSpan) {
             produceTimeSliderTimeSpan(draft, targetId, value.timeSliderSpan);
@@ -2955,6 +3075,13 @@ var slice$6 = createSlice({
           if (value !== null && value !== void 0 && value.timeSliderAnimationEndTime) {
             draft.byId[targetId].animationEndTime = value.timeSliderAnimationEndTime;
           }
+          /* An exact window is the stored range, so a synced range has to move it too. */
+          if ((value !== null && value !== void 0 && value.timeSliderAnimationStartTime || value !== null && value !== void 0 && value.timeSliderAnimationEndTime) && (targetId !== sourceMapId || ((_draft$byId$targetId$ = draft.byId[targetId].animationLength) === null || _draft$byId$targetId$ === void 0 ? void 0 : _draft$byId$targetId$.mode) === AnimationLengthMode.Exact)) {
+            draft.byId[targetId].animationLength = _objectSpread2(_objectSpread2({}, draft.byId[targetId].animationLength), {}, {
+              mode: AnimationLengthMode.Exact,
+              exact: exactSelectionsFrom(draft.byId[targetId].animationLength, draft.byId[targetId].animationStartTime, draft.byId[targetId].animationEndTime)
+            });
+          }
           // SetAnimationDelay
           if (value !== null && value !== void 0 && value.timeSliderAnimationDelay) {
             draft.byId[targetId].animationDelay = value.timeSliderAnimationDelay;
@@ -2971,9 +3098,9 @@ var slice$6 = createSlice({
         }
       });
     }).addCase(setBboxSync, function (draft, action) {
-      var _action$payload40 = action.payload,
-        targetsFromAction = _action$payload40.targets,
-        source = _action$payload40.source;
+      var _action$payload43 = action.payload,
+        targetsFromAction = _action$payload43.targets,
+        source = _action$payload43.source;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
       var targets = [];
       if (source) {
@@ -3005,9 +3132,9 @@ var slice$6 = 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$payload41 = action.payload,
-        targets = _action$payload41.targets,
-        source = _action$payload41.source;
+      var _action$payload44 = action.payload,
+        targets = _action$payload44.targets,
+        source = _action$payload44.source;
       return targets.reduce(function (prevState, target) {
         var actionType = (source === null || source === void 0 ? void 0 : source.type) || 'GENERIC_SYNC_SETLAYERACTIONS';
         var action = {
@@ -3029,9 +3156,9 @@ var slice$6 = createSlice({
       });
       return draft;
     }).addCase(mapChangeDimension, function (draft, action) {
-      var _action$payload42 = action.payload,
-        mapId = _action$payload42.mapId,
-        dimensionFromAction = _action$payload42.dimension;
+      var _action$payload45 = action.payload,
+        mapId = _action$payload45.mapId,
+        dimensionFromAction = _action$payload45.dimension;
       produceDraftStateSetWebMapDimension(draft, mapId, dimensionFromAction, true);
     }).addCase(setMapPreset, function (draft, action) {
       var mapId = action.payload.mapId;
@@ -6796,13 +6923,24 @@ var isTimestepAuto = createSelector(getMapById, function (store) {
   return store ? store.isTimestepAuto : false;
 }, selectorMemoizationOptions);
 /**
- * Returns map is animation auto
+ * Returns how the animation length is determined for the map
+ * @param {object} store store: object - store object
+ * @param {string} mapId mapId: string - Id of the map
+ * @returns {AnimationLengthSetting | undefined} returnType: AnimationLengthSetting
+ */
+var getAnimationLength = createSelector(getMapById, function (store) {
+  return store === null || store === void 0 ? void 0 : store.animationLength;
+}, selectorMemoizationOptions);
+/**
+ * Returns map is animation auto. Superseded by getAnimationLength; removed
+ * together with the old animation length button.
  * @param {object} store store: object - store object
  * @param {string} mapId mapId: string - Id of the map
  * @returns {boolean} returnType: boolean
  */
 var isAnimationLengthAuto = createSelector(getMapById, function (store) {
-  return (store === null || store === void 0 ? void 0 : store.isAnimationLengthAuto) || false;
+  var _store$animationLengt;
+  return (store === null || store === void 0 || (_store$animationLengt = store.animationLength) === null || _store$animationLengt === void 0 ? void 0 : _store$animationLengt.mode) === AnimationLengthMode.Auto;
 }, selectorMemoizationOptions);
 /**
  * Returns map is timespan auto
@@ -7033,7 +7171,7 @@ var getLegendSize = createSelector(getMapById, function (store) {
  * @param {boolean} keepAllDims? keepAllDims: boolean - default false: whether or not to leave the time and reference_time dimentions
  * @returns {MapPreset} returnType: MapPreset
  */
-var getMapPreset = createSelector(getMapLayers, getMapBaseLayers, getMapOverLayers, getBbox, getSrs, getActiveLayerId, getAutoTimeStepLayerId, getAutoUpdateLayerId, isAnimating, isAutoUpdating, isTimeSliderVisible, getDisplayMapPin, isZoomControlsVisible, getMapTimeStep, getMapAnimationDelay, getAnimationStartTime, getAnimationEndTime, getMapTimeSliderSpan, getMapDimensions, isTimestepAuto, isTimeSpanAuto, function (store, mapId) {
+var getMapPreset = createSelector(getMapLayers, getMapBaseLayers, getMapOverLayers, getBbox, getSrs, getActiveLayerId, getAutoTimeStepLayerId, getAutoUpdateLayerId, isAnimating, isAutoUpdating, isTimeSliderVisible, getDisplayMapPin, isZoomControlsVisible, getMapTimeStep, getMapAnimationDelay, getAnimationStartTime, getAnimationEndTime, getMapTimeSliderSpan, getMapDimensions, isTimestepAuto, isTimeSpanAuto, getAnimationLength, function (store, mapId) {
   var _getMapById$dockedLay, _getMapById;
   return (_getMapById$dockedLay = (_getMapById = getMapById(store, mapId)) === null || _getMapById === void 0 ? void 0 : _getMapById.dockedLayerManagerSize) !== null && _getMapById$dockedLay !== void 0 ? _getMapById$dockedLay : 'sizeSmall';
 }, function (store, mapId) {
@@ -7050,9 +7188,9 @@ var getMapPreset = createSelector(getMapLayers, getMapBaseLayers, getMapOverLaye
 }, function (_store, _mapId) {
   var keepAllDims = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return keepAllDims;
-}, function (mapLayers, baseLayers, overLayers, bbox, srs, activeLayerId, autoTimeStepLayerId, autoUpdateLayerId, isAnimating, isAutoUpdating, isTimeSliderVisible, displayMapPin, isZoomControlsVisible, mapTimeStep, mapAnimationDelay, animationStartTime, animationEndTime, timeSliderSpan, mapDimensions, isTimestepAuto, isTimeSpanAuto, dockedLayerManagerSize, dockedLayerManagerPosition, dockedLayerManagerDimensions, isClockVisible, isClockOptionsMenuVisible, clockPosition, clockSize, legendPosition, legendSize, uiStore, mapId, keepAllDims) {
+}, function (mapLayers, baseLayers, overLayers, bbox, srs, activeLayerId, autoTimeStepLayerId, autoUpdateLayerId, isAnimating, isAutoUpdating, isTimeSliderVisible, displayMapPin, isZoomControlsVisible, mapTimeStep, mapAnimationDelay, animationStartTime, animationEndTime, timeSliderSpan, mapDimensions, isTimestepAuto, isTimeSpanAuto, animationLength, dockedLayerManagerSize, dockedLayerManagerPosition, dockedLayerManagerDimensions, isClockVisible, isClockOptionsMenuVisible, clockPosition, clockSize, legendPosition, legendSize, uiStore, mapId, keepAllDims) {
   var _overLayers$, _uiStore$dialogs$isOp, _uiStore$dialogs;
-  var defaultOverlayer = arguments.length > 33 && arguments[33] !== undefined ? arguments[33] : ((_overLayers$ = overLayers[0]) === null || _overLayers$ === void 0 ? void 0 : _overLayers$.name) || 'none';
+  var defaultOverlayer = arguments.length > 34 && arguments[34] !== undefined ? arguments[34] : ((_overLayers$ = overLayers[0]) === null || _overLayers$ === void 0 ? void 0 : _overLayers$.name) || 'none';
   var allLayers = [].concat(_toConsumableArray(baseLayers), _toConsumableArray(overLayers), _toConsumableArray(mapLayers)).map(function (_ref3) {
     _ref3.mapId;
       var layer = _objectWithoutProperties(_ref3, _excluded$2);
@@ -7072,11 +7210,13 @@ var getMapPreset = createSelector(getMapLayers, getMapBaseLayers, getMapOverLaye
     }
     return layer;
   });
-  var animationPayload = {
+  var animationPayload = _objectSpread2({
     interval: mapTimeStep,
     speed: mapAnimationDelay ? getSpeedFactor(mapAnimationDelay) : 1,
     duration: getAnimationDuration(animationEndTime, animationStartTime)
-  };
+  }, animationLength && {
+    animationLength: animationLength
+  });
   var shouldShowLegend = (_uiStore$dialogs$isOp = uiStore === null || uiStore === void 0 || (_uiStore$dialogs = uiStore.dialogs["".concat(DialogTypes.Legend, "-").concat(mapId)]) === null || _uiStore$dialogs === void 0 ? void 0 : _uiStore$dialogs.isOpen) !== null && _uiStore$dialogs$isOp !== void 0 ? _uiStore$dialogs$isOp : false;
   var legendPreset = shouldShowLegend ? _objectSpread2(_objectSpread2({}, legendPosition !== undefined && {
     legendPosition: legendPosition
@@ -7311,7 +7451,7 @@ var getAnimationListAsEpochTimes = createSelector(getAnimationList, function (li
  * @param {string} mapId mapId: string - Id of the map
  * @returns {object} Returns min and max value of time dimension of autoTimeStep-layer. If no autoTimeStep-layer it returns default start/end time from store.
  */
-var getAnimationRange = createSelector(getLayersById, getAutoTimeStepLayerId, getAnimationStartTime, getAnimationEndTime, isAnimationLengthAuto, function (layers, autoTimeStepLayerId, startTime, endTime, isAnimationLengthAuto) {
+var getAnimationRange = createSelector(getLayersById, getAutoTimeStepLayerId, getAnimationStartTime, getAnimationEndTime, getAnimationLength, function (layers, autoTimeStepLayerId, startTime, endTime, animationLength) {
   var _layers$autoTimeStepL2;
   var layerTimeDimension = autoTimeStepLayerId && (layers === null || layers === void 0 || (_layers$autoTimeStepL2 = layers[autoTimeStepLayerId]) === null || _layers$autoTimeStepL2 === void 0 || (_layers$autoTimeStepL2 = _layers$autoTimeStepL2.dimensions) === null || _layers$autoTimeStepL2 === void 0 ? void 0 : _layers$autoTimeStepL2.find(function (dimension) {
     return dimension.name === 'time';
@@ -7320,8 +7460,9 @@ var getAnimationRange = createSelector(getLayersById, getAutoTimeStepLayerId, ge
     minValue = _ref5.minValue,
     maxValue = _ref5.maxValue;
   var hasTimeDimension = minValue && maxValue;
-  var animationStartTime = isAnimationLengthAuto && autoTimeStepLayerId && hasTimeDimension ? minValue : startTime;
-  var animationEndTime = isAnimationLengthAuto && autoTimeStepLayerId && hasTimeDimension ? maxValue : endTime;
+  var shouldFollowAutoTimeStepLayer = (animationLength === null || animationLength === void 0 ? void 0 : animationLength.mode) === AnimationLengthMode.Auto && !!autoTimeStepLayerId && !!hasTimeDimension;
+  var animationStartTime = shouldFollowAutoTimeStepLayer ? minValue : startTime;
+  var animationEndTime = shouldFollowAutoTimeStepLayer ? maxValue : endTime;
   return {
     animationStartTime: animationStartTime,
     animationEndTime: animationEndTime
@@ -7363,6 +7504,12 @@ var getSelectedOverlayerByMapId = createSelector(getMapById, function (store) {
 var getRefTimeDimensionModes = createSelector(getdefaultMapSettings, function (state) {
   return state === null || state === void 0 ? void 0 : state.refTimeDimensionModes;
 }, selectorMemoizationOptions);
+/**
+ * Gets the initialZoomToLayerId flag from map state
+ */
+var getInitialZoomToLayerId = createSelector(getMapById, function (map) {
+  return map === null || map === void 0 ? void 0 : map.initialZoomToLayerId;
+}, selectorMemoizationOptions);
 
 var selectors$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -7371,6 +7518,7 @@ var selectors$1 = /*#__PURE__*/Object.freeze({
   getAllMapsByIds: getAllMapsByIds,
   getAllUniqueDimensions: getAllUniqueDimensions,
   getAnimationEndTime: getAnimationEndTime,
+  getAnimationLength: getAnimationLength,
   getAnimationList: getAnimationList,
   getAnimationListAsEpochTimes: getAnimationListAsEpochTimes,
   getAnimationRange: getAnimationRange,
@@ -7389,6 +7537,7 @@ var selectors$1 = /*#__PURE__*/Object.freeze({
   getFirstMap: getFirstMap,
   getFirstMapId: getFirstMapId,
   getHarmonieInitialProps: getHarmonieInitialProps,
+  getInitialZoomToLayerId: getInitialZoomToLayerId,
   getIsClockOptionsMenuVisible: getIsClockOptionsMenuVisible,
   getIsClockVisible: getIsClockVisible,
   getIsEnabledLayersForMapDimension: getIsEnabledLayersForMapDimension,
@@ -7941,16 +8090,22 @@ genericListener.startListening({
 });
 // Synchronize timeslider settings for actions 'centertime', 'span' and 'timestep'.
 genericListener.startListening({
-  matcher: isAnyOf(mapActions.setTimeSliderCenterTime, mapActions.setTimeSliderSpan, mapActions.setTimeStep, mapActions.setAnimationStartTime, mapActions.setAnimationEndTime, mapActions.setAnimationDelay, mapActions.mapStartAnimation),
+  matcher: isAnyOf(mapActions.setTimeSliderCenterTime, mapActions.setTimeSliderSpan, mapActions.setTimeStep, mapActions.setAnimationStartTime, mapActions.setAnimationEndTime, mapActions.setAnimationLength, mapActions.refreshAnimationRange, mapActions.setAnimationDelay, mapActions.mapStartAnimation),
   effect: function () {
     var _effect2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(_ref2, listenerApi) {
-      var payload, type, sourceId, newPayload, animationStartPayload, targets, groups;
+      var payload, type, sourceId, newPayload, _mapSelectors$getAnim, animationStartTime, animationEndTime, animationStartPayload, targets, groups;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.n) {
           case 0:
             payload = _ref2.payload, type = _ref2.type;
             listenerApi.cancelActiveListeners();
             sourceId = payload.mapId;
+            if (!((type === mapActions.setAnimationLength.type || type === mapActions.setAnimationStartTime.type || type === mapActions.setAnimationEndTime.type) && payload.skipSync)) {
+              _context2.n = 1;
+              break;
+            }
+            return _context2.a(2);
+          case 1:
             newPayload = {
               sourceId: sourceId,
               origin: 'timeslidersynclistener',
@@ -7963,6 +8118,11 @@ genericListener.startListening({
                 timeSliderAnimationDelay: type === mapActions.setAnimationDelay.type ? payload.animationDelay : undefined
               }
             };
+            if (type === mapActions.setAnimationLength.type || type === mapActions.refreshAnimationRange.type) {
+              _mapSelectors$getAnim = getAnimationRange(listenerApi.getState(), sourceId), animationStartTime = _mapSelectors$getAnim.animationStartTime, animationEndTime = _mapSelectors$getAnim.animationEndTime;
+              newPayload.value.timeSliderAnimationStartTime = animationStartTime;
+              newPayload.value.timeSliderAnimationEndTime = animationEndTime;
+            }
             if (type === mapActions.mapStartAnimation.type) {
               animationStartPayload = payload;
               if (animationStartPayload.start) {
@@ -7975,7 +8135,7 @@ genericListener.startListening({
             targets = getTargets(listenerApi.getState(), newPayload, SYNCGROUPS_TYPE_SETTIME);
             groups = getTargetGroups(listenerApi.getState(), newPayload, SYNCGROUPS_TYPE_SETTIME);
             listenerApi.dispatch(setTimeSync(newPayload, targets, groups));
-          case 1:
+          case 2:
             return _context2.a(2);
         }
       }, _callee2);
@@ -8286,6 +8446,41 @@ var setStep = function setStep(timerId, timerStep) {
 var getCurrentStep = function getCurrentStep(timerId) {
   return stepMap.get(timerId) || 0;
 };
+/**
+ * Re-anchors the step index to the frame closest to what's already showing.
+ * Without this, a range change while animating leaves the index pointing at
+ * the same position in the (now different) frame list, so playback silently
+ * jumps by however far the range moved instead of continuing smoothly.
+ * @param timerId
+ * @param listenerApi
+ */
+var preserveAnimationStep = function preserveAnimationStep(timerId, listenerApi) {
+  var _mapSelectors$getMapD;
+  var state = listenerApi.getState();
+  if (!isAnimating(state, timerId)) {
+    return;
+  }
+  var currentTime = (_mapSelectors$getMapD = getMapDimension(state, timerId, 'time')) === null || _mapSelectors$getMapD === void 0 ? void 0 : _mapSelectors$getMapD.currentValue;
+  var currentInstant = currentTime && dateUtils.parseISO(currentTime);
+  if (!currentInstant || !dateUtils.isValid(currentInstant)) {
+    return;
+  }
+  var animationList = getAnimationList(state, timerId).map(function (_ref) {
+    var value = _ref.value;
+    return value;
+  });
+  if (animationList.length === 0) {
+    return;
+  }
+  var currentUnix = dateUtils.unix(currentInstant);
+  var distances = animationList.map(function (value) {
+    return Math.abs(dateUtils.unix(dateUtils.parseISO(value)) - currentUnix);
+  });
+  var nearestStep = distances.reduce(function (closest, distance, index) {
+    return distance < distances[closest] ? index : closest;
+  }, 0);
+  setStep(timerId, nearestStep);
+};
 /**
  * Checks if the next step is available for all provided layers
  * @param reduxLayers
@@ -8343,72 +8538,66 @@ var isNextStepAvailable = function isNextStepAvailable(reduxLayers, nextTimeStri
  */
 var olMetronomeHandler = function olMetronomeHandler(timerIds, listenerApi) {
   var targetsWithUpdateValue = [];
-  var _iterator = _createForOfIteratorHelper(timerIds),
-    _step;
-  try {
-    var _loop = function _loop() {
-      var timerId = _step.value;
-      var animationListValuesNameAndValue = getAnimationList(listenerApi.getState(), timerId);
-      var animationListValues = animationListValuesNameAndValue.map(function (nameAndValue) {
-        return nameAndValue.value;
+  timerIds.forEach(function (timerId) {
+    var animationListValuesNameAndValue = getAnimationList(listenerApi.getState(), timerId);
+    var animationListValues = animationListValuesNameAndValue.map(function (nameAndValue) {
+      return nameAndValue.value;
+    });
+    if (animationListValues.length === 0) {
+      return;
+    }
+    var targets = getTargets(listenerApi.getState(), {
+      sourceId: timerId,
+      origin: timerId
+    }, SYNCGROUPS_TYPE_SETTIME);
+    if (targets.length === 0) {
+      // When there are no targets, default to one
+      targets.push({
+        targetId: timerId,
+        value: {
+          currentTime: ''
+        }
       });
-      var targets = getTargets(listenerApi.getState(), {
-        sourceId: timerId,
-        origin: timerId
-      }, SYNCGROUPS_TYPE_SETTIME);
-      if (targets.length === 0) {
-        // When there are no targets, default to one
-        targets.push({
-          targetId: timerId,
-          value: {
-            currentTime: ''
-          }
-        });
-      }
-      if (!targets.some(function (target) {
-        return target.targetId === timerId;
-      })) {
-        targets.push({
-          targetId: timerId,
-          value: {
-            currentTime: ''
-          }
-        });
-      }
-      var timerIsInDwell = handleTimerDwell(timerId, animationListValues.length);
-      // Collect all layers for this syncgroups target
-      var reduxLayers = [];
-      targets.forEach(function (target) {
-        reduxLayers.push.apply(reduxLayers, _toConsumableArray(getLayersByMapId(listenerApi.getState(), target.targetId).filter(function (layer) {
-          return layer.layerType === LayerType.mapLayer;
-        })));
+    }
+    if (!targets.some(function (target) {
+      return target.targetId === timerId;
+    })) {
+      targets.push({
+        targetId: timerId,
+        value: {
+          currentTime: ''
+        }
       });
-      var nextStep = getNextStep(timerId, animationListValues.length, 1);
-      var timerShouldStepForward = isNextStepAvailable(reduxLayers, animationListValues[nextStep]) && !timerIsInDwell;
-      // Determine the next step
-      var timerStep = timerShouldStepForward ? getNextStep(timerId, animationListValues.length) : getCurrentStep(timerId);
-      setStep(timerId, timerStep);
-      var updatedValue = animationListValues[timerStep];
-      targetsWithUpdateValue.push.apply(targetsWithUpdateValue, _toConsumableArray(targets.map(function (target) {
-        return _objectSpread2(_objectSpread2({}, target), {}, {
-          value: {
-            currentTime: updatedValue
-          }
-        });
+    }
+    var timerIsInDwell = handleTimerDwell(timerId, animationListValues.length);
+    // Collect all layers for this syncgroups target
+    var reduxLayers = [];
+    targets.forEach(function (target) {
+      reduxLayers.push.apply(reduxLayers, _toConsumableArray(getLayersByMapId(listenerApi.getState(), target.targetId).filter(function (layer) {
+        return layer.layerType === LayerType.mapLayer;
       })));
-      var speedDelay = getMapAnimationDelay(listenerApi.getState(), timerId);
-      var speed = 1000 / (speedDelay || 1);
-      metronome.setSpeed(timerId, speed);
-    };
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      _loop();
+    });
+    var nextStep = getNextStep(timerId, animationListValues.length, 1);
+    var timerShouldStepForward = isNextStepAvailable(reduxLayers, animationListValues[nextStep]) && !timerIsInDwell;
+    // Determine the next step
+    var timerStep = timerShouldStepForward ? getNextStep(timerId, animationListValues.length) : getCurrentStep(timerId);
+    if (timerStep < 0 || timerStep >= animationListValues.length) {
+      return;
     }
-    // Update all targets of all sync groups in one action.
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
+    setStep(timerId, timerStep);
+    var updatedValue = animationListValues[timerStep];
+    targetsWithUpdateValue.push.apply(targetsWithUpdateValue, _toConsumableArray(targets.map(function (target) {
+      return _objectSpread2(_objectSpread2({}, target), {}, {
+        value: {
+          currentTime: updatedValue
+        }
+      });
+    })));
+    var speedDelay = getMapAnimationDelay(listenerApi.getState(), timerId);
+    var speed = 1000 / (speedDelay || 1);
+    metronome.setSpeed(timerId, speed);
+  });
+  // Update all targets of all sync groups in one action.
   if (targetsWithUpdateValue.length > 0) {
     // This ensures the source value is stored in the syncgroup
     var metronomelistenersource = {
@@ -8471,6 +8660,7 @@ mapListener.startListening({
         mapId: mapId
       }));
     }
+    updateAnimationMode(mapId, listenerApi);
   }
 });
 // update layer, synced maps and animation on latest max time if autoupdating
@@ -8492,10 +8682,21 @@ mapListener.startListening({
       var newTimeDimension = dimensions.find(function (dimension) {
         return dimension.name === 'time';
       });
+      var hasReferenceTimeDimension = dimensions.some(function (dimension) {
+        return dimension.name === 'reference_time';
+      });
       var mapId = layer.mapId;
       if (!mapId) {
         return;
       }
+      if (hasReferenceTimeDimension) {
+        var _layerSelectors$getLa, _layerSelectors$getLa2;
+        var previousReferenceTime = (_layerSelectors$getLa = getLayerDimension(listenerApi.getOriginalState(), layerId, 'reference_time')) === null || _layerSelectors$getLa === void 0 ? void 0 : _layerSelectors$getLa.currentValue;
+        var referenceTime = (_layerSelectors$getLa2 = getLayerDimension(listenerApi.getState(), layerId, 'reference_time')) === null || _layerSelectors$getLa2 === void 0 ? void 0 : _layerSelectors$getLa2.currentValue;
+        if (referenceTime && referenceTime !== previousReferenceTime) {
+          updateReferenceTimeAnimationRange(mapId, layerId, referenceTime, listenerApi);
+        }
+      }
       listenerApi.dispatch(mapActions.mapUpdateAllMapDimensions({
         mapId: mapId,
         dimensions: getMapDimensionsFromLayers(listenerApi.getState(), mapId),
@@ -8559,9 +8760,16 @@ mapListener.startListening({
     }
   }
 });
+/** Auto follows the leading layer and the anchored modes follow the clock, so none may be shifted by layer updates. */
+var derivesOwnAnimationRange = function derivesOwnAnimationRange(animationLength) {
+  return !!animationLength && animationLength.mode !== AnimationLengthMode.Exact;
+};
 var updateAnimation = function updateAnimation(mapId, maxValue, listenerApi) {
   var shouldEndtimeOverride$1 = shouldEndtimeOverride(listenerApi.getState(), mapId);
-  if (shouldEndtimeOverride$1) {
+  var shiftsWithLayerUpdates = function shiftsWithLayerUpdates(id) {
+    return !derivesOwnAnimationRange(getAnimationLength(listenerApi.getState(), id));
+  };
+  if (shouldEndtimeOverride$1 || !shiftsWithLayerUpdates(mapId)) {
     return;
   }
   var animationStart = getAnimationStartTime(listenerApi.getState(), mapId);
@@ -8581,7 +8789,7 @@ var updateAnimation = function updateAnimation(mapId, maxValue, listenerApi) {
   var isSyncedMap = syncedMapIds.includes(mapId);
   var mapIdsToUpdate = isSyncedMap ? syncedMapIds : [mapId];
   // Update new animation times for the map or in case of syncgroup, all maps in the syncgroup
-  mapIdsToUpdate.forEach(function (id) {
+  mapIdsToUpdate.filter(shiftsWithLayerUpdates).forEach(function (id) {
     listenerApi.dispatch(mapActions.setAnimationEndTime({
       mapId: id,
       animationEndTime: newAnimationEndTime
@@ -8742,7 +8950,7 @@ mapListener.startListening({
   actionCreator: mapActions.setMapPreset,
   effect: function () {
     var _effect2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(_ref6, listenerApi) {
-      var payload, mapId, initialProps, mapPreset, _mapPreset$dimensions, layers, activeLayerId, autoTimeStepLayerId, autoUpdateLayerId, proj, shouldAutoUpdate, shouldAnimate, animationPayload, toggleTimestepAuto, showTimeSlider, displayMapPin, shouldShowZoomControls, shouldShowLegend, legendPosition, legendSize, shouldShowDockedLayerManager, shouldShowDataExplorer, dockedLayerManagerSize, dockedLayerManagerPosition, dockedLayerManagerDimensions, timeSliderSpan, toggleTimeSpanAuto, defaultOverlayer, isClockVisible, isClockOptionsMenuVisible, clockPosition, clockSize, _filterLayers, mapLayers, baseLayers, overLayers, _newLayerIds$layers$f, _newLayerIds$layers$f2, autoTimeStepLayerIdNew, autoUpdateLayerIdNew, onlyActiveLayerIdIsSet, newLayerIds, newAutoTimeStepLayerId, newAutoUpdateLayerId, customLayers, customBaseLayer, customOverLayer, baseLayersWithDefaultLayer, overLayersWithDefaultLayer, allBaseLayers, _overlayersFromStore$, overlayersFromStore, foundOverlayerId, checkIsprojectionSupported, animationLength, animationEndTime, shouldEndtimeOverride, interval, timeAlreadySet, endTime, startTime, centerTimeInSeconds, animationEnd, _startTime, duration, _animationEnd, animationStart, shouldOpenLegend, dockedLayerManagerType, fiveMinuteDelayForAnimation, _animationEnd2, _animationStart, _t;
+      var payload, mapId, initialProps, mapPreset, _mapPreset$dimensions, layers, activeLayerId, autoTimeStepLayerId, autoUpdateLayerId, proj, shouldAutoUpdate, shouldAnimate, animationPayload, toggleTimestepAuto, showTimeSlider, displayMapPin, shouldShowZoomControls, shouldShowLegend, legendPosition, legendSize, shouldShowDockedLayerManager, shouldShowDataExplorer, dockedLayerManagerSize, dockedLayerManagerPosition, dockedLayerManagerDimensions, timeSliderSpan, toggleTimeSpanAuto, defaultOverlayer, isClockVisible, isClockOptionsMenuVisible, clockPosition, clockSize, initialZoomToLayerId, _filterLayers, mapLayers, baseLayers, overLayers, pendingInitialZoomToLayerId, _newLayerIds$layers$f, _newLayerIds$layers$f2, autoTimeStepLayerIdNew, autoUpdateLayerIdNew, onlyActiveLayerIdIsSet, newLayerIds, newAutoTimeStepLayerId, newAutoUpdateLayerId, _newLayerIds$layers$i, initialZoomLayerIndex, customLayers, customBaseLayer, customOverLayer, baseLayersWithDefaultLayer, overLayersWithDefaultLayer, allBaseLayers, _overlayersFromStore$, overlayersFromStore, foundOverlayerId, checkIsprojectionSupported, layerId, animationDuration, animationLengthSetting, animationEndTime, shouldEndtimeOverride, interval, timeAlreadySet, mode, endTimeFromPreset, endTime, startTime, hasNoAnimationDetails, defaultAnimationLengthSetting, effectiveAnimationLengthSetting, animationLength, animationStartTime, _autoTimeStepLayerId, layerRefTimeDimension, referenceTimeFromLayer, anchorTime, resolvedRange, shouldOpenLegend, dockedLayerManagerType, fiveMinuteDelayForAnimation, animationEnd, animationStart, _t;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.p = _context2.n) {
           case 0:
@@ -8751,11 +8959,12 @@ mapListener.startListening({
             mapId = payload.mapId, initialProps = payload.initialProps;
             mapPreset = initialProps.mapPreset;
             if (!mapPreset) {
-              _context2.n = 6;
+              _context2.n = 9;
               break;
             }
-            layers = mapPreset.layers, activeLayerId = mapPreset.activeLayerId, autoTimeStepLayerId = mapPreset.autoTimeStepLayerId, autoUpdateLayerId = mapPreset.autoUpdateLayerId, proj = mapPreset.proj, shouldAutoUpdate = mapPreset.shouldAutoUpdate, shouldAnimate = mapPreset.shouldAnimate, animationPayload = mapPreset.animationPayload, toggleTimestepAuto = mapPreset.toggleTimestepAuto, showTimeSlider = mapPreset.showTimeSlider, displayMapPin = mapPreset.displayMapPin, shouldShowZoomControls = mapPreset.shouldShowZoomControls, shouldShowLegend = mapPreset.shouldShowLegend, legendPosition = mapPreset.legendPosition, legendSize = mapPreset.legendSize, shouldShowDockedLayerManager = mapPreset.shouldShowDockedLayerManager, shouldShowDataExplorer = mapPreset.shouldShowDataExplorer, dockedLayerManagerSize = mapPreset.dockedLayerManagerSize, dockedLayerManagerPosition = mapPreset.dockedLayerManagerPosition, dockedLayerManagerDimensions = mapPreset.dockedLayerManagerDimensions, timeSliderSpan = mapPreset.timeSliderSpan, toggleTimeSpanAuto = mapPreset.toggleTimeSpanAuto, defaultOverlayer = mapPreset.defaultOverlayer, isClockVisible = mapPreset.isClockVisible, isClockOptionsMenuVisible = mapPreset.isClockOptionsMenuVisible, clockPosition = mapPreset.clockPosition, clockSize = mapPreset.clockSize;
+            layers = mapPreset.layers, activeLayerId = mapPreset.activeLayerId, autoTimeStepLayerId = mapPreset.autoTimeStepLayerId, autoUpdateLayerId = mapPreset.autoUpdateLayerId, proj = mapPreset.proj, shouldAutoUpdate = mapPreset.shouldAutoUpdate, shouldAnimate = mapPreset.shouldAnimate, animationPayload = mapPreset.animationPayload, toggleTimestepAuto = mapPreset.toggleTimestepAuto, showTimeSlider = mapPreset.showTimeSlider, displayMapPin = mapPreset.displayMapPin, shouldShowZoomControls = mapPreset.shouldShowZoomControls, shouldShowLegend = mapPreset.shouldShowLegend, legendPosition = mapPreset.legendPosition, legendSize = mapPreset.legendSize, shouldShowDockedLayerManager = mapPreset.shouldShowDockedLayerManager, shouldShowDataExplorer = mapPreset.shouldShowDataExplorer, dockedLayerManagerSize = mapPreset.dockedLayerManagerSize, dockedLayerManagerPosition = mapPreset.dockedLayerManagerPosition, dockedLayerManagerDimensions = mapPreset.dockedLayerManagerDimensions, timeSliderSpan = mapPreset.timeSliderSpan, toggleTimeSpanAuto = mapPreset.toggleTimeSpanAuto, defaultOverlayer = mapPreset.defaultOverlayer, isClockVisible = mapPreset.isClockVisible, isClockOptionsMenuVisible = mapPreset.isClockOptionsMenuVisible, clockPosition = mapPreset.clockPosition, clockSize = mapPreset.clockSize, initialZoomToLayerId = mapPreset.initialZoomToLayerId;
             _filterLayers = filterLayers(layers), mapLayers = _filterLayers.mapLayers, baseLayers = _filterLayers.baseLayers, overLayers = _filterLayers.overLayers;
+            pendingInitialZoomToLayerId = null;
             if (layers) {
               //  make sure all layers have a unique id before going forward
               autoTimeStepLayerIdNew = autoTimeStepLayerId;
@@ -8780,6 +8989,12 @@ mapListener.startListening({
               newAutoUpdateLayerId = ((_newLayerIds$layers$f2 = newLayerIds.layers.find(function (layer) {
                 return layer.id === newLayerIds.autoUpdateLayerId;
               })) === null || _newLayerIds$layers$f2 === void 0 ? void 0 : _newLayerIds$layers$f2.id) || undefined;
+              if (initialZoomToLayerId) {
+                initialZoomLayerIndex = mapLayers.findIndex(function (layer) {
+                  return layer.id === initialZoomToLayerId;
+                });
+                pendingInitialZoomToLayerId = initialZoomLayerIndex >= 0 ? (_newLayerIds$layers$i = newLayerIds.layers[initialZoomLayerIndex]) === null || _newLayerIds$layers$i === void 0 ? void 0 : _newLayerIds$layers$i.id : undefined;
+              }
               listenerApi.dispatch(mapActions.setAutoLayerId({
                 mapId: mapId,
                 autoTimeStepLayerId: newAutoTimeStepLayerId,
@@ -8823,14 +9038,29 @@ mapListener.startListening({
             }
             throw new Error("Projection ".concat(proj.srs, " is not supported"));
           case 2:
+            listenerApi.dispatch(mapActions.setPendingInitialZoomToLayer({
+              mapId: mapId,
+              layerId: undefined
+            }));
             //  set bbox
             listenerApi.dispatch(mapActions.setBbox({
               mapId: mapId,
               bbox: proj.bbox,
               srs: proj.srs
             }));
+            _context2.n = 4;
+            break;
           case 3:
-            animationLength = animationPayload === null || animationPayload === void 0 ? void 0 : animationPayload.duration;
+            layerId = pendingInitialZoomToLayerId ||
+            // if not set in preset use first layer to determine initial bbox
+            getLayerIds(listenerApi.getState(), mapId).at(0);
+            listenerApi.dispatch(mapActions.setPendingInitialZoomToLayer({
+              mapId: mapId,
+              layerId: layerId
+            }));
+          case 4:
+            animationDuration = animationPayload === null || animationPayload === void 0 ? void 0 : animationPayload.duration;
+            animationLengthSetting = animationPayload === null || animationPayload === void 0 ? void 0 : animationPayload.animationLength;
             animationEndTime = (animationPayload === null || animationPayload === void 0 ? void 0 : animationPayload.endTime) && isAnimationEndTimeValid(animationPayload.endTime) && animationPayload.endTime;
             shouldEndtimeOverride = animationPayload ? animationPayload.shouldEndtimeOverride : false;
             if (shouldEndtimeOverride) {
@@ -8932,53 +9162,115 @@ mapListener.startListening({
             // If set, don't dispatch setTime action
             timeAlreadySet = (_mapPreset$dimensions = mapPreset.dimensions) === null || _mapPreset$dimensions === void 0 ? void 0 : _mapPreset$dimensions.find(function (dimension) {
               return dimension.name === 'time';
-            }); // sets animationEndTime by endTime of animationPayload
-            if (animationEndTime) {
-              endTime = animationEndTime.includes('NOW') || animationEndTime.includes('TODAY') ? dateUtils.convertNOWandTODAYFormatsToUTC(animationEndTime) : animationEndTime;
-              listenerApi.dispatch(mapActions.setAnimationEndTime({
-                mapId: mapId,
-                animationEndTime: handleDateUtilsISOString(endTime)
-              }));
-              startTime = handleDateUtilsISOString(dateUtils.sub(dateUtils.utc(endTime), {
-                minutes: 5 * 60 // set to default of 5 hours
-              }).toISOString());
-              listenerApi.dispatch(mapActions.setAnimationStartTime({
-                mapId: mapId,
-                animationStartTime: startTime
-              }));
-              if (timeAlreadySet === undefined) {
-                listenerApi.dispatch(genericActions.setTime({
-                  origin: 'map/listener.ts, setMapPreset',
-                  sourceId: mapId,
-                  value: {
-                    currentTime: startTime
-                  }
-                }));
+            });
+            if (!(animationEndTime || animationDuration)) {
+              _context2.n = 6;
+              break;
+            }
+            // set animationEndTime by endTime of animationPayload
+            // set animationStartTime by endTime minus duration of animationPayload
+            mode = function () {
+              if (animationEndTime) {
+                if (animationEndTime.includes('TODAY')) {
+                  return AnimationLengthMode.RecurringPeriod;
+                }
+                if (animationEndTime.includes('NOW')) {
+                  return AnimationLengthMode.Now;
+                }
+                return AnimationLengthMode.Exact;
               }
-              centerTimeInSeconds = new Date(handleDateUtilsISOString(endTime)).getTime();
-              listenerApi.dispatch(mapActions.setTimeSliderCenterTime({
-                mapId: mapId,
-                timeSliderCenterTime: centerTimeInSeconds
-              }));
+              return AnimationLengthMode.Now;
+            }();
+            endTimeFromPreset = animationEndTime && (animationEndTime !== null && animationEndTime !== void 0 && animationEndTime.includes('NOW') || animationEndTime !== null && animationEndTime !== void 0 && animationEndTime.includes('TODAY')) ? handleDateUtilsISOString(dateUtils.convertNOWandTODAYFormatsToUTC(animationEndTime)) : animationEndTime;
+            endTime = endTimeFromPreset || getAnimationEndTime(listenerApi.getState(), mapId);
+            if (endTime) {
+              _context2.n = 5;
+              break;
             }
-            // sets animationStartTime by duration of animationPayload
-            if (animationLength) {
-              animationEnd = getAnimationEndTime(listenerApi.getState(), mapId);
-              _startTime = handleDateUtilsISOString(dateUtils.sub(dateUtils.utc(animationEnd), {
-                minutes: animationLength
-              }).toISOString());
-              listenerApi.dispatch(mapActions.setAnimationStartTime({
-                mapId: mapId,
-                animationStartTime: _startTime
+            return _context2.a(2);
+          case 5:
+            // startTime always relative to endTime
+            startTime = handleDateUtilsISOString(dateUtils.sub(dateUtils.utc(endTime), {
+              minutes: animationDuration || 5 * 60 // default 5 hours
+            }).toISOString());
+            listenerApi.dispatch(mapActions.setAnimationLength({
+              mapId: mapId,
+              animationLength: getAnimationLengthFromRange(mode, {
+                animationStartTime: startTime,
+                animationEndTime: endTime
+              }),
+              animationStartTime: startTime,
+              animationEndTime: endTime,
+              skipSync: !!animationLengthSetting
+            }));
+            if (timeAlreadySet === undefined) {
+              listenerApi.dispatch(genericActions.setTime({
+                origin: 'map/listener.ts, setMapPreset',
+                sourceId: mapId,
+                value: {
+                  currentTime: startTime
+                }
               }));
-              if (timeAlreadySet === undefined) {
-                listenerApi.dispatch(genericActions.setTime({
-                  origin: 'map/listener.ts, setAnimationStartTime',
-                  sourceId: mapId,
-                  value: {
-                    currentTime: _startTime
-                  }
-                }));
+            }
+          case 6:
+            // restores how the animation length is determined, overriding duration and endTime
+            // if preset has no animation details at all: follow the auto-time-step layer if there is one, otherwise Now
+            hasNoAnimationDetails = !animationLengthSetting && !animationDuration && !animationEndTime;
+            defaultAnimationLengthSetting = getAutoTimeStepLayerId(listenerApi.getState(), mapId) ? {
+              mode: AnimationLengthMode.Auto
+            } : {
+              mode: AnimationLengthMode.Now,
+              now: defaultOffsetSelections
+            };
+            effectiveAnimationLengthSetting = function () {
+              if (animationLengthSetting) {
+                return withModeSelections(animationLengthSetting);
+              }
+              if (hasNoAnimationDetails) {
+                return defaultAnimationLengthSetting;
+              }
+              return undefined;
+            }();
+            if (effectiveAnimationLengthSetting) {
+              animationLength = effectiveAnimationLengthSetting;
+              if (animationLength.mode === AnimationLengthMode.Exact) {
+                listenerApi.dispatch(mapActions.setAnimationLength(_objectSpread2(_objectSpread2({
+                  mapId: mapId,
+                  animationLength: animationLength
+                }, animationLength.exact), {}, {
+                  skipSync: true
+                })));
+                animationStartTime = animationLength.exact.animationStartTime;
+                if (timeAlreadySet === undefined) {
+                  listenerApi.dispatch(genericActions.setTime({
+                    origin: 'map/listener.ts, setAnimationLength',
+                    sourceId: mapId,
+                    value: {
+                      currentTime: animationStartTime
+                    }
+                  }));
+                }
+              } else {
+                _autoTimeStepLayerId = getAutoTimeStepLayerId(listenerApi.getState(), mapId);
+                layerRefTimeDimension = getLayerDimension(listenerApi.getState(), _autoTimeStepLayerId, 'reference_time');
+                referenceTimeFromLayer = (layerRefTimeDimension === null || layerRefTimeDimension === void 0 ? void 0 : layerRefTimeDimension.currentValue) || undefined;
+                anchorTime = dateUtils.utc(referenceTimeFromLayer);
+                resolvedRange = isAnchoredMode(animationLength.mode) && isValidAnimationLength(animationLength, anchorTime) ? resolveAnimationRange(animationLength, anchorTime) : undefined;
+                listenerApi.dispatch(mapActions.setAnimationLength(_objectSpread2(_objectSpread2({
+                  mapId: mapId,
+                  animationLength: animationLength
+                }, resolvedRange), {}, {
+                  skipSync: true
+                })));
+                if (resolvedRange && timeAlreadySet === undefined) {
+                  listenerApi.dispatch(genericActions.setTime({
+                    origin: 'map/listener.ts, setAnimationLength',
+                    sourceId: mapId,
+                    value: {
+                      currentTime: resolvedRange.animationStartTime
+                    }
+                  }));
+                }
               }
             }
             // sets animationDelay by speed of animationPayload
@@ -8990,15 +9282,8 @@ mapListener.startListening({
             }
             //  turn animation on
             if (shouldAnimate === true) {
-              duration = animationPayload !== null && animationPayload !== void 0 && animationPayload.duration ? animationPayload.duration : 5 * 60; //  set to default of 5 hours
-              _animationEnd = shouldEndtimeOverride && animationEndTime ? getAnimationEndTime(listenerApi.getState(), mapId) : dateUtils.dateToString(dateUtils.utc(), dateFormat);
-              animationStart = shouldEndtimeOverride && animationLength ? getAnimationStartTime(listenerApi.getState(), mapId) : dateUtils.dateToString(dateUtils.sub(dateUtils.utc(_animationEnd), {
-                minutes: duration
-              }), dateFormat);
               listenerApi.dispatch(mapActions.mapStartAnimation({
                 mapId: mapId,
-                start: animationStart,
-                end: _animationEnd,
                 interval: interval || defaultTimeStep
               }));
               //  If animation interval set, set the timestep auto property to false
@@ -9062,36 +9347,36 @@ mapListener.startListening({
                 dockedLayerManagerDimensions: dockedLayerManagerDimensions
               }));
             }
-          case 4:
-            if (!(animationEndTime && (shouldEndtimeOverride || !(shouldAutoUpdate || shouldAnimate)))) {
-              _context2.n = 6;
+          case 7:
+            if (!(animationEndTime && !derivesOwnAnimationRange(animationLengthSetting) && (shouldEndtimeOverride || !(shouldAutoUpdate || shouldAnimate)))) {
+              _context2.n = 9;
               break;
             }
             fiveMinuteDelayForAnimation = 1000 * 60 * 5; // eslint-disable-next-line no-await-in-loop
-            _context2.n = 5;
+            _context2.n = 8;
             return listenerApi.delay(fiveMinuteDelayForAnimation);
-          case 5:
-            _animationEnd2 = getAnimationEndTime(listenerApi.getState(), mapId);
+          case 8:
+            animationEnd = getAnimationEndTime(listenerApi.getState(), mapId);
             listenerApi.dispatch(mapActions.setAnimationEndTime({
               mapId: mapId,
-              animationEndTime: dateUtils.add(dateUtils.utc(_animationEnd2), {
+              animationEndTime: dateUtils.add(dateUtils.utc(animationEnd), {
                 minutes: 5
               }).toISOString()
             }));
-            _animationStart = getAnimationStartTime(listenerApi.getState(), mapId);
+            animationStart = getAnimationStartTime(listenerApi.getState(), mapId);
             listenerApi.dispatch(mapActions.setAnimationStartTime({
               mapId: mapId,
-              animationStartTime: dateUtils.add(dateUtils.utc(_animationStart), {
+              animationStartTime: dateUtils.add(dateUtils.utc(animationStart), {
                 minutes: 5
               }).toISOString()
             }));
-            _context2.n = 4;
+            _context2.n = 7;
             break;
-          case 6:
-            _context2.n = 8;
+          case 9:
+            _context2.n = 11;
             break;
-          case 7:
-            _context2.p = 7;
+          case 10:
+            _context2.p = 10;
             _t = _context2.v;
             if (_t instanceof Error) {
               listenerApi.dispatch(mapActions.setMapPresetError({
@@ -9099,10 +9384,10 @@ mapListener.startListening({
                 error: _t.message
               }));
             }
-          case 8:
+          case 11:
             return _context2.a(2);
         }
-      }, _callee2, null, [[1, 7]]);
+      }, _callee2, null, [[1, 10]]);
     }));
     function effect(_x3, _x4) {
       return _effect2.apply(this, arguments);
@@ -9110,11 +9395,95 @@ mapListener.startListening({
     return effect;
   }()
 });
+/**
+ * Re-resolving on a short interval keeps a range that follows the clock correct without
+ * tracking what it depends on: Now slides every tick, a recurring period only rolls at
+ * midnight UTC, and a tick that resolves an unchanged range leaves the state untouched.
+ */
+var ANIMATION_RANGE_REFRESH_INTERVAL = 1000 * 60 * 5;
+/* Newest loop per map wins; older loops see a stale token and exit. */
+var animationRangeRefreshTokens = new Map();
+mapListener.startListening({
+  actionCreator: mapActions.setAnimationLength,
+  effect: function () {
+    var _effect3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(_ref7, listenerApi) {
+      var payload, mapId, refreshToken, isNewestRefreshLoop, getRefreshableAnimationLength, animationLength;
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.n) {
+          case 0:
+            payload = _ref7.payload;
+            mapId = payload.mapId;
+            if (isAnimating(listenerApi.getState(), mapId)) {
+              setStep(mapId, -1);
+            }
+            refreshToken = Symbol(mapId);
+            animationRangeRefreshTokens.set(mapId, refreshToken);
+            isNewestRefreshLoop = function isNewestRefreshLoop() {
+              return animationRangeRefreshTokens.get(mapId) === refreshToken;
+            };
+            getRefreshableAnimationLength = function getRefreshableAnimationLength() {
+              var animationLength = getAnimationLength(listenerApi.getState(), mapId);
+              var timeStep = getMapTimeStep(listenerApi.getState(), mapId);
+              return isAnchoredMode(animationLength === null || animationLength === void 0 ? void 0 : animationLength.mode) && animationLength && isValidAnimationLength(animationLength) && isWithinAnimationStepLimit(animationLength, timeStep) ? animationLength : undefined;
+            };
+          case 1:
+            if (!(isNewestRefreshLoop() && getRefreshableAnimationLength())) {
+              _context3.n = 4;
+              break;
+            }
+            _context3.n = 2;
+            return listenerApi.delay(ANIMATION_RANGE_REFRESH_INTERVAL);
+          case 2:
+            animationLength = getRefreshableAnimationLength();
+            if (!(!isNewestRefreshLoop() || !animationLength)) {
+              _context3.n = 3;
+              break;
+            }
+            return _context3.a(2);
+          case 3:
+            listenerApi.dispatch(mapActions.refreshAnimationRange(_objectSpread2({
+              mapId: mapId
+            }, resolveAnimationRange(animationLength))));
+            _context3.n = 1;
+            break;
+          case 4:
+            return _context3.a(2);
+        }
+      }, _callee3);
+    }));
+    function effect(_x5, _x6) {
+      return _effect3.apply(this, arguments);
+    }
+    return effect;
+  }()
+});
+mapListener.startListening({
+  actionCreator: mapActions.setAnimationStartTime,
+  effect: function effect(_ref8, listenerApi) {
+    var payload = _ref8.payload;
+    preserveAnimationStep(payload.mapId, listenerApi);
+  }
+});
+mapListener.startListening({
+  actionCreator: mapActions.setAnimationEndTime,
+  effect: function effect(_ref9, listenerApi) {
+    var payload = _ref9.payload;
+    preserveAnimationStep(payload.mapId, listenerApi);
+  }
+});
+mapListener.startListening({
+  actionCreator: mapActions.refreshAnimationRange,
+  effect: function effect(_ref0, listenerApi) {
+    var payload = _ref0.payload;
+    preserveAnimationStep(payload.mapId, listenerApi);
+  }
+});
 mapListener.startListening({
   actionCreator: mapActions.unregisterMap,
-  effect: function effect(_ref7, listenerApi) {
-    var payload = _ref7.payload;
+  effect: function effect(_ref1, listenerApi) {
+    var payload = _ref1.payload;
     var mapId = payload.mapId;
+    animationRangeRefreshTokens["delete"](mapId);
     var layerList = getLayersByMapId(listenerApi.getState(), mapId);
     metronome.unregister(mapId);
     layerList.map(function (layer) {
@@ -9131,8 +9500,8 @@ mapListener.startListening({
 });
 mapListener.startListening({
   actionCreator: mapActions.setStepBackwardOrForward,
-  effect: function effect(_ref8, listenerApi) {
-    var payload = _ref8.payload;
+  effect: function effect(_ref10, listenerApi) {
+    var payload = _ref10.payload;
     var mapId = payload.mapId,
       isForwardStep = payload.isForwardStep;
     // timeStep is stored in minutes
@@ -9184,6 +9553,77 @@ mapListener.startListening({
     }
   }
 });
+var updateReferenceTimeAnimationRange = function updateReferenceTimeAnimationRange(mapId, layerId, referenceTime, listenerApi) {
+  var animationLength = getAnimationLength(listenerApi.getState(), mapId);
+  var autoTimeStepLayerId = getAutoTimeStepLayerId(listenerApi.getState(), mapId);
+  if (autoTimeStepLayerId !== layerId || (animationLength === null || animationLength === void 0 ? void 0 : animationLength.mode) !== AnimationLengthMode.ReferenceTime) {
+    return;
+  }
+  var anchorTime = dateUtils.utc(referenceTime);
+  var resolvedRange = resolveAnimationRange(animationLength, anchorTime);
+  listenerApi.dispatch(mapActions.setAnimationLength(_objectSpread2({
+    mapId: mapId,
+    animationLength: animationLength
+  }, resolvedRange)));
+};
+mapListener.startListening({
+  actionCreator: layerActions.layerChangeDimension,
+  effect: function effect(_ref11, listenerApi) {
+    var payload = _ref11.payload;
+    var mapId = payload.mapId,
+      layerId = payload.layerId,
+      dimension = payload.dimension;
+    if (!mapId || dimension.name !== 'reference_time') {
+      return;
+    }
+    updateReferenceTimeAnimationRange(mapId, layerId, dimension.currentValue, listenerApi);
+  }
+});
+var updateAnimationMode = function updateAnimationMode(mapId, listenerApi) {
+  var _autoTimeStepLayer$di;
+  var previousAutoTimeStepLayerId = getAutoTimeStepLayerId(listenerApi.getOriginalState(), mapId);
+  var autoTimeStepLayerId = getAutoTimeStepLayerId(listenerApi.getState(), mapId);
+  var animationLength = getAnimationLength(listenerApi.getState(), mapId);
+  if (previousAutoTimeStepLayerId === autoTimeStepLayerId || (animationLength === null || animationLength === void 0 ? void 0 : animationLength.mode) !== AnimationLengthMode.ReferenceTime && (animationLength === null || animationLength === void 0 ? void 0 : animationLength.mode) !== AnimationLengthMode.Auto) {
+    return;
+  }
+  var autoTimeStepLayer = getLayerById(listenerApi.getState(), autoTimeStepLayerId);
+  var referenceTimeDimension = autoTimeStepLayer === null || autoTimeStepLayer === void 0 || (_autoTimeStepLayer$di = autoTimeStepLayer.dimensions) === null || _autoTimeStepLayer$di === void 0 ? void 0 : _autoTimeStepLayer$di.find(function (dimension) {
+    return dimension.name === 'reference_time';
+  });
+  if (autoTimeStepLayerId && referenceTimeDimension) {
+    listenerApi.dispatch(mapActions.setAnimationLength(_objectSpread2({
+      mapId: mapId,
+      animationLength: animationLength
+    }, resolveAnimationRange(animationLength, dateUtils.utc(referenceTimeDimension.currentValue)))));
+    return;
+  }
+  var nextAnimationLength = autoTimeStepLayerId ? {
+    mode: AnimationLengthMode.Auto
+  } : {
+    mode: AnimationLengthMode.Now,
+    now: defaultOffsetSelections
+  };
+  var resolvedRange = nextAnimationLength.mode === AnimationLengthMode.Now && isValidAnimationLength(nextAnimationLength) ? resolveAnimationRange(nextAnimationLength) : undefined;
+  listenerApi.dispatch(mapActions.setAnimationLength(_objectSpread2({
+    mapId: mapId,
+    animationLength: nextAnimationLength
+  }, resolvedRange)));
+};
+mapListener.startListening({
+  actionCreator: mapActions.setAutoLayerId,
+  effect: function effect(_ref12, listenerApi) {
+    var mapId = _ref12.payload.mapId;
+    updateAnimationMode(mapId, listenerApi);
+  }
+});
+mapListener.startListening({
+  actionCreator: mapActions.setAutoTimestepLayerId,
+  effect: function effect(_ref13, listenerApi) {
+    var mapId = _ref13.payload.mapId;
+    updateAnimationMode(mapId, listenerApi);
+  }
+});
 
 var copyView = function copyView(view) {
   return new View({