@opengeoweb/core 4.6.0 → 4.7.0

package/index.esm.js

@@ -7,7 +7,7 @@ import _, { debounce, isEqual, groupBy, throttle, range } from 'lodash';
 import { takeLatest, put, select, call, takeEvery, all, delay } from 'redux-saga/effects';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
 import { CustomTooltip, ToolButton, ToolContainerDraggable, IS_JEST, TooltipSelect, AlertIcon, useControlledTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, ManagerButton, CustomAccordion, EnableButton, ManagerDeleteButton, AlertBanner, calculateDialogSizeAndPosition, useIsMounted, CustomToggleButton, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
-import { Pause, Play, Add, Copy, Both, None, DragHandle as DragHandle$1, Cached, CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Filter, Search, Clear, Close, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Visibility, Delete, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, Speed, FastForward, Clock, Now, Animation, Options, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
+import { Pause, Play, Add, Copy, Both, None, DragHandle as DragHandle$1, Cached, CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Filter, Search, Clear, Close, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Visibility, Delete, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, Speed, FastForward, Clock, Now, Animation, Options, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import { Paper, Box, Typography, IconButton, Grid, MenuItem, Button, Popper, FormControl, InputLabel, List, ListItem, ListItemText, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, LinearProgress, InputAdornment, Backdrop, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, styled, Slider, Menu, useTheme, Snackbar } from '@mui/material';
 import { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, clearImageCache, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
 import { ReactSortable } from 'react-sortablejs';
@@ -25,6 +25,8 @@ import proj4 from 'proj4';
 import * as turf from '@turf/turf';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
+import axios from 'axios';
+import { useDebounce } from '@opengeoweb/api';
 import { createStore } from '@redux-eggs/redux-toolkit';
 import { getSagaExtension } from '@redux-eggs/saga-extension';
 
@@ -368,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.
@@ -738,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();
 
@@ -764,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;
-      }
-
-    case true:
-      if (timeInterval.day !== 0) {
-        return timeInterval.day * 24 * 60;
-      }
+var getValueFromKeyboardEvent = function getValueFromKeyboardEvent(event, value, min, max) {
+  var supportFourDirectionNavigation = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 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,
@@ -847,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:
  *
@@ -889,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.
  */
@@ -908,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,
@@ -958,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,
@@ -993,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) {
@@ -1137,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,
@@ -1146,7 +1306,9 @@ var utils = /*#__PURE__*/Object.freeze({
   produceDraftStateSetWebMapDimension: produceDraftStateSetWebMapDimension,
   findMapIdFromLayerId: findMapIdFromLayerId,
   produceDraftStateSetMapDimensionFromLayerChangeDimension: produceDraftStateSetMapDimensionFromLayerChangeDimension,
-  moveArrayElements: moveArrayElements
+  moveArrayElements: moveArrayElements,
+  getTimeStepFromDataInterval: getTimeStepFromDataInterval,
+  getActiveLayerTimeStep: getActiveLayerTimeStep
 });
 
 /* *
@@ -1692,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 = [{
@@ -1724,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 = {
@@ -2261,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;
@@ -2284,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;
@@ -2296,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;
@@ -2307,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;
@@ -2318,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;
@@ -2329,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;
@@ -2343,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;
@@ -2354,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;
@@ -2365,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;
@@ -2376,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;
@@ -2387,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;
@@ -2398,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;
@@ -2409,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;
@@ -2420,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;
@@ -2431,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;
@@ -2498,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;
@@ -2551,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 = [];
@@ -2580,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;
@@ -2603,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;
@@ -2618,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 = [{
@@ -2649,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 = [{
@@ -2682,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,
@@ -2700,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;
@@ -2715,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;
@@ -2839,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;
   });
@@ -2852,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;
   });
@@ -2865,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;
   });
@@ -2994,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"];
 });
 /**
@@ -3022,23 +3148,85 @@ var getAvailableBaseLayersForMap = createSelector(layerStore, function (_store,
 
   return [];
 }, selectorMemoizationOptions);
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
+/**
+ * Returns the selected geojson feature for the given layer
  *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
+ * 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
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
+ * 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");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
 var getUiStore = function getUiStore(store) {
   if (store && store.ui) {
     return store.ui;
@@ -3957,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
@@ -4204,7 +4397,7 @@ var getDisableMapPin = createSelector(getMapById, function (store) {
   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
@@ -4215,30 +4408,6 @@ var getDisableMapPin = createSelector(getMapById, function (store) {
 var getDisplayMapPin = 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 = 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 = createSelector(getMapById, function (store) {
-  return store ? store.activeMapPresetId : undefined;
-});
 /**
  * Returns the legend id
  *
@@ -4303,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,
@@ -4354,6 +4532,7 @@ var selectors = /*#__PURE__*/Object.freeze({
   getActiveLayerId: getActiveLayerId,
   getMapTimeSliderScale: getMapTimeSliderScale,
   getMapTimeStep: getMapTimeStep,
+  getMapTimeStepWithoutDefault: getMapTimeStepWithoutDefault,
   getMapAnimationDelay: getMapAnimationDelay,
   getMapTimeSliderCenterTime: getMapTimeSliderCenterTime,
   getTimeSliderUnfilteredSelectedTime: getTimeSliderUnfilteredSelectedTime,
@@ -4372,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;
@@ -4392,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({
@@ -4422,17 +4600,54 @@ var FilterType;
   FilterType["Group"] = "groups";
 })(FilterType || (FilterType = {}));
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var getFilterId = function getFilterId(filterType, filterName) {
+  return "".concat(filterType, "-").concat(filterName);
+};
+var produceFilters = function produceFilters(filterNames, filterType, draft, layerSelectFilterAdapter) {
+  filterNames.forEach(function (filterName) {
+    var id = getFilterId(filterType, filterName);
+
+    if (!draft.filters.filters.entities[id]) {
+      // If this filter doesn't exit yet, add it
+      layerSelectFilterAdapter.addOne(draft.filters.filters, {
+        id: id,
+        name: filterName,
+        amount: 1,
+        amountVisible: 1,
+        checked: true,
+        type: filterType
+      });
+    } else {
+      // If it exists already, up the amounts
+      draft.filters.filters.entities[id].amount += 1;
+      draft.filters.filters.entities[id].amountVisible += 1;
+    }
+  });
+};
+
+var layerSelectFilterAdapter = createEntityAdapter();
+var layerSelectActiveServicesAdapter = createEntityAdapter();
 var initialState$1 = {
   filters: {
     searchFilter: '',
-    activeServices: {
-      byId: {},
-      allIds: []
-    },
-    filters: {
-      byId: {},
-      allIds: []
-    }
+    activeServices: layerSelectActiveServicesAdapter.getInitialState(),
+    filters: layerSelectFilterAdapter.getInitialState()
   },
   allServicesEnabled: true,
   activeLayerInfo: {
@@ -4456,6 +4671,8 @@ var slice$1 = createSlice({
       draft.allServicesEnabled = allServicesEnabled;
     },
     addFiltersAndActiveServices: function addFiltersAndActiveServices(draft, action) {
+      var _a, _b;
+
       var _action$payload = action.payload,
           serviceId = _action$payload.serviceId,
           serviceName = _action$payload.serviceName,
@@ -4463,59 +4680,59 @@ var slice$1 = createSlice({
           _abstract = _action$payload["abstract"],
           keywords = _action$payload.keywords,
           scope = _action$payload.scope,
-          groups = _action$payload.groups;
-
-      if (!draft.filters.activeServices.byId[serviceId]) {
-        draft.filters.activeServices.byId[serviceId] = {};
-
-        var addFilters = function addFilters(filterNames, filterType) {
-          filterNames.forEach(function (filterName) {
-            var id = "".concat(filterType, "-").concat(filterName);
-
-            if (!draft.filters.filters.byId[id]) {
-              draft.filters.filters.byId[id] = {
-                id: id,
-                name: filterName,
-                amount: 1,
-                amountVisible: 1,
-                checked: true,
-                type: filterType
-              };
-              draft.filters.filters.allIds.push(id);
-            } else {
-              draft.filters.filters.byId[id].amount += 1;
-              draft.filters.filters.byId[id].amountVisible += 1;
-            }
-          });
+          groups = _action$payload.groups,
+          isLoading = _action$payload.isLoading;
+
+      if (isLoading) {
+        // If service is still loading, add without filters
+        draft.filters.activeServices.entities[serviceId] = {
+          serviceId: serviceId,
+          enabled: draft.allServicesEnabled,
+          filterIds: [],
+          scope: scope,
+          serviceName: serviceName,
+          serviceUrl: serviceUrl,
+          "abstract": _abstract,
+          isLoading: isLoading
         };
+      }
+
+      if (!isLoading) {
+        // If service is done loading, add with filters
+        if (!((_b = (_a = draft.filters.activeServices.entities[serviceId]) === null || _a === void 0 ? void 0 : _a.filterIds) === null || _b === void 0 ? void 0 : _b.length)) {
+          // If the service has no filters yet, add them
+          produceFilters(groups, FilterType.Group, draft, layerSelectFilterAdapter);
+          produceFilters(keywords, FilterType.Keyword, draft, layerSelectFilterAdapter);
+        }
 
-        addFilters(groups, FilterType.Group);
-        addFilters(keywords, FilterType.Keyword);
+        var filterIds = groups.map(function (group) {
+          return getFilterId(FilterType.Group, group);
+        }).concat(keywords.map(function (keyword) {
+          return getFilterId(FilterType.Keyword, keyword);
+        }));
+        draft.filters.activeServices.entities[serviceId] = {
+          serviceId: serviceId,
+          enabled: draft.allServicesEnabled,
+          filterIds: filterIds,
+          scope: scope,
+          serviceName: serviceName,
+          serviceUrl: serviceUrl,
+          "abstract": _abstract,
+          isLoading: isLoading
+        };
       }
 
-      var filterIds = groups.map(function (group) {
-        return "".concat(FilterType.Group, "-").concat(group);
-      }).concat(keywords.map(function (keyword) {
-        return "".concat(FilterType.Keyword, "-").concat(keyword);
-      }));
-      draft.filters.activeServices.byId[serviceId] = {
-        serviceId: serviceId,
-        enabled: draft.allServicesEnabled,
-        filterIds: filterIds,
-        scope: scope,
-        serviceName: serviceName,
-        serviceUrl: serviceUrl,
-        "abstract": _abstract
-      };
-      if (!draft.filters.activeServices.allIds.includes(serviceId)) draft.filters.activeServices.allIds.push(serviceId);
+      if (!draft.filters.activeServices.ids.includes(serviceId)) {
+        draft.filters.activeServices.ids.push(serviceId);
+      }
     },
     layerSelectRemoveService: function layerSelectRemoveService(draft, action) {
       var serviceId = action.payload.serviceId; // 1. Find a service that is to be removed
 
-      var foundService = draft.filters.activeServices.byId[serviceId]; // 2. Go through all keywords for removed service, and decrement the amount of all found keywords
+      var foundService = draft.filters.activeServices.entities[serviceId]; // 2. Go through all keywords for removed service, and decrement the amount of all found keywords
 
       foundService.filterIds.forEach(function (filterId) {
-        var foundObject = draft.filters.filters.byId[filterId];
+        var foundObject = draft.filters.filters.entities[filterId];
 
         if (foundObject && foundObject.amount) {
           foundObject.amount -= 1;
@@ -4523,23 +4740,20 @@ var slice$1 = createSlice({
         }
 
         if (foundObject && foundObject.amount === 0) {
-          delete draft.filters.filters.byId[filterId];
-          draft.filters.filters.allIds = draft.filters.filters.allIds.filter(function (serviceId) {
+          delete draft.filters.filters.entities[filterId];
+          draft.filters.filters.ids = draft.filters.filters.ids.filter(function (serviceId) {
             return serviceId !== filterId;
           });
         }
       }); // Finally remove object from activeServices, so if the service is added again later on, new object and keywords will be re-added
 
-      delete draft.filters.activeServices.byId[serviceId];
-      draft.filters.activeServices.allIds = draft.filters.activeServices.allIds.filter(function (id) {
-        return id !== serviceId;
-      });
+      layerSelectActiveServicesAdapter.removeOne(draft.filters.activeServices, serviceId);
     },
     enableActiveService: function enableActiveService(draft, action) {
       var _action$payload2 = action.payload,
           serviceId = _action$payload2.serviceId,
           keywords = _action$payload2.filters;
-      draft.filters.activeServices.byId[serviceId].enabled = true;
+      draft.filters.activeServices.entities[serviceId].enabled = true;
 
       var _iterator = _createForOfIteratorHelper(keywords),
           _step;
@@ -4547,7 +4761,7 @@ var slice$1 = createSlice({
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var keyword = _step.value;
-          draft.filters.filters.byId[keyword].amountVisible += 1;
+          draft.filters.filters.entities[keyword].amountVisible += 1;
         }
       } catch (err) {
         _iterator.e(err);
@@ -4559,7 +4773,7 @@ var slice$1 = createSlice({
       var _action$payload3 = action.payload,
           serviceId = _action$payload3.serviceId,
           keywords = _action$payload3.filters;
-      draft.filters.activeServices.byId[serviceId].enabled = false;
+      draft.filters.activeServices.entities[serviceId].enabled = false;
 
       var _iterator2 = _createForOfIteratorHelper(keywords),
           _step2;
@@ -4567,7 +4781,7 @@ var slice$1 = createSlice({
       try {
         for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
           var keyword = _step2.value;
-          draft.filters.filters.byId[keyword].amountVisible -= 1;
+          draft.filters.filters.entities[keyword].amountVisible -= 1;
         }
       } catch (err) {
         _iterator2.e(err);
@@ -4578,15 +4792,15 @@ var slice$1 = createSlice({
     toggleFilter: function toggleFilter(draft, action) {
       var filterIds = action.payload.filterIds;
       filterIds.forEach(function (filterId) {
-        draft.filters.filters.byId[filterId].checked = !draft.filters.filters.byId[filterId].checked;
+        draft.filters.filters.entities[filterId].checked = !draft.filters.filters.entities[filterId].checked;
       });
     },
     enableOnlyOneFilter: function enableOnlyOneFilter(draft, action) {
       var filterId = action.payload.filterId;
-      draft.filters.filters.allIds.forEach(function (filterId) {
-        draft.filters.filters.byId[filterId].checked = false;
+      draft.filters.filters.ids.forEach(function (filterId) {
+        draft.filters.filters.entities[filterId].checked = false;
       });
-      draft.filters.filters.byId[filterId].checked = true;
+      draft.filters.filters.entities[filterId].checked = true;
     },
     setActiveLayerInfo: function setActiveLayerInfo(draft, action) {
       var layer = action.payload.layer;
@@ -4682,21 +4896,32 @@ var layerSelectStore = function layerSelectStore(store) {
 
 
 var getSearchFilter = createSelector(layerSelectStore, function (store) {
-  return store ? store.filters.searchFilter : '';
+  var _a;
+
+  return ((_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.searchFilter) || '';
 });
 /**
  * Returns active services array
  *
  * Example getActiveServices(store);
  * @param {object} store store: object - store object
- * @returns {object} returnType: object of active services
+ * @returns {ActiveServiceObjectEntities} returnType: ActiveServiceObjectEntitiesobject of active services
  */
+// cast to usable type - selectEntities returns Dictionary<ActiveServiceObject> which is not usable inside of the code
 
-var getActiveServices = createSelector(layerSelectStore, function (store) {
-  var _a;
+var getActiveServices = function getActiveServices(store) {
+  return getActiveServicesDictionary(store);
+};
 
-  return store ? (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.byId : {};
-}, selectorMemoizationOptions);
+var _layerSelectActiveSer = layerSelectActiveServicesAdapter.getSelectors(function (store) {
+  var _a, _b;
+
+  return ((_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.activeServices) || {
+    entities: {},
+    ids: []
+  };
+}),
+    getActiveServicesDictionary = _layerSelectActiveSer.selectEntities;
 /**
  * Returns active services by id
  *
@@ -4706,10 +4931,11 @@ var getActiveServices = createSelector(layerSelectStore, function (store) {
  * @returns {object} returnType: object of active service
  */
 
+
 var getActiveServiceById = function getActiveServiceById(store, serviceId) {
-  var _a, _b;
+  var _a, _b, _c;
 
-  var enabledServices = ((_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.activeServices.byId[serviceId]) || {};
+  var enabledServices = ((_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.activeServices) === null || _c === void 0 ? void 0 : _c.entities[serviceId]) || {};
   return enabledServices;
 };
 /**
@@ -4723,10 +4949,10 @@ var getActiveServiceById = function getActiveServiceById(store, serviceId) {
 var getEnabledServiceIds = createSelector(layerSelectStore, function (store) {
   var _a, _b;
 
-  var enabledServices = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.allIds.filter(function (serviceId) {
-    var _a;
+  var enabledServices = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.ids.filter(function (serviceId) {
+    var _a, _b, _c;
 
-    return (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.byId[serviceId].enabled;
+    return (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices) === null || _b === void 0 ? void 0 : _b.entities[serviceId]) === null || _c === void 0 ? void 0 : _c.enabled;
   })) !== null && _b !== void 0 ? _b : [];
   return enabledServices;
 }, selectorMemoizationOptions);
@@ -4739,17 +4965,17 @@ var getEnabledServiceIds = createSelector(layerSelectStore, function (store) {
  */
 
 var getCheckedFilterIds = createSelector(layerSelectStore, function (store) {
-  var _a, _b;
+  var _a, _b, _c;
 
-  var checkedFilters = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters.allIds.filter(function (filterId) {
-    var _a, _b;
+  var checkedFilters = (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.ids.filter(function (filterId) {
+    var _a, _b, _c;
 
-    return (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters.byId[filterId]) === null || _b === void 0 ? void 0 : _b.checked;
-  })) !== null && _b !== void 0 ? _b : [];
+    return (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.entities[filterId]) === null || _c === void 0 ? void 0 : _c.checked;
+  })) !== null && _c !== void 0 ? _c : [];
   return checkedFilters.map(function (filterId) {
-    var _a;
+    var _a, _b, _c;
 
-    return (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters.byId[filterId].id;
+    return (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.entities[filterId]) === null || _c === void 0 ? void 0 : _c.id;
   });
 }, selectorMemoizationOptions);
 /**
@@ -4759,12 +4985,21 @@ var getCheckedFilterIds = createSelector(layerSelectStore, function (store) {
  * @param {object} store store: object - store object
  * @returns {array} returnType: array of all keyword ids
  */
+// cast to usable type - selectIds returns EntityId[] which is not usable inside of the code
+
+var getAllFilterIds = function getAllFilterIds(store) {
+  return getAllFilterIdsEntity(store);
+};
 
-var getAllFilterIds = createSelector(layerSelectStore, function (store) {
+var _layerSelectFilterAda = layerSelectFilterAdapter.getSelectors(function (store) {
   var _a, _b;
 
-  return (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters.allIds) !== null && _b !== void 0 ? _b : [];
-}, selectorMemoizationOptions);
+  return ((_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.filters) || {
+    entities: {},
+    ids: []
+  };
+}),
+    getAllFilterIdsEntity = _layerSelectFilterAda.selectIds;
 /**
  * Returns all filters
  *
@@ -4773,40 +5008,43 @@ var getAllFilterIds = createSelector(layerSelectStore, function (store) {
  * @returns {array} returnType: array of all filters
  */
 
-var getAllFilters = createSelector(layerSelectStore, function (store) {
-  var filters = store === null || store === void 0 ? void 0 : store.filters.filters.byId;
 
-  if (filters) {
-    return Object.values(filters);
-  }
-
-  return [];
-});
-/**
- * Returns if all keywords are checked
- *
- * Example isAllKeywordsChecked(store);
- * @param {object} store store: object - store object
- * @returns {array} returnType: boolean if all keywords are checked
- */
+var _layerSelectFilterAda2 = layerSelectFilterAdapter.getSelectors(function (store) {
+  var _a, _b;
 
+  return ((_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.filters) || {
+    entities: {},
+    ids: []
+  };
+}),
+    getAllFilters = _layerSelectFilterAda2.selectAll;
 var isAllFiltersChecked = createSelector(layerSelectStore, function (store) {
   var _a, _b;
 
-  return (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.allIds.every(function (filterId) {
+  return (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.ids.every(function (filterId) {
     var _a, _b, _c;
 
-    return (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.byId[filterId]) === null || _c === void 0 ? void 0 : _c.checked;
+    return (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.entities[filterId]) === null || _c === void 0 ? void 0 : _c.checked;
   });
 });
 /**
- * Returns the active layer info
+ * Gets a KeywordObject by its id
  *
- * Example getActiveLayerInfo(store);
- * @param {object} store store: object - store object
- * @returns {object} returnType: ActiveLayerObject
+ * Example: keywordObject = getKeywordObjectById(store, 'keywordId')
+ * @param {object} store object from which the keyword state will be extracted
+ * @param {string} filterId Id of the keyword
+ * @returns {object} object containing keyword information (id, amount, amountVisible, checked)
  */
 
+var _layerSelectFilterAda3 = layerSelectFilterAdapter.getSelectors(function (store) {
+  var _a, _b;
+
+  return ((_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.filters) || {
+    entities: {},
+    ids: []
+  };
+});
+    _layerSelectFilterAda3.selectById;
 var getActiveLayerInfo = createSelector(layerSelectStore, function (store) {
   return store === null || store === void 0 ? void 0 : store.activeLayerInfo;
 });
@@ -7620,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 = [];
@@ -7791,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) {
@@ -7848,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);
 
-          if (!(layerId === activeLayerId && // only update the active layer
+        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
+          }));
+
+        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,
@@ -7870,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;
@@ -8248,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,
@@ -8323,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 = {
@@ -8483,7 +8689,8 @@ function newServiceAddedSaga(capturedAction) {
             keywords: keywords,
             scope: scope,
             groups: groups,
-            "abstract": _abstract
+            "abstract": _abstract,
+            isLoading: false
           }));
 
         case 8:
@@ -8608,7 +8815,7 @@ function layerSelectRemoveServiceSaga(capturedAction) {
           results = _context3.sent;
           services = results;
           servicesEnabled = Object.values(services).find(function (service) {
-            return service.enabled;
+            return service === null || service === void 0 ? void 0 : service.enabled;
           });
 
           if (!(servicesEnabled === undefined)) {
@@ -8624,7 +8831,7 @@ function layerSelectRemoveServiceSaga(capturedAction) {
 
             return put(layerSelectActions.enableActiveService({
               serviceId: serviceId,
-              filters: service.filterIds
+              filters: service === null || service === void 0 ? void 0 : service.filterIds
             }));
           }));
 
@@ -11914,7 +12121,6 @@ var LayerManager = function LayerManager(_ref) {
         }));
       }
     }),
-    hasElevation: !isDockedLayerManager,
     className: "layermanager",
     sx: layerManagerStyle,
     onResizeStop: function onResizeStop(_event, _direction, node) {
@@ -11985,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({
@@ -12007,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
@@ -12071,18 +12279,36 @@ var useFetchServices = function useFetchServices(dialogType) {
   var serviceSetLayers = React.useCallback(function (payload) {
     dispatch(serviceActions.serviceSetLayers(payload));
   }, [dispatch]);
+  var addFiltersAndActiveServices = React.useCallback(function (payload) {
+    dispatch(layerSelectActions.addFiltersAndActiveServices(payload));
+  }, [dispatch]);
   React.useEffect(function () {
     if (isOpenInStore && preloadedServices && preloadedServices.length > 0) {
       mergePresetsAndUserAddedServices(preloadedServices, getUserAddedServices()).forEach(function (service) {
+        var wmService = WMGetServiceFromStore(service.url);
+        var scope = service.scope ? service.scope : 'system';
+
+        if (isMounted.current) {
+          addFiltersAndActiveServices({
+            serviceId: wmService.id,
+            serviceName: service.name,
+            serviceUrl: service.url,
+            keywords: [],
+            scope: scope,
+            groups: [],
+            "abstract": service["abstract"] || wmService["abstract"],
+            isLoading: true
+          });
+        }
+
         getLayersFlattenedFromService(service.url).then(function (layers) {
           if (isMounted.current) {
-            var wmService = WMGetServiceFromStore(service.url);
             serviceSetLayers({
               id: wmService.id,
               name: service.name,
               serviceUrl: service.url,
               layers: layers,
-              scope: service.scope ? service.scope : 'system',
+              scope: scope,
               // first try to load the user abstract, otherwise the service abstract
               "abstract": service["abstract"] || wmService["abstract"]
             });
@@ -12091,9 +12317,8 @@ var useFetchServices = function useFetchServices(dialogType) {
           return null;
         });
       });
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [isOpenInStore, preloadedServices, serviceSetLayers]);
+    }
+  }, [addFiltersAndActiveServices, isMounted, isOpenInStore, preloadedServices, serviceSetLayers]);
 };
 var mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices(presets, userAddedServices) {
   return Object.values(Object.assign(Object.assign({}, presets.reduce(function (byUrl, preset) {
@@ -12158,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
     }));
   };
 
@@ -12214,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),
@@ -12223,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
     }));
   };
 
@@ -12251,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}
@@ -12263,7 +12486,10 @@ var DockedLayerManagerConnect = function DockedLayerManagerConnect(_ref) {
     startPosition: {
       top: 60,
       right: 16
-    }
+    },
+    onMouseDown: setDialogOrder,
+    order: dialogOrder,
+    source: source
   });
 };
 
@@ -12395,7 +12621,9 @@ var validateServiceName = function validateServiceName(value, services) {
   var ownServiceName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   var serviceName = value === null || value === void 0 ? void 0 : value.toLowerCase();
   var foundName = Object.keys(services).find(function (serviceId) {
-    return services[serviceId].serviceName.toLowerCase() === serviceName && serviceName !== ownServiceName.toLocaleLowerCase();
+    var _a;
+
+    return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceName.toLowerCase()) === serviceName && serviceName !== ownServiceName.toLocaleLowerCase();
   });
   return foundName === undefined ? true : VALIDATIONS_NAME_EXISTING;
 };
@@ -12425,7 +12653,9 @@ var validateServiceUrl = function validateServiceUrl(value, services) {
 
 
   var foundUrl = Object.keys(services).find(function (serviceId) {
-    return services[serviceId].serviceUrl === serviceUrl;
+    var _a;
+
+    return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceUrl) === serviceUrl;
   });
 
   if (foundUrl) {
@@ -13630,7 +13860,7 @@ var sortByService = function sortByService(serviceObj) {
     var _ref4 = _slicedToArray(_ref2, 2),
         b = _ref4[1];
 
-    return a.serviceName.localeCompare(b.serviceName);
+    return a.serviceName.localeCompare(b === null || b === void 0 ? void 0 : b.serviceName);
   }).reduce(function (r, _ref5) {
     var _ref6 = _slicedToArray(_ref5, 2),
         key = _ref6[0],
@@ -13953,7 +14183,7 @@ var ServiceChip = function ServiceChip(_ref) {
   var chip = all ? 'all' : service && service.serviceUrl;
   return /*#__PURE__*/React.createElement(CustomTooltip, {
     title: (service === null || service === void 0 ? void 0 : service["abstract"]) ? "Abstract: ".concat(service["abstract"]) : ''
-  }, /*#__PURE__*/React.createElement(CustomToggleButton, {
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CustomToggleButton, {
     variant: "boxed",
     selected: isSelected,
     tabIndex: 0,
@@ -13966,7 +14196,7 @@ var ServiceChip = function ServiceChip(_ref) {
     },
     disabled: isDisabled,
     sx: style
-  }, service ? service.serviceName : 'All'));
+  }, service ? service.serviceName : 'All')));
 };
 
 var ServiceChipConnect = function ServiceChipConnect(_ref) {
@@ -14107,7 +14337,7 @@ var ServiceList = function ServiceList(_ref) {
     all: true,
     isSelected: isAllSelected
   }), Object.keys(activeServices).map(function (serviceId) {
-    var _a;
+    var _a, _b;
 
     var service = activeServices[serviceId];
     return /*#__PURE__*/React.createElement(ServiceChipConnect, {
@@ -14116,7 +14346,7 @@ var ServiceList = function ServiceList(_ref) {
       service: service,
       isSelected: (_a = activeServices[serviceId]) === null || _a === void 0 ? void 0 : _a.enabled,
       isAllSelected: isAllSelected,
-      isDisabled: activeServices[serviceId] === undefined
+      isDisabled: activeServices[serviceId] === undefined || ((_b = activeServices[serviceId]) === null || _b === void 0 ? void 0 : _b.isLoading) === true
     });
   })));
 };
@@ -14369,7 +14599,9 @@ var Rows = function Rows(_ref2) {
 var getService = function getService(services, serviceUrl) {
   var serviceIds = Object.keys(services);
   var serviceIndex = serviceIds.findIndex(function (serviceId) {
-    return services[serviceId].serviceUrl === serviceUrl;
+    var _a;
+
+    return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceUrl) === serviceUrl;
   });
   if (serviceIndex < 0) return null;
   return services[serviceIds[serviceIndex]];
@@ -15200,7 +15432,8 @@ var MapControls = function MapControls(_a) {
       left: 0,
       margin: 1,
       zIndex: 50,
-      top: '96px'
+      top: '96px',
+      userSelect: 'none'
     }
   }, props), /*#__PURE__*/React.createElement(Grid, {
     sx: {
@@ -15584,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);
@@ -15613,7 +15846,7 @@ var DimensionSelectDialogConnect = function DimensionSelectDialogConnect(_ref) {
     }));
   }, [dispatch]);
 
-  if (!mapDimension || !layerIds || layerIds.length < 1) {
+  if (!mapContainsDimension || !layerIds || layerIds.length < 1) {
     return null;
   }
 
@@ -15733,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;
@@ -15743,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,
@@ -15886,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;
   });
@@ -15978,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';
@@ -16121,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,
@@ -16331,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) {
@@ -16349,7 +16607,8 @@ var AnimationLengthButton = function AnimationLengthButton(_ref) {
     title: title,
     isDisabled: disabled,
     value: animationLength,
-    onChangeMouseWheel: onChangeSliderValue
+    onChangeMouseWheel: onChangeSliderValue,
+    animationLength: animationLengthInMinutes
   });
 };
 
@@ -16398,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"
@@ -16419,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),
@@ -16441,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"
@@ -17447,147 +17696,28 @@ var isLeftAnimationIconArea = function isLeftAnimationIconArea(x, leftMarkerPx,
   return x >= leftMarkerPx && x <= leftMarkerPx + width;
 };
 
+var TIME_SLIDER_LEGEND_HEIGHT = 24;
 var DRAG_AREA_WIDTH = 24;
 
-var TimeSliderLegend = function TimeSliderLegend(_ref) {
-  var mapId = _ref.mapId,
-      centerTime = _ref.centerTime,
-      secondsPerPx = _ref.secondsPerPx,
-      _ref$dataScaleToSecon = _ref.dataScaleToSecondsPerPx,
-      dataScaleToSecondsPerPx = _ref$dataScaleToSecon === void 0 ? defaultDataScaleToSecondsPerPx : _ref$dataScaleToSecon,
-      selectedTime = _ref.selectedTime,
-      _ref$scale = _ref.scale,
-      scale = _ref$scale === void 0 ? Scale.Hour : _ref$scale,
-      currentTime = _ref.currentTime,
-      dataStartTime = _ref.dataStartTime,
-      dataEndTime = _ref.dataEndTime,
-      animationStartTime = _ref.animationStartTime,
-      animationEndTime = _ref.animationEndTime,
-      timeStep = _ref.timeStep,
-      _ref$mapIsActive = _ref.mapIsActive,
-      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;
-
-  var _useCanvasTarget = useCanvasTarget('mousedown'),
-      _useCanvasTarget2 = _slicedToArray(_useCanvasTarget, 2),
-      node = _useCanvasTarget2[1];
-
-  var _React$useState = React.useState(0),
+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),
-      canvasWidth = _React$useState2[0],
-      setCanvasWidth = _React$useState2[1];
+      localAnimationStartTime = _React$useState2[0],
+      setLocalAnimationStartTime = _React$useState2[1];
 
-  var _React$useState3 = React.useState(false),
+  var _React$useState3 = React.useState(convertStringTimeToUnix(animationEndTime)),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      selectedTimeDragging = _React$useState4[0],
-      setSelectedTimeDragging = _React$useState4[1];
-
-  var _React$useState5 = React.useState(false),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      leftMarkerDragging = _React$useState6[0],
-      setLeftMarkerDragging = _React$useState6[1];
-
-  var _React$useState7 = React.useState(false),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      rightMarkerDragging = _React$useState8[0],
-      setRightMarkerDragging = _React$useState8[1];
-
-  var _React$useState9 = React.useState(false),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      centerTimeDragging = _React$useState10[0],
-      setCenterTimeDragging = _React$useState10[1];
-
-  var _React$useState11 = React.useState(false),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      dragTooltipOpen = _React$useState12[0],
-      setDragTooltipOpen = _React$useState12[1];
-
-  var _React$useState13 = React.useState(false),
-      _React$useState14 = _slicedToArray(_React$useState13, 2),
-      mouseDownInLegend = _React$useState14[0],
-      setMouseDownInLegend = _React$useState14[1];
-
-  var _React$useState15 = React.useState(animationStartTime && moment.utc(animationStartTime).unix()),
-      _React$useState16 = _slicedToArray(_React$useState15, 2),
-      localAnimationStartTime = _React$useState16[0],
-      setLocalAnimationStartTime = _React$useState16[1];
-
-  var _React$useState17 = React.useState(animationEndTime && moment.utc(animationEndTime).unix()),
-      _React$useState18 = _slicedToArray(_React$useState17, 2),
-      localAnimationEndTime = _React$useState18[0],
-      setLocalAnimationEndTime = _React$useState18[1];
-
-  var _React$useState19 = React.useState(moment.utc(0)),
-      _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];
+      localAnimationEndTime = _React$useState4[0],
+      setLocalAnimationEndTime = _React$useState4[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());
+    setLocalAnimationStartTime(convertStringTimeToUnix(animationStartTime));
+    setLocalAnimationEndTime(convertStringTimeToUnix(animationEndTime));
   }, [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]);
-  /**
-   * remove active drag. can happen outside canvas.
-   */
-
+  var animationDiff = React.useRef();
+  var pixelsMovedSinceStartDragging = React.useRef(0);
   React.useEffect(function () {
     var handleMouseUp = function handleMouseUp() {
-      centerTimeDragging ? setCursorStyle('auto') : setCursorStyle('ew-resize');
-      setSelectedTimeDragging(false);
-      setLeftMarkerDragging(false);
-      setRightMarkerDragging(false);
-      setMouseDownInLegend(false);
-      setCenterTimeDragging(false);
-      setDragTooltipOpen(false);
-      setAnimationAreaDragging(false);
-      startDraggingPosition.current = 0;
       pixelsMovedSinceStartDragging.current = 0;
       animationDiff.current = undefined;
     };
@@ -17596,8 +17726,22 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     return function () {
       document.removeEventListener('mouseup', handleMouseUp);
     };
-  }, [centerTimeDragging]);
-  var onMouseTouchMoveActions = useCallback(function (x) {
+  }, []);
+  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) {
@@ -17609,16 +17753,11 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
 
     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
+      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; // change local time bounds according to either dragged marker
-
-      var mouseTimeUnix = pixelToTimestamp(mousePosition, // lets us drag on the marker
-      centerTime, canvasWidth, secondsPerPx);
+      dragTooltipPosition.current = pixelsToLeft ? mousePosition + pixelsToLeft : mousePosition;
+      var mouseTimeUnix = pixelToTimestamp(mousePosition, centerTime, canvasWidth, secondsPerPx);
       setLocalAnimationStartTime(mouseTimeUnix);
       setTooltipTime(moment.unix(mouseTimeUnix));
       return;
@@ -17627,14 +17766,12 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     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 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; // change local time bounds according to either dragged marker
+      dragTooltipPosition.current = pixelsToLeft ? _mousePosition + pixelsToLeft : _mousePosition;
 
-      var _mouseTimeUnix = pixelToTimestamp(_mousePosition, // lets us drag on the marker
-      centerTime, canvasWidth, secondsPerPx);
+      var _mouseTimeUnix = pixelToTimestamp(_mousePosition, centerTime, canvasWidth, secondsPerPx);
 
       setLocalAnimationEndTime(_mouseTimeUnix);
       setTooltipTime(moment.unix(_mouseTimeUnix));
@@ -17663,101 +17800,236 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       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));
-    setNewRoundedTime(unfliteredSelectedTimePx, centerTime, canvasWidth, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
-  }, [canvasWidth, centerTime, dataEndTime, dataStartTime, onSetNewDate, secondsPerPx, setUnfilteredSelectedTime, timeStep, unfilteredSelectedTime]);
+  }, [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 handleMouseMove = function handleMouseMove(event) {
-      if (event.movementX === 0) return;
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === 'Home' && mapIsActive) {
+        handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime);
+      }
 
-      if (mouseDownInLegend) {
-        setCenterTimeDragging(true);
-        var dragDistanceTime = event.movementX * secondsPerPx;
-        var newCenterTime = centerTime - dragDistanceTime;
-        onSetCenterTime && onSetCenterTime(newCenterTime);
-      } else if (leftMarkerDragging || rightMarkerDragging || animationAreaDragging) {
-        onMouseTouchMoveActions(event.movementX);
-      } else if (selectedTimeDragging) {
-        setSelectedTime(event.movementX);
+      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('mousemove', handleMouseMove);
+    document.addEventListener('keydown', handleKeyDown);
     return function () {
-      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [animationAreaDragging, centerTime, leftMarkerDragging, mouseDownInLegend, onMouseTouchMoveActions, onSetCenterTime, rightMarkerDragging, secondsPerPx, selectedTimeDragging, setSelectedTime]);
-  var theme = useTheme();
-  var startDraggingPosition = React.useRef(0);
+  }, [curTime, currentTime, dataEndTime, dataStartTime, mapIsActive, onSetCenterTime, onSetNewDate, timeStep]);
+}
 
-  var onMouseDown = function onMouseDown(x, y, width) {
-    isClickOrDrag.current = 'click';
-    startDraggingPosition.current = x;
+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 _map3 = [localAnimationStartTime, localAnimationEndTime, selectedTime].map(function (timestamp) {
-      return timestampToPixel(timestamp, centerTime, width, secondsPerPx);
-    }),
-        _map4 = _slicedToArray(_map3, 3),
-        leftMarkerPx = _map4[0],
-        rightMarkerPx = _map4[1],
-        selectedTimePx = _map4[2]; // start dragging selected time.
 
+var TimeSliderLegend = function TimeSliderLegend(_ref) {
+  var mapId = _ref.mapId,
+      centerTime = _ref.centerTime,
+      secondsPerPx = _ref.secondsPerPx,
+      _ref$dataScaleToSecon = _ref.dataScaleToSecondsPerPx,
+      dataScaleToSecondsPerPx = _ref$dataScaleToSecon === void 0 ? defaultDataScaleToSecondsPerPx : _ref$dataScaleToSecon,
+      selectedTime = _ref.selectedTime,
+      _ref$scale = _ref.scale,
+      scale = _ref$scale === void 0 ? Scale.Hour : _ref$scale,
+      currentTime = _ref.currentTime,
+      dataStartTime = _ref.dataStartTime,
+      dataEndTime = _ref.dataEndTime,
+      animationStartTime = _ref.animationStartTime,
+      animationEndTime = _ref.animationEndTime,
+      timeStep = _ref.timeStep,
+      _ref$mapIsActive = _ref.mapIsActive,
+      mapIsActive = _ref$mapIsActive === void 0 ? true : _ref$mapIsActive,
+      unfilteredSelectedTime = _ref.unfilteredSelectedTime,
+      setUnfilteredSelectedTime = _ref.setUnfilteredSelectedTime,
+      _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);
 
-    if (isSelectedTimeIconArea(x, selectedTimePx, DRAG_AREA_WIDTH)) {
-      setCursorStyle('grabbing');
-      setSelectedTimeDragging(true);
-      return;
-    }
+  var _useCanvasTarget = useCanvasTarget('mousedown'),
+      _useCanvasTarget2 = _slicedToArray(_useCanvasTarget, 2),
+      node = _useCanvasTarget2[1];
 
-    if (animationStartTime && animationEndTime && onSetAnimationStartTime && onSetAnimationEndTime) {
-      dragTooltipPosition.current = pixelsToLeft ? x + pixelsToLeft : x; // start dragging either marker
+  var _React$useState5 = React.useState(0),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      canvasWidth = _React$useState6[0],
+      setCanvasWidth = _React$useState6[1];
 
-      if (isLeftAnimationIconArea(x, leftMarkerPx, DRAG_AREA_WIDTH) && !rightMarkerDragging) {
-        setCursorStyle('grabbing');
-        setLeftMarkerDragging(true);
-        setTooltipTime(moment.utc(animationStartTime));
-        setDragTooltipOpen(true);
-        return;
-      }
+  var _React$useState7 = React.useState(false),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      selectedTimeDragging = _React$useState8[0],
+      setSelectedTimeDragging = _React$useState8[1];
 
-      if (isRightAnimationIconArea(x, rightMarkerPx, DRAG_AREA_WIDTH) && !leftMarkerDragging) {
-        setCursorStyle('grabbing');
-        setRightMarkerDragging(true);
-        setTooltipTime(moment.utc(animationEndTime));
-        setDragTooltipOpen(true);
-        return;
-      }
+  var _React$useState9 = React.useState(false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      leftMarkerDragging = _React$useState10[0],
+      setLeftMarkerDragging = _React$useState10[1];
 
-      if (isInsideAnimationArea(x, leftMarkerPx, rightMarkerPx) && !animationAreaDragging) {
-        setCursorStyle('grabbing');
-        setAnimationAreaDragging(true);
-        return;
-      }
-    } // clicking the timeslider
+  var _React$useState11 = React.useState(false),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      rightMarkerDragging = _React$useState12[0],
+      setRightMarkerDragging = _React$useState12[1];
+
+  var _React$useState13 = React.useState(false),
+      _React$useState14 = _slicedToArray(_React$useState13, 2),
+      dragTooltipOpen = _React$useState14[0],
+      setDragTooltipOpen = _React$useState14[1];
 
+  var _React$useState15 = React.useState(false),
+      _React$useState16 = _slicedToArray(_React$useState15, 2),
+      mouseDownInLegend = _React$useState16[0],
+      setMouseDownInLegend = _React$useState16[1];
+
+  var _React$useState17 = React.useState(false),
+      _React$useState18 = _slicedToArray(_React$useState17, 2),
+      animationAreaDragging = _React$useState18[0],
+      setAnimationAreaDragging = _React$useState18[1];
+
+  var _React$useState19 = React.useState('auto'),
+      _React$useState20 = _slicedToArray(_React$useState19, 2),
+      cursorStyle = _React$useState20[0],
+      setCursorStyle = _React$useState20[1];
+  /**
+   * remove active drag. can happen outside canvas.
+   */
 
-    setMouseDownInLegend(true);
-  };
 
   React.useEffect(function () {
-    var stoppedDragging = !leftMarkerDragging && !rightMarkerDragging && !animationAreaDragging;
+    var handleMouseUp = function handleMouseUp() {
+      setCursorStyle('auto');
+      setSelectedTimeDragging(false);
+      setLeftMarkerDragging(false);
+      setRightMarkerDragging(false);
+      setMouseDownInLegend(false);
+      setDragTooltipOpen(false);
+      setAnimationAreaDragging(false);
+      startDraggingPosition.current = 0;
+    };
 
-    if (stoppedDragging) {
-      if (localAnimationStartTime !== convertStringTimeToUnix(animationStartTime)) {
-        onSetAnimationStartTime(moment.utc(localAnimationStartTime * 1000).format(dateFormat));
+    document.addEventListener('mouseup', handleMouseUp);
+    return function () {
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, []);
+  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'];
+
+  var _React$useState21 = React.useState(moment.utc(0)),
+      _React$useState22 = _slicedToArray(_React$useState21, 2),
+      tooltipTime = _React$useState22[0],
+      setTooltipTime = _React$useState22[1];
+
+  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;
+
+  var setSelectedTime = useCallback(function (x) {
+    var unfliteredSelectedTimePx = timestampToPixel(unfilteredSelectedTime, centerTime, canvasWidth, secondsPerPx) + x;
+    setUnfilteredSelectedTime(pixelToTimestamp(unfliteredSelectedTimePx, centerTime, canvasWidth, secondsPerPx));
+    setNewRoundedTime(unfliteredSelectedTimePx, centerTime, canvasWidth, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
+  }, [canvasWidth, centerTime, dataEndTime, dataStartTime, onSetNewDate, secondsPerPx, setUnfilteredSelectedTime, timeStep, unfilteredSelectedTime]);
+  React.useEffect(function () {
+    var handleMouseMove = function handleMouseMove(event) {
+      if (event.movementX === 0) return;
+
+      if (mouseDownInLegend) {
+        var dragDistanceTime = event.movementX * secondsPerPx;
+        var newCenterTime = centerTime - dragDistanceTime;
+        onSetCenterTime && onSetCenterTime(newCenterTime);
+      } else if (leftMarkerDragging || rightMarkerDragging || animationAreaDragging) {
+        handleAnimationDragging(event.movementX);
+      } else if (selectedTimeDragging) {
+        setSelectedTime(event.movementX);
       }
+    };
 
-      if (localAnimationEndTime !== convertStringTimeToUnix(animationEndTime)) {
-        onSetAnimationEndTime(moment.utc(localAnimationEndTime * 1000).format(dateFormat));
+    document.addEventListener('mousemove', handleMouseMove);
+    return function () {
+      document.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [animationAreaDragging, centerTime, leftMarkerDragging, mouseDownInLegend, handleAnimationDragging, onSetCenterTime, rightMarkerDragging, secondsPerPx, selectedTimeDragging, setSelectedTime]);
+  var theme = useTheme();
+  var isClickOrDrag = React.useRef();
+
+  var onMouseDown = function onMouseDown(x, y, width) {
+    isClickOrDrag.current = 'click';
+    startDraggingPosition.current = x;
+
+    var _map3 = [localAnimationStartTime, localAnimationEndTime, selectedTime].map(function (timestamp) {
+      return timestampToPixel(timestamp, centerTime, width, secondsPerPx);
+    }),
+        _map4 = _slicedToArray(_map3, 3),
+        leftMarkerPx = _map4[0],
+        rightMarkerPx = _map4[1],
+        selectedTimePx = _map4[2]; // start dragging selected time.
+
+
+    if (isSelectedTimeIconArea(x, selectedTimePx, DRAG_AREA_WIDTH)) {
+      setCursorStyle('grabbing');
+      setSelectedTimeDragging(true);
+      return;
+    }
+
+    if (animationStartTime && animationEndTime) {
+      dragTooltipPosition.current = pixelsToLeft ? x + pixelsToLeft : x; // start dragging either marker
+
+      if (isLeftAnimationIconArea(x, leftMarkerPx, DRAG_AREA_WIDTH) && !rightMarkerDragging) {
+        setCursorStyle('grabbing');
+        setLeftMarkerDragging(true);
+        setTooltipTime(moment.utc(animationStartTime));
+        setDragTooltipOpen(true);
+        return;
       }
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [leftMarkerDragging, rightMarkerDragging, animationAreaDragging]);
+      if (isRightAnimationIconArea(x, rightMarkerPx, DRAG_AREA_WIDTH) && !leftMarkerDragging) {
+        setCursorStyle('grabbing');
+        setRightMarkerDragging(true);
+        setTooltipTime(moment.utc(animationEndTime));
+        setDragTooltipOpen(true);
+        return;
+      }
+
+      if (isInsideAnimationArea(x, leftMarkerPx, rightMarkerPx) && !animationAreaDragging) {
+        setCursorStyle('grabbing');
+        setAnimationAreaDragging(true);
+        return;
+      }
+    } // clicking the timeslider
+
 
-  var onMouseUpTouchEnd = function onMouseUpTouchEnd(x) {
+    setMouseDownInLegend(true);
+  };
+
+  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));
@@ -17800,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;
@@ -17820,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',
@@ -17837,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);
@@ -17845,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.
@@ -18294,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)
   });
 };
 
@@ -18480,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
   });
 };
 
@@ -18512,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,
@@ -18552,11 +18818,7 @@ var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
     }),
     timeScaleBtn: /*#__PURE__*/React.createElement(TimeScaleButtonConnect, {
       mapId: mapId
-    }),
-    timeStep: timeStep,
-    isTimestepAuto: isTimestepAuto$1,
-    onChangeTimeStep: onSetTimeStep,
-    timeDimension: activeLayerTimeDimension
+    })
   });
 };
 
@@ -19671,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
 
@@ -21474,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);
       }
