@opengeoweb/core 4.6.0 → 4.7.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@mui/material'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('sortablejs'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('react-window'), require('@mui/material/Box'), require('@mui/material/Typography'), require('@mui/material/Grid'), require('@mui/system'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('react-draggable'), require('re-resizable'), require('@redux-eggs/redux-toolkit'), require('@redux-eggs/saga-extension')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@opengeoweb/shared', '@opengeoweb/theme', '@mui/material', '@opengeoweb/webmap', 'react-sortablejs', 'sortablejs', '@opengeoweb/form-fields', 'react-hook-form', 'react-window', '@mui/material/Box', '@mui/material/Typography', '@mui/material/Grid', '@mui/system', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'react-draggable', 're-resizable', '@redux-eggs/redux-toolkit', '@redux-eggs/saga-extension'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.shared, global.theme, global.material, global.webmap, global.reactSortablejs, global.Sortable, global.formFields, global.reactHookForm, global.reactWindow, global.Box, global.Typography, global.Grid, global.system, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.Draggable, global.reResizable, global.reduxToolkit, global.sagaExtension));
-})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, shared, theme, material, webmap, reactSortablejs, Sortable, formFields, reactHookForm, reactWindow, Box, Typography, Grid, system, throttleDebounce, cloneDeep, proj4, turf, Draggable, reResizable, reduxToolkit, sagaExtension) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@mui/material'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('sortablejs'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('react-window'), require('@mui/material/Box'), require('@mui/material/Typography'), require('@mui/material/Grid'), require('@mui/system'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('react-draggable'), require('re-resizable'), require('axios'), require('@opengeoweb/api'), require('@redux-eggs/redux-toolkit'), require('@redux-eggs/saga-extension')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@opengeoweb/shared', '@opengeoweb/theme', '@mui/material', '@opengeoweb/webmap', 'react-sortablejs', 'sortablejs', '@opengeoweb/form-fields', 'react-hook-form', 'react-window', '@mui/material/Box', '@mui/material/Typography', '@mui/material/Grid', '@mui/system', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'react-draggable', 're-resizable', 'axios', '@opengeoweb/api', '@redux-eggs/redux-toolkit', '@redux-eggs/saga-extension'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.shared, global.theme, global.material, global.webmap, global.reactSortablejs, global.Sortable, global.formFields, global.reactHookForm, global.reactWindow, global.Box, global.Typography, global.Grid, global.system, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.Draggable, global.reResizable, global.axios, global.api, global.reduxToolkit, global.sagaExtension));
+})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, shared, theme, material, webmap, reactSortablejs, Sortable, formFields, reactHookForm, reactWindow, Box, Typography, Grid, system, throttleDebounce, cloneDeep, proj4, turf, Draggable, reResizable, axios, api, reduxToolkit, sagaExtension) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -37,6 +37,7 @@
     var proj4__default = /*#__PURE__*/_interopDefaultLegacy(proj4);
     var turf__namespace = /*#__PURE__*/_interopNamespace(turf);
     var Draggable__default = /*#__PURE__*/_interopDefaultLegacy(Draggable);
+    var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -211,6 +212,13 @@
       LayerActionOrigin["unregisterMapSaga"] = "unregisterMapSaga";
     })(LayerActionOrigin || (LayerActionOrigin = {}));
 
+    var types$3 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        get LayerType () { return LayerType; },
+        get LayerStatus () { return LayerStatus; },
+        get LayerActionOrigin () { return LayerActionOrigin; }
+    });
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -581,6 +589,14 @@
        */
       [2147483647, 0]);
     };
+    var getNextTimeStepvalue = function getNextTimeStepvalue(value, max) {
+      var newValue = value + 1;
+      return newValue > max ? max : newValue;
+    };
+    var getPreviousTimeStepvalue = function getPreviousTimeStepvalue(value, min) {
+      var newValue = value - 1;
+      return newValue < min ? min : newValue;
+    };
     var setPreviousTimeStep = function setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate) {
       var prevTimeStep = moment__default["default"].utc(curTime).subtract(timeStep, 'm').toISOString();
 
@@ -607,43 +623,41 @@
 
       onsetNewDateDebounced(nextTimeStep, onSetNewDate);
     };
-    var getTimeStepFromDataInterval = function getTimeStepFromDataInterval(timeInterval) {
-      switch (timeInterval.isRegularInterval) {
-        case false:
-          switch (timeInterval.year) {
-            case 0:
-              // month
-              return 30 * 24 * 60;
-
-            default:
-              return timeInterval.year * 365 * 24 * 60;
-          }
-
-        case true:
-          if (timeInterval.day !== 0) {
-            return timeInterval.day * 24 * 60;
-          }
+    var getValueFromKeyboardEvent = function getValueFromKeyboardEvent(event, value, min, max, supportFourDirectionNavigation) {
+      if (supportFourDirectionNavigation === void 0) {
+        supportFourDirectionNavigation = false;
+      }
 
-          if (timeInterval.hour !== 0) {
-            return timeInterval.hour * 60;
-          }
+      if (!supportFourDirectionNavigation) {
+        if (event.ctrlKey || event.metaKey) {
+          switch (event.key) {
+            case 'ArrowDown':
+              return getPreviousTimeStepvalue(value, min);
 
-          if (timeInterval.minute !== 0) {
-            return timeInterval.minute;
-          }
+            case 'ArrowUp':
+              return getNextTimeStepvalue(value, max);
 
-          if (timeInterval.second !== 0) {
-            return timeInterval.second / 60.0;
+            default:
+              return null;
           }
+        }
+      } else {
+        // currently supportFourDirectionNavigation (left/right/up/down) is only used in horizontal slider TimeSliderScaleSlider
+        switch (event.key) {
+          case 'ArrowDown':
+          case 'ArrowLeft':
+            return getPreviousTimeStepvalue(value, min);
 
-          return 5;
+          case 'ArrowUp':
+          case 'ArrowRight':
+            return getNextTimeStepvalue(value, max);
 
-        default:
-          return 5;
+          default:
+            return null;
+        }
       }
-    };
-    var getActiveLayerTimeStep = function getActiveLayerTimeStep(timeDimension) {
-      return (timeDimension === null || timeDimension === void 0 ? void 0 : timeDimension.timeInterval) ? getTimeStepFromDataInterval(timeDimension.timeInterval) : null;
+
+      return null;
     };
     /**
      * This function calculates a suitable secondsPerpx value,
@@ -691,11 +705,39 @@
 
       return __assign(__assign({}, acc), (_b = {}, _b[v] = Number(k), _b));
     }, {});
+    /**
+     * This function creates and returns an array where there is secondsPerPx
+     * number of the data set added for a data scale (dataScaleToSecondsPerPx)
+     * to secondsPerPxToScale.
+     * @param dataScaleToSecondsPerPx
+     * @returns an array containing secondsPerPx numbers.
+     * The secondsPerPx number for a data scale is included
+     * contrary to secondsPerPxToScale.
+     */
+
+    var secondsPerPxValues = function secondsPerPxValues(dataScaleToSecondsPerPx) {
+      var sortedSecondsPerPx = __spreadArray([], __read(secondsPerPxToScale)).map(function (value) {
+        return Number(value[0]);
+      });
+
+      var full = __spreadArray(__spreadArray([], __read(sortedSecondsPerPx)), [dataScaleToSecondsPerPx]);
+
+      return full;
+    };
     var defaultDataScaleToSecondsPerPx = 43200;
     var getNewCenterOfFixedPointZoom = function getNewCenterOfFixedPointZoom(fixedTimePoint, oldSecondsPerPx, newSecondsPerPx, oldCenterTime) {
       var centerToFixedPointPx = (fixedTimePoint - oldCenterTime) / oldSecondsPerPx;
       return fixedTimePoint - centerToFixedPointPx * newSecondsPerPx;
     };
+    /**
+     * Move the time slider such that a given time point (timePoint)
+     * is at a given pixel width (timePointPx).
+     * @returns a new center time for the resulting position
+     */
+
+    var moveRelativeToTimePoint = function moveRelativeToTimePoint(timePoint, timePointPx, secondsPerPx, canvasWidth) {
+      return timePoint - secondsPerPx * (timePointPx - canvasWidth / 2);
+    };
     /** This reusable custom hook tells whether given pointer event targets current canvas node.
      * Example:
      *
@@ -732,6 +774,10 @@
       cornerRadius: 5,
       lineWidth: 1
     };
+    var AUTO_MOVE_AREA_PADDING = 1;
+    var getAutoMoveAreaWidth = function getAutoMoveAreaWidth(scale) {
+      return (scale === Scale.Year ? needleGeom.largeWidth : needleGeom.smallWidth) / 2 + AUTO_MOVE_AREA_PADDING;
+    };
     /** Reusable business logic for how to handle events that set time to now (closest).
      * Used in NowButton and TimeSliderLegend.
      */
@@ -751,6 +797,92 @@
         }
       }
     };
+    var TimeInMinutes;
+
+    (function (TimeInMinutes) {
+      TimeInMinutes[TimeInMinutes["YEAR"] = 525600] = "YEAR";
+      TimeInMinutes[TimeInMinutes["MONTH"] = 43800] = "MONTH";
+      TimeInMinutes[TimeInMinutes["DAY"] = 1440] = "DAY";
+      TimeInMinutes[TimeInMinutes["HOUR"] = 60] = "HOUR";
+    })(TimeInMinutes || (TimeInMinutes = {}));
+
+    var minutesToDescribedDuration = function minutesToDescribedDuration(minutes) {
+      var dateStr = '';
+      var time = minutes; // subtracting whole years/months/days from time duration and adding the amount to the string to be printed.
+
+      if (time >= TimeInMinutes.YEAR) {
+        var yearsInMintues = Math.floor(time / TimeInMinutes.YEAR);
+        dateStr += yearsInMintues + "y";
+        time -= yearsInMintues * TimeInMinutes.YEAR;
+      }
+
+      if (time >= TimeInMinutes.MONTH) {
+        var monthsInMinutes = Math.floor(time / TimeInMinutes.MONTH);
+        dateStr += monthsInMinutes + "m";
+        time -= monthsInMinutes * TimeInMinutes.MONTH;
+      }
+
+      if (time >= TimeInMinutes.DAY) {
+        var daysInMinutes = Math.floor(time / TimeInMinutes.DAY);
+        dateStr += daysInMinutes + "d";
+        time -= daysInMinutes * TimeInMinutes.DAY;
+      } // we will always print hour/minutes if there are any of them in the XX:XX format
+
+
+      if (time > 0) {
+        if (dateStr !== '') dateStr += ' ';
+        dateStr += Math.floor(time / TimeInMinutes.HOUR).toLocaleString(undefined, {
+          minimumIntegerDigits: 2,
+          useGrouping: false
+        }) + "h" + (time % TimeInMinutes.HOUR).toLocaleString(undefined, {
+          minimumIntegerDigits: 2,
+          useGrouping: false
+        }) + "min";
+      }
+
+      return dateStr;
+    };
+
+    var TimeSliderUtils = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        millisecondsInSecond: millisecondsInSecond,
+        defaultAnimationDelayAtStart: defaultAnimationDelayAtStart,
+        defaultDelay: defaultDelay,
+        defaultTimeStep: defaultTimeStep,
+        speedFactors: speedFactors,
+        getSpeedDelay: getSpeedDelay,
+        getSpeedFactor: getSpeedFactor,
+        getSelectedTime: getSelectedTime,
+        getTimeBounds: getTimeBounds,
+        getMomentTimeBounds: getMomentTimeBounds,
+        scalingCoefficient: scalingCoefficient,
+        timestampToPixelEdges: timestampToPixelEdges,
+        timestampToPixel: timestampToPixel,
+        pixelToTimestamp: pixelToTimestamp,
+        onsetNewDateDebounced: onsetNewDateDebounced,
+        roundWithTimeStep: roundWithTimeStep,
+        setNewRoundedTime: setNewRoundedTime,
+        getDataLimitsFromLayers: getDataLimitsFromLayers,
+        getNextTimeStepvalue: getNextTimeStepvalue,
+        getPreviousTimeStepvalue: getPreviousTimeStepvalue,
+        setPreviousTimeStep: setPreviousTimeStep,
+        setNextTimeStep: setNextTimeStep,
+        getValueFromKeyboardEvent: getValueFromKeyboardEvent,
+        getScaleToSecondsPerPxForDataScale: getScaleToSecondsPerPxForDataScale,
+        secondsPerPxToScale: secondsPerPxToScale,
+        scaleToSecondsPerPx: scaleToSecondsPerPx,
+        secondsPerPxValues: secondsPerPxValues,
+        defaultDataScaleToSecondsPerPx: defaultDataScaleToSecondsPerPx,
+        getNewCenterOfFixedPointZoom: getNewCenterOfFixedPointZoom,
+        moveRelativeToTimePoint: moveRelativeToTimePoint,
+        useCanvasTarget: useCanvasTarget,
+        needleGeom: needleGeom,
+        AUTO_MOVE_AREA_PADDING: AUTO_MOVE_AREA_PADDING,
+        getAutoMoveAreaWidth: getAutoMoveAreaWidth,
+        handleSetNowEvent: handleSetNowEvent,
+        get TimeInMinutes () { return TimeInMinutes; },
+        minutesToDescribedDuration: minutesToDescribedDuration
+    });
 
     var createMap = function createMap(_a) {
       var id = _a.id,
@@ -801,18 +933,12 @@
           isTimeSliderHoverOn = _w === void 0 ? false : _w,
           _x = _a.isTimeSliderVisible,
           isTimeSliderVisible = _x === void 0 ? true : _x,
-          _y = _a.activeMapPresetId,
-          activeMapPresetId = _y === void 0 ? null : _y,
-          _z = _a.displayMapPin,
-          displayMapPin = _z === void 0 ? false : _z,
-          _0 = _a.disableMapPin,
-          disableMapPin = _0 === void 0 ? false : _0,
-          _1 = _a.shouldShowZoomControls,
-          shouldShowZoomControls = _1 === void 0 ? true : _1,
-          _2 = _a.dockedLayerManager,
-          dockedLayerManager = _2 === void 0 ? {
-        isOpen: false
-      } : _2;
+          _y = _a.displayMapPin,
+          displayMapPin = _y === void 0 ? false : _y,
+          _z = _a.disableMapPin,
+          disableMapPin = _z === void 0 ? false : _z,
+          _0 = _a.shouldShowZoomControls,
+          shouldShowZoomControls = _0 === void 0 ? true : _0;
       return {
         id: id,
         isAnimating: isAnimating,
@@ -836,11 +962,9 @@
         isTimestepAuto: isTimestepAuto,
         isTimeSliderHoverOn: isTimeSliderHoverOn,
         isTimeSliderVisible: isTimeSliderVisible,
-        activeMapPresetId: activeMapPresetId,
         displayMapPin: displayMapPin,
         disableMapPin: disableMapPin,
-        shouldShowZoomControls: shouldShowZoomControls,
-        dockedLayerManager: dockedLayerManager
+        shouldShowZoomControls: shouldShowZoomControls
       };
     };
     var checkValidLayersPayload = function checkValidLayersPayload(layers, mapId) {
@@ -980,6 +1104,44 @@
       newArray.splice(indexNew, 0, newArray.splice(oldIndex, 1)[0]);
       return newArray;
     }
