@opengeoweb/core 4.6.1 → 4.7.0

package/index.umd.js

@@ -212,6 +212,13 @@
       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.
@@ -582,6 +589,14 @@
        */
       [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__default["default"].utc(curTime).subtract(timeStep, 'm').toISOString();
 
@@ -608,43 +623,41 @@
 
       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;
-          }
-
-        case true:
-          if (timeInterval.day !== 0) {
-            return timeInterval.day * 24 * 60;
-          }
+    var getValueFromKeyboardEvent = function getValueFromKeyboardEvent(event, value, min, max, supportFourDirectionNavigation) {
+      if (supportFourDirectionNavigation === void 0) {
+        supportFourDirectionNavigation = false;
+      }
 
-          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,
@@ -692,11 +705,39 @@
 
       return __assign(__assign({}, acc), (_b = {}, _b[v] = Number(k), _b));
     }, {});
+    /**
+     * 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 = __spreadArray([], __read(secondsPerPxToScale)).map(function (value) {
+        return Number(value[0]);
+      });
+
+      var full = __spreadArray(__spreadArray([], __read(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:
      *
@@ -733,6 +774,10 @@
       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.
      */
@@ -752,6 +797,92 @@
         }
       }
     };
+    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 += yearsInMintues + "y";
+        time -= yearsInMintues * TimeInMinutes.YEAR;
+      }
+
+      if (time >= TimeInMinutes.MONTH) {
+        var monthsInMinutes = Math.floor(time / TimeInMinutes.MONTH);
+        dateStr += monthsInMinutes + "m";
+        time -= monthsInMinutes * TimeInMinutes.MONTH;
+      }
+
+      if (time >= TimeInMinutes.DAY) {
+        var daysInMinutes = Math.floor(time / TimeInMinutes.DAY);
+        dateStr += 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 += Math.floor(time / TimeInMinutes.HOUR).toLocaleString(undefined, {
+          minimumIntegerDigits: 2,
+          useGrouping: false
+        }) + "h" + (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(_a) {
       var id = _a.id,
@@ -802,18 +933,12 @@
           isTimeSliderHoverOn = _w === void 0 ? false : _w,
           _x = _a.isTimeSliderVisible,
           isTimeSliderVisible = _x === void 0 ? true : _x,
-          _y = _a.activeMapPresetId,
-          activeMapPresetId = _y === void 0 ? null : _y,
-          _z = _a.displayMapPin,
-          displayMapPin = _z === void 0 ? false : _z,
-          _0 = _a.disableMapPin,
-          disableMapPin = _0 === void 0 ? false : _0,
-          _1 = _a.shouldShowZoomControls,
-          shouldShowZoomControls = _1 === void 0 ? true : _1,
-          _2 = _a.dockedLayerManager,
-          dockedLayerManager = _2 === void 0 ? {
-        isOpen: false
-      } : _2;
+          _y = _a.displayMapPin,
+          displayMapPin = _y === void 0 ? false : _y,
+          _z = _a.disableMapPin,
+          disableMapPin = _z === void 0 ? false : _z,
+          _0 = _a.shouldShowZoomControls,
+          shouldShowZoomControls = _0 === void 0 ? true : _0;
       return {
         id: id,
         isAnimating: isAnimating,
@@ -837,11 +962,9 @@
         isTimestepAuto: isTimestepAuto,
         isTimeSliderHoverOn: isTimeSliderHoverOn,
         isTimeSliderVisible: isTimeSliderVisible,
-        activeMapPresetId: activeMapPresetId,
         displayMapPin: displayMapPin,
         disableMapPin: disableMapPin,
-        shouldShowZoomControls: shouldShowZoomControls,
-        dockedLayerManager: dockedLayerManager
+        shouldShowZoomControls: shouldShowZoomControls
       };
     };
     var checkValidLayersPayload = function checkValidLayersPayload(layers, mapId) {
@@ -981,6 +1104,44 @@
       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,
@@ -990,7 +1151,9 @@
         produceDraftStateSetWebMapDimension: produceDraftStateSetWebMapDimension,
         findMapIdFromLayerId: findMapIdFromLayerId,
         produceDraftStateSetMapDimensionFromLayerChangeDimension: produceDraftStateSetMapDimensionFromLayerChangeDimension,
-        moveArrayElements: moveArrayElements
+        moveArrayElements: moveArrayElements,
+        getTimeStepFromDataInterval: getTimeStepFromDataInterval,
+        getActiveLayerTimeStep: getActiveLayerTimeStep
     });
 
     /* *
@@ -1552,6 +1715,17 @@
           var dimensionsAction = layerActions.layerSetDimensions(layerDimensions);
           var newState = layerDimensions === null ? intermediateState : reducer$6(intermediateState, dimensionsAction);
           return newState;
+        },
+        setSelectedFeature: function setSelectedFeature(draft, action) {
+          var _a = action.payload,
+              layerId = _a.layerId,
+              selectedFeatureIndex = _a.selectedFeatureIndex;
+
+          if (!draft.byId[layerId]) {
+            return;
+          }
+
+          draft.byId[layerId].selectedFeatureIndex = selectedFeatureIndex;
         }
       },
       extraReducers: function extraReducers(builder) {
@@ -2155,17 +2329,6 @@
 
           draft.byId[mapId].animationEndTime = animationEndTime;
         },
-        setSelectedFeature: function setSelectedFeature(draft, action) {
-          var _a = action.payload,
-              mapId = _a.mapId,
-              selectedFeatureIndex = _a.selectedFeatureIndex;
-
-          if (!draft.byId[mapId]) {
-            return;
-          }
-
-          draft.byId[mapId].selectedFeatureIndex = selectedFeatureIndex;
-        },
         setAnimationDelay: function setAnimationDelay(draft, action) {
           var _a = action.payload,
               mapId = _a.mapId,
@@ -2334,41 +2497,6 @@
           }
 
           draft.byId[mapId].displayMapPin = displayMapPin;
-        },
-        setActiveMapPresetId: function setActiveMapPresetId(draft, action) {
-          var _a = action.payload,
-              mapId = _a.mapId,
-              presetId = _a.presetId;
-
-          if (!draft.byId[mapId]) {
-            return;
-          }
-
-          draft.byId[mapId].activeMapPresetId = presetId;
-        },
-        setHasMapPresetChanges: function setHasMapPresetChanges(draft, action) {
-          var _a = action.payload,
-              mapId = _a.mapId,
-              hasChanges = _a.hasChanges;
-
-          if (!draft.byId[mapId]) {
-            return;
-          }
-
-          draft.byId[mapId].hasMapPresetChanges = hasChanges;
-        },
-        toggleDockedLayerManager: function toggleDockedLayerManager(draft, action) {
-          var _a = action.payload,
-              mapId = _a.mapId,
-              openDockedLayerManager = _a.openDockedLayerManager;
-
-          if (!draft.byId[mapId]) {
-            return;
-          }
-
-          draft.byId[mapId].dockedLayerManager = {
-            isOpen: openDockedLayerManager
-          };
         }
       },
       extraReducers: function extraReducers(builder) {
@@ -2609,14 +2737,13 @@
           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 _a = action.payload,
@@ -2733,7 +2860,7 @@
      * @returns {array} returnType: array - an array of all non-baselayers containing layer information (service, name, style, enabled etc.)
      */
 
-    toolkit.createSelector(getAllLayers, function (layers) {
+    var getLayers = toolkit.createSelector(getAllLayers, function (layers) {
       return layers.filter(function (layer) {
         return layer.layerType !== LayerType.baseLayer && layer.layerType !== LayerType.overLayer;
       });
@@ -2746,7 +2873,7 @@
      * @returns {array} returnType: array - an array of all baselayers containing layer information (service, name, style, enabled etc.)
      */
 
-    toolkit.createSelector(getAllLayers, function (layers) {
+    var getBaseLayers = toolkit.createSelector(getAllLayers, function (layers) {
       return layers.filter(function (layer) {
         return layer.layerType === LayerType.baseLayer;
       });
@@ -2759,7 +2886,7 @@
      * @returns {array} returnType: array - an array of all overLayers containing layer information (service, name, style, enabled etc.)
      */
 
-    toolkit.createSelector(getAllLayers, function (layers) {
+    var getOverLayers = toolkit.createSelector(getAllLayers, function (layers) {
       return layers.filter(function (layer) {
         return layer.layerType === LayerType.overLayer;
       });
@@ -2888,7 +3015,7 @@
      * @returns {string} returnType: LayerStatus
      */
 
-    toolkit.createSelector(getLayerById, function (layer) {
+    var getLayerStatus = toolkit.createSelector(getLayerById, function (layer) {
       return layer && layer.status ? layer.status : LayerStatus["default"];
     });
     /**
@@ -2916,6 +3043,68 @@
 
       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 = toolkit.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 = toolkit.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");
@@ -3867,7 +4056,12 @@
      */
 
     var getMapTimeStep = toolkit.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 = toolkit.createSelector(getMapById, function (store) {
+      return store === null || store === void 0 ? void 0 : store.timeStep;
     });
     /**
      * Returns the speed of animation
@@ -4114,7 +4308,7 @@
       return store ? store.disableMapPin : false;
     });
     /**
-     * Returns the diplay map pin boolean for the current map
+     * Returns the display map pin boolean for the current map
      *
      * Example getDisplayMapPin(store);
      * @param {object} store store: object - store object
@@ -4125,30 +4319,6 @@
     var getDisplayMapPin = toolkit.createSelector(getMapById, function (store) {
       return store ? store.displayMapPin : false;
     });
-    /**
-     * Returns the selected geojson feature for the given map
-     *
-     * Example const selectedFeature = getSelectedFeature(store, 'mapId1')
-     * @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
-     */
-
-    var getSelectedFeatureIndex = toolkit.createSelector(getMapById, function (store) {
-      return store === null || store === void 0 ? void 0 : store.selectedFeatureIndex;
-    });
-    /**
-     * Returns the active map preset id
-     *
-     * Example getActiveMapPresetId(store, mapId);
-     * @param {object} store store: object - store object
-     * @param {string} mapId mapId: string - Id of the map
-     * @returns {boolean} returnType: boolean or undefined
-     */
-
-    var getActiveMapPresetId = toolkit.createSelector(getMapById, function (store) {
-      return store ? store.activeMapPresetId : undefined;
-    });
     /**
      * Returns the legend id
      *
@@ -4214,31 +4384,40 @@
       });
     }, 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 = toolkit.createSelector(getMapById, function (store) {
-      return store && store.hasMapPresetChanges ? store.hasMapPresetChanges : false;
-    });
+    var getMapLayerIdsEnabled = toolkit.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 = toolkit.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 = toolkit.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,
@@ -4265,6 +4444,7 @@
         getActiveLayerId: getActiveLayerId,
         getMapTimeSliderScale: getMapTimeSliderScale,
         getMapTimeStep: getMapTimeStep,
+        getMapTimeStepWithoutDefault: getMapTimeStepWithoutDefault,
         getMapAnimationDelay: getMapAnimationDelay,
         getMapTimeSliderCenterTime: getMapTimeSliderCenterTime,
         getTimeSliderUnfilteredSelectedTime: getTimeSliderUnfilteredSelectedTime,
@@ -4283,12 +4463,10 @@
         getPinLocation: getPinLocation,
         getDisableMapPin: getDisableMapPin,
         getDisplayMapPin: getDisplayMapPin,
-        getSelectedFeatureIndex: getSelectedFeatureIndex,
-        getActiveMapPresetId: getActiveMapPresetId,
         getLegendId: getLegendId,
         getMapPreset: getMapPreset,
-        getHasMapPresetChanges: getHasMapPresetChanges,
-        getIsDockedLayerManagerOpen: getIsDockedLayerManagerOpen
+        getMapLayerIdsEnabled: getMapLayerIdsEnabled,
+        getIsEnabledLayersForMapDimension: getIsEnabledLayersForMapDimension
     });
 
     var DialogTypes;
@@ -4303,6 +4481,7 @@
       DialogTypes["DimensionSelectElevation"] = "dimensionSelect-elevation";
       DialogTypes["LayerManager"] = "layerManager";
       DialogTypes["LayerSelect"] = "layerSelect";
+      DialogTypes["DockedLayerManager"] = "dockedLayerManager";
     })(DialogTypes || (DialogTypes = {}));
 
     var types = /*#__PURE__*/Object.freeze({
@@ -7986,12 +8165,12 @@
       });
     }
     function setLayerDimensionsSaga(_a) {
-      var layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance, error_1;
+      var layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance, isActiveLayer, timeStep, newTimeStep, error_1;
       var payload = _a.payload;
       return __generator(this, function (_b) {
         switch (_b.label) {
           case 0:
-            _b.trys.push([0, 12,, 13]);
+            _b.trys.push([0, 15,, 16]);
 
             layerDimensions = payload.layerDimensions;
             if (!layerDimensions) return [2
@@ -8036,13 +8215,40 @@
           case 5:
             isAnimating$1 = _b.sent();
             webmapInstance = getWMJSMapById(mapId);
-            if (!(layerId === activeLayerId && // only update the active layer
+            isActiveLayer = layerId === activeLayerId;
+            return [4
+            /*yield*/
+            , effects.select(getMapTimeStepWithoutDefault, mapId)];
+
+          case 6:
+            timeStep = _b.sent();
+            if (!(isActiveLayer && timeStep === undefined && newTimeDimension)) return [3
+            /*break*/
+            , 8];
+            newTimeStep = getActiveLayerTimeStep(newTimeDimension);
+            if (!newTimeStep) return [3
+            /*break*/
+            , 8];
+            return [4
+            /*yield*/
+            , effects.put(mapActions$1.setTimeStep({
+              mapId: mapId,
+              timeStep: newTimeStep
+            }))];
+
+          case 7:
+            _b.sent();
+
+            _b.label = 8;
+
+          case 8:
+            if (!(isActiveLayer && // only update the active layer
             shouldAutoUpdate && newTimeDimension && newTimeDimension.maxValue && prevTimeDimension && prevTimeDimension.currentValue && prevTimeDimension.currentValue !== newTimeDimension.maxValue)) return [3
             /*break*/
-            , 9];
+            , 12];
             if (!!isAnimating$1) return [3
             /*break*/
-            , 7];
+            , 10];
             return [4
             /*yield*/
             , effects.put(layerActions.layerChangeDimension({
@@ -8054,50 +8260,50 @@
               }
             }))];
 
-          case 6:
+          case 9:
             _b.sent();
 
-            _b.label = 7;
+            _b.label = 10;
 
-          case 7:
+          case 10:
             return [4
             /*yield*/
             , effects.call(updateAnimation, mapId, newTimeDimension.maxValue)];
 
-          case 8:
+          case 11:
             _b.sent();
 
             return [3
             /*break*/
-            , 11];
+            , 14];
 
-          case 9:
+          case 12:
             if (!(isAnimating$1 && !webmapInstance.isAnimating && newTimeDimension && newTimeDimension.maxValue)) return [3
             /*break*/
-            , 11];
+            , 14];
             return [4
             /*yield*/
             , effects.call(updateAnimation, mapId, newTimeDimension.maxValue)];
 
-          case 10:
+          case 13:
             _b.sent();
 
-            _b.label = 11;
+            _b.label = 14;
 
-          case 11:
+          case 14:
             return [3
             /*break*/
-            , 13];
+            , 16];
 
-          case 12:
+          case 15:
             error_1 = _b.sent(); // eslint-disable-next-line no-console
 
             console.warn(error_1);
             return [3
             /*break*/
-            , 13];
+            , 16];
 
-          case 13:
+          case 16:
             return [2
             /*return*/
             ];
@@ -8516,54 +8722,6 @@
         }
       });
     }
-    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 _a, mapId, origin, isChangeOriginSupported, hasMapPresetChanges;
-
-      return __generator(this, function (_b) {
-        switch (_b.label) {
-          case 0:
-            _a = action.payload, mapId = _a.mapId, origin = _a.origin;
-
-            if (!origin) {
-              return [2
-              /*return*/
-              ];
-            }
-
-            isChangeOriginSupported = supportedChangeOrigins.indexOf(origin) >= 0;
-            if (!isChangeOriginSupported) return [3
-            /*break*/
-            , 3];
-            return [4
-            /*yield*/
-            , effects.select(getHasMapPresetChanges, mapId)];
-
-          case 1:
-            hasMapPresetChanges = _b.sent();
-            if (!!hasMapPresetChanges) return [3
-            /*break*/
-            , 3];
-            return [4
-            /*yield*/
-            , effects.put(mapActions$1.setHasMapPresetChanges({
-              mapId: mapId,
-              hasChanges: true
-            }))];
-
-          case 2:
-            _b.sent();
-
-            _b.label = 3;
-
-          case 3:
-            return [2
-            /*return*/
-            ];
-        }
-      });
-    }
     function unregisterMapSaga(_a) {
       var mapId, layerList;
       var payload = _a.payload;
@@ -8604,7 +8762,7 @@
             // resets WMJSMap state
             return [4
             /*yield*/
-            , effects.all([effects.takeLatest(mapActions$1.mapStopAnimation.type, stopAnimationSaga), effects.takeLatest(mapActions$1.setActiveMapPresetId.type, stopAnimationSaga)])];
+            , effects.takeLatest(mapActions$1.mapStopAnimation.type, stopAnimationSaga)];
 
           case 1:
             // resets WMJSMap state
@@ -8645,20 +8803,11 @@
           case 6:
             _a.sent();
 
-            return [4
-            /*yield*/
-            , effects.all(mapPresetChangeActions.map(function (action) {
-              return effects.takeEvery(action, checkMapPresetForChangesSaga);
-            }))];
-
-          case 7:
-            _a.sent();
-
             return [4
             /*yield*/
             , effects.takeEvery(mapActions$1.unregisterMap.type, unregisterMapSaga)];
 
-          case 8:
+          case 7:
             _a.sent();
 
             return [2
@@ -12454,7 +12603,6 @@
             }));
           }
         }),
-        hasElevation: !isDockedLayerManager,
         className: "layermanager",
         sx: layerManagerStyle,
         onResizeStop: function onResizeStop(_event, _direction, node) {
@@ -12524,7 +12672,11 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useSetupDialog = function useSetupDialog(dialogType) {
+    var useSetupDialog = function useSetupDialog(dialogType, source) {
+      if (source === void 0) {
+        source = 'app';
+      }
+
       var dispatch = reactRedux.useDispatch();
       var onCloseDialog = React.useCallback(function () {
         dispatch(uiActions.setToggleOpenDialog({
@@ -12547,9 +12699,10 @@
       var registerDialog = React.useCallback(function () {
         dispatch(uiActions.registerDialog({
           type: dialogType,
-          setOpen: false
+          setOpen: false,
+          source: source
         }));
-      }, [dialogType, dispatch]);
+      }, [dialogType, dispatch, source]);
       var unregisterDialog = React.useCallback(function () {
         dispatch(uiActions.unregisterDialog({
           type: dialogType
@@ -12733,9 +12886,9 @@
       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: DialogTypes.DockedLayerManager + "-" + mapId,
+          setOpen: true
         }));
       };
 
@@ -12789,7 +12942,9 @@
           _b = _a.showTitle,
           showTitle = _b === void 0 ? false : _b,
           _c = _a.leftHeaderComponent,
-          leftHeaderComponent = _c === void 0 ? undefined : _c;
+          leftHeaderComponent = _c === void 0 ? undefined : _c,
+          _d = _a.source,
+          source = _d === void 0 ? 'app' : _d;
       var dispatch = reactRedux.useDispatch(); // TODO: Uncomment when adding the presets: https://gitlab.com/opengeoweb/opengeoweb/-/issues/2881
       // const isMapPresetLoading = useSelector((store: AppStore) =>
       //   mapSelectors.getIsMapPresetLoading(store, mapId),
@@ -12798,26 +12953,22 @@
       //   mapSelectors.getMapPresetError(store, mapId),
       // );
 
-      var isDockedLayerManagerOpen = reactRedux.useSelector(function (store) {
-        return getIsDockedLayerManagerOpen(store, mapId);
-      });
+      var dialogType = DialogTypes.DockedLayerManager + "-" + mapId;
 
-      var onClose = function onClose() {
-        // Open docked layer manager and close the floating layer manager
-        dispatch(mapActions$1.toggleDockedLayerManager({
-          mapId: mapId,
-          openDockedLayerManager: false
-        }));
-      };
+      var _e = useSetupDialog(dialogType, source),
+          dialogOrder = _e.dialogOrder,
+          isDialogOpen = _e.isDialogOpen,
+          setDialogOrder = _e.setDialogOrder,
+          onCloseDialog = _e.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
         }));
       };
 
@@ -12826,8 +12977,8 @@
         preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
         preloadedBaseServices: preloadedBaseServices,
         bounds: bounds,
-        isOpen: isDockedLayerManagerOpen,
-        onClose: onClose,
+        isOpen: isDialogOpen,
+        onClose: onCloseDialog,
         showTitle: showTitle,
         leftHeaderComponent: leftHeaderComponent,
         // isLoading={isMapPresetLoading}
@@ -12838,7 +12989,10 @@
         startPosition: {
           top: 60,
           right: 16
-        }
+        },
+        onMouseDown: setDialogOrder,
+        order: dialogOrder,
+        source: source
       });
     };
 
@@ -16344,8 +16498,8 @@
           _d = _a.source,
           source = _d === void 0 ? 'app' : _d;
       var dispatch = reactRedux.useDispatch();
-      var mapDimension = reactRedux.useSelector(function (store) {
-        return getMapDimension(store, mapId, dimensionName);
+      var mapContainsDimension = reactRedux.useSelector(function (store) {
+        return getIsEnabledLayersForMapDimension(store, mapId, dimensionName);
       });
       var layerIds = reactRedux.useSelector(function (store) {
         return getLayerIds(store, mapId);
@@ -16373,7 +16527,7 @@
         }));
       }, [dispatch]);
 
-      if (!mapDimension || !layerIds || layerIds.length < 1) {
+      if (!mapContainsDimension || !layerIds || layerIds.length < 1) {
         return null;
       }
 
@@ -16493,6 +16647,10 @@
       });
       var isOpenInStore = reactRedux.useSelector(function (store) {
         return getisDialogOpen(store, uiDialogType);
+      }); // Only show button if enabled layer for map contains dimension
+
+      var mapContainsDimension = reactRedux.useSelector(function (store) {
+        return getIsEnabledLayersForMapDimension(store, mapId, dimension);
       });
       var openMultiDimensionDialog = React__namespace.useCallback(function () {
         var setOpen = currentActiveMapId !== mapId ? true : !isOpenInStore;
@@ -16503,6 +16661,11 @@
           source: source
         }));
       }, [currentActiveMapId, dispatch, isOpenInStore, uiDialogType, mapId, source]);