@@ -22084,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);
@@ -22094,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();
@@ -22109,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') {
@@ -22127,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');
@@ -22151,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 () {
@@ -22608,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;
@@ -22687,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", {
@@ -22771,8 +23055,7 @@ ReactMapView.defaultProps = {
   shouldAutoFetch: true,
   displayMapPin: false,
   disableMapPin: false,
-  onMount: function onMount() {},
-  onUnMount: function onUnMount() {},
+  onWMJSMount: function onWMJSMount() {},
   onMapChangeDimension: function onMapChangeDimension() {
     /* nothing */
   },
@@ -22864,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',
@@ -22881,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: {
@@ -22895,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, {
@@ -23266,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);
 
@@ -23276,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,
@@ -23353,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
@@ -23915,13 +24198,401 @@ var TimeSliderClockConnect = function TimeSliderClockConnect(_ref) {
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+/**
+ * Get the title for this WMS layer based on its layerId. If not defined, layerId is used instead.
+ * @param layerId
+ * @returns Title for the layer
+ */
+
+var getTitle = function getTitle(layerId) {
+  var wmjsLayer = getWMLayerById(layerId);
+  return wmjsLayer ? wmjsLayer.title || wmjsLayer.name : layerId;
+};
+/**
+ * Make a list of GFI Layers to display.
+ * @param layers
+ * @param mapId
+ * @returns
+ */
+
+
+var getLayersToUpdate = function getLayersToUpdate(layers, mapId) {
+  var wmjsMap = getWMJSMapById(mapId);
+  if (!wmjsMap || !layers || layers.length === 0) return [];
+  return layers.filter(function (layer) {
+    return layer && layer.enabled && !!getWMLayerById(layer.id);
+  }).map(function (layer) {
+    /*
+      We need a wmjsLayer to build the getfeatureinfo url (getWMSGetFeatureInfoRequestURL function).
+      But it seems that its dimension are lazely updated (by ReactMapView).
+      Therefore make a clone of this layer and set its dimensions based on the layer object.
+      Otherwise we risk making a getfeatureinfo call with outdated dimension values.
+    */
+    var wmjsLayer = getWMLayerById(layer.id).cloneLayer();
+    layer.dimensions && layer.dimensions.forEach(function (dim) {
+      var wmDim = wmjsLayer.getDimension(dim.name);
+
+      if (wmDim && wmDim.getValue() !== dim.currentValue) {
+        wmDim.setValue(dim.currentValue);
+      }
+    });
+    return {
+      layerId: layer.id,
+      url: wmjsMap.getWMSGetFeatureInfoRequestURL(wmjsLayer, "".concat(wmjsMap.getMapPin().getXY().x), "".concat(wmjsMap.getMapPin().getXY().y), 'text/html'),
+      title: getTitle(layer.id)
+    };
+  });
+};
+
+var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
+  var layers = _ref.layers,
+      isOpen = _ref.isOpen,
+      onClose = _ref.onClose,
+      _ref$onMouseDown = _ref.onMouseDown,
+      onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+      mapId = _ref.mapId,
+      _ref$showMapId = _ref.showMapId,
+      showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId,
+      _ref$order = _ref.order,
+      order = _ref$order === void 0 ? 0 : _ref$order,
+      _ref$source = _ref.source,
+      source = _ref$source === void 0 ? 'app' : _ref$source,
+      mapPinLocation = _ref.mapPinLocation;
+
+  /* Ref and state for maplocation */
+  var mapLocationWasChanged = React__default.useRef(false);
+
+  var _React$useState = React__default.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isInitialMapLocationChanged = _React$useState2[0],
+      setInitialMapLocationIsChanged = _React$useState2[1];
+  /* Ref, state and update function for results per layer map */
+
+
+  var gfiResultMap = React__default.useRef(new Map()).current;
+
+  var _React$useState3 = React__default.useState(),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      triggerRerender = _React$useState4[1];
+
+  var updateLayerResult = function updateLayerResult(_ref2) {
+    var layerId = _ref2.layerId,
+        data = _ref2.data,
+        isLoading = _ref2.isLoading;
+    gfiResultMap.set(layerId, {
+      data: data,
+      isLoading: isLoading
+    });
+    triggerRerender("".concat(layerId).concat(isLoading));
+  };
+  /* Build a layerlist array with a set of arguments per layer to do the query for */
+
+
+  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.
+  */
+
+  var debouncedlayerListString = useDebounce(layerToUpdateList.map(function (layer) {
+    return layer.url;
+  }).join(','), 100);
+  /* Do a GFI call to the server and use the updateLayerResult to provide the results. */
+
+  var fetchLayerInfo = function fetchLayerInfo(url, layerId) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var _yield$axios$get, data, errorMessage;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              updateLayerResult({
+                layerId: layerId,
+                data: '',
+                isLoading: true
+              });
+              _context.next = 4;
+              return axios.get(url);
+
+            case 4:
+              _yield$axios$get = _context.sent;
+              data = _yield$axios$get.data;
+              updateLayerResult({
+                layerId: layerId,
+                data: data,
+                isLoading: false
+              });
+              _context.next = 13;
+              break;
+
+            case 9:
+              _context.prev = 9;
+              _context.t0 = _context["catch"](0);
+              errorMessage = _context.t0.message;
+              updateLayerResult({
+                layerId: layerId,
+                data: errorMessage,
+                isLoading: false
+              });
+
+            case 13:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 9]]);
+    }));
+  };
+  /*  Wait till the user has clicked the map. */
+
+
+  React__default.useEffect(function () {
+    if (mapLocationWasChanged.current !== false) {
+      setInitialMapLocationIsChanged(true);
+    }
+
+    mapLocationWasChanged.current = true;
+  }, [mapPinLocation]);
+  /* For each changed getfeature url string, load new data using WMS GetFeatureInfo */
+
+  React__default.useEffect(function () {
+    if (isInitialMapLocationChanged && isOpen) {
+      layerToUpdateList.forEach(function (_ref3) {
+        var url = _ref3.url,
+            layerId = _ref3.layerId;
+        fetchLayerInfo(url, layerId);
+      });
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [debouncedlayerListString]);
+  var hasLayers = layers && layers.length > 0;
+  return /*#__PURE__*/React__default.createElement(ToolContainerDraggable, {
+    startPosition: {
+      right: 10,
+      top: 80
+    },
+    minWidth: 300,
+    onClose: onClose,
+    title: showMapId ? "Event marker info ".concat(mapId) : 'Event marker info',
+    headerSize: "small",
+    initialMaxHeight: 440,
+    isOpen: isOpen,
+    "data-testid": "moveable-getfeatureinfo",
+    bounds: "parent",
+    onMouseDown: onMouseDown,
+    order: order,
+    source: source
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      padding: 0
+    }
+  }, isOpen && hasLayers && isInitialMapLocationChanged && /*#__PURE__*/React__default.createElement(Box, {
+    "data-testid": "GetFeatureInfoList"
+  }, layerToUpdateList.map(function (layer) {
+    var layerId = layer.layerId,
+        title = layer.title,
+        url = layer.url;
+    var result = gfiResultMap.get(layerId);
+    if (!result) return null;
+    return /*#__PURE__*/React__default.createElement(Grid, {
+      key: layerId,
+      sx: {
+        margin: '4px 6px 4px 6px',
+        padding: '6px',
+        backgroundColor: 'geowebColors.cards.cardContainer',
+        border: 'solid 1px',
+        borderColor: 'geowebColors.cards.cardContainerBorder'
+      }
+    }, /*#__PURE__*/React__default.createElement(Typography, {
+      variant: "subtitle1"
+    }, title, "\xA0", /*#__PURE__*/React__default.createElement(IconButton, {
+      sx: {
+        "float": 'right'
+      },
+      size: "small",
+      "aria-label": "Open layer featureinfo in another page",
+      onClick: function onClick() {
+        window.open(url);
+      }
+    }, /*#__PURE__*/React__default.createElement(ExitDomain, null))), !result.isLoading ? /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        fontSize: '11px',
+        padding: '6px',
+        margin: '0',
+        fontFamily: 'Roboto,Helvetica,Arial,sans-serif',
+        fontWeight: '400',
+        lineHeight: '1.75',
+        letterSpacing: '0.25px'
+      },
+      "data-testid": "layer-result-ready-".concat(layerId),
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML: {
+        __html: result.data.replace(/<hr\/>/g, '')
+      }
+    }) : /*#__PURE__*/React__default.createElement("div", {
+      "data-testid": "layer-result-loading-".concat(layerId)
+    }, /*#__PURE__*/React__default.createElement(CircularProgress, {
+      "data-testid": "spinner",
+      color: "inherit"
+    })));
+  })), hasLayers && !isInitialMapLocationChanged && /*#__PURE__*/React__default.createElement(Typography, {
+    "data-testid": "click-on-map-for-info",
+    variant: "subtitle1",
+    sx: {
+      padding: '10px'
+    }
+  }, "Click on the map for info."), !hasLayers && /*#__PURE__*/React__default.createElement(Typography, {
+    "data-testid": "NoLayers",
+    variant: "subtitle1",
+    sx: {
+      padding: '10px'
+    }
+  }, "No layers added to the map.")));
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var GetFeatureInfoConnect = function GetFeatureInfoConnect(_ref) {
+  var _ref$showMapId = _ref.showMapId,
+      showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId,
+      mapId = _ref.mapId;
+  var dispatch = useDispatch();
+  var getFeatureInfoType = "getfeatureinfo-".concat(mapId);
+  var mapPinLocation = useSelector(function (store) {
+    return getPinLocation(store, mapId);
+  });
+  var toggleMapPinIsVisible = React.useCallback(function (displayMapPin) {
+    dispatch(mapActions$1.toggleMapPinIsVisible({
+      mapId: mapId,
+      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);
+  });
+
+  var _useSetupDialog = useSetupDialog(getFeatureInfoType),
+      dialogOrder = _useSetupDialog.dialogOrder,
+      isDialogOpen = _useSetupDialog.isDialogOpen,
+      uiSource = _useSetupDialog.uiSource,
+      setDialogOrder = _useSetupDialog.setDialogOrder,
+      onCloseDialog = _useSetupDialog.onCloseDialog;
+
+  React.useEffect(function () {
+    toggleMapPinIsVisible(isDialogOpen);
+
+    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,
+    onClose: onCloseDialog,
+    mapId: mapId,
+    showMapId: showMapId,
+    onMouseDown: setDialogOrder,
+    order: dialogOrder,
+    source: uiSource,
+    mapPinLocation: mapPinLocation
+  });
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var GetFeatureInfoButtonConnect = function GetFeatureInfoButtonConnect(_ref) {
+  var mapId = _ref.mapId,
+      _ref$source = _ref.source,
+      source = _ref$source === void 0 ? 'app' : _ref$source;
+  var dispatch = useDispatch();
+  var gfiType = "getfeatureinfo-".concat(mapId);
+  var isOpenInStore = useSelector(function (store) {
+    return getisDialogOpen(store, gfiType);
+  });
+  var openGfiDialog = React.useCallback(function () {
+    dispatch(uiActions.setActiveMapIdForDialog({
+      type: gfiType,
+      mapId: mapId,
+      setOpen: !isOpenInStore,
+      source: source,
+      origin: MapActionOrigin.map
+    }));
+  }, [mapId, dispatch, isOpenInStore, source, gfiType]);
+  return /*#__PURE__*/React.createElement(MapControlButton, {
+    title: "Get information for a specific location",
+    "data-testid": "open-getfeatureinfo",
+    onClick: openGfiDialog,
+    isActive: isOpenInStore
+  }, /*#__PURE__*/React.createElement(Info, null));
+};
+
 var titleStyle = function titleStyle(theme) {
   return {
     position: 'absolute',
     padding: '5px',
     zIndex: 50,
     color: theme.palette.common.black,
-    whiteSpace: 'nowrap'
+    whiteSpace: 'nowrap',
+    userSelect: 'none'
   };
 };
 
@@ -23966,8 +24637,10 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
       shouldShowLayerManager = _a.shouldShowLayerManager,
       _a$showClock = _a.showClock,
       showClock = _a$showClock === void 0 ? true : _a$showClock,
+      _a$displayGetFeatureI = _a.displayGetFeatureInfoButtonInMap,
+      displayGetFeatureInfoButtonInMap = _a$displayGetFeatureI === void 0 ? false : _a$displayGetFeatureI,
       children = _a.children,
-      props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "showClock", "children"]);
+      props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "showClock", "displayGetFeatureInfoButtonInMap", "children"]);
 
   var dispatch = useDispatch();
   var mapId = React__default.useRef(id || generateMapId()).current;