+    var getTimeStepFromDataInterval = function getTimeStepFromDataInterval(timeInterval) {
+      switch (timeInterval.isRegularInterval) {
+        case false:
+          switch (timeInterval.year) {
+            case 0:
+              // month
+              return 30 * 24 * 60;
+
+            default:
+              return timeInterval.year * 365 * 24 * 60;
+          }
+
+        case true:
+          if (timeInterval.day !== 0) {
+            return timeInterval.day * 24 * 60;
+          }
+
+          if (timeInterval.hour !== 0) {
+            return timeInterval.hour * 60;
+          }
+
+          if (timeInterval.minute !== 0) {
+            return timeInterval.minute;
+          }
+
+          if (timeInterval.second !== 0) {
+            return timeInterval.second / 60.0;
+          }
+
+          return 5;
+
+        default:
+          return 5;
+      }
+    };
+    var getActiveLayerTimeStep = function getActiveLayerTimeStep(timeDimension) {
+      return (timeDimension === null || timeDimension === void 0 ? void 0 : timeDimension.timeInterval) ? getTimeStepFromDataInterval(timeDimension.timeInterval) : null;
+    };
 
     var utils = /*#__PURE__*/Object.freeze({
         __proto__: null,
@@ -989,7 +1151,9 @@
         produceDraftStateSetWebMapDimension: produceDraftStateSetWebMapDimension,
         findMapIdFromLayerId: findMapIdFromLayerId,
         produceDraftStateSetMapDimensionFromLayerChangeDimension: produceDraftStateSetMapDimensionFromLayerChangeDimension,
-        moveArrayElements: moveArrayElements
+        moveArrayElements: moveArrayElements,
+        getTimeStepFromDataInterval: getTimeStepFromDataInterval,
+        getActiveLayerTimeStep: getActiveLayerTimeStep
     });
 
     /* *
@@ -1551,6 +1715,17 @@
           var dimensionsAction = layerActions.layerSetDimensions(layerDimensions);
           var newState = layerDimensions === null ? intermediateState : reducer$6(intermediateState, dimensionsAction);
           return newState;
+        },
+        setSelectedFeature: function setSelectedFeature(draft, action) {
+          var _a = action.payload,
+              layerId = _a.layerId,
+              selectedFeatureIndex = _a.selectedFeatureIndex;
+
+          if (!draft.byId[layerId]) {
+            return;
+          }
+
+          draft.byId[layerId].selectedFeatureIndex = selectedFeatureIndex;
         }
       },
       extraReducers: function extraReducers(builder) {
@@ -2154,17 +2329,6 @@
 
           draft.byId[mapId].animationEndTime = animationEndTime;
         },
-        setSelectedFeature: function setSelectedFeature(draft, action) {
-          var _a = action.payload,
-              mapId = _a.mapId,
-              selectedFeatureIndex = _a.selectedFeatureIndex;
-
-          if (!draft.byId[mapId]) {
-            return;
-          }
-
-          draft.byId[mapId].selectedFeatureIndex = selectedFeatureIndex;
-        },
         setAnimationDelay: function setAnimationDelay(draft, action) {
           var _a = action.payload,
               mapId = _a.mapId,
@@ -2333,41 +2497,6 @@
           }
 
           draft.byId[mapId].displayMapPin = displayMapPin;
-        },
-        setActiveMapPresetId: function setActiveMapPresetId(draft, action) {
-          var _a = action.payload,
-              mapId = _a.mapId,
-              presetId = _a.presetId;
-
-          if (!draft.byId[mapId]) {
-            return;
-          }
-
-          draft.byId[mapId].activeMapPresetId = presetId;
-        },
-        setHasMapPresetChanges: function setHasMapPresetChanges(draft, action) {
-          var _a = action.payload,
-              mapId = _a.mapId,
-              hasChanges = _a.hasChanges;
-
-          if (!draft.byId[mapId]) {
-            return;
-          }
-
-          draft.byId[mapId].hasMapPresetChanges = hasChanges;
-        },
-        toggleDockedLayerManager: function toggleDockedLayerManager(draft, action) {
-          var _a = action.payload,
-              mapId = _a.mapId,
-              openDockedLayerManager = _a.openDockedLayerManager;
-
-          if (!draft.byId[mapId]) {
-            return;
-          }
-
-          draft.byId[mapId].dockedLayerManager = {
-            isOpen: openDockedLayerManager
-          };
         }
       },
       extraReducers: function extraReducers(builder) {
@@ -2608,14 +2737,13 @@
           draft.byId[mapId].baseLayers = [];
           draft.byId[mapId].mapLayers = [];
           draft.byId[mapId].overLayers = [];
-          draft.byId[mapId].hasMapPresetChanges = false;
           draft.byId[mapId].isAutoUpdating = false;
           draft.byId[mapId].isAnimating = false;
           draft.byId[mapId].isTimeSliderVisible = true;
           draft.byId[mapId].isTimestepAuto = true;
           draft.byId[mapId].displayMapPin = false;
           draft.byId[mapId].shouldShowZoomControls = true;
-          draft.byId[mapId].timeStep = defaultTimeStep;
+          draft.byId[mapId].timeStep = undefined;
           draft.byId[mapId].animationDelay = defaultAnimationDelayAtStart;
         }).addCase(uiActions.registerDialog, function (draft, action) {
           var _a = action.payload,
@@ -2732,7 +2860,7 @@
      * @returns {array} returnType: array - an array of all non-baselayers containing layer information (service, name, style, enabled etc.)
      */
 