+
+      if (!mapContainsDimension) {
+        return null;
+      }
+
       var isOpen = currentActiveMapId === mapId && isOpenInStore;
       return /*#__PURE__*/React__namespace.createElement(DimensionSelectButton, {
         dimension: dimension,
@@ -16662,7 +16825,8 @@
           title = _a.title,
           icon = _a.icon,
           _b = _a.onChangeMouseWheel,
-          onChangeMouseWheel = _b === void 0 ? function () {} : _b;
+          onChangeMouseWheel = _b === void 0 ? function () {} : _b,
+          animationLength = _a.animationLength;
       var currentMarkIndex = marks.findIndex(function (mark) {
         return mark.value === value;
       });
@@ -16752,7 +16916,22 @@
         },
         selected: isAutoSelected,
         disabled: isDisabled
-      }, "Auto")));
+      }, "Auto"), animationLength && /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+        disabled: true,
+        sx: {
+          fontSize: '12px',
+          opacity: 0.67,
+          padding: '0px 12px',
+          '&.MuiMenuItem-root': {
+            minHeight: '30px!important'
+          }
+        }
+      }, "length"), animationLength && /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+        "data-testid": "menu-animation-length-button",
+        active: false,
+        disableRipple: true,
+        width: "100%"
+      }, minutesToDescribedDuration(animationLength))));
     };
 
     /* *
@@ -16911,13 +17090,12 @@
       var timeStep = _a.timeStep,
           _b = _a.disabled,
           disabled = _b === void 0 ? false : _b,
-          _c = _a.isTimestepAuto,
-          isTimestepAuto = _c === void 0 ? false : _c,
+          isTimestepAuto = _a.isTimestepAuto,
           onChangeTimeStep = _a.onChangeTimeStep,
-          _d = _a.onToggleTimestepAuto,
-          onToggleTimestepAuto = _d === void 0 ? function () {} : _d,
-          _e = _a.isOpenByDefault,
-          isOpenByDefault = _e === void 0 ? false : _e;
+          _c = _a.onToggleTimestepAuto,
+          onToggleTimestepAuto = _c === void 0 ? function () {} : _c,
+          _d = _a.isOpenByDefault,
+          isOpenByDefault = _d === void 0 ? false : _d;
 
       var handleMenuItemClick = function handleMenuItemClick(mark) {
         if (isTimestepAuto) {
@@ -17121,6 +17299,7 @@
           disabled = _b === void 0 ? false : _b,
           _c = _a.animationLength,
           animationLength = _c === void 0 ? AnimationLength.Hours1 : _c,
+          animationLengthInMinutes = _a.animationLengthInMinutes,
           onChangeAnimationLength = _a.onChangeAnimationLength;
 
       var onChangeSliderValue = function onChangeSliderValue(mark) {
@@ -17139,7 +17318,8 @@
         title: title,
         isDisabled: disabled,
         value: animationLength,
-        onChangeMouseWheel: onChangeSliderValue
+        onChangeMouseWheel: onChangeSliderValue,
+        animationLength: animationLengthInMinutes
       });
     };
 
@@ -17188,7 +17368,8 @@
         xs: "auto"
       }, timeStepBtn || /*#__PURE__*/React__default["default"].createElement(TimeStepButton, {
         timeStep: 0,
-        onChangeTimeStep: function onChangeTimeStep() {}
+        onChangeTimeStep: function onChangeTimeStep() {},
+        isTimestepAuto: false
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: "auto"
@@ -17226,32 +17407,21 @@
           timeScaleBtn = _a.timeScaleBtn,
           animationLengthBtn = _a.animationLengthBtn,
           _b = _a.isOpenByDefault,
-          isOpenByDefault = _b === void 0 ? false : _b,
-          timeStep = _a.timeStep,
-          timeDimension = _a.timeDimension,
-          onChangeTimeStep = _a.onChangeTimeStep,
-          _c = _a.isTimestepAuto,
-          isTimestepAuto = _c === void 0 ? false : _c;
+          isOpenByDefault = _b === void 0 ? false : _b;
 
-      var _d = __read(React.useState(null), 2),
-          anchorEl = _d[0],
-          setAnchorEl = _d[1];
+      var _c = __read(React.useState(null), 2),
+          anchorEl = _c[0],
+          setAnchorEl = _c[1];
 
-      var _e = __read(React.useState(false), 2),
-          open = _e[0],
-          setOpen = _e[1];
+      var _d = __read(React.useState(false), 2),
+          open = _d[0],
+          setOpen = _d[1];
 
       React.useEffect(function () {
         if (anchorEl && isOpenByDefault) {
           setOpen(true);
         }
       }, [anchorEl, isOpenByDefault]);
-      var timeStepFromLayer = getActiveLayerTimeStep(timeDimension) || timeStep;
-      React__default["default"].useEffect(function () {
-        if (isTimestepAuto) {
-          onChangeTimeStep(timeStepFromLayer);
-        }
-      }, [timeStepFromLayer, isTimestepAuto, onChangeTimeStep]);
       return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
         title: "Animation options",
         placement: "bottom"
@@ -18323,95 +18493,114 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
+    var TIME_SLIDER_LEGEND_HEIGHT = 24;
     var DRAG_AREA_WIDTH = 24;
 
-    var TimeSliderLegend = function TimeSliderLegend(_a) {
-      var mapId = _a.mapId,
-          centerTime = _a.centerTime,
-          secondsPerPx = _a.secondsPerPx,
-          _b = _a.dataScaleToSecondsPerPx,
-          dataScaleToSecondsPerPx = _b === void 0 ? defaultDataScaleToSecondsPerPx : _b,
-          selectedTime = _a.selectedTime,
-          _c = _a.scale,
-          scale = _c === void 0 ? Scale.Hour : _c,
-          currentTime = _a.currentTime,
-          dataStartTime = _a.dataStartTime,
-          dataEndTime = _a.dataEndTime,
-          animationStartTime = _a.animationStartTime,
-          animationEndTime = _a.animationEndTime,
-          timeStep = _a.timeStep,
-          _d = _a.mapIsActive,
-          mapIsActive = _d === void 0 ? true : _d,
-          unfilteredSelectedTime = _a.unfilteredSelectedTime,
-          setUnfilteredSelectedTime = _a.setUnfilteredSelectedTime,
-          onSetNewDate = _a.onSetNewDate,
-          onSetCenterTime = _a.onSetCenterTime,
-          onSetAnimationStartTime = _a.onSetAnimationStartTime,
-          onSetAnimationEndTime = _a.onSetAnimationEndTime;
-
-      var _e = __read(useCanvasTarget('mousedown'), 2),
-          node = _e[1];
+    function useAnimationTime(animationStartTime, animationEndTime, onSetAnimationStartTime, onSetAnimationEndTime, leftMarkerDragging, rightMarkerDragging, animationAreaDragging, centerTime, canvasWidth, secondsPerPx, dragTooltipPosition, pixelsToLeft, setTooltipTime, startDraggingPosition) {
+      var _a = __read(React__namespace.useState(convertStringTimeToUnix(animationStartTime)), 2),
+          localAnimationStartTime = _a[0],
+          setLocalAnimationStartTime = _a[1];
 
-      var _f = __read(React__namespace.useState(0), 2),
-          canvasWidth = _f[0],
-          setCanvasWidth = _f[1];
+      var _b = __read(React__namespace.useState(convertStringTimeToUnix(animationEndTime)), 2),
+          localAnimationEndTime = _b[0],
+          setLocalAnimationEndTime = _b[1];
 
-      var _g = __read(React__namespace.useState(false), 2),
-          selectedTimeDragging = _g[0],
-          setSelectedTimeDragging = _g[1];
+      React__namespace.useEffect(function () {
+        setLocalAnimationStartTime(convertStringTimeToUnix(animationStartTime));
+        setLocalAnimationEndTime(convertStringTimeToUnix(animationEndTime));
+      }, [animationStartTime, animationEndTime]);
+      var animationDiff = React__namespace.useRef();
+      var pixelsMovedSinceStartDragging = React__namespace.useRef(0);
+      React__namespace.useEffect(function () {
+        var handleMouseUp = function handleMouseUp() {
+          pixelsMovedSinceStartDragging.current = 0;
+          animationDiff.current = undefined;
+        };
 
-      var _h = __read(React__namespace.useState(false), 2),
-          leftMarkerDragging = _h[0],
-          setLeftMarkerDragging = _h[1];
+        document.addEventListener('mouseup', handleMouseUp);
+        return function () {
+          document.removeEventListener('mouseup', handleMouseUp);
+        };
+      }, []);
+      React__namespace.useEffect(function () {
+        var stoppedDragging = !leftMarkerDragging && !rightMarkerDragging && !animationAreaDragging;
 
-      var _j = __read(React__namespace.useState(false), 2),
-          rightMarkerDragging = _j[0],
-          setRightMarkerDragging = _j[1];
+        if (stoppedDragging) {
+          if (localAnimationStartTime && localAnimationStartTime !== convertStringTimeToUnix(animationStartTime)) {
+            onSetAnimationStartTime(moment__default["default"].utc(localAnimationStartTime * 1000).format(dateFormat));
+          }
 
-      var _k = __read(React__namespace.useState(false), 2),
-          centerTimeDragging = _k[0],
-          setCenterTimeDragging = _k[1];
+          if (localAnimationEndTime && localAnimationEndTime !== convertStringTimeToUnix(animationEndTime)) {
+            onSetAnimationEndTime(moment__default["default"].utc(localAnimationEndTime * 1000).format(dateFormat));
+          }
+        } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-      var _l = __read(React__namespace.useState(false), 2),
-          dragTooltipOpen = _l[0],
-          setDragTooltipOpen = _l[1];
+      }, [leftMarkerDragging, rightMarkerDragging, animationAreaDragging]);
+      var handleAnimationDragging = React.useCallback(function (x) {
+        if (!localAnimationStartTime || !localAnimationEndTime) return;
 
-      var _m = __read(React__namespace.useState(false), 2),
-          mouseDownInLegend = _m[0],
-          setMouseDownInLegend = _m[1];
+        var _a = __read([localAnimationStartTime, localAnimationEndTime].map(function (timestamp) {
+          return timestampToPixel(timestamp, centerTime, canvasWidth, secondsPerPx);
+        }), 2),
+            leftMarkerPx = _a[0],
+            rightMarkerPx = _a[1];
 
-      var _o = __read(React__namespace.useState(animationStartTime && moment__default["default"].utc(animationStartTime).unix()), 2),
-          localAnimationStartTime = _o[0],
-          setLocalAnimationStartTime = _o[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
 
-      var _p = __read(React__namespace.useState(animationEndTime && moment__default["default"].utc(animationEndTime).unix()), 2),
-          localAnimationEndTime = _p[0],
-          setLocalAnimationEndTime = _p[1];
+          dragTooltipPosition.current = pixelsToLeft ? mousePosition + pixelsToLeft : mousePosition;
+          var mouseTimeUnix = pixelToTimestamp(mousePosition, centerTime, canvasWidth, secondsPerPx);
+          setLocalAnimationStartTime(mouseTimeUnix);
+          setTooltipTime(moment__default["default"].unix(mouseTimeUnix));
+          return;
+        }
 
-      var _q = __read(React__namespace.useState(moment__default["default"].utc(0)), 2),
-          tooltipTime = _q[0],
-          setTooltipTime = _q[1];
+        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
 
-      var _r = __read(React__namespace.useState(false), 2),
-          animationAreaDragging = _r[0],
-          setAnimationAreaDragging = _r[1];
+          dragTooltipPosition.current = pixelsToLeft ? mousePosition + pixelsToLeft : mousePosition;
+          var mouseTimeUnix = pixelToTimestamp(mousePosition, centerTime, canvasWidth, secondsPerPx);
+          setLocalAnimationEndTime(mouseTimeUnix);
+          setTooltipTime(moment__default["default"].unix(mouseTimeUnix));
+          return;
+        }
 
-      var animationDiff = React__namespace.useRef();
-      var isClickOrDrag = React__namespace.useRef();
-      var pixelsMovedSinceStartDragging = React__namespace.useRef(0);
-      var elem = document.querySelector(".timeSliderLegend_" + 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'];
+        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 _s = __read(React__namespace.useState('auto'), 2),
-          cursorStyle = _s[0],
-          setCursorStyle = _s[1];
+          pixelsMovedSinceStartDragging.current += x;
+          var currentPositionTimestamp = pixelToTimestamp(startDraggingPosition.current + pixelsMovedSinceStartDragging.current, centerTime, canvasWidth, secondsPerPx);
+          var _b = animationDiff.current,
+              diffStartToRight = _b.diffStartToRight,
+              diffStartToLeft = _b.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__default["default"].unix(selectedTime).toISOString() : moment__default["default"].utc().toISOString();
-      React__namespace.useEffect(function () {
-        setLocalAnimationStartTime(animationStartTime && moment__default["default"].utc(animationStartTime).unix());
-        setLocalAnimationEndTime(animationEndTime && moment__default["default"].utc(animationEndTime).unix());
-      }, [animationStartTime, animationEndTime]);
       React__namespace.useEffect(function () {
         var handleKeyDown = function handleKeyDown(event) {
           if (event.key === 'Home' && mapIsActive) {
@@ -18436,94 +18625,114 @@
           document.removeEventListener('keydown', handleKeyDown);
         };
       }, [curTime, currentTime, dataEndTime, dataStartTime, mapIsActive, onSetCenterTime, onSetNewDate, timeStep]);
+    }
+
+    function convertStringTimeToUnix(time) {
+      return time ? moment__default["default"].utc(time).unix() : undefined;
+    } // Explanation of props can be found here:
+    // https://drive.google.com/file/d/1jqqNcciCH0UJiZ04HO-1vknmPPpT8fK5/view?usp=sharing
+
+
+    var TimeSliderLegend = function TimeSliderLegend(_a) {
+      var mapId = _a.mapId,
+          centerTime = _a.centerTime,
+          secondsPerPx = _a.secondsPerPx,
+          _b = _a.dataScaleToSecondsPerPx,
+          dataScaleToSecondsPerPx = _b === void 0 ? defaultDataScaleToSecondsPerPx : _b,
+          selectedTime = _a.selectedTime,
+          _c = _a.scale,
+          scale = _c === void 0 ? Scale.Hour : _c,
+          currentTime = _a.currentTime,
+          dataStartTime = _a.dataStartTime,
+          dataEndTime = _a.dataEndTime,
+          animationStartTime = _a.animationStartTime,
+          animationEndTime = _a.animationEndTime,
+          timeStep = _a.timeStep,
+          _d = _a.mapIsActive,
+          mapIsActive = _d === void 0 ? true : _d,
+          unfilteredSelectedTime = _a.unfilteredSelectedTime,
+          setUnfilteredSelectedTime = _a.setUnfilteredSelectedTime,
+          _e = _a.onSetNewDate,
+          onSetNewDate = _e === void 0 ? function () {} : _e,
+          _f = _a.onSetCenterTime,
+          onSetCenterTime = _f === void 0 ? function () {} : _f,
+          _g = _a.onSetAnimationStartTime,
+          onSetAnimationStartTime = _g === void 0 ? function () {} : _g,
+          _h = _a.onSetAnimationEndTime,
+          onSetAnimationEndTime = _h === void 0 ? function () {} : _h;
+      useHandleKeyDown(mapIsActive, timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime, selectedTime);
+
+      var _j = __read(useCanvasTarget('mousedown'), 2),
+          node = _j[1];
+
+      var _k = __read(React__namespace.useState(0), 2),
+          canvasWidth = _k[0],
+          setCanvasWidth = _k[1];
+
+      var _l = __read(React__namespace.useState(false), 2),
+          selectedTimeDragging = _l[0],
+          setSelectedTimeDragging = _l[1];
+
+      var _m = __read(React__namespace.useState(false), 2),
+          leftMarkerDragging = _m[0],
+          setLeftMarkerDragging = _m[1];
+
+      var _o = __read(React__namespace.useState(false), 2),
+          rightMarkerDragging = _o[0],
+          setRightMarkerDragging = _o[1];
+
+      var _p = __read(React__namespace.useState(false), 2),
+          dragTooltipOpen = _p[0],
+          setDragTooltipOpen = _p[1];
+
+      var _q = __read(React__namespace.useState(false), 2),
+          mouseDownInLegend = _q[0],
+          setMouseDownInLegend = _q[1];
+
+      var _r = __read(React__namespace.useState(false), 2),
+          animationAreaDragging = _r[0],
+          setAnimationAreaDragging = _r[1];
+
+      var _s = __read(React__namespace.useState('auto'), 2),
+          cursorStyle = _s[0],
+          setCursorStyle = _s[1];
       /**
        * remove active drag. can happen outside canvas.
        */
 
+
       React__namespace.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 = React.useCallback(function (x) {
-        if (!localAnimationStartTime || !localAnimationEndTime) return;
-
-        var _a = __read([localAnimationStartTime, localAnimationEndTime].map(function (timestamp) {
-          return timestampToPixel(timestamp, centerTime, canvasWidth, secondsPerPx);
-        }), 2),
-            leftMarkerPx = _a[0],
-            rightMarkerPx = _a[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__default["default"].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
+      }, []);
+      var dragTooltipPosition = React__namespace.useRef();
+      var startDraggingPosition = React__namespace.useRef(0);
+      var timeSliderLegendId = "timeSliderLegend_" + mapId;
+      var timeSliderLegendElement = document.querySelector("." + timeSliderLegendId);
+      var pixelsToLeft = timeSliderLegendElement === null || timeSliderLegendElement === void 0 ? void 0 : timeSliderLegendElement.getBoundingClientRect()['left'];
 
-          dragTooltipPosition.current = pixelsToLeft ? mousePosition + pixelsToLeft : mousePosition; // change local time bounds according to either dragged marker
+      var _t = __read(React__namespace.useState(moment__default["default"].utc(0)), 2),
+          tooltipTime = _t[0],
+          setTooltipTime = _t[1];
 
-          var mouseTimeUnix = pixelToTimestamp(mousePosition, // lets us drag on the marker
-          centerTime, canvasWidth, secondsPerPx);
-          setLocalAnimationEndTime(mouseTimeUnix);
-          setTooltipTime(moment__default["default"].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;
-          }
+      var _u = useAnimationTime(animationStartTime, animationEndTime, onSetAnimationStartTime, onSetAnimationEndTime, leftMarkerDragging, rightMarkerDragging, animationAreaDragging, centerTime, canvasWidth, secondsPerPx, dragTooltipPosition, pixelsToLeft, setTooltipTime, startDraggingPosition),
+          handleAnimationDragging = _u.handleAnimationDragging,
+          localAnimationEndTime = _u.localAnimationEndTime,
+          localAnimationStartTime = _u.localAnimationStartTime;
 
-          pixelsMovedSinceStartDragging.current += x;
-          var currentPositionTimestamp = pixelToTimestamp(startDraggingPosition.current + pixelsMovedSinceStartDragging.current, centerTime, canvasWidth, secondsPerPx);
-          var _b = animationDiff.current,
-              diffStartToRight = _b.diffStartToRight,
-              diffStartToLeft = _b.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 = React.useCallback(function (x) {
         var unfliteredSelectedTimePx = timestampToPixel(unfilteredSelectedTime, centerTime, canvasWidth, secondsPerPx) + x;
         setUnfilteredSelectedTime(pixelToTimestamp(unfliteredSelectedTimePx, centerTime, canvasWidth, secondsPerPx));
@@ -18534,12 +18743,11 @@
           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);
           }
@@ -18549,9 +18757,9 @@
         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 = material.useTheme();
-      var startDraggingPosition = React__namespace.useRef(0);
+      var isClickOrDrag = React__namespace.useRef();
 
       var onMouseDown = function onMouseDown(x, y, width) {
         isClickOrDrag.current = 'click';
@@ -18571,7 +18779,7 @@
           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) {
@@ -18601,22 +18809,7 @@
         setMouseDownInLegend(true);
       };
 
-      React__namespace.useEffect(function () {
-        var stoppedDragging = !leftMarkerDragging && !rightMarkerDragging && !animationAreaDragging;
-
-        if (stoppedDragging) {
-          if (localAnimationStartTime !== convertStringTimeToUnix(animationStartTime)) {
-            onSetAnimationStartTime(moment__default["default"].utc(localAnimationStartTime * 1000).format(dateFormat));
-          }
-
-          if (localAnimationEndTime !== convertStringTimeToUnix(animationEndTime)) {
-            onSetAnimationEndTime(moment__default["default"].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));
@@ -18658,8 +18851,8 @@
         }
       };
 
-      var dragTooltipPosition = React__namespace.useRef();
       var popperRef = React__namespace.useRef(null);
+      var pixelsToTop = timeSliderLegendElement === null || timeSliderLegendElement === void 0 ? void 0 : timeSliderLegendElement.getBoundingClientRect()['top'];
 
       var setTooltipPosition = function setTooltipPosition() {
         var tooltipX = dragTooltipPosition.current;
@@ -18678,7 +18871,7 @@
         }
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "timeSliderLegend",
-        className: "timeSliderLegend_" + mapId,
+        className: timeSliderLegendId,
         sx: {
           height: TIME_SLIDER_LEGEND_HEIGHT + "px",
           borderRadius: '4.5px',
@@ -18695,7 +18888,7 @@
           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);
@@ -18703,12 +18896,6 @@
       })));
     };
 
-    function convertStringTimeToUnix(time) {
-      return time ? moment__default["default"].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.
@@ -19197,26 +19384,46 @@
       var isTimestepAuto$1 = reactRedux.useSelector(function (store) {
         return isTimestepAuto(store, mapId);
       });
-      var onToggleTimestepAuto = React__namespace.useCallback(function () {
+      var activeLayerId = reactRedux.useSelector(function (store) {
+        return getActiveLayerId(store, mapId);
+      });
+      var activeLayerTimeDimension = reactRedux.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__namespace.useCallback(function (timeStep, origin) {
-        dispatch(mapActions$1.setTimeStep(__assign({
+      };
+
+      var onSetTimeStep = function onSetTimeStep(timeStep) {
+        dispatch(mapActions$1.setTimeStep({
           mapId: mapId,
           timeStep: timeStep
-        }, origin && {
-          origin: origin
-        })));
-      }, [dispatch, mapId]);
+        }));
+      };
+
       return /*#__PURE__*/React__namespace.createElement(TimeStepButton, {
         timeStep: timeStep,
         onChangeTimeStep: onSetTimeStep,
         disabled: isAnimating$1,
-        onToggleTimestepAuto: onToggleTimestepAuto
+        onToggleTimestepAuto: onToggleTimestepAuto,
+        isTimestepAuto: Boolean(isTimestepAuto$1)
       });
     };
 
@@ -19397,7 +19604,8 @@
       return /*#__PURE__*/React__namespace.createElement(AnimationLengthButton, {
         disabled: isAnimating$1,
         animationLength: currentLength || Number(AnimationLength.Hours24),
-        onChangeAnimationLength: handlechangeAnimationLength
+        onChangeAnimationLength: handlechangeAnimationLength,
+        animationLengthInMinutes: currentDiffInMinutes
       });
     };
 
@@ -19429,27 +19637,6 @@
     var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_a) {
       var sourceId = _a.sourceId,
           mapId = _a.mapId;
-      var dispatch = reactRedux.useDispatch();
-      var isTimestepAuto$1 = reactRedux.useSelector(function (store) {
-        return isTimestepAuto(store, mapId);
-      });
-      var timeStep = reactRedux.useSelector(function (store) {
-        return getMapTimeStep(store, mapId);
-      });
-      var activeLayerId = reactRedux.useSelector(function (store) {
-        return getActiveLayerId(store, mapId);
-      });
-      var activeLayerTimeDimension = reactRedux.useSelector(function (store) {
-        return getLayerTimeDimension(store, activeLayerId);
-      });
-      var onSetTimeStep = React__namespace.useCallback(function (timeStep, origin) {
-        dispatch(mapActions$1.setTimeStep(__assign({
-          mapId: mapId,
-          timeStep: timeStep
-        }, origin && {
-          origin: origin
-        })));
-      }, [dispatch, mapId]);
       return /*#__PURE__*/React__namespace.createElement(OptionsMenuButton, {
         nowBtn: /*#__PURE__*/React__namespace.createElement(NowButtonConnect, {
           mapId: mapId,
@@ -19469,11 +19656,7 @@
         }),
         timeScaleBtn: /*#__PURE__*/React__namespace.createElement(TimeScaleButtonConnect, {
           mapId: mapId
-        }),
-        timeStep: timeStep,
-        isTimestepAuto: isTimestepAuto$1,
-        onChangeTimeStep: onSetTimeStep,
-        timeDimension: activeLayerTimeDimension
+        })
       });
     };
 
@@ -20630,6 +20813,37 @@
 
       return null;
     };
