@opengeoweb/store 19.6.0 → 19.6.1-nightly-20260912

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, roundWithTimeStep, isValidAnimationLength, resolveNowAnimationRange, 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) || !(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$geojson3 = currentLayer.geojson) !== null && _currentLayer$geojson3 !== void 0 && _currentLayer$geojson3.features.length)) {
+      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 = {
@@ -2468,7 +2529,9 @@ 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
+      });
     },
     setAnimationEndTime: function setAnimationEndTime(draft, action) {
       var _action$payload7 = action.payload,
@@ -2478,23 +2541,53 @@ 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
+      });
     },
-    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) {
+    refreshNowAnimationRange: function refreshNowAnimationRange(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 +2598,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 +2619,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 +2629,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 +2639,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 +2649,169 @@ 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 = _objectSpread2(_objectSpread2({}, draft.byId[mapId].animationLength), {}, {
+        mode: autoAnimationLength ? AnimationLengthMode.Auto : AnimationLengthMode.Exact
+      });
     },
     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 +2822,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 +2846,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 +2863,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 +2885,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 +2905,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 +2938,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 +2970,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 +2998,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 +3011,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 = [];
@@ -2971,9 +3076,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 +3110,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 +3134,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 +6901,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 +7149,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 +7166,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 +7188,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 +7429,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 +7438,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 +7482,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 +7496,7 @@ var selectors$1 = /*#__PURE__*/Object.freeze({
   getAllMapsByIds: getAllMapsByIds,
   getAllUniqueDimensions: getAllUniqueDimensions,
   getAnimationEndTime: getAnimationEndTime,
+  getAnimationLength: getAnimationLength,
   getAnimationList: getAnimationList,
   getAnimationListAsEpochTimes: getAnimationListAsEpochTimes,
   getAnimationRange: getAnimationRange,
@@ -7389,6 +7515,7 @@ var selectors$1 = /*#__PURE__*/Object.freeze({
   getFirstMap: getFirstMap,
   getFirstMapId: getFirstMapId,
   getHarmonieInitialProps: getHarmonieInitialProps,
+  getInitialZoomToLayerId: getInitialZoomToLayerId,
   getIsClockOptionsMenuVisible: getIsClockOptionsMenuVisible,
   getIsClockVisible: getIsClockVisible,
   getIsEnabledLayersForMapDimension: getIsEnabledLayersForMapDimension,
@@ -8559,9 +8686,16 @@ mapListener.startListening({
     }
   }
 });
+/** Auto follows the leading layer and Now follows the clock, so neither 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 +8715,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 +8876,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, animationLength, animationLengthSetting, animationEndTime, shouldEndtimeOverride, interval, timeAlreadySet, endTime, startTime, centerTimeInSeconds, animationEnd, _startTime, animationStartTime, _animationEndTime, resolvedRange, duration, _animationEnd, animationStart, shouldOpenLegend, dockedLayerManagerType, fiveMinuteDelayForAnimation, _animationEnd2, _animationStart, _t;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.p = _context2.n) {
           case 0:
@@ -8751,11 +8885,12 @@ mapListener.startListening({
             mapId = payload.mapId, initialProps = payload.initialProps;
             mapPreset = initialProps.mapPreset;
             if (!mapPreset) {
-              _context2.n = 6;
+              _context2.n = 7;
               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 +8915,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 +8964,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:
+            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:
             animationLength = 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) {
@@ -8981,6 +9137,34 @@ mapListener.startListening({
                 }));
               }
             }
+            // restores how the animation length is determined, overriding duration and endTime
+            if (animationLengthSetting) {
+              if (animationLengthSetting.mode === AnimationLengthMode.Exact) {
+                animationStartTime = animationLengthSetting.animationStartTime, _animationEndTime = animationLengthSetting.animationEndTime;
+                listenerApi.dispatch(mapActions.setAnimationLength({
+                  mapId: mapId,
+                  animationLength: animationLengthSetting,
+                  animationStartTime: animationStartTime,
+                  animationEndTime: _animationEndTime
+                }));
+              }
+              if (animationLengthSetting.mode === AnimationLengthMode.Now) {
+                resolvedRange = isValidAnimationLength(animationLengthSetting) ? resolveNowAnimationRange(animationLengthSetting) : undefined;
+                listenerApi.dispatch(mapActions.setAnimationLength(_objectSpread2({
+                  mapId: mapId,
+                  animationLength: animationLengthSetting
+                }, resolvedRange)));
+                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
             if (animationPayload !== null && animationPayload !== void 0 && animationPayload.speed) {
               listenerApi.dispatch(mapActions.setAnimationDelay({
@@ -9062,15 +9246,15 @@ mapListener.startListening({
                 dockedLayerManagerDimensions: dockedLayerManagerDimensions
               }));
             }
-          case 4:
-            if (!(animationEndTime && (shouldEndtimeOverride || !(shouldAutoUpdate || shouldAnimate)))) {
-              _context2.n = 6;
+          case 5:
+            if (!(animationEndTime && !derivesOwnAnimationRange(animationLengthSetting) && (shouldEndtimeOverride || !(shouldAutoUpdate || shouldAnimate)))) {
+              _context2.n = 7;
               break;
             }
             fiveMinuteDelayForAnimation = 1000 * 60 * 5; // eslint-disable-next-line no-await-in-loop
-            _context2.n = 5;
+            _context2.n = 6;
             return listenerApi.delay(fiveMinuteDelayForAnimation);
-          case 5:
+          case 6:
             _animationEnd2 = getAnimationEndTime(listenerApi.getState(), mapId);
             listenerApi.dispatch(mapActions.setAnimationEndTime({
               mapId: mapId,
@@ -9085,13 +9269,13 @@ mapListener.startListening({
                 minutes: 5
               }).toISOString()
             }));
-            _context2.n = 4;
-            break;
-          case 6:
-            _context2.n = 8;
+            _context2.n = 5;
             break;
           case 7:
-            _context2.p = 7;
+            _context2.n = 9;
+            break;
+          case 8:
+            _context2.p = 8;
             _t = _context2.v;
             if (_t instanceof Error) {
               listenerApi.dispatch(mapActions.setMapPresetError({
@@ -9099,10 +9283,10 @@ mapListener.startListening({
                 error: _t.message
               }));
             }
-          case 8:
+          case 9:
             return _context2.a(2);
         }
-      }, _callee2, null, [[1, 7]]);
+      }, _callee2, null, [[1, 8]]);
     }));
     function effect(_x3, _x4) {
       return _effect2.apply(this, arguments);
@@ -9110,11 +9294,66 @@ mapListener.startListening({
     return effect;
   }()
 });
+var NOW_ANIMATION_REFRESH_INTERVAL = 1000 * 60 * 5;
+/* Newest loop per map wins; older loops see a stale token and exit. */
+var nowAnimationRefreshTokens = new Map();
+mapListener.startListening({
+  actionCreator: mapActions.setAnimationLength,
+  effect: function () {
+    var _effect3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(_ref7, listenerApi) {
+      var payload, mapId, refreshToken, isNewestRefreshLoop, getClockFollowingLength, animationLength;
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.n) {
+          case 0:
+            payload = _ref7.payload;
+            mapId = payload.mapId;
+            refreshToken = Symbol(mapId);
+            nowAnimationRefreshTokens.set(mapId, refreshToken);
+            isNewestRefreshLoop = function isNewestRefreshLoop() {
+              return nowAnimationRefreshTokens.get(mapId) === refreshToken;
+            };
+            getClockFollowingLength = function getClockFollowingLength() {
+              var animationLength = getAnimationLength(listenerApi.getState(), mapId);
+              var timeStep = getMapTimeStep(listenerApi.getState(), mapId);
+              return (animationLength === null || animationLength === void 0 ? void 0 : animationLength.mode) === AnimationLengthMode.Now && isValidAnimationLength(animationLength) && isWithinAnimationStepLimit(animationLength, timeStep) ? animationLength : undefined;
+            };
+          case 1:
+            if (!(isNewestRefreshLoop() && getClockFollowingLength())) {
+              _context3.n = 4;
+              break;
+            }
+            _context3.n = 2;
+            return listenerApi.delay(NOW_ANIMATION_REFRESH_INTERVAL);
+          case 2:
+            animationLength = getClockFollowingLength();
+            if (!(!isNewestRefreshLoop() || !animationLength)) {
+              _context3.n = 3;
+              break;
+            }
+            return _context3.a(2);
+          case 3:
+            listenerApi.dispatch(mapActions.refreshNowAnimationRange(_objectSpread2({
+              mapId: mapId
+            }, resolveNowAnimationRange(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.unregisterMap,
-  effect: function effect(_ref7, listenerApi) {
-    var payload = _ref7.payload;
+  effect: function effect(_ref8, listenerApi) {
+    var payload = _ref8.payload;
     var mapId = payload.mapId;
+    nowAnimationRefreshTokens["delete"](mapId);
     var layerList = getLayersByMapId(listenerApi.getState(), mapId);
     metronome.unregister(mapId);
     layerList.map(function (layer) {
@@ -9131,8 +9370,8 @@ mapListener.startListening({
 });
 mapListener.startListening({
   actionCreator: mapActions.setStepBackwardOrForward,
-  effect: function effect(_ref8, listenerApi) {
-    var payload = _ref8.payload;
+  effect: function effect(_ref9, listenerApi) {
+    var payload = _ref9.payload;
     var mapId = payload.mapId,
       isForwardStep = payload.isForwardStep;
     // timeStep is stored in minutes