-    toolkit.createSelector(getAllLayers, function (layers) {
+    var getLayers = toolkit.createSelector(getAllLayers, function (layers) {
       return layers.filter(function (layer) {
         return layer.layerType !== LayerType.baseLayer && layer.layerType !== LayerType.overLayer;
       });
@@ -2745,7 +2873,7 @@
      * @returns {array} returnType: array - an array of all baselayers containing layer information (service, name, style, enabled etc.)
      */
 
-    toolkit.createSelector(getAllLayers, function (layers) {
+    var getBaseLayers = toolkit.createSelector(getAllLayers, function (layers) {
       return layers.filter(function (layer) {
         return layer.layerType === LayerType.baseLayer;
       });
@@ -2758,7 +2886,7 @@
      * @returns {array} returnType: array - an array of all overLayers containing layer information (service, name, style, enabled etc.)
      */
 
-    toolkit.createSelector(getAllLayers, function (layers) {
+    var getOverLayers = toolkit.createSelector(getAllLayers, function (layers) {
       return layers.filter(function (layer) {
         return layer.layerType === LayerType.overLayer;
       });
@@ -2887,7 +3015,7 @@
      * @returns {string} returnType: LayerStatus
      */
 
-    toolkit.createSelector(getLayerById, function (layer) {
+    var getLayerStatus = toolkit.createSelector(getLayerById, function (layer) {
       return layer && layer.status ? layer.status : LayerStatus["default"];
     });
     /**
@@ -2915,6 +3043,68 @@
 
       return [];
     }, selectorMemoizationOptions);
+    /**
+     * Returns the selected geojson feature for the given layer
+     *
+     * Example const selectedFeature = getSelectedFeature(store, 'layerId1')
+     * @param {object} store store: object - store object
+     * @param {string} mapId layerId: string - Id of the layer
+     * @returns {number} selectedFeatureIndex: the index of the selected geojson feature
+     */
+
+    var getSelectedFeatureIndex = toolkit.createSelector(getLayerById, function (layer) {
+      return layer === null || layer === void 0 ? void 0 : layer.selectedFeatureIndex;
+    });
+    /**
+     * Gets layerIds that contain passed dimension
+     *
+     * Example: dimension = getDimensionLayerIds(store, 'elevation')
+     * @param {object} store store: object - object from which the layers state will be extracted
+     * @param {string} dimensionName dimensionName: string - name of dimension you want to retrieve the dimension data for
+     * @returns {string[]} returnType: string[] - layerIds
+     */
+
+    var getDimensionLayerIds = toolkit.createSelector(getLayersIds, getLayersById, function (_store, dimensionName) {
+      return dimensionName;
+    }, function (layerIds, layers, dimensionName) {
+      return layerIds.reduce(function (list, layerId) {
+        var layer = layers[layerId];
+        var dimensions = (layer === null || layer === void 0 ? void 0 : layer.dimensions) ? layer.dimensions : [];
+
+        if (dimensions.find(function (dimension) {
+          return dimension.name === dimensionName;
+        })) {
+          return list.concat(layerId);
+        }
+
+        return list;
+      }, []);
+    }, selectorMemoizationOptions);
+
+    var selectors$2 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        getLayerById: getLayerById,
+        getLayersById: getLayersById,
+        getLayersIds: getLayersIds,
+        getAllLayers: getAllLayers,
+        getLayersByMapId: getLayersByMapId,
+        getLayers: getLayers,
+        getBaseLayers: getBaseLayers,
+        getOverLayers: getOverLayers,
+        getLayerDimensions: getLayerDimensions,
+        getLayerNonTimeDimensions: getLayerNonTimeDimensions,
+        getLayerTimeDimension: getLayerTimeDimension,
+        getLayerDimension: getLayerDimension,
+        getLayerOpacity: getLayerOpacity,
+        getLayerEnabled: getLayerEnabled,
+        getLayerName: getLayerName,
+        getLayerService: getLayerService,
+        getLayerStyle: getLayerStyle,
+        getLayerStatus: getLayerStatus,
+        getAvailableBaseLayersForMap: getAvailableBaseLayersForMap,
+        getSelectedFeatureIndex: getSelectedFeatureIndex,
+        getDimensionLayerIds: getDimensionLayerIds
+    });
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3866,7 +4056,12 @@
      */
 
     var getMapTimeStep = toolkit.createSelector(getMapById, function (store) {
-      return store ? store.timeStep : defaultTimeStep;
+      var _a;
+
+      return (_a = store === null || store === void 0 ? void 0 : store.timeStep) !== null && _a !== void 0 ? _a : defaultTimeStep;
+    });
+    var getMapTimeStepWithoutDefault = toolkit.createSelector(getMapById, function (store) {
+      return store === null || store === void 0 ? void 0 : store.timeStep;
     });
     /**
      * Returns the speed of animation
@@ -4113,7 +4308,7 @@
       return store ? store.disableMapPin : false;
     });
     /**
-     * Returns the diplay map pin boolean for the current map
+     * Returns the display map pin boolean for the current map
      *
      * Example getDisplayMapPin(store);
      * @param {object} store store: object - store object
@@ -4124,30 +4319,6 @@
     var getDisplayMapPin = toolkit.createSelector(getMapById, function (store) {
       return store ? store.displayMapPin : false;
     });
-    /**
-     * Returns the selected geojson feature for the given map
-     *
-     * Example const selectedFeature = getSelectedFeature(store, 'mapId1')
-     * @param {object} store store: object - store object
-     * @param {string} mapId mapId: string - Id of the map
-     * @returns {number} selectedFeatureIndex: the index of the selected geojson feature
-     */
-
-    var getSelectedFeatureIndex = toolkit.createSelector(getMapById, function (store) {
-      return store === null || store === void 0 ? void 0 : store.selectedFeatureIndex;
-    });
-    /**
-     * Returns the active map preset id
-     *
-     * Example getActiveMapPresetId(store, mapId);
-     * @param {object} store store: object - store object
-     * @param {string} mapId mapId: string - Id of the map
-     * @returns {boolean} returnType: boolean or undefined
-     */
-
-    var getActiveMapPresetId = toolkit.createSelector(getMapById, function (store) {
-      return store ? store.activeMapPresetId : undefined;
-    });
     /**
      * Returns the legend id
      *
@@ -4213,31 +4384,40 @@
       });
     }, selectorMemoizationOptions);
     /**
-     * Returns the has changes state of the map preset
+     * Gets all enabled layerIds for map
      *
-     * Example getHasMapPresetChanges(store, mapId);
-     * @param {object} store store: object - store object
+     * Example: getMapLayerIdsEnabled = getLayerIdsEnabled(store, 'mapId_1')
+     * @param {object} store store: object - store
      * @param {string} mapId mapId: string - Id of the map
-     * @returns {boolean} returnType: boolean
+     * @returns {string[]} returnType: string[] -  array of enabled layerIds
      */
 
-    var getHasMapPresetChanges = toolkit.createSelector(getMapById, function (store) {
-      return store && store.hasMapPresetChanges ? store.hasMapPresetChanges : false;
-    });
+    var getMapLayerIdsEnabled = toolkit.createSelector(getLayerIds, getLayersById, function (mapLayerIds, layers) {
+      return mapLayerIds.reduce(function (list, layerId) {
+        if (layers[layerId] && layers[layerId].enabled) {
+          return list.concat(layerId);
+        }
+
+        return list;
+      }, []);
+    }, selectorMemoizationOptions);
     /**
-     * Returns whether the docked layer manager is open
+     * Returns if a map dimension is used for any enabled layers on that map
      *
-     * Example getIsDockedLayerManagerOpen(store, mapId);
+     * Example getIsEnabledLayersForMapDimension(store, mapId);
      * @param {object} store store: object - store object
      * @param {string} mapId mapId: string - Id of the map
+     * @param {string} dimensionName dimensionName: string - name of the dimension
      * @returns {Boolean} returnType: boolean
      */
 
-    var getIsDockedLayerManagerOpen = toolkit.createSelector(getMapById, function (store) {
-      var _a;
-
-      return (_a = store === null || store === void 0 ? void 0 : store.dockedLayerManager) === null || _a === void 0 ? void 0 : _a.isOpen;
-    });
+    var getIsEnabledLayersForMapDimension = toolkit.createSelector(getMapLayerIdsEnabled, function (store, _mapId, dimensionName) {
+      return getDimensionLayerIds(store, dimensionName);
+    }, function (enabledMapLayerIds, dimensionLayerIds) {
+      return dimensionLayerIds.some(function (layerId) {
+        return enabledMapLayerIds.includes(layerId);
+      });
+    }, selectorMemoizationOptions);
 
     var selectors = /*#__PURE__*/Object.freeze({
         __proto__: null,
@@ -4264,6 +4444,7 @@
         getActiveLayerId: getActiveLayerId,
         getMapTimeSliderScale: getMapTimeSliderScale,
         getMapTimeStep: getMapTimeStep,
+        getMapTimeStepWithoutDefault: getMapTimeStepWithoutDefault,
         getMapAnimationDelay: getMapAnimationDelay,
         getMapTimeSliderCenterTime: getMapTimeSliderCenterTime,
         getTimeSliderUnfilteredSelectedTime: getTimeSliderUnfilteredSelectedTime,
@@ -4282,12 +4463,10 @@
         getPinLocation: getPinLocation,
         getDisableMapPin: getDisableMapPin,
         getDisplayMapPin: getDisplayMapPin,
-        getSelectedFeatureIndex: getSelectedFeatureIndex,
-        getActiveMapPresetId: getActiveMapPresetId,
         getLegendId: getLegendId,
         getMapPreset: getMapPreset,
-        getHasMapPresetChanges: getHasMapPresetChanges,
-        getIsDockedLayerManagerOpen: getIsDockedLayerManagerOpen
+        getMapLayerIdsEnabled: getMapLayerIdsEnabled,
+        getIsEnabledLayersForMapDimension: getIsEnabledLayersForMapDimension
     });
 
     var DialogTypes;
@@ -4302,6 +4481,7 @@
       DialogTypes["DimensionSelectElevation"] = "dimensionSelect-elevation";
       DialogTypes["LayerManager"] = "layerManager";
       DialogTypes["LayerSelect"] = "layerSelect";
+      DialogTypes["DockedLayerManager"] = "dockedLayerManager";
     })(DialogTypes || (DialogTypes = {}));
 
     var types = /*#__PURE__*/Object.freeze({
@@ -4332,6 +4512,47 @@
       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 filterType + "-" + 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;
+        }
+      });
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -4348,17 +4569,13 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
+    var layerSelectFilterAdapter = toolkit.createEntityAdapter();
+    var layerSelectActiveServicesAdapter = toolkit.createEntityAdapter();
     var initialState$1 = {
       filters: {
         searchFilter: '',
-        activeServices: {
-          byId: {},
-          allIds: []
-        },
-        filters: {
-          byId: {},
-          allIds: []
-        }
+        activeServices: layerSelectActiveServicesAdapter.getInitialState(),
+        filters: layerSelectFilterAdapter.getInitialState()
       },
       allServicesEnabled: true,
       activeLayerInfo: {
@@ -4382,66 +4599,68 @@
           draft.allServicesEnabled = allServicesEnabled;
         },
         addFiltersAndActiveServices: function addFiltersAndActiveServices(draft, action) {
-          var _a = action.payload,
-              serviceId = _a.serviceId,
-              serviceName = _a.serviceName,
-              serviceUrl = _a.serviceUrl,
-              _abstract = _a["abstract"],
-              keywords = _a.keywords,
-              scope = _a.scope,
-              groups = _a.groups;
-
-          if (!draft.filters.activeServices.byId[serviceId]) {
-            draft.filters.activeServices.byId[serviceId] = {};
-
-            var addFilters = function addFilters(filterNames, filterType) {
-              filterNames.forEach(function (filterName) {
-                var id = filterType + "-" + 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;
-                }
-              });
+          var _a, _b;
+
+          var _c = action.payload,
+              serviceId = _c.serviceId,
+              serviceName = _c.serviceName,
+              serviceUrl = _c.serviceUrl,
+              _abstract = _c["abstract"],
+              keywords = _c.keywords,
+              scope = _c.scope,
+              groups = _c.groups,
+              isLoading = _c.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
             };
+          }
 
-            addFilters(groups, FilterType.Group);
-            addFilters(keywords, FilterType.Keyword);
+          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);
+            }
+
+            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 FilterType.Group + "-" + group;
-          }).concat(keywords.map(function (keyword) {
-            return FilterType.Keyword + "-" + 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;
@@ -4449,17 +4668,14 @@
             }
 
             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 e_1, _a;
@@ -4467,12 +4683,12 @@
           var _b = action.payload,
               serviceId = _b.serviceId,
               keywords = _b.filters;
-          draft.filters.activeServices.byId[serviceId].enabled = true;
+          draft.filters.activeServices.entities[serviceId].enabled = true;
 
           try {
             for (var keywords_1 = __values(keywords), keywords_1_1 = keywords_1.next(); !keywords_1_1.done; keywords_1_1 = keywords_1.next()) {
               var keyword = keywords_1_1.value;
-              draft.filters.filters.byId[keyword].amountVisible += 1;
+              draft.filters.filters.entities[keyword].amountVisible += 1;
             }
           } catch (e_1_1) {
             e_1 = {
@@ -4492,12 +4708,12 @@
           var _b = action.payload,
               serviceId = _b.serviceId,
               keywords = _b.filters;
-          draft.filters.activeServices.byId[serviceId].enabled = false;
+          draft.filters.activeServices.entities[serviceId].enabled = false;
 
           try {
             for (var keywords_2 = __values(keywords), keywords_2_1 = keywords_2.next(); !keywords_2_1.done; keywords_2_1 = keywords_2.next()) {
               var keyword = keywords_2_1.value;
-              draft.filters.filters.byId[keyword].amountVisible -= 1;
+              draft.filters.filters.entities[keyword].amountVisible -= 1;
             }
           } catch (e_2_1) {
             e_2 = {
@@ -4514,15 +4730,15 @@
         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;
@@ -4618,21 +4834,30 @@
 
 
     var getSearchFilter = toolkit.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 = toolkit.createSelector(layerSelectStore, function (store) {
-      var _a;
+    var getActiveServices = function getActiveServices(store) {
+      return getActiveServicesDictionary(store);
+    };
+    var getActiveServicesDictionary = layerSelectActiveServicesAdapter.getSelectors(function (store) {
+      var _a, _b;
 
-      return store ? (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.byId : {};
-    }, 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.activeServices) || {
+        entities: {},
+        ids: []
+      };
+    }).selectEntities;
     /**
      * Returns active services by id
      *
@@ -4643,9 +4868,9 @@
      */
 
     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;
     };
     /**
@@ -4659,10 +4884,10 @@
     var getEnabledServiceIds = toolkit.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);
@@ -4675,17 +4900,17 @@
      */
 
     var getCheckedFilterIds = toolkit.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);
     /**
@@ -4695,12 +4920,19 @@
      * @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 = toolkit.createSelector(layerSelectStore, function (store) {
+    var getAllFilterIds = function getAllFilterIds(store) {
+      return getAllFilterIdsEntity(store);
+    };
+    var getAllFilterIdsEntity = 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: []
+      };
+    }).selectIds;
     /**
      * Returns all filters
      *
@@ -4709,15 +4941,14 @@
      * @returns {array} returnType: array of all filters
      */
 
-    var getAllFilters = toolkit.createSelector(layerSelectStore, function (store) {
-      var filters = store === null || store === void 0 ? void 0 : store.filters.filters.byId;
-
-      if (filters) {
-        return Object.values(filters);
-      }
+    var getAllFilters = layerSelectFilterAdapter.getSelectors(function (store) {
+      var _a, _b;
 
-      return [];
-    });
+      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: []
+      };
+    }).selectAll;
     /**
      * Returns if all keywords are checked
      *
@@ -4729,12 +4960,29 @@
     var isAllFiltersChecked = toolkit.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;
       });
     });
+    /**
+     * Gets a KeywordObject by its id
+     *
+     * 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)
+     */
+
+    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: []
+      };
+    }).selectById;
     /**
      * Returns the active layer info
      *
@@ -7917,12 +8165,12 @@
       });
     }
     function setLayerDimensionsSaga(_a) {
-      var layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance, error_1;
+      var layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance, isActiveLayer, timeStep, newTimeStep, error_1;
       var payload = _a.payload;
       return __generator(this, function (_b) {
         switch (_b.label) {
           case 0:
-            _b.trys.push([0, 12,, 13]);
+            _b.trys.push([0, 15,, 16]);
 
             layerDimensions = payload.layerDimensions;
             if (!layerDimensions) return [2
@@ -7967,13 +8215,40 @@
           case 5:
             isAnimating$1 = _b.sent();
             webmapInstance = getWMJSMapById(mapId);
-            if (!(layerId === activeLayerId && // only update the active layer
+            isActiveLayer = layerId === activeLayerId;
+            return [4
+            /*yield*/
+            , effects.select(getMapTimeStepWithoutDefault, mapId)];
+
+          case 6:
+            timeStep = _b.sent();
+            if (!(isActiveLayer && timeStep === undefined && newTimeDimension)) return [3
+            /*break*/
+            , 8];
+            newTimeStep = getActiveLayerTimeStep(newTimeDimension);
+            if (!newTimeStep) return [3
+            /*break*/
+            , 8];
+            return [4
+            /*yield*/
+            , effects.put(mapActions$1.setTimeStep({
+              mapId: mapId,
+              timeStep: newTimeStep
+            }))];
+
+          case 7:
+            _b.sent();
+
+            _b.label = 8;
+
+          case 8:
+            if (!(isActiveLayer && // only update the active layer
             shouldAutoUpdate && newTimeDimension && newTimeDimension.maxValue && prevTimeDimension && prevTimeDimension.currentValue && prevTimeDimension.currentValue !== newTimeDimension.maxValue)) return [3
             /*break*/
-            , 9];
+            , 12];
             if (!!isAnimating$1) return [3
             /*break*/
-            , 7];
+            , 10];
             return [4
             /*yield*/
             , effects.put(layerActions.layerChangeDimension({
@@ -7985,50 +8260,50 @@
               }
             }))];
 
-          case 6:
+          case 9:
             _b.sent();
 
-            _b.label = 7;
+            _b.label = 10;
 
-          case 7:
+          case 10:
             return [4
             /*yield*/
             , effects.call(updateAnimation, mapId, newTimeDimension.maxValue)];
 
-          case 8:
+          case 11:
             _b.sent();
 
             return [3
             /*break*/
-            , 11];
+            , 14];
 
-          case 9:
+          case 12:
             if (!(isAnimating$1 && !webmapInstance.isAnimating && newTimeDimension && newTimeDimension.maxValue)) return [3
             /*break*/
-            , 11];
+            , 14];
             return [4
             /*yield*/
             , effects.call(updateAnimation, mapId, newTimeDimension.maxValue)];
 
-          case 10:
+          case 13:
             _b.sent();
 
-            _b.label = 11;
+            _b.label = 14;
 
-          case 11:
+          case 14:
             return [3
             /*break*/
-            , 13];
+            , 16];
 