@@ -24033,6 +24706,8 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
     multiLegend: multiLegend
   }), displayDimensionSelectButtonInMap && /*#__PURE__*/React__default.createElement(MultiDimensionSelectMapButtonsConnect, {
     mapId: mapId
+  }), displayGetFeatureInfoButtonInMap && /*#__PURE__*/React__default.createElement(GetFeatureInfoButtonConnect, {
+    mapId: mapId
   })), !disableTimeSlider && /*#__PURE__*/React__default.createElement(Box, {
     sx: {
       position: 'absolute',
@@ -24055,6 +24730,9 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
     multiLegend: multiLegend
   }), showClock && /*#__PURE__*/React__default.createElement(TimeSliderClockConnect, {
     mapId: mapId
+  }), displayGetFeatureInfoButtonInMap && /*#__PURE__*/React__default.createElement(GetFeatureInfoConnect, {
+    showMapId: true,
+    mapId: mapId
   }), /*#__PURE__*/React__default.createElement(DockedLayerManagerConnect, {
     mapId: mapId,
     bounds: "parent"
@@ -24392,7 +25070,8 @@ var componentsLookUp = function componentsLookUp(_ref) {
         var mapPreset = initialProps.mapPreset;
         return /*#__PURE__*/React__default.createElement(ConfigurableMapConnect, Object.assign({}, mapPreset, {
           id: id,
-          "data-testid": "coreConfigurableMapConnect"
+          "data-testid": "coreConfigurableMapConnect",
+          displayGetFeatureInfoButtonInMap: true
         }));
       }
 
@@ -25142,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 };