npm - @opengeoweb/core - Versions diffs - 4.6.1 → 4.7.0 - Mend

@opengeoweb/core 4.6.1 → 4.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/index.esm.js CHANGED Viewed

@@ -370,6 +370,13 @@ var LayerActionOrigin;
   LayerActionOrigin["unregisterMapSaga"] = "unregisterMapSaga";
 })(LayerActionOrigin || (LayerActionOrigin = {}));
+var types$3 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  get LayerType () { return LayerType; },
+  get LayerStatus () { return LayerStatus; },
+  get LayerActionOrigin () { return LayerActionOrigin; }
+});
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -740,6 +747,14 @@ var getDataLimitsFromLayers = function getDataLimitsFromLayers(layers) {
    */
   [2147483647, 0]);
 };
+var getNextTimeStepvalue = function getNextTimeStepvalue(value, max) {
+  var newValue = value + 1;
+  return newValue > max ? max : newValue;
+};
+var getPreviousTimeStepvalue = function getPreviousTimeStepvalue(value, min) {
+  var newValue = value - 1;
+  return newValue < min ? min : newValue;
+};
 var setPreviousTimeStep = function setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate) {
   var prevTimeStep = moment.utc(curTime).subtract(timeStep, 'm').toISOString();
@@ -766,43 +781,39 @@ var setNextTimeStep = function setNextTimeStep(timeStep, curTime, dataEndTime, o
   onsetNewDateDebounced(nextTimeStep, onSetNewDate);
 };
-var getTimeStepFromDataInterval = function getTimeStepFromDataInterval(timeInterval) {
-  switch (timeInterval.isRegularInterval) {
-    case false:
-      switch (timeInterval.year) {
-        case 0:
-          // month
-          return 30 * 24 * 60;
-        default:
-          return timeInterval.year * 365 * 24 * 60;
-      }
+var getValueFromKeyboardEvent = function getValueFromKeyboardEvent(event, value, min, max) {
+  var supportFourDirectionNavigation = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-    case true:
-      if (timeInterval.day !== 0) {
-        return timeInterval.day * 24 * 60;
-      }
-      if (timeInterval.hour !== 0) {
-        return timeInterval.hour * 60;
-      }
+  if (!supportFourDirectionNavigation) {
+    if (event.ctrlKey || event.metaKey) {
+      switch (event.key) {
+        case 'ArrowDown':
+          return getPreviousTimeStepvalue(value, min);
-      if (timeInterval.minute !== 0) {
-        return timeInterval.minute;
-      }
+        case 'ArrowUp':
+          return getNextTimeStepvalue(value, max);
-      if (timeInterval.second !== 0) {
-        return timeInterval.second / 60.0;
+        default:
+          return null;
       }
+    }
+  } else {
+    // currently supportFourDirectionNavigation (left/right/up/down) is only used in horizontal slider TimeSliderScaleSlider
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowLeft':
+        return getPreviousTimeStepvalue(value, min);
-      return 5;
+      case 'ArrowUp':
+      case 'ArrowRight':
+        return getNextTimeStepvalue(value, max);
-    default:
-      return 5;
+      default:
+        return null;
+    }
   }
-};
-var getActiveLayerTimeStep = function getActiveLayerTimeStep(timeDimension) {
-  return (timeDimension === null || timeDimension === void 0 ? void 0 : timeDimension.timeInterval) ? getTimeStepFromDataInterval(timeDimension.timeInterval) : null;
+  return null;
 };
 /**
  * This function calculates a suitable secondsPerpx value,
@@ -849,11 +860,38 @@ var scaleToSecondsPerPx = _toConsumableArray(secondsPerPxToScale.entries()).redu
   return Object.assign(Object.assign({}, acc), _defineProperty({}, v, Number(k)));
 }, {});
+/**
+ * This function creates and returns an array where there is secondsPerPx
+ * number of the data set added for a data scale (dataScaleToSecondsPerPx)
+ * to secondsPerPxToScale.
+ * @param dataScaleToSecondsPerPx
+ * @returns an array containing secondsPerPx numbers.
+ * The secondsPerPx number for a data scale is included
+ * contrary to secondsPerPxToScale.
+ */
+var secondsPerPxValues = function secondsPerPxValues(dataScaleToSecondsPerPx) {
+  var sortedSecondsPerPx = _toConsumableArray(secondsPerPxToScale).map(function (value) {
+    return Number(value[0]);
+  });
+  var full = [].concat(_toConsumableArray(sortedSecondsPerPx), [dataScaleToSecondsPerPx]);
+  return full;
+};
 var defaultDataScaleToSecondsPerPx = 43200;
 var getNewCenterOfFixedPointZoom = function getNewCenterOfFixedPointZoom(fixedTimePoint, oldSecondsPerPx, newSecondsPerPx, oldCenterTime) {
   var centerToFixedPointPx = (fixedTimePoint - oldCenterTime) / oldSecondsPerPx;
   return fixedTimePoint - centerToFixedPointPx * newSecondsPerPx;
 };
+/**
+ * Move the time slider such that a given time point (timePoint)
+ * is at a given pixel width (timePointPx).
+ * @returns a new center time for the resulting position
+ */
+var moveRelativeToTimePoint = function moveRelativeToTimePoint(timePoint, timePointPx, secondsPerPx, canvasWidth) {
+  return timePoint - secondsPerPx * (timePointPx - canvasWidth / 2);
+};
 /** This reusable custom hook tells whether given pointer event targets current canvas node.
  * Example:
  *
@@ -891,6 +929,10 @@ var needleGeom = {
   cornerRadius: 5,
   lineWidth: 1
 };
+var AUTO_MOVE_AREA_PADDING = 1;
+var getAutoMoveAreaWidth = function getAutoMoveAreaWidth(scale) {
+  return (scale === Scale.Year ? needleGeom.largeWidth : needleGeom.smallWidth) / 2 + AUTO_MOVE_AREA_PADDING;
+};
 /** Reusable business logic for how to handle events that set time to now (closest).
  * Used in NowButton and TimeSliderLegend.
  */
@@ -910,6 +952,92 @@ var handleSetNowEvent = function handleSetNowEvent(timeStep, dataStartTime, data
     }
   }
 };
+var TimeInMinutes;
+(function (TimeInMinutes) {
+  TimeInMinutes[TimeInMinutes["YEAR"] = 525600] = "YEAR";
+  TimeInMinutes[TimeInMinutes["MONTH"] = 43800] = "MONTH";
+  TimeInMinutes[TimeInMinutes["DAY"] = 1440] = "DAY";
+  TimeInMinutes[TimeInMinutes["HOUR"] = 60] = "HOUR";
+})(TimeInMinutes || (TimeInMinutes = {}));
+var minutesToDescribedDuration = function minutesToDescribedDuration(minutes) {
+  var dateStr = '';
+  var time = minutes; // subtracting whole years/months/days from time duration and adding the amount to the string to be printed.
+  if (time >= TimeInMinutes.YEAR) {
+    var yearsInMintues = Math.floor(time / TimeInMinutes.YEAR);
+    dateStr += "".concat(yearsInMintues, "y");
+    time -= yearsInMintues * TimeInMinutes.YEAR;
+  }
+  if (time >= TimeInMinutes.MONTH) {
+    var monthsInMinutes = Math.floor(time / TimeInMinutes.MONTH);
+    dateStr += "".concat(monthsInMinutes, "m");
+    time -= monthsInMinutes * TimeInMinutes.MONTH;
+  }
+  if (time >= TimeInMinutes.DAY) {
+    var daysInMinutes = Math.floor(time / TimeInMinutes.DAY);
+    dateStr += "".concat(daysInMinutes, "d");
+    time -= daysInMinutes * TimeInMinutes.DAY;
+  } // we will always print hour/minutes if there are any of them in the XX:XX format
+  if (time > 0) {
+    if (dateStr !== '') dateStr += ' ';
+    dateStr += "".concat(Math.floor(time / TimeInMinutes.HOUR).toLocaleString(undefined, {
+      minimumIntegerDigits: 2,
+      useGrouping: false
+    }), "h").concat((time % TimeInMinutes.HOUR).toLocaleString(undefined, {
+      minimumIntegerDigits: 2,
+      useGrouping: false
+    }), "min");
+  }
+  return dateStr;
+};
+var TimeSliderUtils = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  millisecondsInSecond: millisecondsInSecond,
+  defaultAnimationDelayAtStart: defaultAnimationDelayAtStart,
+  defaultDelay: defaultDelay,
+  defaultTimeStep: defaultTimeStep,
+  speedFactors: speedFactors,
+  getSpeedDelay: getSpeedDelay,
+  getSpeedFactor: getSpeedFactor,
+  getSelectedTime: getSelectedTime,
+  getTimeBounds: getTimeBounds,
+  getMomentTimeBounds: getMomentTimeBounds,
+  scalingCoefficient: scalingCoefficient,
+  timestampToPixelEdges: timestampToPixelEdges,
+  timestampToPixel: timestampToPixel,
+  pixelToTimestamp: pixelToTimestamp,
+  onsetNewDateDebounced: onsetNewDateDebounced,
+  roundWithTimeStep: roundWithTimeStep,
+  setNewRoundedTime: setNewRoundedTime,
+  getDataLimitsFromLayers: getDataLimitsFromLayers,
+  getNextTimeStepvalue: getNextTimeStepvalue,
+  getPreviousTimeStepvalue: getPreviousTimeStepvalue,
+  setPreviousTimeStep: setPreviousTimeStep,
+  setNextTimeStep: setNextTimeStep,
+  getValueFromKeyboardEvent: getValueFromKeyboardEvent,
+  getScaleToSecondsPerPxForDataScale: getScaleToSecondsPerPxForDataScale,
+  secondsPerPxToScale: secondsPerPxToScale,
+  scaleToSecondsPerPx: scaleToSecondsPerPx,
+  secondsPerPxValues: secondsPerPxValues,
+  defaultDataScaleToSecondsPerPx: defaultDataScaleToSecondsPerPx,
+  getNewCenterOfFixedPointZoom: getNewCenterOfFixedPointZoom,
+  moveRelativeToTimePoint: moveRelativeToTimePoint,
+  useCanvasTarget: useCanvasTarget,
+  needleGeom: needleGeom,
+  AUTO_MOVE_AREA_PADDING: AUTO_MOVE_AREA_PADDING,
+  getAutoMoveAreaWidth: getAutoMoveAreaWidth,
+  handleSetNowEvent: handleSetNowEvent,
+  get TimeInMinutes () { return TimeInMinutes; },
+  minutesToDescribedDuration: minutesToDescribedDuration
+});
 var createMap = function createMap(_ref) {
   var id = _ref.id,
@@ -960,18 +1088,12 @@ var createMap = function createMap(_ref) {
       isTimeSliderHoverOn = _ref$isTimeSliderHove === void 0 ? false : _ref$isTimeSliderHove,
       _ref$isTimeSliderVisi = _ref.isTimeSliderVisible,
       isTimeSliderVisible = _ref$isTimeSliderVisi === void 0 ? true : _ref$isTimeSliderVisi,
-      _ref$activeMapPresetI = _ref.activeMapPresetId,
-      activeMapPresetId = _ref$activeMapPresetI === void 0 ? null : _ref$activeMapPresetI,
       _ref$displayMapPin = _ref.displayMapPin,
       displayMapPin = _ref$displayMapPin === void 0 ? false : _ref$displayMapPin,
       _ref$disableMapPin = _ref.disableMapPin,
       disableMapPin = _ref$disableMapPin === void 0 ? false : _ref$disableMapPin,
       _ref$shouldShowZoomCo = _ref.shouldShowZoomControls,
-      shouldShowZoomControls = _ref$shouldShowZoomCo === void 0 ? true : _ref$shouldShowZoomCo,
-      _ref$dockedLayerManag = _ref.dockedLayerManager,
-      dockedLayerManager = _ref$dockedLayerManag === void 0 ? {
-    isOpen: false
-  } : _ref$dockedLayerManag;
+      shouldShowZoomControls = _ref$shouldShowZoomCo === void 0 ? true : _ref$shouldShowZoomCo;
   return {
     id: id,
     isAnimating: isAnimating,
@@ -995,11 +1117,9 @@ var createMap = function createMap(_ref) {
     isTimestepAuto: isTimestepAuto,
     isTimeSliderHoverOn: isTimeSliderHoverOn,
     isTimeSliderVisible: isTimeSliderVisible,
-    activeMapPresetId: activeMapPresetId,
     displayMapPin: displayMapPin,
     disableMapPin: disableMapPin,
-    shouldShowZoomControls: shouldShowZoomControls,
-    dockedLayerManager: dockedLayerManager
+    shouldShowZoomControls: shouldShowZoomControls
   };
 };
 var checkValidLayersPayload = function checkValidLayersPayload(layers, mapId) {
@@ -1139,6 +1259,44 @@ function moveArrayElements(array, oldIndex, newIndex) {
   newArray.splice(indexNew, 0, newArray.splice(oldIndex, 1)[0]);
   return newArray;
 }
+var getTimeStepFromDataInterval = function getTimeStepFromDataInterval(timeInterval) {
+  switch (timeInterval.isRegularInterval) {
+    case false:
+      switch (timeInterval.year) {
+        case 0:
+          // month
+          return 30 * 24 * 60;
+        default:
+          return timeInterval.year * 365 * 24 * 60;
+      }
+    case true:
+      if (timeInterval.day !== 0) {
+        return timeInterval.day * 24 * 60;
+      }
+      if (timeInterval.hour !== 0) {
+        return timeInterval.hour * 60;
+      }
+      if (timeInterval.minute !== 0) {
+        return timeInterval.minute;
+      }
+      if (timeInterval.second !== 0) {
+        return timeInterval.second / 60.0;
+      }
+      return 5;
+    default:
+      return 5;
+  }
+};
+var getActiveLayerTimeStep = function getActiveLayerTimeStep(timeDimension) {
+  return (timeDimension === null || timeDimension === void 0 ? void 0 : timeDimension.timeInterval) ? getTimeStepFromDataInterval(timeDimension.timeInterval) : null;
+};
 var utils = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -1148,7 +1306,9 @@ var utils = /*#__PURE__*/Object.freeze({
   produceDraftStateSetWebMapDimension: produceDraftStateSetWebMapDimension,
   findMapIdFromLayerId: findMapIdFromLayerId,
   produceDraftStateSetMapDimensionFromLayerChangeDimension: produceDraftStateSetMapDimensionFromLayerChangeDimension,
-  moveArrayElements: moveArrayElements
+  moveArrayElements: moveArrayElements,
+  getTimeStepFromDataInterval: getTimeStepFromDataInterval,
+  getActiveLayerTimeStep: getActiveLayerTimeStep
 });
 /* *
@@ -1694,13 +1854,24 @@ var slice$6 = createSlice({
       var dimensionsAction = layerActions.layerSetDimensions(layerDimensions);
       var newState = layerDimensions === null ? intermediateState : reducer$6(intermediateState, dimensionsAction);
       return newState;
+    },
+    setSelectedFeature: function setSelectedFeature(draft, action) {
+      var _action$payload13 = action.payload,
+          layerId = _action$payload13.layerId,
+          selectedFeatureIndex = _action$payload13.selectedFeatureIndex;
+      if (!draft.byId[layerId]) {
+        return;
+      }
+      draft.byId[layerId].selectedFeatureIndex = selectedFeatureIndex;
     }
   },
   extraReducers: function extraReducers(builder) {
     builder.addCase(setTimeSync, function (draft, action) {
-      var _action$payload13 = action.payload,
-          targetsFromAction = _action$payload13.targets,
-          source = _action$payload13.source;
+      var _action$payload14 = action.payload,
+          targetsFromAction = _action$payload14.targets,
+          source = _action$payload14.source;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
       var targets = [{
@@ -1726,9 +1897,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$payload14 = action.payload,
-          targets = _action$payload14.targets,
-          source = _action$payload14.source;
+      var _action$payload15 = action.payload,
+          targets = _action$payload15.targets,
+          source = _action$payload15.source;
       var state = current(draft);
       return targets.reduce(function (prevState, target) {
         var action = {
@@ -2263,21 +2434,10 @@ var slice$3 = createSlice({
       draft.byId[mapId].animationEndTime = animationEndTime;
     },
-    setSelectedFeature: function setSelectedFeature(draft, action) {
+    setAnimationDelay: function setAnimationDelay(draft, action) {
       var _action$payload7 = action.payload,
           mapId = _action$payload7.mapId,
-          selectedFeatureIndex = _action$payload7.selectedFeatureIndex;
-      if (!draft.byId[mapId]) {
-        return;
-      }
-      draft.byId[mapId].selectedFeatureIndex = selectedFeatureIndex;
-    },
-    setAnimationDelay: function setAnimationDelay(draft, action) {
-      var _action$payload8 = action.payload,
-          mapId = _action$payload8.mapId,
-          animationDelay = _action$payload8.animationDelay;
+          animationDelay = _action$payload7.animationDelay;
       if (!draft.byId[mapId]) {
         return;
@@ -2286,10 +2446,10 @@ var slice$3 = createSlice({
       draft.byId[mapId].animationDelay = animationDelay;
     },
     layerMoveLayer: function layerMoveLayer(draft, action) {
-      var _action$payload9 = action.payload,
-          oldIndex = _action$payload9.oldIndex,
-          newIndex = _action$payload9.newIndex,
-          mapId = _action$payload9.mapId;
+      var _action$payload8 = action.payload,
+          oldIndex = _action$payload8.oldIndex,
+          newIndex = _action$payload8.newIndex,
+          mapId = _action$payload8.mapId;
       if (!draft.byId[mapId]) {
         return;
@@ -2298,9 +2458,9 @@ var slice$3 = createSlice({
       draft.byId[mapId].mapLayers = moveArrayElements(draft.byId[mapId].mapLayers, oldIndex, newIndex);
     },
     setActiveLayerId: function setActiveLayerId(draft, action) {
-      var _action$payload10 = action.payload,
-          mapId = _action$payload10.mapId,
-          layerId = _action$payload10.layerId;
+      var _action$payload9 = action.payload,
+          mapId = _action$payload9.mapId,
+          layerId = _action$payload9.layerId;
       if (!draft.byId[mapId]) {
         return;
@@ -2309,9 +2469,9 @@ var slice$3 = createSlice({
       draft.byId[mapId].activeLayerId = layerId;
     },
     setTimeSliderCenterTime: function setTimeSliderCenterTime(draft, action) {
-      var _action$payload11 = action.payload,
-          mapId = _action$payload11.mapId,
-          timeSliderCenterTime = _action$payload11.timeSliderCenterTime;
+      var _action$payload10 = action.payload,
+          mapId = _action$payload10.mapId,
+          timeSliderCenterTime = _action$payload10.timeSliderCenterTime;
       if (!draft.byId[mapId]) {
         return;
@@ -2320,9 +2480,9 @@ var slice$3 = createSlice({
       draft.byId[mapId].timeSliderCenterTime = timeSliderCenterTime;
     },
     setTimeSliderUnfilteredSelectedTime: function setTimeSliderUnfilteredSelectedTime(draft, action) {
-      var _action$payload12 = action.payload,
-          mapId = _action$payload12.mapId,
-          timeSliderUnfilteredSelectedTime = _action$payload12.timeSliderUnfilteredSelectedTime;
+      var _action$payload11 = action.payload,
+          mapId = _action$payload11.mapId,
+          timeSliderUnfilteredSelectedTime = _action$payload11.timeSliderUnfilteredSelectedTime;
       if (!draft.byId[mapId]) {
         return;
@@ -2331,9 +2491,9 @@ var slice$3 = createSlice({
       draft.byId[mapId].timeSliderUnfilteredSelectedTime = timeSliderUnfilteredSelectedTime;
     },
     setTimeSliderSecondsPerPx: function setTimeSliderSecondsPerPx(draft, action) {
-      var _action$payload13 = action.payload,
-          mapId = _action$payload13.mapId,
-          timeSliderSecondsPerPx = _action$payload13.timeSliderSecondsPerPx;
+      var _action$payload12 = action.payload,
+          mapId = _action$payload12.mapId,
+          timeSliderSecondsPerPx = _action$payload12.timeSliderSecondsPerPx;
       if (!draft.byId[mapId]) {
         return;
@@ -2345,9 +2505,9 @@ var slice$3 = createSlice({
       draft.byId[mapId].timeSliderScale = scale;
     },
     setTimeSliderDataScaleToSecondsPerPx: function setTimeSliderDataScaleToSecondsPerPx(draft, action) {
-      var _action$payload14 = action.payload,
-          mapId = _action$payload14.mapId,
-          timeSliderDataScaleToSecondsPerPx = _action$payload14.timeSliderDataScaleToSecondsPerPx;
+      var _action$payload13 = action.payload,
+          mapId = _action$payload13.mapId,
+          timeSliderDataScaleToSecondsPerPx = _action$payload13.timeSliderDataScaleToSecondsPerPx;
       if (!draft.byId[mapId]) {
         return;
@@ -2356,9 +2516,9 @@ var slice$3 = createSlice({
       draft.byId[mapId].timeSliderDataScaleToSecondsPerPx = timeSliderDataScaleToSecondsPerPx;
     },
     toggleAutoUpdate: function toggleAutoUpdate(draft, action) {
-      var _action$payload15 = action.payload,
-          mapId = _action$payload15.mapId,
-          shouldAutoUpdate = _action$payload15.shouldAutoUpdate;
+      var _action$payload14 = action.payload,
+          mapId = _action$payload14.mapId,
+          shouldAutoUpdate = _action$payload14.shouldAutoUpdate;
       if (!draft.byId[mapId]) {
         return;
@@ -2367,9 +2527,9 @@ var slice$3 = createSlice({
       draft.byId[mapId].isAutoUpdating = shouldAutoUpdate;
     },
     toggleTimestepAuto: function toggleTimestepAuto(draft, action) {
-      var _action$payload16 = action.payload,
-          mapId = _action$payload16.mapId,
-          timestepAuto = _action$payload16.timestepAuto;
+      var _action$payload15 = action.payload,
+          mapId = _action$payload15.mapId,
+          timestepAuto = _action$payload15.timestepAuto;
       if (!draft.byId[mapId]) {
         return;
@@ -2378,9 +2538,9 @@ var slice$3 = createSlice({
       draft.byId[mapId].isTimestepAuto = timestepAuto;
     },
     toggleTimeSliderHover: function toggleTimeSliderHover(draft, action) {
-      var _action$payload17 = action.payload,
-          mapId = _action$payload17.mapId,
-          isTimeSliderHoverOn = _action$payload17.isTimeSliderHoverOn;
+      var _action$payload16 = action.payload,
+          mapId = _action$payload16.mapId,
+          isTimeSliderHoverOn = _action$payload16.isTimeSliderHoverOn;
       if (!draft.byId[mapId]) {
         return;
@@ -2389,9 +2549,9 @@ var slice$3 = createSlice({
       draft.byId[mapId].isTimeSliderHoverOn = isTimeSliderHoverOn;
     },
     toggleTimeSliderIsVisible: function toggleTimeSliderIsVisible(draft, action) {
-      var _action$payload18 = action.payload,
-          mapId = _action$payload18.mapId,
-          isTimeSliderVisible = _action$payload18.isTimeSliderVisible;
+      var _action$payload17 = action.payload,
+          mapId = _action$payload17.mapId,
+          isTimeSliderVisible = _action$payload17.isTimeSliderVisible;
       if (!draft.byId[mapId]) {
         return;
@@ -2400,9 +2560,9 @@ var slice$3 = createSlice({
       draft.byId[mapId].isTimeSliderVisible = isTimeSliderVisible;
     },
     toggleZoomControls: function toggleZoomControls(draft, action) {
-      var _action$payload19 = action.payload,
-          mapId = _action$payload19.mapId,
-          shouldShowZoomControls = _action$payload19.shouldShowZoomControls;
+      var _action$payload18 = action.payload,
+          mapId = _action$payload18.mapId,
+          shouldShowZoomControls = _action$payload18.shouldShowZoomControls;
       if (!draft.byId[mapId]) {
         return;
@@ -2411,9 +2571,9 @@ var slice$3 = createSlice({
       draft.byId[mapId].shouldShowZoomControls = shouldShowZoomControls;
     },
     setMapPinLocation: function setMapPinLocation(draft, action) {
-      var _action$payload20 = action.payload,
-          mapId = _action$payload20.mapId,
-          mapPinLocation = _action$payload20.mapPinLocation;
+      var _action$payload19 = action.payload,
+          mapId = _action$payload19.mapId,
+          mapPinLocation = _action$payload19.mapPinLocation;
       if (!draft.byId[mapId]) {
         return;
@@ -2422,9 +2582,9 @@ var slice$3 = createSlice({
       draft.byId[mapId].mapPinLocation = mapPinLocation;
     },
     setDisableMapPin: function setDisableMapPin(draft, action) {
-      var _action$payload21 = action.payload,
-          mapId = _action$payload21.mapId,
-          disableMapPin = _action$payload21.disableMapPin;
+      var _action$payload20 = action.payload,
+          mapId = _action$payload20.mapId,
+          disableMapPin = _action$payload20.disableMapPin;
       if (!draft.byId[mapId]) {
         return;
@@ -2433,57 +2593,22 @@ var slice$3 = createSlice({
       draft.byId[mapId].disableMapPin = disableMapPin;
     },
     toggleMapPinIsVisible: function toggleMapPinIsVisible(draft, action) {
-      var _action$payload22 = action.payload,
-          mapId = _action$payload22.mapId,
-          displayMapPin = _action$payload22.displayMapPin;
+      var _action$payload21 = action.payload,
+          mapId = _action$payload21.mapId,
+          displayMapPin = _action$payload21.displayMapPin;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].displayMapPin = displayMapPin;
-    },
-    setActiveMapPresetId: function setActiveMapPresetId(draft, action) {
-      var _action$payload23 = action.payload,
-          mapId = _action$payload23.mapId,
-          presetId = _action$payload23.presetId;
-      if (!draft.byId[mapId]) {
-        return;
-      }
-      draft.byId[mapId].activeMapPresetId = presetId;
-    },
-    setHasMapPresetChanges: function setHasMapPresetChanges(draft, action) {
-      var _action$payload24 = action.payload,
-          mapId = _action$payload24.mapId,
-          hasChanges = _action$payload24.hasChanges;
-      if (!draft.byId[mapId]) {
-        return;
-      }
-      draft.byId[mapId].hasMapPresetChanges = hasChanges;
-    },
-    toggleDockedLayerManager: function toggleDockedLayerManager(draft, action) {
-      var _action$payload25 = action.payload,
-          mapId = _action$payload25.mapId,
-          openDockedLayerManager = _action$payload25.openDockedLayerManager;
-      if (!draft.byId[mapId]) {
-        return;
-      }
-      draft.byId[mapId].dockedLayerManager = {
-        isOpen: openDockedLayerManager
-      };
     }
   },
   extraReducers: function extraReducers(builder) {
     builder.addCase(addLayer$1, function (draft, action) {
-      var _action$payload26 = action.payload,
-          layerId = _action$payload26.layerId,
-          mapId = _action$payload26.mapId;
+      var _action$payload22 = action.payload,
+          layerId = _action$payload22.layerId,
+          mapId = _action$payload22.mapId;
       if (!draft.byId[mapId]) {
         return;
@@ -2500,10 +2625,10 @@ var slice$3 = createSlice({
       draft.byId[mapId].mapLayers.unshift(layerId);
     }).addCase(addBaseLayer, function (draft, action) {
-      var _action$payload27 = action.payload,
-          layer = _action$payload27.layer,
-          layerId = _action$payload27.layerId,
-          mapId = _action$payload27.mapId;
+      var _action$payload23 = action.payload,
+          layer = _action$payload23.layer,
+          layerId = _action$payload23.layerId,
+          mapId = _action$payload23.mapId;
       if (!draft.byId[mapId]) {
         return;
@@ -2553,9 +2678,9 @@ var slice$3 = createSlice({
         }
       }
     }).addCase(setBaseLayers$1, function (draft, action) {
-      var _action$payload28 = action.payload,
-          layers = _action$payload28.layers,
-          mapId = _action$payload28.mapId; // Split into base and overlayers
+      var _action$payload24 = action.payload,
+          layers = _action$payload24.layers,
+          mapId = _action$payload24.mapId; // Split into base and overlayers
       var baseLayers = [];
       var overLayers = [];
@@ -2582,9 +2707,9 @@ var slice$3 = createSlice({
         if (overLayerIds.length !== 0) draft.byId[mapId].overLayers = overLayerIds;
       }
     }).addCase(layerDelete$1, function (draft, action) {
-      var _action$payload29 = action.payload,
-          mapId = _action$payload29.mapId,
-          layerId = _action$payload29.layerId;
+      var _action$payload25 = action.payload,
+          mapId = _action$payload25.mapId,
+          layerId = _action$payload25.layerId;
       if (!draft.byId[mapId]) {
         return;
@@ -2605,9 +2730,9 @@ var slice$3 = createSlice({
         draft.byId[mapId].activeLayerId = '';
       }
     }).addCase(baseLayerDelete, function (draft, action) {
-      var _action$payload30 = action.payload,
-          mapId = _action$payload30.mapId,
-          layerId = _action$payload30.layerId;
+      var _action$payload26 = action.payload,
+          mapId = _action$payload26.mapId,
+          layerId = _action$payload26.layerId;
       if (!draft.byId[mapId]) {
         return;
@@ -2620,14 +2745,14 @@ var slice$3 = createSlice({
         return id !== layerId;
       });
     }).addCase(layerChangeDimension$1, function (draft, action) {
-      var _action$payload31 = action.payload,
-          layerId = _action$payload31.layerId,
-          dimension = _action$payload31.dimension;
+      var _action$payload27 = action.payload,
+          layerId = _action$payload27.layerId,
+          dimension = _action$payload27.dimension;
       produceDraftStateSetMapDimensionFromLayerChangeDimension(draft, layerId, dimension);
     }).addCase(setTimeSync, function (draft, action) {
-      var _action$payload32 = action.payload,
-          targetsFromAction = _action$payload32.targets,
-          source = _action$payload32.source;
+      var _action$payload28 = action.payload,
+          targetsFromAction = _action$payload28.targets,
+          source = _action$payload28.source;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
       var targets = [{
@@ -2651,9 +2776,9 @@ var slice$3 = createSlice({
         }
       });
     }).addCase(setBboxSync, function (draft, action) {
-      var _action$payload33 = action.payload,
-          targetsFromAction = _action$payload33.targets,
-          source = _action$payload33.source;
+      var _action$payload29 = action.payload,
+          targetsFromAction = _action$payload29.targets,
+          source = _action$payload29.source;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
       var targets = [{
@@ -2684,9 +2809,9 @@ var slice$3 = 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$payload34 = action.payload,
-          targets = _action$payload34.targets,
-          source = _action$payload34.source;
+      var _action$payload30 = action.payload,
+          targets = _action$payload30.targets,
+          source = _action$payload30.source;
       return targets.reduce(function (prevState, target) {
         var action = {
           payload: target,
@@ -2702,9 +2827,9 @@ var slice$3 = createSlice({
       var mapAction = mapActions$1.mapUpdateAllMapDimensions(mapDimensions);
       return reducer$3(draft, mapAction);
     }).addCase(mapChangeDimension, function (draft, action) {
-      var _action$payload35 = action.payload,
-          mapId = _action$payload35.mapId,
-          dimensionFromAction = _action$payload35.dimension;
+      var _action$payload31 = action.payload,
+          mapId = _action$payload31.mapId,
+          dimensionFromAction = _action$payload31.dimension;
       produceDraftStateSetWebMapDimension(draft, mapId, dimensionFromAction, true);
     }).addCase(setMapPreset, function (draft, action) {
       var mapId = action.payload.mapId;
@@ -2717,19 +2842,18 @@ var slice$3 = createSlice({
       draft.byId[mapId].baseLayers = [];
       draft.byId[mapId].mapLayers = [];
       draft.byId[mapId].overLayers = [];
-      draft.byId[mapId].hasMapPresetChanges = false;
       draft.byId[mapId].isAutoUpdating = false;
       draft.byId[mapId].isAnimating = false;
       draft.byId[mapId].isTimeSliderVisible = true;
       draft.byId[mapId].isTimestepAuto = true;
       draft.byId[mapId].displayMapPin = false;
       draft.byId[mapId].shouldShowZoomControls = true;
-      draft.byId[mapId].timeStep = defaultTimeStep;
+      draft.byId[mapId].timeStep = undefined;
       draft.byId[mapId].animationDelay = defaultAnimationDelayAtStart;
     }).addCase(uiActions.registerDialog, function (draft, action) {
-      var _action$payload36 = action.payload,
-          mapId = _action$payload36.mapId,
-          type = _action$payload36.type;
+      var _action$payload32 = action.payload,
+          mapId = _action$payload32.mapId,
+          type = _action$payload32.type;
       if (!draft.byId[mapId]) {
         return;
@@ -2841,7 +2965,7 @@ var getLayersByMapId = createSelector(getAllLayers, function (_store, _mapId) {
  * @returns {array} returnType: array - an array of all non-baselayers containing layer information (service, name, style, enabled etc.)
  */
-createSelector(getAllLayers, function (layers) {
+var getLayers = createSelector(getAllLayers, function (layers) {
   return layers.filter(function (layer) {
     return layer.layerType !== LayerType.baseLayer && layer.layerType !== LayerType.overLayer;
   });
@@ -2854,7 +2978,7 @@ createSelector(getAllLayers, function (layers) {
  * @returns {array} returnType: array - an array of all baselayers containing layer information (service, name, style, enabled etc.)
  */
-createSelector(getAllLayers, function (layers) {
+var getBaseLayers = createSelector(getAllLayers, function (layers) {
   return layers.filter(function (layer) {
     return layer.layerType === LayerType.baseLayer;
   });
@@ -2867,7 +2991,7 @@ createSelector(getAllLayers, function (layers) {
  * @returns {array} returnType: array - an array of all overLayers containing layer information (service, name, style, enabled etc.)
  */
-createSelector(getAllLayers, function (layers) {
+var getOverLayers = createSelector(getAllLayers, function (layers) {
   return layers.filter(function (layer) {
     return layer.layerType === LayerType.overLayer;
   });
@@ -2996,7 +3120,7 @@ var getLayerStyle = createSelector(getLayerById, function (layer) {
  * @returns {string} returnType: LayerStatus
  */
-createSelector(getLayerById, function (layer) {
+var getLayerStatus = createSelector(getLayerById, function (layer) {
   return layer && layer.status ? layer.status : LayerStatus["default"];
 });
 /**
@@ -3024,6 +3148,68 @@ var getAvailableBaseLayersForMap = createSelector(layerStore, function (_store,
   return [];
 }, selectorMemoizationOptions);
+/**
+ * Returns the selected geojson feature for the given layer
+ *
+ * Example const selectedFeature = getSelectedFeature(store, 'layerId1')
+ * @param {object} store store: object - store object
+ * @param {string} mapId layerId: string - Id of the layer
+ * @returns {number} selectedFeatureIndex: the index of the selected geojson feature
+ */
+var getSelectedFeatureIndex = createSelector(getLayerById, function (layer) {
+  return layer === null || layer === void 0 ? void 0 : layer.selectedFeatureIndex;
+});
+/**
+ * Gets layerIds that contain passed dimension
+ *
+ * Example: dimension = getDimensionLayerIds(store, 'elevation')
+ * @param {object} store store: object - object from which the layers state will be extracted
+ * @param {string} dimensionName dimensionName: string - name of dimension you want to retrieve the dimension data for
+ * @returns {string[]} returnType: string[] - layerIds
+ */
+var getDimensionLayerIds = createSelector(getLayersIds, getLayersById, function (_store, dimensionName) {
+  return dimensionName;
+}, function (layerIds, layers, dimensionName) {
+  return layerIds.reduce(function (list, layerId) {
+    var layer = layers[layerId];
+    var dimensions = (layer === null || layer === void 0 ? void 0 : layer.dimensions) ? layer.dimensions : [];
+    if (dimensions.find(function (dimension) {
+      return dimension.name === dimensionName;
+    })) {
+      return list.concat(layerId);
+    }
+    return list;
+  }, []);
+}, selectorMemoizationOptions);
+var selectors$2 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  getLayerById: getLayerById,
+  getLayersById: getLayersById,
+  getLayersIds: getLayersIds,
+  getAllLayers: getAllLayers,
+  getLayersByMapId: getLayersByMapId,
+  getLayers: getLayers,
+  getBaseLayers: getBaseLayers,
+  getOverLayers: getOverLayers,
+  getLayerDimensions: getLayerDimensions,
+  getLayerNonTimeDimensions: getLayerNonTimeDimensions,
+  getLayerTimeDimension: getLayerTimeDimension,
+  getLayerDimension: getLayerDimension,
+  getLayerOpacity: getLayerOpacity,
+  getLayerEnabled: getLayerEnabled,
+  getLayerName: getLayerName,
+  getLayerService: getLayerService,
+  getLayerStyle: getLayerStyle,
+  getLayerStatus: getLayerStatus,
+  getAvailableBaseLayersForMap: getAvailableBaseLayersForMap,
+  getSelectedFeatureIndex: getSelectedFeatureIndex,
+  getDimensionLayerIds: getDimensionLayerIds
+});
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3959,7 +4145,12 @@ var getMapTimeSliderScale = createSelector(getMapById, function (store) {
  */
 var getMapTimeStep = createSelector(getMapById, function (store) {
-  return store ? store.timeStep : defaultTimeStep;
+  var _a;
+  return (_a = store === null || store === void 0 ? void 0 : store.timeStep) !== null && _a !== void 0 ? _a : defaultTimeStep;
+});
+var getMapTimeStepWithoutDefault = createSelector(getMapById, function (store) {
+  return store === null || store === void 0 ? void 0 : store.timeStep;
 });
 /**
  * Returns the speed of animation
@@ -4190,56 +4381,32 @@ var getAllUniqueDimensions = createSelector(getAllMapIds, function (store) {
  * @returns {object} returnType: latitude and longitude of pin
  */
-var getPinLocation = createSelector(getMapById, function (store) {
-  return store ? store.mapPinLocation : undefined;
-}, selectorMemoizationOptions);
-/**
- * Returns the disable map pin boolean for the current map
- *
- * Example getDisableMapPin(store);
- * @param {object} store store: object - store object
- * @param {string} mapId mapId: string - Id of the map
- * @returns {boolean} returnType: boolean
- */
-var getDisableMapPin = createSelector(getMapById, function (store) {
-  return store ? store.disableMapPin : false;
-});
-/**
- * Returns the diplay map pin boolean for the current map
- *
- * Example getDisplayMapPin(store);
- * @param {object} store store: object - store object
- * @param {string} mapId mapId: string - Id of the map
- * @returns {boolean} returnType: boolean
- */
-var getDisplayMapPin = createSelector(getMapById, function (store) {
-  return store ? store.displayMapPin : false;
-});
+var getPinLocation = createSelector(getMapById, function (store) {
+  return store ? store.mapPinLocation : undefined;
+}, selectorMemoizationOptions);
 /**
- * Returns the selected geojson feature for the given map
+ * Returns the disable map pin boolean for the current map
  *
- * Example const selectedFeature = getSelectedFeature(store, 'mapId1')
+ * Example getDisableMapPin(store);
  * @param {object} store store: object - store object
  * @param {string} mapId mapId: string - Id of the map
- * @returns {number} selectedFeatureIndex: the index of the selected geojson feature
+ * @returns {boolean} returnType: boolean
  */
-var getSelectedFeatureIndex = createSelector(getMapById, function (store) {
-  return store === null || store === void 0 ? void 0 : store.selectedFeatureIndex;
+var getDisableMapPin = createSelector(getMapById, function (store) {
+  return store ? store.disableMapPin : false;
 });
 /**
- * Returns the active map preset id
+ * Returns the display map pin boolean for the current map
  *
- * Example getActiveMapPresetId(store, mapId);
+ * Example getDisplayMapPin(store);
  * @param {object} store store: object - store object
  * @param {string} mapId mapId: string - Id of the map
- * @returns {boolean} returnType: boolean or undefined
+ * @returns {boolean} returnType: boolean
  */
-var getActiveMapPresetId = createSelector(getMapById, function (store) {
-  return store ? store.activeMapPresetId : undefined;
+var getDisplayMapPin = createSelector(getMapById, function (store) {
+  return store ? store.displayMapPin : false;
 });
 /**
  * Returns the legend id
@@ -4305,31 +4472,40 @@ var getMapPreset = createSelector(getMapLayers, getMapBaseLayers, getMapOverLaye
   });
 }, selectorMemoizationOptions);
 /**
- * Returns the has changes state of the map preset
+ * Gets all enabled layerIds for map
  *
- * Example getHasMapPresetChanges(store, mapId);
- * @param {object} store store: object - store object
+ * Example: getMapLayerIdsEnabled = getLayerIdsEnabled(store, 'mapId_1')
+ * @param {object} store store: object - store
  * @param {string} mapId mapId: string - Id of the map
- * @returns {boolean} returnType: boolean
+ * @returns {string[]} returnType: string[] -  array of enabled layerIds
  */
-var getHasMapPresetChanges = createSelector(getMapById, function (store) {
-  return store && store.hasMapPresetChanges ? store.hasMapPresetChanges : false;
-});
+var getMapLayerIdsEnabled = createSelector(getLayerIds, getLayersById, function (mapLayerIds, layers) {
+  return mapLayerIds.reduce(function (list, layerId) {
+    if (layers[layerId] && layers[layerId].enabled) {
+      return list.concat(layerId);
+    }
+    return list;
+  }, []);
+}, selectorMemoizationOptions);
 /**
- * Returns whether the docked layer manager is open
+ * Returns if a map dimension is used for any enabled layers on that map
  *
- * Example getIsDockedLayerManagerOpen(store, mapId);
+ * Example getIsEnabledLayersForMapDimension(store, mapId);
  * @param {object} store store: object - store object
  * @param {string} mapId mapId: string - Id of the map
+ * @param {string} dimensionName dimensionName: string - name of the dimension
  * @returns {Boolean} returnType: boolean
  */
-var getIsDockedLayerManagerOpen = createSelector(getMapById, function (store) {
-  var _a;
-  return (_a = store === null || store === void 0 ? void 0 : store.dockedLayerManager) === null || _a === void 0 ? void 0 : _a.isOpen;
-});
+var getIsEnabledLayersForMapDimension = createSelector(getMapLayerIdsEnabled, function (store, _mapId, dimensionName) {
+  return getDimensionLayerIds(store, dimensionName);
+}, function (enabledMapLayerIds, dimensionLayerIds) {
+  return dimensionLayerIds.some(function (layerId) {
+    return enabledMapLayerIds.includes(layerId);
+  });
+}, selectorMemoizationOptions);
 var selectors = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -4356,6 +4532,7 @@ var selectors = /*#__PURE__*/Object.freeze({
   getActiveLayerId: getActiveLayerId,
   getMapTimeSliderScale: getMapTimeSliderScale,
   getMapTimeStep: getMapTimeStep,
+  getMapTimeStepWithoutDefault: getMapTimeStepWithoutDefault,
   getMapAnimationDelay: getMapAnimationDelay,
   getMapTimeSliderCenterTime: getMapTimeSliderCenterTime,
   getTimeSliderUnfilteredSelectedTime: getTimeSliderUnfilteredSelectedTime,
@@ -4374,12 +4551,10 @@ var selectors = /*#__PURE__*/Object.freeze({
   getPinLocation: getPinLocation,
   getDisableMapPin: getDisableMapPin,
   getDisplayMapPin: getDisplayMapPin,
-  getSelectedFeatureIndex: getSelectedFeatureIndex,
-  getActiveMapPresetId: getActiveMapPresetId,
   getLegendId: getLegendId,
   getMapPreset: getMapPreset,
-  getHasMapPresetChanges: getHasMapPresetChanges,
-  getIsDockedLayerManagerOpen: getIsDockedLayerManagerOpen
+  getMapLayerIdsEnabled: getMapLayerIdsEnabled,
+  getIsEnabledLayersForMapDimension: getIsEnabledLayersForMapDimension
 });
 var DialogTypes;
@@ -4394,6 +4569,7 @@ var DialogTypes;
   DialogTypes["DimensionSelectElevation"] = "dimensionSelect-elevation";
   DialogTypes["LayerManager"] = "layerManager";
   DialogTypes["LayerSelect"] = "layerSelect";
+  DialogTypes["DockedLayerManager"] = "dockedLayerManager";
 })(DialogTypes || (DialogTypes = {}));
 var types = /*#__PURE__*/Object.freeze({
@@ -7682,9 +7858,8 @@ var _marked$2 = /*#__PURE__*/regeneratorRuntime.mark(startAnimationSaga),
     _marked6 = /*#__PURE__*/regeneratorRuntime.mark(toggleAutoUpdateSaga),
     _marked7 = /*#__PURE__*/regeneratorRuntime.mark(handleBaseLayersSaga),
     _marked8 = /*#__PURE__*/regeneratorRuntime.mark(setMapPresetSaga),
-    _marked9 = /*#__PURE__*/regeneratorRuntime.mark(checkMapPresetForChangesSaga),
-    _marked10 = /*#__PURE__*/regeneratorRuntime.mark(unregisterMapSaga),
-    _marked11 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$2);
+    _marked9 = /*#__PURE__*/regeneratorRuntime.mark(unregisterMapSaga),
+    _marked10 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$2);
 var generateTimeList = function generateTimeList(start, end, interval) {
   var timeList = [];
@@ -7853,7 +8028,7 @@ function updateAnimation(mapId, maxValue) {
   }, _marked4$1);
 }
 function setLayerDimensionsSaga(_ref4) {
-  var payload, layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance;
+  var payload, layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance, isActiveLayer, timeStep, newTimeStep;
   return regeneratorRuntime.wrap(function setLayerDimensionsSaga$(_context5) {
     while (1) {
       switch (_context5.prev = _context5.next) {
@@ -7910,19 +8085,44 @@ function setLayerDimensionsSaga(_ref4) {
         case 24:
           isAnimating$1 = _context5.sent;
           webmapInstance = getWMJSMapById(mapId);
+          isActiveLayer = layerId === activeLayerId;
+          _context5.next = 29;
+          return select(getMapTimeStepWithoutDefault, mapId);
+        case 29:
+          timeStep = _context5.sent;
+          if (!(isActiveLayer && timeStep === undefined && newTimeDimension)) {
+            _context5.next = 35;
+            break;
+          }
+          newTimeStep = getActiveLayerTimeStep(newTimeDimension);
+          if (!newTimeStep) {
+            _context5.next = 35;
+            break;
+          }
+          _context5.next = 35;
+          return put(mapActions$1.setTimeStep({
+            mapId: mapId,
+            timeStep: newTimeStep
+          }));
-          if (!(layerId === activeLayerId && // only update the active layer
+        case 35:
+          if (!(isActiveLayer && // only update the active layer
           shouldAutoUpdate && newTimeDimension && newTimeDimension.maxValue && prevTimeDimension && prevTimeDimension.currentValue && prevTimeDimension.currentValue !== newTimeDimension.maxValue)) {
-            _context5.next = 34;
+            _context5.next = 43;
             break;
           }
           if (isAnimating$1) {
-            _context5.next = 30;
+            _context5.next = 39;
             break;
           }
-          _context5.next = 30;
+          _context5.next = 39;
           return put(layerActions.layerChangeDimension({
             layerId: layerId,
             origin: LayerActionOrigin.setLayerDimensionSaga,
@@ -7932,39 +8132,39 @@ function setLayerDimensionsSaga(_ref4) {
             }
           }));
-        case 30:
-          _context5.next = 32;
+        case 39:
+          _context5.next = 41;
           return call(updateAnimation, mapId, newTimeDimension.maxValue);
-        case 32:
-          _context5.next = 37;
+        case 41:
+          _context5.next = 46;
           break;
-        case 34:
+        case 43:
           if (!(isAnimating$1 && !webmapInstance.isAnimating && newTimeDimension && newTimeDimension.maxValue)) {
-            _context5.next = 37;
+            _context5.next = 46;
             break;
           }
-          _context5.next = 37;
+          _context5.next = 46;
           return call(updateAnimation, mapId, newTimeDimension.maxValue);
-        case 37:
-          _context5.next = 42;
+        case 46:
+          _context5.next = 51;
           break;
-        case 39:
-          _context5.prev = 39;
+        case 48:
+          _context5.prev = 48;
           _context5.t0 = _context5["catch"](1);
           // eslint-disable-next-line no-console
           console.warn(_context5.t0);
-        case 42:
+        case 51:
         case "end":
           return _context5.stop();
       }
     }
-  }, _marked5, null, [[1, 39]]);
+  }, _marked5, null, [[1, 48]]);
 }
 function toggleAutoUpdateSaga(_ref5) {
   var payload, shouldAutoUpdate, mapId, layerId, timeDimension;
@@ -8310,70 +8510,20 @@ function setMapPresetSaga(_ref6) {
     }
   }, _marked8, null, [[1, 66]]);
 }
-var mapPresetChangeActions = [layerActions.setBaseLayers.type, layerActions.layerDelete.type, layerActions.addLayer.type, layerActions.layerChangeEnabled.type, layerActions.layerChangeName.type, layerActions.layerChangeStyle.type, layerActions.layerChangeOpacity.type, layerActions.layerChangeDimension.type, mapActions$1.layerMoveLayer.type, mapActions$1.setActiveLayerId.type, mapActions$1.toggleAutoUpdate, mapActions$1.mapStartAnimation, mapActions$1.mapStopAnimation, mapActions$1.toggleTimeSliderIsVisible, mapActions$1.setTimeStep, mapActions$1.setAnimationDelay, mapActions$1.toggleTimestepAuto, uiActions.setActiveMapIdForDialog, uiActions.setToggleOpenDialog, genericActions.setBbox.type];
-var supportedChangeOrigins = [LayerActionOrigin.layerManager, LayerActionOrigin.wmsLoader, MapActionOrigin.map];
-function checkMapPresetForChangesSaga(action) {
-  var _action$payload, mapId, origin, isChangeOriginSupported, hasMapPresetChanges;
-  return regeneratorRuntime.wrap(function checkMapPresetForChangesSaga$(_context9) {
-    while (1) {
-      switch (_context9.prev = _context9.next) {
-        case 0:
-          _action$payload = action.payload, mapId = _action$payload.mapId, origin = _action$payload.origin;
-          if (origin) {
-            _context9.next = 3;
-            break;
-          }
-          return _context9.abrupt("return");
-        case 3:
-          isChangeOriginSupported = supportedChangeOrigins.indexOf(origin) >= 0;
-          if (!isChangeOriginSupported) {
-            _context9.next = 11;
-            break;
-          }
-          _context9.next = 7;
-          return select(getHasMapPresetChanges, mapId);
-        case 7:
-          hasMapPresetChanges = _context9.sent;
-          if (hasMapPresetChanges) {
-            _context9.next = 11;
-            break;
-          }
-          _context9.next = 11;
-          return put(mapActions$1.setHasMapPresetChanges({
-            mapId: mapId,
-            hasChanges: true
-          }));
-        case 11:
-        case "end":
-          return _context9.stop();
-      }
-    }
-  }, _marked9);
-}
 function unregisterMapSaga(_ref7) {
   var payload, mapId, layerList;
-  return regeneratorRuntime.wrap(function unregisterMapSaga$(_context10) {
+  return regeneratorRuntime.wrap(function unregisterMapSaga$(_context9) {
     while (1) {
-      switch (_context10.prev = _context10.next) {
+      switch (_context9.prev = _context9.next) {
         case 0:
           payload = _ref7.payload;
           mapId = payload.mapId;
-          _context10.next = 4;
+          _context9.next = 4;
           return select(getLayersByMapId, mapId);
         case 4:
-          layerList = _context10.sent;
-          _context10.next = 7;
+          layerList = _context9.sent;
+          _context9.next = 7;
           return all(layerList.map(function (layer) {
             return put(layerActions.layerDelete({
               mapId: mapId,
@@ -8385,55 +8535,49 @@ function unregisterMapSaga(_ref7) {
         case 7:
         case "end":
-          return _context10.stop();
+          return _context9.stop();
       }
     }
-  }, _marked10);
+  }, _marked9);
 }
 function rootSaga$2() {
-  return regeneratorRuntime.wrap(function rootSaga$(_context11) {
+  return regeneratorRuntime.wrap(function rootSaga$(_context10) {
     while (1) {
-      switch (_context11.prev = _context11.next) {
+      switch (_context10.prev = _context10.next) {
         case 0:
-          _context11.next = 2;
-          return all([takeLatest(mapActions$1.mapStopAnimation.type, stopAnimationSaga), takeLatest(mapActions$1.setActiveMapPresetId.type, stopAnimationSaga)]);
+          _context10.next = 2;
+          return takeLatest(mapActions$1.mapStopAnimation.type, stopAnimationSaga);
         case 2:
-          _context11.next = 4;
+          _context10.next = 4;
           return takeLatest(mapActions$1.mapStartAnimation.type, startAnimationSaga);
         case 4:
-          _context11.next = 6;
+          _context10.next = 6;
           return takeLatest(layerActions.layerDelete.type, deleteLayerSaga);
         case 6:
-          _context11.next = 8;
+          _context10.next = 8;
           return takeLatest(layerActions.onUpdateLayerInformation.type, setLayerDimensionsSaga);
         case 8:
-          _context11.next = 10;
+          _context10.next = 10;
           return takeLatest(mapActions$1.toggleAutoUpdate.type, toggleAutoUpdateSaga);
         case 10:
-          _context11.next = 12;
+          _context10.next = 12;
           return takeEvery(mapActions$1.setMapPreset.type, setMapPresetSaga);
         case 12:
-          _context11.next = 14;
-          return all(mapPresetChangeActions.map(function (action) {
-            return takeEvery(action, checkMapPresetForChangesSaga);
-          }));
-        case 14:
-          _context11.next = 16;
+          _context10.next = 14;
           return takeEvery(mapActions$1.unregisterMap.type, unregisterMapSaga);
-        case 16:
+        case 14:
         case "end":
-          return _context11.stop();
+          return _context10.stop();
       }
     }
-  }, _marked11);
+  }, _marked10);
 }
 var moduleConfig = {
@@ -11977,7 +12121,6 @@ var LayerManager = function LayerManager(_ref) {
         }));
       }
     }),
-    hasElevation: !isDockedLayerManager,
     className: "layermanager",
     sx: layerManagerStyle,
     onResizeStop: function onResizeStop(_event, _direction, node) {
@@ -12048,6 +12191,7 @@ var LayerManager = function LayerManager(_ref) {
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var useSetupDialog = function useSetupDialog(dialogType) {
+  var source = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
   var dispatch = useDispatch();
   var onCloseDialog = useCallback(function () {
     dispatch(uiActions.setToggleOpenDialog({
@@ -12070,9 +12214,10 @@ var useSetupDialog = function useSetupDialog(dialogType) {
   var registerDialog = useCallback(function () {
     dispatch(uiActions.registerDialog({
       type: dialogType,
-      setOpen: false
+      setOpen: false,
+      source: source
     }));
-  }, [dialogType, dispatch]);
+  }, [dialogType, dispatch, source]);
   var unregisterDialog = useCallback(function () {
     dispatch(uiActions.unregisterDialog({
       type: dialogType
@@ -12238,9 +12383,9 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
   var onToggleDock = function onToggleDock() {
     // Close the floating layer manager and open docked layer manager
     onCloseDialog();
-    dispatch(mapActions$1.toggleDockedLayerManager({
-      mapId: mapId,
-      openDockedLayerManager: true
+    dispatch(uiActions.setToggleOpenDialog({
+      type: "".concat(DialogTypes.DockedLayerManager, "-").concat(mapId),
+      setOpen: true
     }));
   };
@@ -12294,7 +12439,9 @@ var DockedLayerManagerConnect = function DockedLayerManagerConnect(_ref) {
       _ref$showTitle = _ref.showTitle,
       showTitle = _ref$showTitle === void 0 ? false : _ref$showTitle,
       _ref$leftHeaderCompon = _ref.leftHeaderComponent,
-      leftHeaderComponent = _ref$leftHeaderCompon === void 0 ? undefined : _ref$leftHeaderCompon;
+      leftHeaderComponent = _ref$leftHeaderCompon === void 0 ? undefined : _ref$leftHeaderCompon,
+      _ref$source = _ref.source,
+      source = _ref$source === void 0 ? 'app' : _ref$source;
   var dispatch = useDispatch(); // TODO: Uncomment when adding the presets: https://gitlab.com/opengeoweb/opengeoweb/-/issues/2881
   // const isMapPresetLoading = useSelector((store: AppStore) =>
   //   mapSelectors.getIsMapPresetLoading(store, mapId),
@@ -12303,26 +12450,22 @@ var DockedLayerManagerConnect = function DockedLayerManagerConnect(_ref) {
   //   mapSelectors.getMapPresetError(store, mapId),
   // );
-  var isDockedLayerManagerOpen = useSelector(function (store) {
-    return getIsDockedLayerManagerOpen(store, mapId);
-  });
+  var dialogType = "".concat(DialogTypes.DockedLayerManager, "-").concat(mapId);
-  var onClose = function onClose() {
-    // Open docked layer manager and close the floating layer manager
-    dispatch(mapActions$1.toggleDockedLayerManager({
-      mapId: mapId,
-      openDockedLayerManager: false
-    }));
-  };
+  var _useSetupDialog = useSetupDialog(dialogType, source),
+      dialogOrder = _useSetupDialog.dialogOrder,
+      isDialogOpen = _useSetupDialog.isDialogOpen,
+      setDialogOrder = _useSetupDialog.setDialogOrder,
+      onCloseDialog = _useSetupDialog.onCloseDialog;
   var onToggleDock = function onToggleDock() {
     // Close docked layer manager and open the floating layer manager
-    onClose();
+    onCloseDialog();
     dispatch(uiActions.setActiveMapIdForDialog({
       type: DialogTypes.LayerManager,
       mapId: mapId,
       setOpen: true,
-      source: 'app'
+      source: source
     }));
   };
@@ -12331,8 +12474,8 @@ var DockedLayerManagerConnect = function DockedLayerManagerConnect(_ref) {
     preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
     preloadedBaseServices: preloadedBaseServices,
     bounds: bounds,
-    isOpen: isDockedLayerManagerOpen,
-    onClose: onClose,
+    isOpen: isDialogOpen,
+    onClose: onCloseDialog,
     showTitle: showTitle,
     leftHeaderComponent: leftHeaderComponent,
     // isLoading={isMapPresetLoading}
@@ -12343,7 +12486,10 @@ var DockedLayerManagerConnect = function DockedLayerManagerConnect(_ref) {
     startPosition: {
       top: 60,
       right: 16
-    }
+    },
+    onMouseDown: setDialogOrder,
+    order: dialogOrder,
+    source: source
   });
 };
@@ -15671,8 +15817,8 @@ var DimensionSelectDialogConnect = function DimensionSelectDialogConnect(_ref) {
       _ref$source = _ref.source,
       source = _ref$source === void 0 ? 'app' : _ref$source;
   var dispatch = useDispatch();
-  var mapDimension = useSelector(function (store) {
-    return getMapDimension(store, mapId, dimensionName);
+  var mapContainsDimension = useSelector(function (store) {
+    return getIsEnabledLayersForMapDimension(store, mapId, dimensionName);
   });
   var layerIds = useSelector(function (store) {
     return getLayerIds(store, mapId);
@@ -15700,7 +15846,7 @@ var DimensionSelectDialogConnect = function DimensionSelectDialogConnect(_ref) {
     }));
   }, [dispatch]);
-  if (!mapDimension || !layerIds || layerIds.length < 1) {
+  if (!mapContainsDimension || !layerIds || layerIds.length < 1) {
     return null;
   }
@@ -15820,6 +15966,10 @@ var DimensionSelectMapButtonConnect = function DimensionSelectMapButtonConnect(_
   });
   var isOpenInStore = useSelector(function (store) {
     return getisDialogOpen(store, uiDialogType);
+  }); // Only show button if enabled layer for map contains dimension
+  var mapContainsDimension = useSelector(function (store) {
+    return getIsEnabledLayersForMapDimension(store, mapId, dimension);
   });
   var openMultiDimensionDialog = React.useCallback(function () {
     var setOpen = currentActiveMapId !== mapId ? true : !isOpenInStore;
@@ -15830,6 +15980,11 @@ var DimensionSelectMapButtonConnect = function DimensionSelectMapButtonConnect(_
       source: source
     }));
   }, [currentActiveMapId, dispatch, isOpenInStore, uiDialogType, mapId, source]);
+  if (!mapContainsDimension) {
+    return null;
+  }
   var isOpen = currentActiveMapId === mapId && isOpenInStore;
   return /*#__PURE__*/React.createElement(DimensionSelectButton, {
     dimension: dimension,
@@ -15973,7 +16128,8 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
       title = _ref.title,
       icon = _ref.icon,
       _ref$onChangeMouseWhe = _ref.onChangeMouseWheel,
-      onChangeMouseWheel = _ref$onChangeMouseWhe === void 0 ? function () {} : _ref$onChangeMouseWhe;
+      onChangeMouseWheel = _ref$onChangeMouseWhe === void 0 ? function () {} : _ref$onChangeMouseWhe,
+      animationLength = _ref.animationLength;
   var currentMarkIndex = marks.findIndex(function (mark) {
     return mark.value === value;
   });
@@ -16065,7 +16221,22 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
     },
     selected: isAutoSelected,
     disabled: isDisabled
-  }, "Auto")));
+  }, "Auto"), animationLength && /*#__PURE__*/React.createElement(MenuItem, {
+    disabled: true,
+    sx: {
+      fontSize: '12px',
+      opacity: 0.67,
+      padding: '0px 12px',
+      '&.MuiMenuItem-root': {
+        minHeight: '30px!important'
+      }
+    }
+  }, "length"), animationLength && /*#__PURE__*/React.createElement(ToolButton, {
+    "data-testid": "menu-animation-length-button",
+    active: false,
+    disableRipple: true,
+    width: "100%"
+  }, minutesToDescribedDuration(animationLength))));
 };
 var speedTooltipTitle = 'Speed';
@@ -16208,8 +16379,7 @@ var TimeStepButton = function TimeStepButton(_ref) {
   var timeStep = _ref.timeStep,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$isTimestepAuto = _ref.isTimestepAuto,
-      isTimestepAuto = _ref$isTimestepAuto === void 0 ? false : _ref$isTimestepAuto,
+      isTimestepAuto = _ref.isTimestepAuto,
       onChangeTimeStep = _ref.onChangeTimeStep,
       _ref$onToggleTimestep = _ref.onToggleTimestepAuto,
       onToggleTimestepAuto = _ref$onToggleTimestep === void 0 ? function () {} : _ref$onToggleTimestep,
@@ -16418,6 +16588,7 @@ var AnimationLengthButton = function AnimationLengthButton(_ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$animationLength = _ref.animationLength,
       animationLength = _ref$animationLength === void 0 ? AnimationLength.Hours1 : _ref$animationLength,
+      animationLengthInMinutes = _ref.animationLengthInMinutes,
       onChangeAnimationLength = _ref.onChangeAnimationLength;
   var onChangeSliderValue = function onChangeSliderValue(mark) {
@@ -16436,7 +16607,8 @@ var AnimationLengthButton = function AnimationLengthButton(_ref) {
     title: title,
     isDisabled: disabled,
     value: animationLength,
-    onChangeMouseWheel: onChangeSliderValue
+    onChangeMouseWheel: onChangeSliderValue,
+    animationLength: animationLengthInMinutes
   });
 };
@@ -16485,7 +16657,8 @@ var OptionsMenu = function OptionsMenu(_ref) {
     xs: "auto"
   }, timeStepBtn || /*#__PURE__*/React__default.createElement(TimeStepButton, {
     timeStep: 0,
-    onChangeTimeStep: function onChangeTimeStep() {}
+    onChangeTimeStep: function onChangeTimeStep() {},
+    isTimestepAuto: false
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: "auto"
@@ -16506,12 +16679,7 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
       timeScaleBtn = _ref.timeScaleBtn,
       animationLengthBtn = _ref.animationLengthBtn,
       _ref$isOpenByDefault = _ref.isOpenByDefault,
-      isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault,
-      timeStep = _ref.timeStep,
-      timeDimension = _ref.timeDimension,
-      onChangeTimeStep = _ref.onChangeTimeStep,
-      _ref$isTimestepAuto = _ref.isTimestepAuto,
-      isTimestepAuto = _ref$isTimestepAuto === void 0 ? false : _ref$isTimestepAuto;
+      isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault;
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -16528,12 +16696,6 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
       setOpen(true);
     }
   }, [anchorEl, isOpenByDefault]);
-  var timeStepFromLayer = getActiveLayerTimeStep(timeDimension) || timeStep;
-  React__default.useEffect(function () {
-    if (isTimestepAuto) {
-      onChangeTimeStep(timeStepFromLayer);
-    }
-  }, [timeStepFromLayer, isTimestepAuto, onChangeTimeStep]);
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: "Animation options",
     placement: "bottom"
@@ -17530,11 +17692,155 @@ var isInsideAnimationArea = function isInsideAnimationArea(x, leftMarkerPx, righ
  * @returns
  */
-var isLeftAnimationIconArea = function isLeftAnimationIconArea(x, leftMarkerPx, width) {
-  return x >= leftMarkerPx && x <= leftMarkerPx + width;
-};
+var isLeftAnimationIconArea = function isLeftAnimationIconArea(x, leftMarkerPx, width) {
+  return x >= leftMarkerPx && x <= leftMarkerPx + width;
+};
+var TIME_SLIDER_LEGEND_HEIGHT = 24;
+var DRAG_AREA_WIDTH = 24;
+function useAnimationTime(animationStartTime, animationEndTime, onSetAnimationStartTime, onSetAnimationEndTime, leftMarkerDragging, rightMarkerDragging, animationAreaDragging, centerTime, canvasWidth, secondsPerPx, dragTooltipPosition, pixelsToLeft, setTooltipTime, startDraggingPosition) {
+  var _React$useState = React.useState(convertStringTimeToUnix(animationStartTime)),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      localAnimationStartTime = _React$useState2[0],
+      setLocalAnimationStartTime = _React$useState2[1];
+  var _React$useState3 = React.useState(convertStringTimeToUnix(animationEndTime)),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      localAnimationEndTime = _React$useState4[0],
+      setLocalAnimationEndTime = _React$useState4[1];
+  React.useEffect(function () {
+    setLocalAnimationStartTime(convertStringTimeToUnix(animationStartTime));
+    setLocalAnimationEndTime(convertStringTimeToUnix(animationEndTime));
+  }, [animationStartTime, animationEndTime]);
+  var animationDiff = React.useRef();
+  var pixelsMovedSinceStartDragging = React.useRef(0);
+  React.useEffect(function () {
+    var handleMouseUp = function handleMouseUp() {
+      pixelsMovedSinceStartDragging.current = 0;
+      animationDiff.current = undefined;
+    };
+    document.addEventListener('mouseup', handleMouseUp);
+    return function () {
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, []);
+  React.useEffect(function () {
+    var stoppedDragging = !leftMarkerDragging && !rightMarkerDragging && !animationAreaDragging;
+    if (stoppedDragging) {
+      if (localAnimationStartTime && localAnimationStartTime !== convertStringTimeToUnix(animationStartTime)) {
+        onSetAnimationStartTime(moment.utc(localAnimationStartTime * 1000).format(dateFormat));
+      }
+      if (localAnimationEndTime && localAnimationEndTime !== convertStringTimeToUnix(animationEndTime)) {
+        onSetAnimationEndTime(moment.utc(localAnimationEndTime * 1000).format(dateFormat));
+      }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [leftMarkerDragging, rightMarkerDragging, animationAreaDragging]);
+  var handleAnimationDragging = useCallback(function (x) {
+    if (!localAnimationStartTime || !localAnimationEndTime) return;
+    var _map = [localAnimationStartTime, localAnimationEndTime].map(function (timestamp) {
+      return timestampToPixel(timestamp, centerTime, canvasWidth, secondsPerPx);
+    }),
+        _map2 = _slicedToArray(_map, 2),
+        leftMarkerPx = _map2[0],
+        rightMarkerPx = _map2[1];
+    if (leftMarkerDragging) {
+      var mousePosition = leftMarkerPx + x;
+      var rightAnimationPosition = rightMarkerPx - DRAG_AREA_WIDTH * 2;
+      if (mousePosition >= rightAnimationPosition || mousePosition <= 0) return; // eslint-disable-next-line no-param-reassign
+      dragTooltipPosition.current = pixelsToLeft ? mousePosition + pixelsToLeft : mousePosition;
+      var mouseTimeUnix = pixelToTimestamp(mousePosition, centerTime, canvasWidth, secondsPerPx);
+      setLocalAnimationStartTime(mouseTimeUnix);
+      setTooltipTime(moment.unix(mouseTimeUnix));
+      return;
+    }
+    if (rightMarkerDragging) {
+      var _mousePosition = rightMarkerPx + x;
+      var leftAnimationPosition = leftMarkerPx + DRAG_AREA_WIDTH * 2;
+      if (leftAnimationPosition >= _mousePosition || _mousePosition >= canvasWidth) return; // eslint-disable-next-line no-param-reassign
+      dragTooltipPosition.current = pixelsToLeft ? _mousePosition + pixelsToLeft : _mousePosition;
+      var _mouseTimeUnix = pixelToTimestamp(_mousePosition, centerTime, canvasWidth, secondsPerPx);
+      setLocalAnimationEndTime(_mouseTimeUnix);
+      setTooltipTime(moment.unix(_mouseTimeUnix));
+      return;
+    }
+    if (animationAreaDragging) {
+      if (animationDiff.current === undefined) {
+        var startDraggingPositionTimestamp = pixelToTimestamp(startDraggingPosition.current, centerTime, canvasWidth, secondsPerPx);
+        var diffLeftAnimationToStartDraggingPosition = startDraggingPositionTimestamp - localAnimationStartTime;
+        var diffRightAnimationToStartDraggingPosition = localAnimationEndTime - startDraggingPositionTimestamp;
+        animationDiff.current = {
+          diffStartToRight: diffRightAnimationToStartDraggingPosition,
+          diffStartToLeft: diffLeftAnimationToStartDraggingPosition
+        };
+        return;
+      }
+      pixelsMovedSinceStartDragging.current += x;
+      var currentPositionTimestamp = pixelToTimestamp(startDraggingPosition.current + pixelsMovedSinceStartDragging.current, centerTime, canvasWidth, secondsPerPx);
+      var _animationDiff$curren = animationDiff.current,
+          diffStartToRight = _animationDiff$curren.diffStartToRight,
+          diffStartToLeft = _animationDiff$curren.diffStartToLeft;
+      var startTime = currentPositionTimestamp - diffStartToLeft;
+      var endTime = currentPositionTimestamp + diffStartToRight;
+      setLocalAnimationStartTime(startTime);
+      setLocalAnimationEndTime(endTime);
+    }
+  }, [localAnimationStartTime, localAnimationEndTime, leftMarkerDragging, rightMarkerDragging, animationAreaDragging, centerTime, canvasWidth, secondsPerPx, dragTooltipPosition, pixelsToLeft, setTooltipTime, startDraggingPosition]);
+  return {
+    handleAnimationDragging: handleAnimationDragging,
+    localAnimationEndTime: localAnimationEndTime,
+    localAnimationStartTime: localAnimationStartTime
+  };
+}
+function useHandleKeyDown(mapIsActive, timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime, selectedTime) {
+  var curTime = selectedTime !== undefined ? moment.unix(selectedTime).toISOString() : moment.utc().toISOString();
+  React.useEffect(function () {
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === 'Home' && mapIsActive) {
+        handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime);
+      }
+      if (event.ctrlKey && dataStartTime && dataEndTime && mapIsActive) {
+        switch (event.code) {
+          case 'ArrowLeft':
+            setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate);
+            break;
+          case 'ArrowRight':
+            setNextTimeStep(timeStep, curTime, dataEndTime, onSetNewDate);
+            break;
+        }
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [curTime, currentTime, dataEndTime, dataStartTime, mapIsActive, onSetCenterTime, onSetNewDate, timeStep]);
+}
+function convertStringTimeToUnix(time) {
+  return time ? moment.utc(time).unix() : undefined;
+} // Explanation of props can be found here:
+// https://drive.google.com/file/d/1jqqNcciCH0UJiZ04HO-1vknmPPpT8fK5/view?usp=sharing
-var DRAG_AREA_WIDTH = 24;
 var TimeSliderLegend = function TimeSliderLegend(_ref) {
   var mapId = _ref.mapId,
@@ -17555,202 +17861,97 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       mapIsActive = _ref$mapIsActive === void 0 ? true : _ref$mapIsActive,
       unfilteredSelectedTime = _ref.unfilteredSelectedTime,
       setUnfilteredSelectedTime = _ref.setUnfilteredSelectedTime,
-      onSetNewDate = _ref.onSetNewDate,
-      onSetCenterTime = _ref.onSetCenterTime,
-      onSetAnimationStartTime = _ref.onSetAnimationStartTime,
-      onSetAnimationEndTime = _ref.onSetAnimationEndTime;
+      _ref$onSetNewDate = _ref.onSetNewDate,
+      onSetNewDate = _ref$onSetNewDate === void 0 ? function () {} : _ref$onSetNewDate,
+      _ref$onSetCenterTime = _ref.onSetCenterTime,
+      onSetCenterTime = _ref$onSetCenterTime === void 0 ? function () {} : _ref$onSetCenterTime,
+      _ref$onSetAnimationSt = _ref.onSetAnimationStartTime,
+      onSetAnimationStartTime = _ref$onSetAnimationSt === void 0 ? function () {} : _ref$onSetAnimationSt,
+      _ref$onSetAnimationEn = _ref.onSetAnimationEndTime,
+      onSetAnimationEndTime = _ref$onSetAnimationEn === void 0 ? function () {} : _ref$onSetAnimationEn;
+  useHandleKeyDown(mapIsActive, timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime, selectedTime);
   var _useCanvasTarget = useCanvasTarget('mousedown'),
       _useCanvasTarget2 = _slicedToArray(_useCanvasTarget, 2),
       node = _useCanvasTarget2[1];
-  var _React$useState = React.useState(0),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      canvasWidth = _React$useState2[0],
-      setCanvasWidth = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      selectedTimeDragging = _React$useState4[0],
-      setSelectedTimeDragging = _React$useState4[1];
-  var _React$useState5 = React.useState(false),
+  var _React$useState5 = React.useState(0),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
-      leftMarkerDragging = _React$useState6[0],
-      setLeftMarkerDragging = _React$useState6[1];
+      canvasWidth = _React$useState6[0],
+      setCanvasWidth = _React$useState6[1];
   var _React$useState7 = React.useState(false),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
-      rightMarkerDragging = _React$useState8[0],
-      setRightMarkerDragging = _React$useState8[1];
+      selectedTimeDragging = _React$useState8[0],
+      setSelectedTimeDragging = _React$useState8[1];
   var _React$useState9 = React.useState(false),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
-      centerTimeDragging = _React$useState10[0],
-      setCenterTimeDragging = _React$useState10[1];
+      leftMarkerDragging = _React$useState10[0],
+      setLeftMarkerDragging = _React$useState10[1];
   var _React$useState11 = React.useState(false),
       _React$useState12 = _slicedToArray(_React$useState11, 2),
-      dragTooltipOpen = _React$useState12[0],
-      setDragTooltipOpen = _React$useState12[1];
+      rightMarkerDragging = _React$useState12[0],
+      setRightMarkerDragging = _React$useState12[1];
   var _React$useState13 = React.useState(false),
       _React$useState14 = _slicedToArray(_React$useState13, 2),
-      mouseDownInLegend = _React$useState14[0],
-      setMouseDownInLegend = _React$useState14[1];
+      dragTooltipOpen = _React$useState14[0],
+      setDragTooltipOpen = _React$useState14[1];
-  var _React$useState15 = React.useState(animationStartTime && moment.utc(animationStartTime).unix()),
+  var _React$useState15 = React.useState(false),
       _React$useState16 = _slicedToArray(_React$useState15, 2),
-      localAnimationStartTime = _React$useState16[0],
-      setLocalAnimationStartTime = _React$useState16[1];
+      mouseDownInLegend = _React$useState16[0],
+      setMouseDownInLegend = _React$useState16[1];
-  var _React$useState17 = React.useState(animationEndTime && moment.utc(animationEndTime).unix()),
+  var _React$useState17 = React.useState(false),
       _React$useState18 = _slicedToArray(_React$useState17, 2),
-      localAnimationEndTime = _React$useState18[0],
-      setLocalAnimationEndTime = _React$useState18[1];
+      animationAreaDragging = _React$useState18[0],
+      setAnimationAreaDragging = _React$useState18[1];
-  var _React$useState19 = React.useState(moment.utc(0)),
+  var _React$useState19 = React.useState('auto'),
       _React$useState20 = _slicedToArray(_React$useState19, 2),
-      tooltipTime = _React$useState20[0],
-      setTooltipTime = _React$useState20[1];
-  var _React$useState21 = React.useState(false),
-      _React$useState22 = _slicedToArray(_React$useState21, 2),
-      animationAreaDragging = _React$useState22[0],
-      setAnimationAreaDragging = _React$useState22[1];
-  var animationDiff = React.useRef();
-  var isClickOrDrag = React.useRef();
-  var pixelsMovedSinceStartDragging = React.useRef(0);
-  var elem = document.querySelector(".timeSliderLegend_".concat(mapId));
-  var pixelsToLeft = elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect()['left'];
-  var pixelsToTop = elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect()['top'];
-  var _React$useState23 = React.useState('auto'),
-      _React$useState24 = _slicedToArray(_React$useState23, 2),
-      cursorStyle = _React$useState24[0],
-      setCursorStyle = _React$useState24[1];
-  var curTime = selectedTime !== undefined ? moment.unix(selectedTime).toISOString() : moment.utc().toISOString();
-  React.useEffect(function () {
-    setLocalAnimationStartTime(animationStartTime && moment.utc(animationStartTime).unix());
-    setLocalAnimationEndTime(animationEndTime && moment.utc(animationEndTime).unix());
-  }, [animationStartTime, animationEndTime]);
-  React.useEffect(function () {
-    var handleKeyDown = function handleKeyDown(event) {
-      if (event.key === 'Home' && mapIsActive) {
-        handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime);
-      }
-      if (event.ctrlKey && dataStartTime && dataEndTime && mapIsActive) {
-        switch (event.code) {
-          case 'ArrowLeft':
-            setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate);
-            break;
-          case 'ArrowRight':
-            setNextTimeStep(timeStep, curTime, dataEndTime, onSetNewDate);
-            break;
-        }
-      }
-    };
-    document.addEventListener('keydown', handleKeyDown);
-    return function () {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [curTime, currentTime, dataEndTime, dataStartTime, mapIsActive, onSetCenterTime, onSetNewDate, timeStep]);
+      cursorStyle = _React$useState20[0],
+      setCursorStyle = _React$useState20[1];
   /**
    * remove active drag. can happen outside canvas.
    */
   React.useEffect(function () {
     var handleMouseUp = function handleMouseUp() {
-      centerTimeDragging ? setCursorStyle('auto') : setCursorStyle('ew-resize');
+      setCursorStyle('auto');
       setSelectedTimeDragging(false);
       setLeftMarkerDragging(false);
       setRightMarkerDragging(false);
       setMouseDownInLegend(false);
-      setCenterTimeDragging(false);
       setDragTooltipOpen(false);
       setAnimationAreaDragging(false);
       startDraggingPosition.current = 0;
-      pixelsMovedSinceStartDragging.current = 0;
-      animationDiff.current = undefined;
     };
     document.addEventListener('mouseup', handleMouseUp);
     return function () {
       document.removeEventListener('mouseup', handleMouseUp);
     };
-  }, [centerTimeDragging]);
-  var onMouseTouchMoveActions = useCallback(function (x) {
-    if (!localAnimationStartTime || !localAnimationEndTime) return;
-    var _map = [localAnimationStartTime, localAnimationEndTime].map(function (timestamp) {
-      return timestampToPixel(timestamp, centerTime, canvasWidth, secondsPerPx);
-    }),
-        _map2 = _slicedToArray(_map, 2),
-        leftMarkerPx = _map2[0],
-        rightMarkerPx = _map2[1];
-    if (leftMarkerDragging) {
-      var mousePosition = leftMarkerPx + x;
-      var rightAnimationPosition = rightMarkerPx - DRAG_AREA_WIDTH * 2; // update tooltip position while dragging
-      // Prevent dragging if it would cause markers to cross over, except if the markers
-      // are moved away from being crossed over
-      if (mousePosition >= rightAnimationPosition || mousePosition <= 0) return; // set animation drag info dialog location
-      dragTooltipPosition.current = pixelsToLeft ? mousePosition + pixelsToLeft : mousePosition; // change local time bounds according to either dragged marker
-      var mouseTimeUnix = pixelToTimestamp(mousePosition, // lets us drag on the marker
-      centerTime, canvasWidth, secondsPerPx);
-      setLocalAnimationStartTime(mouseTimeUnix);
-      setTooltipTime(moment.unix(mouseTimeUnix));
-      return;
-    }
-    if (rightMarkerDragging) {
-      var _mousePosition = rightMarkerPx + x;
-      var leftAnimationPosition = leftMarkerPx + DRAG_AREA_WIDTH * 2; // Similar condition for other marker
-      if (leftAnimationPosition >= _mousePosition || _mousePosition >= canvasWidth) return; // set animation drag info dialog location
-      dragTooltipPosition.current = pixelsToLeft ? _mousePosition + pixelsToLeft : _mousePosition; // change local time bounds according to either dragged marker
-      var _mouseTimeUnix = pixelToTimestamp(_mousePosition, // lets us drag on the marker
-      centerTime, canvasWidth, secondsPerPx);
+  }, []);
+  var dragTooltipPosition = React.useRef();
+  var startDraggingPosition = React.useRef(0);
+  var timeSliderLegendId = "timeSliderLegend_".concat(mapId);
+  var timeSliderLegendElement = document.querySelector(".".concat(timeSliderLegendId));
+  var pixelsToLeft = timeSliderLegendElement === null || timeSliderLegendElement === void 0 ? void 0 : timeSliderLegendElement.getBoundingClientRect()['left'];
-      setLocalAnimationEndTime(_mouseTimeUnix);
-      setTooltipTime(moment.unix(_mouseTimeUnix));
-      return;
-    }
+  var _React$useState21 = React.useState(moment.utc(0)),
+      _React$useState22 = _slicedToArray(_React$useState21, 2),
+      tooltipTime = _React$useState22[0],
+      setTooltipTime = _React$useState22[1];
-    if (animationAreaDragging) {
-      if (animationDiff.current === undefined) {
-        var startDraggingPositionTimestamp = pixelToTimestamp(startDraggingPosition.current, centerTime, canvasWidth, secondsPerPx);
-        var diffLeftAnimationToStartDraggingPosition = startDraggingPositionTimestamp - localAnimationStartTime;
-        var diffRightAnimationToStartDraggingPosition = localAnimationEndTime - startDraggingPositionTimestamp;
-        animationDiff.current = {
-          diffStartToRight: diffRightAnimationToStartDraggingPosition,
-          diffStartToLeft: diffLeftAnimationToStartDraggingPosition
-        };
-        return;
-      }
+  var _useAnimationTime = useAnimationTime(animationStartTime, animationEndTime, onSetAnimationStartTime, onSetAnimationEndTime, leftMarkerDragging, rightMarkerDragging, animationAreaDragging, centerTime, canvasWidth, secondsPerPx, dragTooltipPosition, pixelsToLeft, setTooltipTime, startDraggingPosition),
+      handleAnimationDragging = _useAnimationTime.handleAnimationDragging,
+      localAnimationEndTime = _useAnimationTime.localAnimationEndTime,
+      localAnimationStartTime = _useAnimationTime.localAnimationStartTime;
-      pixelsMovedSinceStartDragging.current += x;
-      var currentPositionTimestamp = pixelToTimestamp(startDraggingPosition.current + pixelsMovedSinceStartDragging.current, centerTime, canvasWidth, secondsPerPx);
-      var _animationDiff$curren = animationDiff.current,
-          diffStartToRight = _animationDiff$curren.diffStartToRight,
-          diffStartToLeft = _animationDiff$curren.diffStartToLeft;
-      var startTime = currentPositionTimestamp - diffStartToLeft;
-      var endTime = currentPositionTimestamp + diffStartToRight;
-      setLocalAnimationStartTime(startTime);
-      setLocalAnimationEndTime(endTime);
-    }
-  }, [localAnimationStartTime, localAnimationEndTime, leftMarkerDragging, rightMarkerDragging, animationAreaDragging, centerTime, canvasWidth, secondsPerPx, pixelsToLeft, animationDiff]);
   var setSelectedTime = useCallback(function (x) {
     var unfliteredSelectedTimePx = timestampToPixel(unfilteredSelectedTime, centerTime, canvasWidth, secondsPerPx) + x;
     setUnfilteredSelectedTime(pixelToTimestamp(unfliteredSelectedTimePx, centerTime, canvasWidth, secondsPerPx));
@@ -17761,12 +17962,11 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       if (event.movementX === 0) return;
       if (mouseDownInLegend) {
-        setCenterTimeDragging(true);
         var dragDistanceTime = event.movementX * secondsPerPx;
         var newCenterTime = centerTime - dragDistanceTime;
         onSetCenterTime && onSetCenterTime(newCenterTime);
       } else if (leftMarkerDragging || rightMarkerDragging || animationAreaDragging) {
-        onMouseTouchMoveActions(event.movementX);
+        handleAnimationDragging(event.movementX);
       } else if (selectedTimeDragging) {
         setSelectedTime(event.movementX);
       }
@@ -17776,9 +17976,9 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     return function () {
       document.removeEventListener('mousemove', handleMouseMove);
     };
-  }, [animationAreaDragging, centerTime, leftMarkerDragging, mouseDownInLegend, onMouseTouchMoveActions, onSetCenterTime, rightMarkerDragging, secondsPerPx, selectedTimeDragging, setSelectedTime]);
+  }, [animationAreaDragging, centerTime, leftMarkerDragging, mouseDownInLegend, handleAnimationDragging, onSetCenterTime, rightMarkerDragging, secondsPerPx, selectedTimeDragging, setSelectedTime]);
   var theme = useTheme();
-  var startDraggingPosition = React.useRef(0);
+  var isClickOrDrag = React.useRef();
   var onMouseDown = function onMouseDown(x, y, width) {
     isClickOrDrag.current = 'click';
@@ -17799,7 +17999,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       return;
     }
-    if (animationStartTime && animationEndTime && onSetAnimationStartTime && onSetAnimationEndTime) {
+    if (animationStartTime && animationEndTime) {
       dragTooltipPosition.current = pixelsToLeft ? x + pixelsToLeft : x; // start dragging either marker
       if (isLeftAnimationIconArea(x, leftMarkerPx, DRAG_AREA_WIDTH) && !rightMarkerDragging) {
@@ -17829,22 +18029,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     setMouseDownInLegend(true);
   };
-  React.useEffect(function () {
-    var stoppedDragging = !leftMarkerDragging && !rightMarkerDragging && !animationAreaDragging;
-    if (stoppedDragging) {
-      if (localAnimationStartTime !== convertStringTimeToUnix(animationStartTime)) {
-        onSetAnimationStartTime(moment.utc(localAnimationStartTime * 1000).format(dateFormat));
-      }
-      if (localAnimationEndTime !== convertStringTimeToUnix(animationEndTime)) {
-        onSetAnimationEndTime(moment.utc(localAnimationEndTime * 1000).format(dateFormat));
-      }
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [leftMarkerDragging, rightMarkerDragging, animationAreaDragging]);
-  var onMouseUpTouchEnd = function onMouseUpTouchEnd(x) {
+  var onMouseUp = function onMouseUp(x) {
     if (isClickOrDrag.current === 'click') {
       // we need to set the unfiltered time, so the timebox will update accordingly
       setUnfilteredSelectedTime(pixelToTimestamp(x, centerTime, canvasWidth, secondsPerPx));
@@ -17887,8 +18072,8 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     }
   };
-  var dragTooltipPosition = React.useRef();
   var popperRef = React.useRef(null);
+  var pixelsToTop = timeSliderLegendElement === null || timeSliderLegendElement === void 0 ? void 0 : timeSliderLegendElement.getBoundingClientRect()['top'];
   var setTooltipPosition = function setTooltipPosition() {
     var tooltipX = dragTooltipPosition.current;
@@ -17907,7 +18092,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     }
   }, /*#__PURE__*/React.createElement(Box, {
     "data-testid": "timeSliderLegend",
-    className: "timeSliderLegend_".concat(mapId),
+    className: timeSliderLegendId,
     sx: {
       height: "".concat(TIME_SLIDER_LEGEND_HEIGHT, "px"),
       borderRadius: '4.5px',
@@ -17924,7 +18109,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       onSetCenterTime && onSetCenterTime(newCenterTime);
     },
     onMouseDown: onMouseDown,
-    onMouseUp: onMouseUpTouchEnd,
+    onMouseUp: onMouseUp,
     onRenderCanvas: function onRenderCanvas(ctx, width, height) {
       setCanvasWidth(width);
       drawTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTime, scale, currentTime, localAnimationStartTime, localAnimationEndTime, dataStartTime, dataEndTime);
@@ -17932,12 +18117,6 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
   })));
 };
-function convertStringTimeToUnix(time) {
-  return time ? moment.utc(time).unix() : undefined;
-}
-var TIME_SLIDER_LEGEND_HEIGHT = 24;
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18381,26 +18560,46 @@ var TimeStepButtonComponent = function TimeStepButtonComponent(_ref) {
   var isTimestepAuto$1 = useSelector(function (store) {
     return isTimestepAuto(store, mapId);
   });
-  var onToggleTimestepAuto = React.useCallback(function () {
+  var activeLayerId = useSelector(function (store) {
+    return getActiveLayerId(store, mapId);
+  });
+  var activeLayerTimeDimension = useSelector(function (store) {
+    return getLayerTimeDimension(store, activeLayerId);
+  });
+  var onToggleTimestepAuto = function onToggleTimestepAuto() {
+    var newTimestepAuto = !isTimestepAuto$1;
+    if (newTimestepAuto) {
+      var timeStepFromLayer = getActiveLayerTimeStep(activeLayerTimeDimension);
+      if (timeStepFromLayer) {
+        dispatch(mapActions$1.setTimeStep({
+          mapId: mapId,
+          timeStep: timeStepFromLayer
+        }));
+      }
+    }
     dispatch(mapActions$1.toggleTimestepAuto({
       mapId: mapId,
-      timestepAuto: !isTimestepAuto$1,
-      origin: MapActionOrigin.map
+      timestepAuto: newTimestepAuto
     }));
-  }, [dispatch, isTimestepAuto$1, mapId]);
-  var onSetTimeStep = React.useCallback(function (timeStep, origin) {
-    dispatch(mapActions$1.setTimeStep(Object.assign({
+  };
+  var onSetTimeStep = function onSetTimeStep(timeStep) {
+    dispatch(mapActions$1.setTimeStep({
       mapId: mapId,
       timeStep: timeStep
-    }, origin && {
-      origin: origin
-    })));
-  }, [dispatch, mapId]);
+    }));
+  };
   return /*#__PURE__*/React.createElement(TimeStepButton, {
     timeStep: timeStep,
     onChangeTimeStep: onSetTimeStep,
     disabled: isAnimating$1,
-    onToggleTimestepAuto: onToggleTimestepAuto
+    onToggleTimestepAuto: onToggleTimestepAuto,
+    isTimestepAuto: Boolean(isTimestepAuto$1)
   });
 };
@@ -18567,7 +18766,8 @@ var AnimationLengthButtonConnect = function AnimationLengthButtonConnect(_ref) {
   return /*#__PURE__*/React.createElement(AnimationLengthButton, {
     disabled: isAnimating$1,
     animationLength: currentLength || Number(AnimationLength.Hours24),
-    onChangeAnimationLength: handlechangeAnimationLength
+    onChangeAnimationLength: handlechangeAnimationLength,
+    animationLengthInMinutes: currentDiffInMinutes
   });
 };
@@ -18599,27 +18799,6 @@ var AnimationLengthButtonConnect = function AnimationLengthButtonConnect(_ref) {
 var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
   var sourceId = _ref.sourceId,
       mapId = _ref.mapId;
-  var dispatch = useDispatch();
-  var isTimestepAuto$1 = useSelector(function (store) {
-    return isTimestepAuto(store, mapId);
-  });
-  var timeStep = useSelector(function (store) {
-    return getMapTimeStep(store, mapId);
-  });
-  var activeLayerId = useSelector(function (store) {
-    return getActiveLayerId(store, mapId);
-  });
-  var activeLayerTimeDimension = useSelector(function (store) {
-    return getLayerTimeDimension(store, activeLayerId);
-  });
-  var onSetTimeStep = React.useCallback(function (timeStep, origin) {
-    dispatch(mapActions$1.setTimeStep(Object.assign({
-      mapId: mapId,
-      timeStep: timeStep
-    }, origin && {
-      origin: origin
-    })));
-  }, [dispatch, mapId]);
   return /*#__PURE__*/React.createElement(OptionsMenuButton, {
     nowBtn: /*#__PURE__*/React.createElement(NowButtonConnect, {
       mapId: mapId,
@@ -18639,11 +18818,7 @@ var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
     }),
     timeScaleBtn: /*#__PURE__*/React.createElement(TimeScaleButtonConnect, {
       mapId: mapId
-    }),
-    timeStep: timeStep,
-    isTimestepAuto: isTimestepAuto$1,
-    onChangeTimeStep: onSetTimeStep,
-    timeDimension: activeLayerTimeDimension
+    })
   });
 };
@@ -19758,6 +19933,34 @@ var checkHoverFeatures = function checkHoverFeatures(geojson, mouseX, mouseY, co
   return null;
 };
+var generatedDrawFunctionIds = 0;
+var generateDrawFunctionId = function generateDrawFunctionId() {
+  generatedDrawFunctionIds += 1;
+  return "drawFunctionId_".concat(generatedDrawFunctionIds);
+};
+/**
+ *  DrawFunction store for re-use of drawFunctions
+ */
+var drawFunctionStore = [];
+var getDrawFunctionFromStore = function getDrawFunctionFromStore(id) {
+  var drawFunction = drawFunctionStore.find(function (drawFunction) {
+    return drawFunction.id === id;
+  });
+  return drawFunction === null || drawFunction === void 0 ? void 0 : drawFunction.drawMethod;
+};
+var registerDrawFunction = function registerDrawFunction() {
+  var drawFunction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {};
+  var id = generateDrawFunctionId();
+  var newFunction = {
+    id: id,
+    drawMethod: drawFunction
+  };
+  drawFunctionStore.push(newFunction);
+  return id;
+};
 var Proj4js = proj4; // Cache for for storing and reusing Proj4 instances
@@ -21561,22 +21764,25 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       }
       var drawStyledMarker = featureProperties ? featureProperties.stroke || featureProperties['stroke-width'] || featureProperties.fill : null;
-      var drawMarkerByDefault = !featureProperties || !featureProperties.imageURL || !featureProperties.drawFunction;
-      if (featureProperties.drawFunction) {
-        var isHovered = this.featureEvent && this.featureEvent.feature === feature;
-        featureProperties.drawFunction({
-          context: ctx,
-          featureIndex: featureIndex,
-          coord: _coord,
-          selected: selected,
-          middle: middle,
-          isInEditMode: isInEditMode,
-          feature: feature,
-          mouseX: this.mouseX,
-          mouseY: this.mouseY,
-          isHovered: isHovered
-        });
+      var drawMarkerByDefault = !featureProperties || !featureProperties.imageURL || !featureProperties.drawFunctionId;
+      if (featureProperties.drawFunctionId) {
+        var drawFunction = getDrawFunctionFromStore(featureProperties.drawFunctionId);
+        if (drawFunction) {
+          var isHovered = this.featureEvent && this.featureEvent.feature === feature;
+          drawFunction({
+            context: ctx,
+            featureIndex: featureIndex,
+            coord: _coord,
+            selected: selected,
+            isInEditMode: isInEditMode,
+            feature: feature,
+            mouseX: this.mouseX,
+            mouseY: this.mouseY,
+            isHovered: isHovered
+          });
+        }
       } else if (drawStyledMarker || drawMarkerByDefault) {
         this.drawMarker(ctx, _coord, selected, middle, isInEditMode, featureProperties);
       }
@@ -22171,9 +22377,8 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this$props2 = this.props,
-          onMount = _this$props2.onMount,
+          onWMJSMount = _this$props2.onWMJSMount,
           mapId = _this$props2.mapId,
-          onRegisterAdaguc = _this$props2.onRegisterAdaguc,
           shouldAutoFetch = _this$props2.shouldAutoFetch;
       this.checkAdaguc();
       this.checkNewProps(null, this.props);
@@ -22181,13 +22386,9 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
       if (this.adaguc.initialized === false && this.adaguc.webMapJS) {
         this.adaguc.initialized = true;
-        if (onRegisterAdaguc) {
-          onRegisterAdaguc(this.adaguc.webMapJS);
-        }
       }
-      onMount(mapId, this.adaguc.webMapJS);
+      onWMJSMount(mapId);
       if (shouldAutoFetch) {
         this.onStartRefetchTimer();
@@ -22196,11 +22397,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$props3 = this.props,
-          onUnMount = _this$props3.onUnMount,
-          mapId = _this$props3.mapId;
       window.removeEventListener('resize', this.handleWindowResize);
-      onUnMount(mapId, this.adaguc.webMapJS);
       this.adaguc.webMapJS.getListener().suspendEvents();
       if (typeof this.adaguc.webMapJS.stopAnimating === 'function') {
@@ -22214,9 +22411,9 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "onDimChangeListener",
     value: function onDimChangeListener() {
-      var _this$props4 = this.props,
-          mapId = _this$props4.mapId,
-          onMapChangeDimension = _this$props4.onMapChangeDimension;
+      var _this$props3 = this.props,
+          mapId = _this$props3.mapId,
+          onMapChangeDimension = _this$props3.onMapChangeDimension;
       if (this.adaguc && this.adaguc.webMapJS) {
         var timeDimension = this.adaguc.webMapJS.getDimension('time');
@@ -22238,9 +22435,9 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
     value: function onAfterSetBBoxListener(wmjsMap) {
       var _this2 = this;
-      var _this$props5 = this.props,
-          mapId = _this$props5.mapId,
-          onMapZoomEnd = _this$props5.onMapZoomEnd;
+      var _this$props4 = this.props,
+          mapId = _this$props4.mapId,
+          onMapZoomEnd = _this$props4.onMapZoomEnd;
       /* Update the map after 100 ms */
       window.setTimeout(function () {
@@ -22695,12 +22892,12 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
     value: function checkAdaguc() {
       var _this4 = this;
-      var _this$props6 = this.props,
-          mapId = _this$props6.mapId,
-          listeners = _this$props6.listeners,
-          srs = _this$props6.srs,
-          bbox = _this$props6.bbox,
-          onMapPinChangeLocation = _this$props6.onMapPinChangeLocation;
+      var _this$props5 = this.props,
+          mapId = _this$props5.mapId,
+          listeners = _this$props5.listeners,
+          srs = _this$props5.srs,
+          bbox = _this$props5.bbox,
+          onMapPinChangeLocation = _this$props5.onMapPinChangeLocation;
       if (this.adaguc.webMapJSCreated) {
         return;
@@ -22774,10 +22971,10 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props7 = this.props,
-          passiveMap = _this$props7.passiveMap,
-          children = _this$props7.children,
-          onClick = _this$props7.onClick;
+      var _this$props6 = this.props,
+          passiveMap = _this$props6.passiveMap,
+          children = _this$props6.children,
+          onClick = _this$props6.onClick;
       var adagucInitialised = this.state.adagucInitialised;
       var featureLayers = getFeatureLayers(children);
       return /*#__PURE__*/React.createElement("div", {
@@ -22858,8 +23055,7 @@ ReactMapView.defaultProps = {
   shouldAutoFetch: true,
   displayMapPin: false,
   disableMapPin: false,
-  onMount: function onMount() {},
-  onUnMount: function onUnMount() {},
+  onWMJSMount: function onWMJSMount() {},
   onMapChangeDimension: function onMapChangeDimension() {
     /* nothing */
   },
@@ -22951,8 +23147,8 @@ var MapView = function MapView(_a) {
       displayTimeInMap = _a$displayTimeInMap === void 0 ? true : _a$displayTimeInMap,
       props = __rest(_a, ["children", "controls", "displayTimeInMap"]);
-  var dimensions = props.dimensions;
-  var adagucRef = React.useRef(null);
+  var dimensions = props.dimensions,
+      mapId = props.mapId;
   return /*#__PURE__*/React.createElement(Box, {
     sx: {
       display: 'grid',
@@ -22968,13 +23164,16 @@ var MapView = function MapView(_a) {
     }
   }, /*#__PURE__*/React.createElement(ZoomControls, {
     onZoomIn: function onZoomIn() {
-      return adagucRef.current.zoomIn(undefined);
+      var wmjsMap = getWMJSMapById(mapId);
+      wmjsMap.zoomIn(undefined);
     },
     onZoomOut: function onZoomOut() {
-      return adagucRef.current.zoomOut();
+      var wmjsMap = getWMJSMapById(mapId);
+      wmjsMap.zoomOut();
     },
     onZoomReset: function onZoomReset() {
-      return adagucRef.current.zoomToLayer(adagucRef.current.getActiveLayer());
+      var wmjsMap = getWMJSMapById(mapId);
+      wmjsMap.zoomToLayer(wmjsMap.getActiveLayer());
     }
   })), /*#__PURE__*/React.createElement(Box, {
     sx: {
@@ -22982,9 +23181,6 @@ var MapView = function MapView(_a) {
       gridRowStart: 1
     }
   }, /*#__PURE__*/React.createElement(ReactMapView, Object.assign({}, props, {
-    onRegisterAdaguc: function onRegisterAdaguc(adaguc) {
-      adagucRef.current = adaguc;
-    },
     showLegend: false,
     displayTimeInMap: false
   }), children)), displayTimeInMap && dimensions && /*#__PURE__*/React.createElement(MapTime, {
@@ -23353,7 +23549,7 @@ var MapViewConnect = function MapViewConnect(_a) {
     dispatch(mapActions$1.setMapPinLocation(payload));
   }, [dispatch]);
   var setSelectedFeature = React.useCallback(function (payload) {
-    dispatch(mapActions$1.setSelectedFeature(payload));
+    dispatch(layerActions.setSelectedFeature(payload));
   }, [dispatch]);
   var activeWindowId = useSelector(getActiveWindowId);
@@ -23363,29 +23559,29 @@ var MapViewConnect = function MapViewConnect(_a) {
   useKeyboardZoomAndPan(isActiveWindowId(), mapId);
   useTouchZoomPan(isActiveWindowId(), mapId);
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: '100%'
-    }
-  }, /*#__PURE__*/React.createElement(MapView, Object.assign({}, props, {
-    mapId: mapId,
-    onMount: function onMount() {
-      registerMap({
-        mapId: mapId
-      });
-      syncGroupAddSource({
-        id: mapId,
-        type: [SYNCGROUPS_TYPE_SETTIME, SYNCGROUPS_TYPE_SETBBOX]
-      });
-    },
-    onUnMount: function onUnMount() {
+  React.useEffect(function () {
+    registerMap({
+      mapId: mapId
+    });
+    syncGroupAddSource({
+      id: mapId,
+      type: [SYNCGROUPS_TYPE_SETTIME, SYNCGROUPS_TYPE_SETBBOX]
+    });
+    return function () {
       unregisterMap({
         mapId: mapId
       });
       syncGroupRemoveSource({
         id: mapId
       });
-    },
+    };
+  }, [mapId, registerMap, syncGroupAddSource, syncGroupRemoveSource, unregisterMap]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(MapView, Object.assign({}, props, {
+    mapId: mapId,
     srs: srs,
     bbox: bbox,
     mapPinLocation: displayMapPin ? mapPinLocation : undefined,
@@ -23440,7 +23636,7 @@ var MapViewConnect = function MapViewConnect(_a) {
       },
       onClickFeature: layer.geojson ? function (event) {
         setSelectedFeature({
-          mapId: mapId,
+          layerId: layer.id,
           selectedFeatureIndex: event === null || event === void 0 ? void 0 : event.featureIndex
         });
       } : undefined
@@ -24108,7 +24304,7 @@ var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
   /* Build a layerlist array with a set of arguments per layer to do the query for */
-  var layerToUpdateList = getLayersToUpdate(layers, mapId);
+  var layerToUpdateList = isOpen ? getLayersToUpdate(layers, mapId) : [];
   /*
     Build a string based on the GFI urls. If this changes for whatever reason we need to update.
     These strings can change very often, therefore they need to be debounced and only use the most recent result  must be used.
@@ -24150,7 +24346,7 @@ var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
             case 9:
               _context.prev = 9;
               _context.t0 = _context["catch"](0);
-              errorMessage = _context.t0.message();
+              errorMessage = _context.t0.message;
               updateLayerResult({
                 layerId: layerId,
                 data: errorMessage,
@@ -24295,9 +24491,6 @@ var GetFeatureInfoConnect = function GetFeatureInfoConnect(_ref) {
       mapId = _ref.mapId;
   var dispatch = useDispatch();
   var getFeatureInfoType = "getfeatureinfo-".concat(mapId);
-  var isMapPinVisible = useSelector(function (store) {
-    return getDisplayMapPin(store, mapId);
-  });
   var mapPinLocation = useSelector(function (store) {
     return getPinLocation(store, mapId);
   });
@@ -24307,6 +24500,14 @@ var GetFeatureInfoConnect = function GetFeatureInfoConnect(_ref) {
       displayMapPin: displayMapPin
     }));
   }, [dispatch, mapId]);
+  var enableMapPin = function enableMapPin() {
+    dispatch(mapActions$1.setDisableMapPin({
+      mapId: mapId,
+      disableMapPin: false
+    }));
+  };
   var mapLayers = useSelector(function (store) {
     return getMapLayers(store, mapId);
   });
@@ -24320,7 +24521,14 @@ var GetFeatureInfoConnect = function GetFeatureInfoConnect(_ref) {
   React.useEffect(function () {
     toggleMapPinIsVisible(isDialogOpen);
-  }, [isDialogOpen, toggleMapPinIsVisible, isMapPinVisible]);
+    if (isDialogOpen) {
+      enableMapPin();
+    }
+    /* Do not respond on changes of isMapPinVisible, to allow other components to open/close the mappin. */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDialogOpen, toggleMapPinIsVisible]);
   return /*#__PURE__*/React.createElement(GetFeatureInfoDialog, {
     layers: mapLayers,
     isOpen: isDialogOpen,
@@ -25613,4 +25821,4 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
  * */
 var mapActions = Object.assign(Object.assign(Object.assign({}, layerActions), mapActions$1), serviceActions);
-export { ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, LayerSelectConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SnackbarWrapperConnect, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$6 as layerReducer, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerWMJSMap, registerWMLayer, snackbarActions, store, genericActions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, uiActions, uiModuleConfig, selectors$1 as uiSelectors, types as uiTypes, useSetupDialog };
+export { ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DockedLayerManagerConnect, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, LayerSelectConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SnackbarWrapperConnect, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, getDrawFunctionFromStore, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$6 as layerReducer, selectors$2 as layerSelectors, types$3 as layerTypes, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerDrawFunction, registerWMJSMap, registerWMLayer, snackbarActions, store, genericActions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, TimeSliderUtils as timeSliderUtils, uiActions, uiModuleConfig, selectors$1 as uiSelectors, types as uiTypes, useSetupDialog };