-          case 12:
+          case 15:
             error_1 = _b.sent(); // eslint-disable-next-line no-console
 
             console.warn(error_1);
             return [3
             /*break*/
-            , 13];
+            , 16];
 
-          case 13:
+          case 16:
             return [2
             /*return*/
             ];
@@ -8447,54 +8722,6 @@
         }
       });
     }
-    var mapPresetChangeActions = [layerActions.setBaseLayers.type, layerActions.layerDelete.type, layerActions.addLayer.type, layerActions.layerChangeEnabled.type, layerActions.layerChangeName.type, layerActions.layerChangeStyle.type, layerActions.layerChangeOpacity.type, layerActions.layerChangeDimension.type, mapActions$1.layerMoveLayer.type, mapActions$1.setActiveLayerId.type, mapActions$1.toggleAutoUpdate, mapActions$1.mapStartAnimation, mapActions$1.mapStopAnimation, mapActions$1.toggleTimeSliderIsVisible, mapActions$1.setTimeStep, mapActions$1.setAnimationDelay, mapActions$1.toggleTimestepAuto, uiActions.setActiveMapIdForDialog, uiActions.setToggleOpenDialog, genericActions.setBbox.type];
-    var supportedChangeOrigins = [LayerActionOrigin.layerManager, LayerActionOrigin.wmsLoader, MapActionOrigin.map];
-    function checkMapPresetForChangesSaga(action) {
-      var _a, mapId, origin, isChangeOriginSupported, hasMapPresetChanges;
-
-      return __generator(this, function (_b) {
-        switch (_b.label) {
-          case 0:
-            _a = action.payload, mapId = _a.mapId, origin = _a.origin;
-
-            if (!origin) {
-              return [2
-              /*return*/
-              ];
-            }
-
-            isChangeOriginSupported = supportedChangeOrigins.indexOf(origin) >= 0;
-            if (!isChangeOriginSupported) return [3
-            /*break*/
-            , 3];
-            return [4
-            /*yield*/
-            , effects.select(getHasMapPresetChanges, mapId)];
-
-          case 1:
-            hasMapPresetChanges = _b.sent();
-            if (!!hasMapPresetChanges) return [3
-            /*break*/
-            , 3];
-            return [4
-            /*yield*/
-            , effects.put(mapActions$1.setHasMapPresetChanges({
-              mapId: mapId,
-              hasChanges: true
-            }))];
-
-          case 2:
-            _b.sent();
-
-            _b.label = 3;
-
-          case 3:
-            return [2
-            /*return*/
-            ];
-        }
-      });
-    }
     function unregisterMapSaga(_a) {
       var mapId, layerList;
       var payload = _a.payload;
@@ -8535,7 +8762,7 @@
             // resets WMJSMap state
             return [4
             /*yield*/
-            , effects.all([effects.takeLatest(mapActions$1.mapStopAnimation.type, stopAnimationSaga), effects.takeLatest(mapActions$1.setActiveMapPresetId.type, stopAnimationSaga)])];
+            , effects.takeLatest(mapActions$1.mapStopAnimation.type, stopAnimationSaga)];
 
           case 1:
             // resets WMJSMap state
@@ -8576,20 +8803,11 @@
           case 6:
             _a.sent();
 
-            return [4
-            /*yield*/
-            , effects.all(mapPresetChangeActions.map(function (action) {
-              return effects.takeEvery(action, checkMapPresetForChangesSaga);
-            }))];
-
-          case 7:
-            _a.sent();
-
             return [4
             /*yield*/
             , effects.takeEvery(mapActions$1.unregisterMap.type, unregisterMapSaga)];
 
-          case 8:
+          case 7:
             _a.sent();
 
             return [2
@@ -8716,7 +8934,8 @@
               keywords: keywords,
               scope: scope,
               groups: groups,
-              "abstract": _abstract
+              "abstract": _abstract,
+              isLoading: false
             }))];
 
           case 1:
@@ -8868,7 +9087,7 @@
             results = _a.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)) return [3
             /*break*/
@@ -8882,7 +9101,7 @@
 
               return effects.put(layerSelectActions.enableActiveService({
                 serviceId: serviceId,
-                filters: service.filterIds
+                filters: service === null || service === void 0 ? void 0 : service.filterIds
               }));
             }))];
 
@@ -12384,7 +12603,6 @@
             }));
           }
         }),
-        hasElevation: !isDockedLayerManager,
         className: "layermanager",
         sx: layerManagerStyle,
         onResizeStop: function onResizeStop(_event, _direction, node) {
@@ -12454,7 +12672,11 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useSetupDialog = function useSetupDialog(dialogType) {
+    var useSetupDialog = function useSetupDialog(dialogType, source) {
+      if (source === void 0) {
+        source = 'app';
+      }
+
       var dispatch = reactRedux.useDispatch();
       var onCloseDialog = React.useCallback(function () {
         dispatch(uiActions.setToggleOpenDialog({
@@ -12477,9 +12699,10 @@
       var registerDialog = React.useCallback(function () {
         dispatch(uiActions.registerDialog({
           type: dialogType,
-          setOpen: false
+          setOpen: false,
+          source: source
         }));
-      }, [dialogType, dispatch]);
+      }, [dialogType, dispatch, source]);
       var unregisterDialog = React.useCallback(function () {
         dispatch(uiActions.unregisterDialog({
           type: dialogType
@@ -12557,18 +12780,36 @@
       var serviceSetLayers = React__namespace.useCallback(function (payload) {
         dispatch(serviceActions.serviceSetLayers(payload));
       }, [dispatch]);
+      var addFiltersAndActiveServices = React__namespace.useCallback(function (payload) {
+        dispatch(layerSelectActions.addFiltersAndActiveServices(payload));
+      }, [dispatch]);
       React__namespace.useEffect(function () {
         if (isOpenInStore && preloadedServices && preloadedServices.length > 0) {
           mergePresetsAndUserAddedServices(preloadedServices, getUserAddedServices()).forEach(function (service) {
+            var wmService = webmap.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 = webmap.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"]
                 });
@@ -12577,9 +12818,8 @@
               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(__assign(__assign({}, presets.reduce(function (byUrl, preset) {
@@ -12646,9 +12886,9 @@
       var onToggleDock = function onToggleDock() {
         // Close the floating layer manager and open docked layer manager
         onCloseDialog();
-        dispatch(mapActions$1.toggleDockedLayerManager({
-          mapId: mapId,
-          openDockedLayerManager: true
+        dispatch(uiActions.setToggleOpenDialog({
+          type: DialogTypes.DockedLayerManager + "-" + mapId,
+          setOpen: true
         }));
       };
 
@@ -12702,7 +12942,9 @@
           _b = _a.showTitle,
           showTitle = _b === void 0 ? false : _b,
           _c = _a.leftHeaderComponent,
-          leftHeaderComponent = _c === void 0 ? undefined : _c;
+          leftHeaderComponent = _c === void 0 ? undefined : _c,
+          _d = _a.source,
+          source = _d === void 0 ? 'app' : _d;
       var dispatch = reactRedux.useDispatch(); // TODO: Uncomment when adding the presets: https://gitlab.com/opengeoweb/opengeoweb/-/issues/2881
       // const isMapPresetLoading = useSelector((store: AppStore) =>
       //   mapSelectors.getIsMapPresetLoading(store, mapId),
@@ -12711,26 +12953,22 @@
       //   mapSelectors.getMapPresetError(store, mapId),
       // );
 
-      var isDockedLayerManagerOpen = reactRedux.useSelector(function (store) {
-        return getIsDockedLayerManagerOpen(store, mapId);
-      });
+      var dialogType = DialogTypes.DockedLayerManager + "-" + mapId;
 
-      var onClose = function onClose() {
-        // Open docked layer manager and close the floating layer manager
-        dispatch(mapActions$1.toggleDockedLayerManager({
-          mapId: mapId,
-          openDockedLayerManager: false
-        }));
-      };
+      var _e = useSetupDialog(dialogType, source),
+          dialogOrder = _e.dialogOrder,
+          isDialogOpen = _e.isDialogOpen,
+          setDialogOrder = _e.setDialogOrder,
+          onCloseDialog = _e.onCloseDialog;
 
       var onToggleDock = function onToggleDock() {
         // Close docked layer manager and open the floating layer manager
-        onClose();
+        onCloseDialog();
         dispatch(uiActions.setActiveMapIdForDialog({
           type: DialogTypes.LayerManager,
           mapId: mapId,
           setOpen: true,
-          source: 'app'
+          source: source
         }));
       };
 
@@ -12739,8 +12977,8 @@
         preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
         preloadedBaseServices: preloadedBaseServices,
         bounds: bounds,
-        isOpen: isDockedLayerManagerOpen,
-        onClose: onClose,
+        isOpen: isDialogOpen,
+        onClose: onCloseDialog,
         showTitle: showTitle,
         leftHeaderComponent: leftHeaderComponent,
         // isLoading={isMapPresetLoading}
@@ -12751,7 +12989,10 @@
         startPosition: {
           top: 60,
           right: 16
-        }
+        },
+        onMouseDown: setDialogOrder,
+        order: dialogOrder,
+        source: source
       });
     };
 
@@ -12886,7 +13127,9 @@
 
       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;
     };
@@ -12916,7 +13159,9 @@
 
 
       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) {
@@ -14163,7 +14408,7 @@
         var _d = __read(_b, 2),
             b = _d[1];
 
-        return a.serviceName.localeCompare(b.serviceName);
+        return a.serviceName.localeCompare(b === null || b === void 0 ? void 0 : b.serviceName);
       }).reduce(function (r, _a) {
         var _b;
 
@@ -14487,7 +14732,7 @@
       var chip = all ? 'all' : service && service.serviceUrl;
       return /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
         title: (service === null || service === void 0 ? void 0 : service["abstract"]) ? "Abstract: " + service["abstract"] : ''
-      }, /*#__PURE__*/React__namespace.createElement(shared.CustomToggleButton, {
+      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.CustomToggleButton, {
         variant: "boxed",
         selected: isSelected,
         tabIndex: 0,
@@ -14500,7 +14745,7 @@
         },
         disabled: isDisabled,
         sx: style
-      }, service ? service.serviceName : 'All'));
+      }, service ? service.serviceName : 'All')));
     };
 
     /* *
@@ -14674,7 +14919,7 @@
         all: true,
         isSelected: isAllSelected
       }), Object.keys(activeServices).map(function (serviceId) {
-        var _a;
+        var _a, _b;
 
         var service = activeServices[serviceId];
         return /*#__PURE__*/React__namespace.createElement(ServiceChipConnect, {
@@ -14683,7 +14928,7 @@
           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
         });
       })));
     };
@@ -14953,7 +15198,9 @@
     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]];
@@ -15852,7 +16099,8 @@
           left: 0,
           margin: 1,
           zIndex: 50,
-          top: '96px'
+          top: '96px',
+          userSelect: 'none'
         }
       }, props), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         sx: {
@@ -16250,8 +16498,8 @@
           _d = _a.source,
           source = _d === void 0 ? 'app' : _d;
       var dispatch = reactRedux.useDispatch();
-      var mapDimension = reactRedux.useSelector(function (store) {
-        return getMapDimension(store, mapId, dimensionName);
+      var mapContainsDimension = reactRedux.useSelector(function (store) {
+        return getIsEnabledLayersForMapDimension(store, mapId, dimensionName);
       });
       var layerIds = reactRedux.useSelector(function (store) {
         return getLayerIds(store, mapId);
@@ -16279,7 +16527,7 @@
         }));
       }, [dispatch]);
 
-      if (!mapDimension || !layerIds || layerIds.length < 1) {
+      if (!mapContainsDimension || !layerIds || layerIds.length < 1) {
         return null;
       }
 
@@ -16399,6 +16647,10 @@
       });
       var isOpenInStore = reactRedux.useSelector(function (store) {
         return getisDialogOpen(store, uiDialogType);
+      }); // Only show button if enabled layer for map contains dimension
+
+      var mapContainsDimension = reactRedux.useSelector(function (store) {
+        return getIsEnabledLayersForMapDimension(store, mapId, dimension);
       });
       var openMultiDimensionDialog = React__namespace.useCallback(function () {
         var setOpen = currentActiveMapId !== mapId ? true : !isOpenInStore;
@@ -16409,6 +16661,11 @@
           source: source
         }));
       }, [currentActiveMapId, dispatch, isOpenInStore, uiDialogType, mapId, source]);