+    var generatedDrawFunctionIds = 0;
+
+    var generateDrawFunctionId = function generateDrawFunctionId() {
+      generatedDrawFunctionIds += 1;
+      return "drawFunctionId_" + 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(drawFunction) {
+      if (drawFunction === void 0) {
+        drawFunction = function drawFunction() {};
+      }
+
+      var id = generateDrawFunctionId();
+      var newFunction = {
+        id: id,
+        drawMethod: drawFunction
+      };
+      drawFunctionStore.push(newFunction);
+      return id;
+    };
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -22396,22 +22610,25 @@
         }
 
         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);
         }
@@ -22991,9 +23208,8 @@
 
       ReactMapView.prototype.componentDidMount = function () {
         var _a = this.props,
-            onMount = _a.onMount,
+            onWMJSMount = _a.onWMJSMount,
             mapId = _a.mapId,
-            onRegisterAdaguc = _a.onRegisterAdaguc,
             shouldAutoFetch = _a.shouldAutoFetch;
         this.checkAdaguc();
         this.checkNewProps(null, this.props);
@@ -23001,13 +23217,9 @@
 
         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();
@@ -23015,11 +23227,7 @@
       };
 
       ReactMapView.prototype.componentWillUnmount = function () {
-        var _a = this.props,
-            onUnMount = _a.onUnMount,
-            mapId = _a.mapId;
         window.removeEventListener('resize', this.handleWindowResize);
-        onUnMount(mapId, this.adaguc.webMapJS);
         this.adaguc.webMapJS.getListener().suspendEvents();
 
         if (typeof this.adaguc.webMapJS.stopAnimating === 'function') {
@@ -23644,8 +23852,7 @@
         shouldAutoFetch: true,
         displayMapPin: false,
         disableMapPin: false,
-        onMount: function onMount() {},
-        onUnMount: function onUnMount() {},
+        onWMJSMount: function onWMJSMount() {},
         onMapChangeDimension: function onMapChangeDimension() {
           /* nothing */
         },
@@ -23740,8 +23947,8 @@
           // rest props
       props = __rest(_a, ["children", "controls", "displayTimeInMap"]);
 
-      var dimensions = props.dimensions;
-      var adagucRef = React__namespace.useRef(null);
+      var dimensions = props.dimensions,
+          mapId = props.mapId;
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: {
           display: 'grid',
@@ -23757,13 +23964,16 @@
         }
       }, /*#__PURE__*/React__namespace.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__namespace.createElement(material.Box, {
         sx: {
@@ -23771,9 +23981,6 @@
           gridRowStart: 1
         }
       }, /*#__PURE__*/React__namespace.createElement(ReactMapView, __assign({}, props, {
-        onRegisterAdaguc: function onRegisterAdaguc(adaguc) {
-          adagucRef.current = adaguc;
-        },
         showLegend: false,
         displayTimeInMap: false
       }), children)), displayTimeInMap && dimensions && /*#__PURE__*/React__namespace.createElement(MapTime, {
@@ -24152,7 +24359,7 @@
         dispatch(mapActions$1.setMapPinLocation(payload));
       }, [dispatch]);
       var setSelectedFeature = React__namespace.useCallback(function (payload) {
-        dispatch(mapActions$1.setSelectedFeature(payload));
+        dispatch(layerActions.setSelectedFeature(payload));
       }, [dispatch]);
       var activeWindowId = reactRedux.useSelector(getActiveWindowId);
 
@@ -24162,29 +24369,29 @@
 
       useKeyboardZoomAndPan(isActiveWindowId(), mapId);
       useTouchZoomPan(isActiveWindowId(), mapId);
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        style: {
-          height: '100%'
-        }
-      }, /*#__PURE__*/React__namespace.createElement(MapView, __assign({}, props, {
-        mapId: mapId,
-        onMount: function onMount() {
-          registerMap({
-            mapId: mapId
-          });
-          syncGroupAddSource({
-            id: mapId,
-            type: [SYNCGROUPS_TYPE_SETTIME, SYNCGROUPS_TYPE_SETBBOX]
-          });
-        },
-        onUnMount: function onUnMount() {
+      React__namespace.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__namespace.createElement("div", {
+        style: {
+          height: '100%'
+        }
+      }, /*#__PURE__*/React__namespace.createElement(MapView, __assign({}, props, {
+        mapId: mapId,
         srs: srs,
         bbox: bbox,
         mapPinLocation: displayMapPin ? mapPinLocation : undefined,
@@ -24239,7 +24446,7 @@
           },
           onClickFeature: layer.geojson ? function (event) {
             setSelectedFeature({
-              mapId: mapId,
+              layerId: layer.id,
               selectedFeatureIndex: event === null || event === void 0 ? void 0 : event.featureIndex
             });
           } : undefined
@@ -24929,7 +25136,7 @@
       /* 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.
@@ -24970,7 +25177,7 @@
 
               case 2:
                 error_1 = _a.sent();
-                errorMessage = error_1.message();
+                errorMessage = error_1.message;
                 updateLayerResult({
                   layerId: layerId,
                   data: errorMessage,
@@ -25118,9 +25325,6 @@
           mapId = _a.mapId;
       var dispatch = reactRedux.useDispatch();
       var getFeatureInfoType = "getfeatureinfo-" + mapId;
-      var isMapPinVisible = reactRedux.useSelector(function (store) {
-        return getDisplayMapPin(store, mapId);
-      });
       var mapPinLocation = reactRedux.useSelector(function (store) {
         return getPinLocation(store, mapId);
       });
@@ -25130,6 +25334,14 @@
           displayMapPin: displayMapPin
         }));
       }, [dispatch, mapId]);
+
+      var enableMapPin = function enableMapPin() {
+        dispatch(mapActions$1.setDisableMapPin({
+          mapId: mapId,
+          disableMapPin: false
+        }));
+      };
+
       var mapLayers = reactRedux.useSelector(function (store) {
         return getMapLayers(store, mapId);
       });
@@ -25143,7 +25355,14 @@
 
       React__namespace.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__namespace.createElement(GetFeatureInfoDialog, {
         layers: mapLayers,
         isOpen: isDialogOpen,
@@ -26511,6 +26730,7 @@
     exports.ConfigurableMapConnect = ConfigurableMapConnect;
     exports.CoreThemeProvider = CoreThemeProvider;
     exports.CoreThemeStoreProvider = CoreThemeStoreProvider;
+    exports.DockedLayerManagerConnect = DockedLayerManagerConnect;
     exports.HarmonieTempAndPrecipPreset = HarmonieTempAndPrecipPreset;
     exports.LayerManagerConnect = LayerManagerConnect;
     exports.LayerManagerMapButtonConnect = LayerManagerMapButtonConnect;
@@ -26546,6 +26766,7 @@
     exports.generateLayerId = generateLayerId;
     exports.generateMapId = generateMapId;
     exports.generateTimesliderId = generateTimesliderId;
+    exports.getDrawFunctionFromStore = getDrawFunctionFromStore;
     exports.getFirstTimeStepForLayerId = getFirstTimeStepForLayerId;
     exports.getInitialAppPresets = getInitialAppPresets;
     exports.getLastTimeStepForLayerId = getLastTimeStepForLayerId;
@@ -26557,6 +26778,8 @@
     exports.getWMLayerById = getWMLayerById;
     exports.layerActions = layerActions;
     exports.layerReducer = reducer$6;
+    exports.layerSelectors = selectors$2;
+    exports.layerTypes = types$3;
     exports.mapActions = mapActions;
     exports.mapModuleConfig = moduleConfig;
     exports.mapSelectors = selectors;
@@ -26566,6 +26789,7 @@
     exports.parseLayer = parseLayer;
     exports.publicLayers = publicLayers;
     exports.publicServices = publicServices;
+    exports.registerDrawFunction = registerDrawFunction;
     exports.registerWMJSMap = registerWMJSMap;
     exports.registerWMLayer = registerWMLayer;
     exports.snackbarActions = snackbarActions;
@@ -26574,6 +26798,7 @@
     exports.synchronizationGroupModuleConfig = synchronizationGroupConfig;
     exports.synchronizationGroupsConfig = synchronizationGroupConfig;
     exports.testLayers = testLayers;
+    exports.timeSliderUtils = TimeSliderUtils;
     exports.uiActions = uiActions;
     exports.uiModuleConfig = uiModuleConfig;
     exports.uiSelectors = selectors$1;