+
+      if (!mapContainsDimension) {
+        return null;
+      }
+
       var isOpen = currentActiveMapId === mapId && isOpenInStore;
       return /*#__PURE__*/React__namespace.createElement(DimensionSelectButton, {
         dimension: dimension,
@@ -16568,7 +16825,8 @@
           title = _a.title,
           icon = _a.icon,
           _b = _a.onChangeMouseWheel,
-          onChangeMouseWheel = _b === void 0 ? function () {} : _b;
+          onChangeMouseWheel = _b === void 0 ? function () {} : _b,
+          animationLength = _a.animationLength;
       var currentMarkIndex = marks.findIndex(function (mark) {
         return mark.value === value;
       });
@@ -16658,7 +16916,22 @@
         },
         selected: isAutoSelected,
         disabled: isDisabled
-      }, "Auto")));
+      }, "Auto"), animationLength && /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+        disabled: true,
+        sx: {
+          fontSize: '12px',
+          opacity: 0.67,
+          padding: '0px 12px',
+          '&.MuiMenuItem-root': {
+            minHeight: '30px!important'
+          }
+        }
+      }, "length"), animationLength && /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+        "data-testid": "menu-animation-length-button",
+        active: false,
+        disableRipple: true,
+        width: "100%"
+      }, minutesToDescribedDuration(animationLength))));
     };
 
     /* *
@@ -16817,13 +17090,12 @@
       var timeStep = _a.timeStep,
           _b = _a.disabled,
           disabled = _b === void 0 ? false : _b,
-          _c = _a.isTimestepAuto,
-          isTimestepAuto = _c === void 0 ? false : _c,
+          isTimestepAuto = _a.isTimestepAuto,
           onChangeTimeStep = _a.onChangeTimeStep,
-          _d = _a.onToggleTimestepAuto,
-          onToggleTimestepAuto = _d === void 0 ? function () {} : _d,
-          _e = _a.isOpenByDefault,
-          isOpenByDefault = _e === void 0 ? false : _e;
+          _c = _a.onToggleTimestepAuto,
+          onToggleTimestepAuto = _c === void 0 ? function () {} : _c,
+          _d = _a.isOpenByDefault,
+          isOpenByDefault = _d === void 0 ? false : _d;
 
       var handleMenuItemClick = function handleMenuItemClick(mark) {
         if (isTimestepAuto) {
@@ -17027,6 +17299,7 @@
           disabled = _b === void 0 ? false : _b,
           _c = _a.animationLength,
           animationLength = _c === void 0 ? AnimationLength.Hours1 : _c,
+          animationLengthInMinutes = _a.animationLengthInMinutes,
           onChangeAnimationLength = _a.onChangeAnimationLength;
 
       var onChangeSliderValue = function onChangeSliderValue(mark) {
@@ -17045,7 +17318,8 @@
         title: title,
         isDisabled: disabled,
         value: animationLength,
-        onChangeMouseWheel: onChangeSliderValue
+        onChangeMouseWheel: onChangeSliderValue,
+        animationLength: animationLengthInMinutes
       });
     };
 
@@ -17094,7 +17368,8 @@
         xs: "auto"
       }, timeStepBtn || /*#__PURE__*/React__default["default"].createElement(TimeStepButton, {
         timeStep: 0,
-        onChangeTimeStep: function onChangeTimeStep() {}
+        onChangeTimeStep: function onChangeTimeStep() {},
+        isTimestepAuto: false
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: "auto"
@@ -17132,32 +17407,21 @@
           timeScaleBtn = _a.timeScaleBtn,
           animationLengthBtn = _a.animationLengthBtn,
           _b = _a.isOpenByDefault,
-          isOpenByDefault = _b === void 0 ? false : _b,
-          timeStep = _a.timeStep,
-          timeDimension = _a.timeDimension,
-          onChangeTimeStep = _a.onChangeTimeStep,
-          _c = _a.isTimestepAuto,
-          isTimestepAuto = _c === void 0 ? false : _c;
+          isOpenByDefault = _b === void 0 ? false : _b;
 
-      var _d = __read(React.useState(null), 2),
-          anchorEl = _d[0],
-          setAnchorEl = _d[1];
+      var _c = __read(React.useState(null), 2),
+          anchorEl = _c[0],
+          setAnchorEl = _c[1];
 
-      var _e = __read(React.useState(false), 2),
-          open = _e[0],
-          setOpen = _e[1];
+      var _d = __read(React.useState(false), 2),
+          open = _d[0],
+          setOpen = _d[1];
 
       React.useEffect(function () {
         if (anchorEl && isOpenByDefault) {
           setOpen(true);
         }
       }, [anchorEl, isOpenByDefault]);
-      var timeStepFromLayer = getActiveLayerTimeStep(timeDimension) || timeStep;
-      React__default["default"].useEffect(function () {
-        if (isTimestepAuto) {
-          onChangeTimeStep(timeStepFromLayer);
-        }
-      }, [timeStepFromLayer, isTimestepAuto, onChangeTimeStep]);
       return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
         title: "Animation options",
         placement: "bottom"
@@ -18229,95 +18493,114 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
+    var TIME_SLIDER_LEGEND_HEIGHT = 24;
     var DRAG_AREA_WIDTH = 24;
 
-    var TimeSliderLegend = function TimeSliderLegend(_a) {
-      var mapId = _a.mapId,
-          centerTime = _a.centerTime,
-          secondsPerPx = _a.secondsPerPx,
-          _b = _a.dataScaleToSecondsPerPx,
-          dataScaleToSecondsPerPx = _b === void 0 ? defaultDataScaleToSecondsPerPx : _b,
-          selectedTime = _a.selectedTime,
-          _c = _a.scale,
-          scale = _c === void 0 ? Scale.Hour : _c,
-          currentTime = _a.currentTime,
-          dataStartTime = _a.dataStartTime,
-          dataEndTime = _a.dataEndTime,
-          animationStartTime = _a.animationStartTime,
-          animationEndTime = _a.animationEndTime,
-          timeStep = _a.timeStep,
-          _d = _a.mapIsActive,
-          mapIsActive = _d === void 0 ? true : _d,
-          unfilteredSelectedTime = _a.unfilteredSelectedTime,
-          setUnfilteredSelectedTime = _a.setUnfilteredSelectedTime,
-          onSetNewDate = _a.onSetNewDate,
-          onSetCenterTime = _a.onSetCenterTime,
-          onSetAnimationStartTime = _a.onSetAnimationStartTime,
-          onSetAnimationEndTime = _a.onSetAnimationEndTime;
-
-      var _e = __read(useCanvasTarget('mousedown'), 2),
-          node = _e[1];
+    function useAnimationTime(animationStartTime, animationEndTime, onSetAnimationStartTime, onSetAnimationEndTime, leftMarkerDragging, rightMarkerDragging, animationAreaDragging, centerTime, canvasWidth, secondsPerPx, dragTooltipPosition, pixelsToLeft, setTooltipTime, startDraggingPosition) {
+      var _a = __read(React__namespace.useState(convertStringTimeToUnix(animationStartTime)), 2),
+          localAnimationStartTime = _a[0],
+          setLocalAnimationStartTime = _a[1];
 
-      var _f = __read(React__namespace.useState(0), 2),
-          canvasWidth = _f[0],
-          setCanvasWidth = _f[1];
+      var _b = __read(React__namespace.useState(convertStringTimeToUnix(animationEndTime)), 2),
+          localAnimationEndTime = _b[0],
+          setLocalAnimationEndTime = _b[1];
 
-      var _g = __read(React__namespace.useState(false), 2),
-          selectedTimeDragging = _g[0],
-          setSelectedTimeDragging = _g[1];
+      React__namespace.useEffect(function () {
+        setLocalAnimationStartTime(convertStringTimeToUnix(animationStartTime));
+        setLocalAnimationEndTime(convertStringTimeToUnix(animationEndTime));
+      }, [animationStartTime, animationEndTime]);
+      var animationDiff = React__namespace.useRef();
+      var pixelsMovedSinceStartDragging = React__namespace.useRef(0);
+      React__namespace.useEffect(function () {
+        var handleMouseUp = function handleMouseUp() {
+          pixelsMovedSinceStartDragging.current = 0;
+          animationDiff.current = undefined;
+        };
 
-      var _h = __read(React__namespace.useState(false), 2),
-          leftMarkerDragging = _h[0],
-          setLeftMarkerDragging = _h[1];
+        document.addEventListener('mouseup', handleMouseUp);
+        return function () {
+          document.removeEventListener('mouseup', handleMouseUp);
+        };
+      }, []);
+      React__namespace.useEffect(function () {
+        var stoppedDragging = !leftMarkerDragging && !rightMarkerDragging && !animationAreaDragging;
 
-      var _j = __read(React__namespace.useState(false), 2),
-          rightMarkerDragging = _j[0],
-          setRightMarkerDragging = _j[1];
+        if (stoppedDragging) {
+          if (localAnimationStartTime && localAnimationStartTime !== convertStringTimeToUnix(animationStartTime)) {
+            onSetAnimationStartTime(moment__default["default"].utc(localAnimationStartTime * 1000).format(dateFormat));
+          }
 
-      var _k = __read(React__namespace.useState(false), 2),
-          centerTimeDragging = _k[0],
-          setCenterTimeDragging = _k[1];
+          if (localAnimationEndTime && localAnimationEndTime !== convertStringTimeToUnix(animationEndTime)) {
+            onSetAnimationEndTime(moment__default["default"].utc(localAnimationEndTime * 1000).format(dateFormat));
+          }
+        } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-      var _l = __read(React__namespace.useState(false), 2),
-          dragTooltipOpen = _l[0],
-          setDragTooltipOpen = _l[1];
+      }, [leftMarkerDragging, rightMarkerDragging, animationAreaDragging]);
+      var handleAnimationDragging = React.useCallback(function (x) {
+        if (!localAnimationStartTime || !localAnimationEndTime) return;
 
-      var _m = __read(React__namespace.useState(false), 2),
-          mouseDownInLegend = _m[0],
-          setMouseDownInLegend = _m[1];
+        var _a = __read([localAnimationStartTime, localAnimationEndTime].map(function (timestamp) {
+          return timestampToPixel(timestamp, centerTime, canvasWidth, secondsPerPx);
+        }), 2),
+            leftMarkerPx = _a[0],
+            rightMarkerPx = _a[1];
 
-      var _o = __read(React__namespace.useState(animationStartTime && moment__default["default"].utc(animationStartTime).unix()), 2),
-          localAnimationStartTime = _o[0],
-          setLocalAnimationStartTime = _o[1];
+        if (leftMarkerDragging) {
+          var mousePosition = leftMarkerPx + x;
+          var rightAnimationPosition = rightMarkerPx - DRAG_AREA_WIDTH * 2;
+          if (mousePosition >= rightAnimationPosition || mousePosition <= 0) return; // eslint-disable-next-line no-param-reassign
 
-      var _p = __read(React__namespace.useState(animationEndTime && moment__default["default"].utc(animationEndTime).unix()), 2),
-          localAnimationEndTime = _p[0],
-          setLocalAnimationEndTime = _p[1];
+          dragTooltipPosition.current = pixelsToLeft ? mousePosition + pixelsToLeft : mousePosition;
+          var mouseTimeUnix = pixelToTimestamp(mousePosition, centerTime, canvasWidth, secondsPerPx);
+          setLocalAnimationStartTime(mouseTimeUnix);
+          setTooltipTime(moment__default["default"].unix(mouseTimeUnix));
+          return;
+        }
 
-      var _q = __read(React__namespace.useState(moment__default["default"].utc(0)), 2),
-          tooltipTime = _q[0],
-          setTooltipTime = _q[1];
+        if (rightMarkerDragging) {
+          var mousePosition = rightMarkerPx + x;
+          var leftAnimationPosition = leftMarkerPx + DRAG_AREA_WIDTH * 2;
+          if (leftAnimationPosition >= mousePosition || mousePosition >= canvasWidth) return; // eslint-disable-next-line no-param-reassign
 
-      var _r = __read(React__namespace.useState(false), 2),
-          animationAreaDragging = _r[0],
-          setAnimationAreaDragging = _r[1];
+          dragTooltipPosition.current = pixelsToLeft ? mousePosition + pixelsToLeft : mousePosition;
+          var mouseTimeUnix = pixelToTimestamp(mousePosition, centerTime, canvasWidth, secondsPerPx);
+          setLocalAnimationEndTime(mouseTimeUnix);
+          setTooltipTime(moment__default["default"].unix(mouseTimeUnix));
+          return;
+        }
 
-      var animationDiff = React__namespace.useRef();
-      var isClickOrDrag = React__namespace.useRef();
-      var pixelsMovedSinceStartDragging = React__namespace.useRef(0);
-      var elem = document.querySelector(".timeSliderLegend_" + mapId);
-      var pixelsToLeft = elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect()['left'];
-      var pixelsToTop = elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect()['top'];
+        if (animationAreaDragging) {
+          if (animationDiff.current === undefined) {
+            var startDraggingPositionTimestamp = pixelToTimestamp(startDraggingPosition.current, centerTime, canvasWidth, secondsPerPx);
+            var diffLeftAnimationToStartDraggingPosition = startDraggingPositionTimestamp - localAnimationStartTime;
+            var diffRightAnimationToStartDraggingPosition = localAnimationEndTime - startDraggingPositionTimestamp;
+            animationDiff.current = {
+              diffStartToRight: diffRightAnimationToStartDraggingPosition,
+              diffStartToLeft: diffLeftAnimationToStartDraggingPosition
+            };
+            return;
+          }
 
-      var _s = __read(React__namespace.useState('auto'), 2),
-          cursorStyle = _s[0],
-          setCursorStyle = _s[1];
+          pixelsMovedSinceStartDragging.current += x;
+          var currentPositionTimestamp = pixelToTimestamp(startDraggingPosition.current + pixelsMovedSinceStartDragging.current, centerTime, canvasWidth, secondsPerPx);
+          var _b = animationDiff.current,
+              diffStartToRight = _b.diffStartToRight,
+              diffStartToLeft = _b.diffStartToLeft;
+          var startTime = currentPositionTimestamp - diffStartToLeft;
+          var endTime = currentPositionTimestamp + diffStartToRight;
+          setLocalAnimationStartTime(startTime);
+          setLocalAnimationEndTime(endTime);
+        }
+      }, [localAnimationStartTime, localAnimationEndTime, leftMarkerDragging, rightMarkerDragging, animationAreaDragging, centerTime, canvasWidth, secondsPerPx, dragTooltipPosition, pixelsToLeft, setTooltipTime, startDraggingPosition]);
+      return {
+        handleAnimationDragging: handleAnimationDragging,
+        localAnimationEndTime: localAnimationEndTime,
+        localAnimationStartTime: localAnimationStartTime
+      };
+    }
 
+    function useHandleKeyDown(mapIsActive, timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime, selectedTime) {
       var curTime = selectedTime !== undefined ? moment__default["default"].unix(selectedTime).toISOString() : moment__default["default"].utc().toISOString();
-      React__namespace.useEffect(function () {
-        setLocalAnimationStartTime(animationStartTime && moment__default["default"].utc(animationStartTime).unix());
-        setLocalAnimationEndTime(animationEndTime && moment__default["default"].utc(animationEndTime).unix());
-      }, [animationStartTime, animationEndTime]);
       React__namespace.useEffect(function () {
         var handleKeyDown = function handleKeyDown(event) {
           if (event.key === 'Home' && mapIsActive) {
@@ -18342,94 +18625,114 @@
           document.removeEventListener('keydown', handleKeyDown);
         };
       }, [curTime, currentTime, dataEndTime, dataStartTime, mapIsActive, onSetCenterTime, onSetNewDate, timeStep]);
+    }
+
+    function convertStringTimeToUnix(time) {
+      return time ? moment__default["default"].utc(time).unix() : undefined;
+    } // Explanation of props can be found here:
+    // https://drive.google.com/file/d/1jqqNcciCH0UJiZ04HO-1vknmPPpT8fK5/view?usp=sharing
+
+
+    var TimeSliderLegend = function TimeSliderLegend(_a) {
+      var mapId = _a.mapId,
+          centerTime = _a.centerTime,
+          secondsPerPx = _a.secondsPerPx,
+          _b = _a.dataScaleToSecondsPerPx,
+          dataScaleToSecondsPerPx = _b === void 0 ? defaultDataScaleToSecondsPerPx : _b,
+          selectedTime = _a.selectedTime,
+          _c = _a.scale,
+          scale = _c === void 0 ? Scale.Hour : _c,
+          currentTime = _a.currentTime,
+          dataStartTime = _a.dataStartTime,
+          dataEndTime = _a.dataEndTime,
+          animationStartTime = _a.animationStartTime,
+          animationEndTime = _a.animationEndTime,
+          timeStep = _a.timeStep,
+          _d = _a.mapIsActive,
+          mapIsActive = _d === void 0 ? true : _d,
+          unfilteredSelectedTime = _a.unfilteredSelectedTime,
+          setUnfilteredSelectedTime = _a.setUnfilteredSelectedTime,
+          _e = _a.onSetNewDate,
+          onSetNewDate = _e === void 0 ? function () {} : _e,
+          _f = _a.onSetCenterTime,
+          onSetCenterTime = _f === void 0 ? function () {} : _f,
+          _g = _a.onSetAnimationStartTime,
+          onSetAnimationStartTime = _g === void 0 ? function () {} : _g,
+          _h = _a.onSetAnimationEndTime,
+          onSetAnimationEndTime = _h === void 0 ? function () {} : _h;
+      useHandleKeyDown(mapIsActive, timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime, selectedTime);
+
+      var _j = __read(useCanvasTarget('mousedown'), 2),
+          node = _j[1];
+
+      var _k = __read(React__namespace.useState(0), 2),
+          canvasWidth = _k[0],
+          setCanvasWidth = _k[1];
+
+      var _l = __read(React__namespace.useState(false), 2),
+          selectedTimeDragging = _l[0],
+          setSelectedTimeDragging = _l[1];
+
+      var _m = __read(React__namespace.useState(false), 2),
+          leftMarkerDragging = _m[0],
+          setLeftMarkerDragging = _m[1];
+
+      var _o = __read(React__namespace.useState(false), 2),
+          rightMarkerDragging = _o[0],
+          setRightMarkerDragging = _o[1];
+
+      var _p = __read(React__namespace.useState(false), 2),
+          dragTooltipOpen = _p[0],
+          setDragTooltipOpen = _p[1];
+
+      var _q = __read(React__namespace.useState(false), 2),
+          mouseDownInLegend = _q[0],
+          setMouseDownInLegend = _q[1];
+
+      var _r = __read(React__namespace.useState(false), 2),
+          animationAreaDragging = _r[0],
+          setAnimationAreaDragging = _r[1];
+
+      var _s = __read(React__namespace.useState('auto'), 2),
+          cursorStyle = _s[0],
+          setCursorStyle = _s[1];
       /**
        * remove active drag. can happen outside canvas.
        */
 
+
       React__namespace.useEffect(function () {
         var handleMouseUp = function handleMouseUp() {
-          centerTimeDragging ? setCursorStyle('auto') : setCursorStyle('ew-resize');
+          setCursorStyle('auto');
           setSelectedTimeDragging(false);
           setLeftMarkerDragging(false);
           setRightMarkerDragging(false);
           setMouseDownInLegend(false);
-          setCenterTimeDragging(false);
           setDragTooltipOpen(false);
           setAnimationAreaDragging(false);
           startDraggingPosition.current = 0;
-          pixelsMovedSinceStartDragging.current = 0;
-          animationDiff.current = undefined;
         };
 
         document.addEventListener('mouseup', handleMouseUp);
         return function () {
           document.removeEventListener('mouseup', handleMouseUp);
         };
-      }, [centerTimeDragging]);
-      var onMouseTouchMoveActions = React.useCallback(function (x) {
-        if (!localAnimationStartTime || !localAnimationEndTime) return;
-
-        var _a = __read([localAnimationStartTime, localAnimationEndTime].map(function (timestamp) {
-          return timestampToPixel(timestamp, centerTime, canvasWidth, secondsPerPx);
-        }), 2),
-            leftMarkerPx = _a[0],
-            rightMarkerPx = _a[1];
-
-        if (leftMarkerDragging) {
-          var mousePosition = leftMarkerPx + x;
-          var rightAnimationPosition = rightMarkerPx - DRAG_AREA_WIDTH * 2; // update tooltip position while dragging
-          // Prevent dragging if it would cause markers to cross over, except if the markers
-          // are moved away from being crossed over
-
-          if (mousePosition >= rightAnimationPosition || mousePosition <= 0) return; // set animation drag info dialog location
-
-          dragTooltipPosition.current = pixelsToLeft ? mousePosition + pixelsToLeft : mousePosition; // change local time bounds according to either dragged marker
-
-          var mouseTimeUnix = pixelToTimestamp(mousePosition, // lets us drag on the marker
-          centerTime, canvasWidth, secondsPerPx);
-          setLocalAnimationStartTime(mouseTimeUnix);
-          setTooltipTime(moment__default["default"].unix(mouseTimeUnix));
-          return;
-        }
-
-        if (rightMarkerDragging) {
-          var mousePosition = rightMarkerPx + x;
-          var leftAnimationPosition = leftMarkerPx + DRAG_AREA_WIDTH * 2; // Similar condition for other marker
-
-          if (leftAnimationPosition >= mousePosition || mousePosition >= canvasWidth) return; // set animation drag info dialog location
+      }, []);
+      var dragTooltipPosition = React__namespace.useRef();
+      var startDraggingPosition = React__namespace.useRef(0);
+      var timeSliderLegendId = "timeSliderLegend_" + mapId;
+      var timeSliderLegendElement = document.querySelector("." + timeSliderLegendId);
+      var pixelsToLeft = timeSliderLegendElement === null || timeSliderLegendElement === void 0 ? void 0 : timeSliderLegendElement.getBoundingClientRect()['left'];
 
-          dragTooltipPosition.current = pixelsToLeft ? mousePosition + pixelsToLeft : mousePosition; // change local time bounds according to either dragged marker
+      var _t = __read(React__namespace.useState(moment__default["default"].utc(0)), 2),
+          tooltipTime = _t[0],
+          setTooltipTime = _t[1];
 
-          var mouseTimeUnix = pixelToTimestamp(mousePosition, // lets us drag on the marker
-          centerTime, canvasWidth, secondsPerPx);
-          setLocalAnimationEndTime(mouseTimeUnix);
-          setTooltipTime(moment__default["default"].unix(mouseTimeUnix));
-          return;
-        }
+      var _u = useAnimationTime(animationStartTime, animationEndTime, onSetAnimationStartTime, onSetAnimationEndTime, leftMarkerDragging, rightMarkerDragging, animationAreaDragging, centerTime, canvasWidth, secondsPerPx, dragTooltipPosition, pixelsToLeft, setTooltipTime, startDraggingPosition),
+          handleAnimationDragging = _u.handleAnimationDragging,
+          localAnimationEndTime = _u.localAnimationEndTime,
+          localAnimationStartTime = _u.localAnimationStartTime;
 
-        if (animationAreaDragging) {
-          if (animationDiff.current === undefined) {
-            var startDraggingPositionTimestamp = pixelToTimestamp(startDraggingPosition.current, centerTime, canvasWidth, secondsPerPx);
-            var diffLeftAnimationToStartDraggingPosition = startDraggingPositionTimestamp - localAnimationStartTime;
-            var diffRightAnimationToStartDraggingPosition = localAnimationEndTime - startDraggingPositionTimestamp;
-            animationDiff.current = {
-              diffStartToRight: diffRightAnimationToStartDraggingPosition,
-              diffStartToLeft: diffLeftAnimationToStartDraggingPosition
-            };
-            return;
-          }
-
-          pixelsMovedSinceStartDragging.current += x;
-          var currentPositionTimestamp = pixelToTimestamp(startDraggingPosition.current + pixelsMovedSinceStartDragging.current, centerTime, canvasWidth, secondsPerPx);
-          var _b = animationDiff.current,
-              diffStartToRight = _b.diffStartToRight,
-              diffStartToLeft = _b.diffStartToLeft;
-          var startTime = currentPositionTimestamp - diffStartToLeft;
-          var endTime = currentPositionTimestamp + diffStartToRight;
-          setLocalAnimationStartTime(startTime);
-          setLocalAnimationEndTime(endTime);
-        }
-      }, [localAnimationStartTime, localAnimationEndTime, leftMarkerDragging, rightMarkerDragging, animationAreaDragging, centerTime, canvasWidth, secondsPerPx, pixelsToLeft, animationDiff]);
       var setSelectedTime = React.useCallback(function (x) {
         var unfliteredSelectedTimePx = timestampToPixel(unfilteredSelectedTime, centerTime, canvasWidth, secondsPerPx) + x;
         setUnfilteredSelectedTime(pixelToTimestamp(unfliteredSelectedTimePx, centerTime, canvasWidth, secondsPerPx));
@@ -18440,12 +18743,11 @@
           if (event.movementX === 0) return;
 
           if (mouseDownInLegend) {
-            setCenterTimeDragging(true);
             var dragDistanceTime = event.movementX * secondsPerPx;
             var newCenterTime = centerTime - dragDistanceTime;
             onSetCenterTime && onSetCenterTime(newCenterTime);
           } else if (leftMarkerDragging || rightMarkerDragging || animationAreaDragging) {
-            onMouseTouchMoveActions(event.movementX);
+            handleAnimationDragging(event.movementX);
           } else if (selectedTimeDragging) {
             setSelectedTime(event.movementX);
           }
@@ -18455,9 +18757,9 @@
         return function () {
           document.removeEventListener('mousemove', handleMouseMove);
         };
-      }, [animationAreaDragging, centerTime, leftMarkerDragging, mouseDownInLegend, onMouseTouchMoveActions, onSetCenterTime, rightMarkerDragging, secondsPerPx, selectedTimeDragging, setSelectedTime]);
+      }, [animationAreaDragging, centerTime, leftMarkerDragging, mouseDownInLegend, handleAnimationDragging, onSetCenterTime, rightMarkerDragging, secondsPerPx, selectedTimeDragging, setSelectedTime]);
       var theme = material.useTheme();
-      var startDraggingPosition = React__namespace.useRef(0);
+      var isClickOrDrag = React__namespace.useRef();
 
       var onMouseDown = function onMouseDown(x, y, width) {
         isClickOrDrag.current = 'click';
@@ -18477,7 +18779,7 @@
           return;
         }
 
-        if (animationStartTime && animationEndTime && onSetAnimationStartTime && onSetAnimationEndTime) {
+        if (animationStartTime && animationEndTime) {
           dragTooltipPosition.current = pixelsToLeft ? x + pixelsToLeft : x; // start dragging either marker
 
           if (isLeftAnimationIconArea(x, leftMarkerPx, DRAG_AREA_WIDTH) && !rightMarkerDragging) {
@@ -18507,22 +18809,7 @@
         setMouseDownInLegend(true);
       };
 
-      React__namespace.useEffect(function () {
-        var stoppedDragging = !leftMarkerDragging && !rightMarkerDragging && !animationAreaDragging;
-
-        if (stoppedDragging) {
-          if (localAnimationStartTime !== convertStringTimeToUnix(animationStartTime)) {
-            onSetAnimationStartTime(moment__default["default"].utc(localAnimationStartTime * 1000).format(dateFormat));
-          }
-
-          if (localAnimationEndTime !== convertStringTimeToUnix(animationEndTime)) {
-            onSetAnimationEndTime(moment__default["default"].utc(localAnimationEndTime * 1000).format(dateFormat));
-          }
-        } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-      }, [leftMarkerDragging, rightMarkerDragging, animationAreaDragging]);
-
-      var onMouseUpTouchEnd = function onMouseUpTouchEnd(x) {
+      var onMouseUp = function onMouseUp(x) {
         if (isClickOrDrag.current === 'click') {
           // we need to set the unfiltered time, so the timebox will update accordingly
           setUnfilteredSelectedTime(pixelToTimestamp(x, centerTime, canvasWidth, secondsPerPx));
@@ -18564,8 +18851,8 @@
         }
       };
 
-      var dragTooltipPosition = React__namespace.useRef();
       var popperRef = React__namespace.useRef(null);
+      var pixelsToTop = timeSliderLegendElement === null || timeSliderLegendElement === void 0 ? void 0 : timeSliderLegendElement.getBoundingClientRect()['top'];
 
       var setTooltipPosition = function setTooltipPosition() {
         var tooltipX = dragTooltipPosition.current;
@@ -18584,7 +18871,7 @@
         }
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "timeSliderLegend",
-        className: "timeSliderLegend_" + mapId,
+        className: timeSliderLegendId,
         sx: {
           height: TIME_SLIDER_LEGEND_HEIGHT + "px",
           borderRadius: '4.5px',
@@ -18601,7 +18888,7 @@
           onSetCenterTime && onSetCenterTime(newCenterTime);
         },
         onMouseDown: onMouseDown,
-        onMouseUp: onMouseUpTouchEnd,
+        onMouseUp: onMouseUp,
         onRenderCanvas: function onRenderCanvas(ctx, width, height) {
           setCanvasWidth(width);
           drawTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTime, scale, currentTime, localAnimationStartTime, localAnimationEndTime, dataStartTime, dataEndTime);
@@ -18609,12 +18896,6 @@
       })));
     };
 
-    function convertStringTimeToUnix(time) {
-      return time ? moment__default["default"].utc(time).unix() : undefined;
-    }
-
-    var TIME_SLIDER_LEGEND_HEIGHT = 24;
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -19103,26 +19384,46 @@
       var isTimestepAuto$1 = reactRedux.useSelector(function (store) {
         return isTimestepAuto(store, mapId);
       });
-      var onToggleTimestepAuto = React__namespace.useCallback(function () {
+      var activeLayerId = reactRedux.useSelector(function (store) {
+        return getActiveLayerId(store, mapId);
+      });
+      var activeLayerTimeDimension = reactRedux.useSelector(function (store) {
+        return getLayerTimeDimension(store, activeLayerId);
+      });
+
+      var onToggleTimestepAuto = function onToggleTimestepAuto() {
+        var newTimestepAuto = !isTimestepAuto$1;
+
+        if (newTimestepAuto) {
+          var timeStepFromLayer = getActiveLayerTimeStep(activeLayerTimeDimension);
+
+          if (timeStepFromLayer) {
+            dispatch(mapActions$1.setTimeStep({
+              mapId: mapId,
+              timeStep: timeStepFromLayer
+            }));
+          }
+        }
+
         dispatch(mapActions$1.toggleTimestepAuto({
           mapId: mapId,
-          timestepAuto: !isTimestepAuto$1,
-          origin: MapActionOrigin.map
+          timestepAuto: newTimestepAuto
         }));
-      }, [dispatch, isTimestepAuto$1, mapId]);
-      var onSetTimeStep = React__namespace.useCallback(function (timeStep, origin) {
-        dispatch(mapActions$1.setTimeStep(__assign({
+      };
+
+      var onSetTimeStep = function onSetTimeStep(timeStep) {
+        dispatch(mapActions$1.setTimeStep({
           mapId: mapId,
           timeStep: timeStep
-        }, origin && {
-          origin: origin
-        })));
-      }, [dispatch, mapId]);
+        }));
+      };
+
       return /*#__PURE__*/React__namespace.createElement(TimeStepButton, {
         timeStep: timeStep,
         onChangeTimeStep: onSetTimeStep,
         disabled: isAnimating$1,
-        onToggleTimestepAuto: onToggleTimestepAuto
+        onToggleTimestepAuto: onToggleTimestepAuto,
+        isTimestepAuto: Boolean(isTimestepAuto$1)
       });
     };
 
@@ -19303,7 +19604,8 @@
       return /*#__PURE__*/React__namespace.createElement(AnimationLengthButton, {
         disabled: isAnimating$1,
         animationLength: currentLength || Number(AnimationLength.Hours24),
-        onChangeAnimationLength: handlechangeAnimationLength
+        onChangeAnimationLength: handlechangeAnimationLength,
+        animationLengthInMinutes: currentDiffInMinutes
       });
     };
 
@@ -19335,27 +19637,6 @@
     var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_a) {
       var sourceId = _a.sourceId,
           mapId = _a.mapId;
-      var dispatch = reactRedux.useDispatch();
-      var isTimestepAuto$1 = reactRedux.useSelector(function (store) {
-        return isTimestepAuto(store, mapId);
-      });
-      var timeStep = reactRedux.useSelector(function (store) {
-        return getMapTimeStep(store, mapId);
-      });
-      var activeLayerId = reactRedux.useSelector(function (store) {
-        return getActiveLayerId(store, mapId);
-      });
-      var activeLayerTimeDimension = reactRedux.useSelector(function (store) {
-        return getLayerTimeDimension(store, activeLayerId);
-      });
-      var onSetTimeStep = React__namespace.useCallback(function (timeStep, origin) {
-        dispatch(mapActions$1.setTimeStep(__assign({
-          mapId: mapId,
-          timeStep: timeStep
-        }, origin && {
-          origin: origin
-        })));
-      }, [dispatch, mapId]);
       return /*#__PURE__*/React__namespace.createElement(OptionsMenuButton, {
         nowBtn: /*#__PURE__*/React__namespace.createElement(NowButtonConnect, {
           mapId: mapId,
@@ -19375,11 +19656,7 @@
         }),
         timeScaleBtn: /*#__PURE__*/React__namespace.createElement(TimeScaleButtonConnect, {
           mapId: mapId
-        }),
-        timeStep: timeStep,
-        isTimestepAuto: isTimestepAuto$1,
-        onChangeTimeStep: onSetTimeStep,
-        timeDimension: activeLayerTimeDimension
+        })
       });
     };
 
@@ -20536,6 +20813,37 @@
 
       return null;
     };
+    var generatedDrawFunctionIds = 0;
+
+    var generateDrawFunctionId = function generateDrawFunctionId() {
+      generatedDrawFunctionIds += 1;
+      return "drawFunctionId_" + generatedDrawFunctionIds;
+    };
+    /**
+     *  DrawFunction store for re-use of drawFunctions
+     */
+
+
+    var drawFunctionStore = [];
+    var getDrawFunctionFromStore = function getDrawFunctionFromStore(id) {
+      var drawFunction = drawFunctionStore.find(function (drawFunction) {
+        return drawFunction.id === id;
+      });
+      return drawFunction === null || drawFunction === void 0 ? void 0 : drawFunction.drawMethod;
+    };
+    var registerDrawFunction = function registerDrawFunction(drawFunction) {
+      if (drawFunction === void 0) {
+        drawFunction = function drawFunction() {};
+      }
+
+      var id = generateDrawFunctionId();
+      var newFunction = {
+        id: id,
+        drawMethod: drawFunction
+      };
+      drawFunctionStore.push(newFunction);
+      return id;
+    };
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -22302,22 +22610,25 @@
         }
 
         var drawStyledMarker = featureProperties ? featureProperties.stroke || featureProperties['stroke-width'] || featureProperties.fill : null;
-        var drawMarkerByDefault = !featureProperties || !featureProperties.imageURL || !featureProperties.drawFunction;
-
-        if (featureProperties.drawFunction) {
-          var isHovered = this.featureEvent && this.featureEvent.feature === feature;
-          featureProperties.drawFunction({
-            context: ctx,
-            featureIndex: featureIndex,
-            coord: _coord,
-            selected: selected,
-            middle: middle,
-            isInEditMode: isInEditMode,
-            feature: feature,
-            mouseX: this.mouseX,
-            mouseY: this.mouseY,
-            isHovered: isHovered
-          });
+        var drawMarkerByDefault = !featureProperties || !featureProperties.imageURL || !featureProperties.drawFunctionId;
+
+        if (featureProperties.drawFunctionId) {
+          var drawFunction = getDrawFunctionFromStore(featureProperties.drawFunctionId);
+
+          if (drawFunction) {
+            var isHovered = this.featureEvent && this.featureEvent.feature === feature;
+            drawFunction({
+              context: ctx,
+              featureIndex: featureIndex,
+              coord: _coord,
+              selected: selected,
+              isInEditMode: isInEditMode,
+              feature: feature,
+              mouseX: this.mouseX,
+              mouseY: this.mouseY,
+              isHovered: isHovered
+            });
+          }
         } else if (drawStyledMarker || drawMarkerByDefault) {
           this.drawMarker(ctx, _coord, selected, middle, isInEditMode, featureProperties);
         }
@@ -22897,9 +23208,8 @@
 
       ReactMapView.prototype.componentDidMount = function () {
         var _a = this.props,
-            onMount = _a.onMount,
+            onWMJSMount = _a.onWMJSMount,
             mapId = _a.mapId,
-            onRegisterAdaguc = _a.onRegisterAdaguc,
             shouldAutoFetch = _a.shouldAutoFetch;
         this.checkAdaguc();
         this.checkNewProps(null, this.props);
@@ -22907,13 +23217,9 @@
 
         if (this.adaguc.initialized === false && this.adaguc.webMapJS) {
           this.adaguc.initialized = true;
-
-          if (onRegisterAdaguc) {
-            onRegisterAdaguc(this.adaguc.webMapJS);
-          }
         }
 
-        onMount(mapId, this.adaguc.webMapJS);
+        onWMJSMount(mapId);
 
         if (shouldAutoFetch) {
           this.onStartRefetchTimer();
@@ -22921,11 +23227,7 @@
       };
 
       ReactMapView.prototype.componentWillUnmount = function () {
-        var _a = this.props,
-            onUnMount = _a.onUnMount,
-            mapId = _a.mapId;
         window.removeEventListener('resize', this.handleWindowResize);
-        onUnMount(mapId, this.adaguc.webMapJS);
         this.adaguc.webMapJS.getListener().suspendEvents();
 
         if (typeof this.adaguc.webMapJS.stopAnimating === 'function') {
@@ -23550,8 +23852,7 @@
         shouldAutoFetch: true,
         displayMapPin: false,
         disableMapPin: false,
-        onMount: function onMount() {},
-        onUnMount: function onUnMount() {},
+        onWMJSMount: function onWMJSMount() {},
         onMapChangeDimension: function onMapChangeDimension() {
           /* nothing */
         },
@@ -23646,8 +23947,8 @@
           // rest props
       props = __rest(_a, ["children", "controls", "displayTimeInMap"]);
 
-      var dimensions = props.dimensions;
-      var adagucRef = React__namespace.useRef(null);
+      var dimensions = props.dimensions,
+          mapId = props.mapId;
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: {
           display: 'grid',
@@ -23663,13 +23964,16 @@
         }
       }, /*#__PURE__*/React__namespace.createElement(ZoomControls, {
         onZoomIn: function onZoomIn() {
-          return adagucRef.current.zoomIn(undefined);
+          var wmjsMap = getWMJSMapById(mapId);
+          wmjsMap.zoomIn(undefined);
         },
         onZoomOut: function onZoomOut() {
-          return adagucRef.current.zoomOut();
+          var wmjsMap = getWMJSMapById(mapId);
+          wmjsMap.zoomOut();
         },
         onZoomReset: function onZoomReset() {
-          return adagucRef.current.zoomToLayer(adagucRef.current.getActiveLayer());
+          var wmjsMap = getWMJSMapById(mapId);
+          wmjsMap.zoomToLayer(wmjsMap.getActiveLayer());
         }
       })), /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: {
@@ -23677,9 +23981,6 @@
           gridRowStart: 1
         }
       }, /*#__PURE__*/React__namespace.createElement(ReactMapView, __assign({}, props, {
-        onRegisterAdaguc: function onRegisterAdaguc(adaguc) {
-          adagucRef.current = adaguc;
-        },
         showLegend: false,
         displayTimeInMap: false
       }), children)), displayTimeInMap && dimensions && /*#__PURE__*/React__namespace.createElement(MapTime, {
@@ -24058,7 +24359,7 @@
         dispatch(mapActions$1.setMapPinLocation(payload));
       }, [dispatch]);
       var setSelectedFeature = React__namespace.useCallback(function (payload) {
-        dispatch(mapActions$1.setSelectedFeature(payload));
+        dispatch(layerActions.setSelectedFeature(payload));
       }, [dispatch]);
       var activeWindowId = reactRedux.useSelector(getActiveWindowId);
 
@@ -24068,29 +24369,29 @@
 
       useKeyboardZoomAndPan(isActiveWindowId(), mapId);
       useTouchZoomPan(isActiveWindowId(), mapId);
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        style: {
-          height: '100%'
-        }
-      }, /*#__PURE__*/React__namespace.createElement(MapView, __assign({}, props, {
-        mapId: mapId,
-        onMount: function onMount() {
-          registerMap({
-            mapId: mapId
-          });
-          syncGroupAddSource({
-            id: mapId,
-            type: [SYNCGROUPS_TYPE_SETTIME, SYNCGROUPS_TYPE_SETBBOX]
-          });
-        },
-        onUnMount: function onUnMount() {
+      React__namespace.useEffect(function () {
+        registerMap({
+          mapId: mapId
+        });
+        syncGroupAddSource({
+          id: mapId,
+          type: [SYNCGROUPS_TYPE_SETTIME, SYNCGROUPS_TYPE_SETBBOX]
+        });
+        return function () {
           unregisterMap({
             mapId: mapId
           });
           syncGroupRemoveSource({
             id: mapId
           });
-        },
+        };
+      }, [mapId, registerMap, syncGroupAddSource, syncGroupRemoveSource, unregisterMap]);
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        style: {
+          height: '100%'
+        }
+      }, /*#__PURE__*/React__namespace.createElement(MapView, __assign({}, props, {
+        mapId: mapId,
         srs: srs,
         bbox: bbox,
         mapPinLocation: displayMapPin ? mapPinLocation : undefined,
@@ -24145,7 +24446,7 @@
           },
           onClickFeature: layer.geojson ? function (event) {
             setSelectedFeature({
-              mapId: mapId,
+              layerId: layer.id,
               selectedFeatureIndex: event === null || event === void 0 ? void 0 : event.featureIndex
             });
           } : undefined
@@ -24714,6 +25015,410 @@
       });
     };
 
+    /* *
+     * 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, "" + wmjsMap.getMapPin().getXY().x, "" + wmjsMap.getMapPin().getXY().y, 'text/html'),
+          title: getTitle(layer.id)
+        };
+      });
+    };
+
+    /* *
+     * 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 GetFeatureInfoDialog = function GetFeatureInfoDialog(_a) {
+      var layers = _a.layers,
+          isOpen = _a.isOpen,
+          onClose = _a.onClose,
+          _b = _a.onMouseDown,
+          onMouseDown = _b === void 0 ? function () {} : _b,
+          mapId = _a.mapId,
+          _c = _a.showMapId,
+          showMapId = _c === void 0 ? false : _c,
+          _d = _a.order,
+          order = _d === void 0 ? 0 : _d,
+          _e = _a.source,
+          source = _e === void 0 ? 'app' : _e,
+          mapPinLocation = _a.mapPinLocation;
+      /* Ref and state for maplocation */
+
+      var mapLocationWasChanged = React__default["default"].useRef(false);
+
+      var _f = __read(React__default["default"].useState(false), 2),
+          isInitialMapLocationChanged = _f[0],
+          setInitialMapLocationIsChanged = _f[1];
+      /* Ref, state and update function for results per layer map */
+
+
+      var gfiResultMap = React__default["default"].useRef(new Map()).current;
+
+      var _g = __read(React__default["default"].useState(), 2),
+          triggerRerender = _g[1];
+
+      var updateLayerResult = function updateLayerResult(_a) {
+        var layerId = _a.layerId,
+            data = _a.data,
+            isLoading = _a.isLoading;
+        gfiResultMap.set(layerId, {
+          data: data,
+          isLoading: isLoading
+        });
+        triggerRerender("" + layerId + 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 = api.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, function () {
+          var data, error_1, errorMessage;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                _a.trys.push([0, 2,, 3]);
+
+                updateLayerResult({
+                  layerId: layerId,
+                  data: '',
+                  isLoading: true
+                });
+                return [4
+                /*yield*/
+                , axios__default["default"].get(url)];
+
+              case 1:
+                data = _a.sent().data;
+                updateLayerResult({
+                  layerId: layerId,
+                  data: data,
+                  isLoading: false
+                });
+                return [3
+                /*break*/
+                , 3];
+
+              case 2:
+                error_1 = _a.sent();
+                errorMessage = error_1.message;
+                updateLayerResult({
+                  layerId: layerId,
+                  data: errorMessage,
+                  isLoading: false
+                });
+                return [3
+                /*break*/
+                , 3];
+
+              case 3:
+                return [2
+                /*return*/
+                ];
+            }
+          });
+        });
+      };
+      /*  Wait till the user has clicked the map. */
+
+
+      React__default["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["default"].useEffect(function () {
+        if (isInitialMapLocationChanged && isOpen) {
+          layerToUpdateList.forEach(function (_a) {
+            var url = _a.url,
+                layerId = _a.layerId;
+            fetchLayerInfo(url, layerId);
+          });
+        } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+      }, [debouncedlayerListString]);
+      var hasLayers = layers && layers.length > 0;
+      return /*#__PURE__*/React__default["default"].createElement(shared.ToolContainerDraggable, {
+        startPosition: {
+          right: 10,
+          top: 80
+        },
+        minWidth: 300,
+        onClose: onClose,
+        title: showMapId ? "Event marker info " + 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["default"].createElement(material.Box, {
+        sx: {
+          padding: 0
+        }
+      }, isOpen && hasLayers && isInitialMapLocationChanged && /*#__PURE__*/React__default["default"].createElement(material.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["default"].createElement(material.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["default"].createElement(material.Typography, {
+          variant: "subtitle1"
+        }, title, "\xA0", /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
+          sx: {
+            "float": 'right'
+          },
+          size: "small",
+          "aria-label": "Open layer featureinfo in another page",
+          onClick: function onClick() {
+            window.open(url);
+          }
+        }, /*#__PURE__*/React__default["default"].createElement(theme.ExitDomain, null))), !result.isLoading ? /*#__PURE__*/React__default["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-" + layerId,
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML: {
+            __html: result.data.replace(/<hr\/>/g, '')
+          }
+        }) : /*#__PURE__*/React__default["default"].createElement("div", {
+          "data-testid": "layer-result-loading-" + layerId
+        }, /*#__PURE__*/React__default["default"].createElement(material.CircularProgress, {
+          "data-testid": "spinner",
+          color: "inherit"
+        })));
+      })), hasLayers && !isInitialMapLocationChanged && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        "data-testid": "click-on-map-for-info",
+        variant: "subtitle1",
+        sx: {
+          padding: '10px'
+        }
+      }, "Click on the map for info."), !hasLayers && /*#__PURE__*/React__default["default"].createElement(material.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(_a) {
+      var _b = _a.showMapId,
+          showMapId = _b === void 0 ? false : _b,
+          mapId = _a.mapId;
+      var dispatch = reactRedux.useDispatch();
+      var getFeatureInfoType = "getfeatureinfo-" + mapId;
+      var mapPinLocation = reactRedux.useSelector(function (store) {
+        return getPinLocation(store, mapId);
+      });
+      var toggleMapPinIsVisible = React__namespace.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 = reactRedux.useSelector(function (store) {
+        return getMapLayers(store, mapId);
+      });
+
+      var _c = useSetupDialog(getFeatureInfoType),
+          dialogOrder = _c.dialogOrder,
+          isDialogOpen = _c.isDialogOpen,
+          uiSource = _c.uiSource,
+          setDialogOrder = _c.setDialogOrder,
+          onCloseDialog = _c.onCloseDialog;
+
+      React__namespace.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__namespace.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(_a) {
+      var mapId = _a.mapId,
+          _b = _a.source,
+          source = _b === void 0 ? 'app' : _b;
+      var dispatch = reactRedux.useDispatch();
+      var gfiType = "getfeatureinfo-" + mapId;
+      var isOpenInStore = reactRedux.useSelector(function (store) {
+        return getisDialogOpen(store, gfiType);
+      });
+      var openGfiDialog = React__namespace.useCallback(function () {
+        dispatch(uiActions.setActiveMapIdForDialog({
+          type: gfiType,
+          mapId: mapId,
+          setOpen: !isOpenInStore,
+          source: source,
+          origin: MapActionOrigin.map
+        }));
+      }, [mapId, dispatch, isOpenInStore, source, gfiType]);
+      return /*#__PURE__*/React__namespace.createElement(MapControlButton, {
+        title: "Get information for a specific location",
+        "data-testid": "open-getfeatureinfo",
+        onClick: openGfiDialog,
+        isActive: isOpenInStore
+      }, /*#__PURE__*/React__namespace.createElement(theme.Info, null));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -24737,7 +25442,8 @@
         padding: '5px',
         zIndex: 50,
         color: theme.palette.common.black,
-        whiteSpace: 'nowrap'
+        whiteSpace: 'nowrap',
+        userSelect: 'none'
       };
     };
 
@@ -24782,8 +25488,10 @@
           shouldShowLayerManager = _a.shouldShowLayerManager,
           _q = _a.showClock,
           showClock = _q === void 0 ? true : _q,
+          _r = _a.displayGetFeatureInfoButtonInMap,
+          displayGetFeatureInfoButtonInMap = _r === void 0 ? false : _r,
           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 = reactRedux.useDispatch();
       var mapId = React__default["default"].useRef(id || generateMapId()).current;
@@ -24851,6 +25559,8 @@
         multiLegend: multiLegend
       }), displayDimensionSelectButtonInMap && /*#__PURE__*/React__default["default"].createElement(MultiDimensionSelectMapButtonsConnect, {
         mapId: mapId
+      }), displayGetFeatureInfoButtonInMap && /*#__PURE__*/React__default["default"].createElement(GetFeatureInfoButtonConnect, {
+        mapId: mapId
       })), !disableTimeSlider && /*#__PURE__*/React__default["default"].createElement(material.Box, {
         sx: {
           position: 'absolute',
@@ -24873,6 +25583,9 @@
         multiLegend: multiLegend
       }), showClock && /*#__PURE__*/React__default["default"].createElement(TimeSliderClockConnect, {
         mapId: mapId
+      }), displayGetFeatureInfoButtonInMap && /*#__PURE__*/React__default["default"].createElement(GetFeatureInfoConnect, {
+        showMapId: true,
+        mapId: mapId
       }), /*#__PURE__*/React__default["default"].createElement(DockedLayerManagerConnect, {
         mapId: mapId,
         bounds: "parent"
@@ -25242,7 +25955,8 @@
             var mapPreset = initialProps.mapPreset;
             return /*#__PURE__*/React__default["default"].createElement(ConfigurableMapConnect, __assign({}, mapPreset, {
               id: id,
-              "data-testid": "coreConfigurableMapConnect"
+              "data-testid": "coreConfigurableMapConnect",
+              displayGetFeatureInfoButtonInMap: true
             }));
           }
 
@@ -26016,6 +26730,7 @@
     exports.ConfigurableMapConnect = ConfigurableMapConnect;
     exports.CoreThemeProvider = CoreThemeProvider;
     exports.CoreThemeStoreProvider = CoreThemeStoreProvider;
+    exports.DockedLayerManagerConnect = DockedLayerManagerConnect;
     exports.HarmonieTempAndPrecipPreset = HarmonieTempAndPrecipPreset;
     exports.LayerManagerConnect = LayerManagerConnect;
     exports.LayerManagerMapButtonConnect = LayerManagerMapButtonConnect;
@@ -26051,6 +26766,7 @@
     exports.generateLayerId = generateLayerId;
     exports.generateMapId = generateMapId;
     exports.generateTimesliderId = generateTimesliderId;
+    exports.getDrawFunctionFromStore = getDrawFunctionFromStore;
     exports.getFirstTimeStepForLayerId = getFirstTimeStepForLayerId;
     exports.getInitialAppPresets = getInitialAppPresets;
     exports.getLastTimeStepForLayerId = getLastTimeStepForLayerId;
@@ -26062,6 +26778,8 @@
     exports.getWMLayerById = getWMLayerById;
     exports.layerActions = layerActions;
     exports.layerReducer = reducer$6;
+    exports.layerSelectors = selectors$2;
+    exports.layerTypes = types$3;
     exports.mapActions = mapActions;
     exports.mapModuleConfig = moduleConfig;
     exports.mapSelectors = selectors;
@@ -26071,6 +26789,7 @@
     exports.parseLayer = parseLayer;
     exports.publicLayers = publicLayers;
     exports.publicServices = publicServices;
+    exports.registerDrawFunction = registerDrawFunction;
     exports.registerWMJSMap = registerWMJSMap;
     exports.registerWMLayer = registerWMLayer;
     exports.snackbarActions = snackbarActions;
@@ -26079,6 +26798,7 @@
     exports.synchronizationGroupModuleConfig = synchronizationGroupConfig;
     exports.synchronizationGroupsConfig = synchronizationGroupConfig;
     exports.testLayers = testLayers;
+    exports.timeSliderUtils = TimeSliderUtils;
     exports.uiActions = uiActions;
     exports.uiModuleConfig = uiModuleConfig;
     exports.uiSelectors = selectors$1;