@opengeoweb/core 4.5.0 → 4.6.1

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.
@@ -241,6 +242,19 @@
       Scale[Scale["DataScale"] = 8] = "DataScale";
     })(Scale || (Scale = {}));
 
+    var AnimationLength;
+
+    (function (AnimationLength) {
+      AnimationLength[AnimationLength["Minutes15"] = 15] = "Minutes15";
+      AnimationLength[AnimationLength["Minutes30"] = 30] = "Minutes30";
+      AnimationLength[AnimationLength["Hours1"] = 60] = "Hours1";
+      AnimationLength[AnimationLength["Hours2"] = 120] = "Hours2";
+      AnimationLength[AnimationLength["Hours3"] = 180] = "Hours3";
+      AnimationLength[AnimationLength["Hours6"] = 360] = "Hours6";
+      AnimationLength[AnimationLength["Hours12"] = 720] = "Hours12";
+      AnimationLength[AnimationLength["Hours24"] = 1440] = "Hours24";
+    })(AnimationLength || (AnimationLength = {}));
+
     var MapActionOrigin;
 
     (function (MapActionOrigin) {
@@ -434,6 +448,7 @@
     var types$2 = /*#__PURE__*/Object.freeze({
         __proto__: null,
         get Scale () { return Scale; },
+        get AnimationLength () { return AnimationLength; },
         get MapActionOrigin () { return MapActionOrigin; },
         get LayerType () { return LayerType; },
         get LayerStatus () { return LayerStatus; },
@@ -1841,7 +1856,9 @@
         activeMapId: activeMapId,
         isOpen: setOpen,
         type: type,
-        source: source
+        source: source,
+        isLoading: false,
+        error: undefined
       };
     };
     var initialState$4 = {
@@ -1924,6 +1941,18 @@
         setActiveWindowId: function setActiveWindowId(draft, action) {
           var activeWindowId = action.payload.activeWindowId;
           draft.activeWindowId = activeWindowId;
+        },
+        toggleIsLoadingDialog: function toggleIsLoadingDialog(draft, action) {
+          var _a = action.payload,
+              isLoading = _a.isLoading,
+              type = _a.type;
+          draft.dialogs[type].isLoading = isLoading;
+        },
+        setErrorDialog: function setErrorDialog(draft, action) {
+          var _a = action.payload,
+              error = _a.error,
+              type = _a.type;
+          draft.dialogs[type].error = error;
         }
       }
     });
@@ -2148,17 +2177,6 @@
 
           draft.byId[mapId].animationDelay = animationDelay;
         },
-        setAnimationInterval: function setAnimationInterval(draft, action) {
-          var _a = action.payload,
-              mapId = _a.mapId,
-              interval = _a.interval;
-
-          if (!draft.byId[mapId]) {
-            return;
-          }
-
-          draft.byId[mapId].timeStep = interval;
-        },
         layerMoveLayer: function layerMoveLayer(draft, action) {
           var _a = action.payload,
               oldIndex = _a.oldIndex,
@@ -2193,6 +2211,17 @@
 
           draft.byId[mapId].timeSliderCenterTime = timeSliderCenterTime;
         },
+        setTimeSliderUnfilteredSelectedTime: function setTimeSliderUnfilteredSelectedTime(draft, action) {
+          var _a = action.payload,
+              mapId = _a.mapId,
+              timeSliderUnfilteredSelectedTime = _a.timeSliderUnfilteredSelectedTime;
+
+          if (!draft.byId[mapId]) {
+            return;
+          }
+
+          draft.byId[mapId].timeSliderUnfilteredSelectedTime = timeSliderUnfilteredSelectedTime;
+        },
         setTimeSliderSecondsPerPx: function setTimeSliderSecondsPerPx(draft, action) {
           var _a = action.payload,
               mapId = _a.mapId,
@@ -2317,17 +2346,6 @@
 
           draft.byId[mapId].activeMapPresetId = presetId;
         },
-        setIsMapPresetLoading: function setIsMapPresetLoading(draft, action) {
-          var _a = action.payload,
-              mapId = _a.mapId,
-              isLoading = _a.isLoading;
-
-          if (!draft.byId[mapId]) {
-            return;
-          }
-
-          draft.byId[mapId].isMapPresetLoading = isLoading;
-        },
         setHasMapPresetChanges: function setHasMapPresetChanges(draft, action) {
           var _a = action.payload,
               mapId = _a.mapId,
@@ -2339,17 +2357,6 @@
 
           draft.byId[mapId].hasMapPresetChanges = hasChanges;
         },
-        setMapPresetError: function setMapPresetError(draft, action) {
-          var _a = action.payload,
-              mapId = _a.mapId,
-              error = _a.error;
-
-          if (!draft.byId[mapId]) {
-            return;
-          }
-
-          draft.byId[mapId].mapPresetError = error;
-        },
         toggleDockedLayerManager: function toggleDockedLayerManager(draft, action) {
           var _a = action.payload,
               mapId = _a.mapId,
@@ -3043,6 +3050,12 @@
 
       return (_a = store === null || store === void 0 ? void 0 : store.ui) === null || _a === void 0 ? void 0 : _a.activeWindowId;
     };
+    var getDialogIsLoading = toolkit.createSelector(getDialogDetailsByType, function (details) {
+      return details && details.isLoading || false;
+    });
+    var getDialogError = toolkit.createSelector(getDialogDetailsByType, function (details) {
+      return details && details.error || '';
+    });
 
     var selectors$1 = /*#__PURE__*/Object.freeze({
         __proto__: null,
@@ -3053,7 +3066,9 @@
         getDialogOrder: getDialogOrder,
         getDialogIsOrderedOnTop: getDialogIsOrderedOnTop,
         getDialogSource: getDialogSource,
-        getActiveWindowId: getActiveWindowId
+        getActiveWindowId: getActiveWindowId,
+        getDialogIsLoading: getDialogIsLoading,
+        getDialogError: getDialogError
     });
 
     /* *
@@ -3878,6 +3893,19 @@
     var getMapTimeSliderCenterTime = toolkit.createSelector(getMapById, function (store) {
       return store ? store.timeSliderCenterTime : moment__default["default"]().unix();
     });
+    /**
+     * Returns the unflitered selected time of time slider
+     * This is not used to set the selected time itself, which is controlled by TimeBounds where values are rounded.
+     *
+     * Example: selectedTime = getTimeSliderUnfliteredSelectedTime(store, 'mapid_1')
+     * @param {object} store store: object - store object
+     * @param {string} mapId mapId: string - Id of the map
+     * @returns {number} returnType: number - unfiltered selected time as a unix timestamp
+     */
+
+    var getTimeSliderUnfilteredSelectedTime = toolkit.createSelector(getMapById, function (store) {
+      return store ? store.timeSliderUnfilteredSelectedTime : null;
+    });
     /**
      * Returns the number of seconds per pixel on the time slider
      *
@@ -4185,18 +4213,6 @@
         shouldShowLegend: shouldShowLegend
       });
     }, selectorMemoizationOptions);
-    /**
-     * Returns the loading state of the map preset
-     *
-     * Example getIsMapPresetLoading(store, mapId);
-     * @param {object} store store: object - store object
-     * @param {string} mapId mapId: string - Id of the map
-     * @returns {boolean} returnType: boolean
-     */
-
-    var getIsMapPresetLoading = toolkit.createSelector(getMapById, function (store) {
-      return store && store.isMapPresetLoading ? store.isMapPresetLoading : false;
-    });
     /**
      * Returns the has changes state of the map preset
      *
@@ -4209,18 +4225,6 @@
     var getHasMapPresetChanges = toolkit.createSelector(getMapById, function (store) {
       return store && store.hasMapPresetChanges ? store.hasMapPresetChanges : false;
     });
-    /**
-     * Returns the error state of the map preset
-     *
-     * Example getMapPresetError(store, mapId);
-     * @param {object} store store: object - store object
-     * @param {string} mapId mapId: string - Id of the map
-     * @returns {Error} returnType: string
-     */
-
-    var getMapPresetError = toolkit.createSelector(getMapById, function (store) {
-      return store === null || store === void 0 ? void 0 : store.mapPresetError;
-    });
     /**
      * Returns whether the docked layer manager is open
      *
@@ -4263,6 +4267,7 @@
         getMapTimeStep: getMapTimeStep,
         getMapAnimationDelay: getMapAnimationDelay,
         getMapTimeSliderCenterTime: getMapTimeSliderCenterTime,
+        getTimeSliderUnfilteredSelectedTime: getTimeSliderUnfilteredSelectedTime,
         getMapTimeSliderSecondsPerPx: getMapTimeSliderSecondsPerPx,
         getMapTimeSliderDataScaleToSecondsPerPx: getMapTimeSliderDataScaleToSecondsPerPx,
         isTimestepAuto: isTimestepAuto,
@@ -4282,9 +4287,7 @@
         getActiveMapPresetId: getActiveMapPresetId,
         getLegendId: getLegendId,
         getMapPreset: getMapPreset,
-        getIsMapPresetLoading: getIsMapPresetLoading,
         getHasMapPresetChanges: getHasMapPresetChanges,
-        getMapPresetError: getMapPresetError,
         getIsDockedLayerManagerOpen: getIsDockedLayerManagerOpen
     });
 
@@ -4330,6 +4333,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.
@@ -4346,17 +4390,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: {
@@ -4380,66 +4420,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
             };
+          }
+
+          if (!isLoading) {
+            // If service is done loading, add with filters
+            if (!((_b = (_a = draft.filters.activeServices.entities[serviceId]) === null || _a === void 0 ? void 0 : _a.filterIds) === null || _b === void 0 ? void 0 : _b.length)) {
+              // If the service has no filters yet, add them
+              produceFilters(groups, FilterType.Group, draft, layerSelectFilterAdapter);
+              produceFilters(keywords, FilterType.Keyword, draft, layerSelectFilterAdapter);
+            }
 
-            addFilters(groups, FilterType.Group);
-            addFilters(keywords, FilterType.Keyword);
+            var filterIds = groups.map(function (group) {
+              return getFilterId(FilterType.Group, group);
+            }).concat(keywords.map(function (keyword) {
+              return getFilterId(FilterType.Keyword, keyword);
+            }));
+            draft.filters.activeServices.entities[serviceId] = {
+              serviceId: serviceId,
+              enabled: draft.allServicesEnabled,
+              filterIds: filterIds,
+              scope: scope,
+              serviceName: serviceName,
+              serviceUrl: serviceUrl,
+              "abstract": _abstract,
+              isLoading: isLoading
+            };
           }
 
-          var filterIds = groups.map(function (group) {
-            return 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;
@@ -4447,17 +4489,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;
@@ -4465,12 +4504,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 = {
@@ -4490,12 +4529,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 = {
@@ -4512,15 +4551,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;
@@ -4616,21 +4655,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
      *
@@ -4641,9 +4689,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;
     };
     /**
@@ -4657,10 +4705,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);
@@ -4673,17 +4721,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);
     /**
@@ -4693,12 +4741,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
      *
@@ -4707,15 +4762,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
      *
@@ -4727,12 +4781,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
      *
@@ -8324,9 +8395,9 @@
             , 17];
             return [4
             /*yield*/
-            , effects.put(mapActions$1.setAnimationInterval({
+            , effects.put(mapActions$1.setTimeStep({
               mapId: mapId,
-              interval: interval
+              timeStep: interval
             }))];
 
           case 16:
@@ -8714,7 +8785,8 @@
               keywords: keywords,
               scope: scope,
               groups: groups,
-              "abstract": _abstract
+              "abstract": _abstract,
+              isLoading: false
             }))];
 
           case 1:
@@ -8866,7 +8938,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*/
@@ -8880,7 +8952,7 @@
 
               return effects.put(layerSelectActions.enableActiveService({
                 serviceId: serviceId,
-                filters: service.filterIds
+                filters: service === null || service === void 0 ? void 0 : service.filterIds
               }));
             }))];
 
@@ -9757,7 +9829,7 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var marks$2 = [{
+    var marks$3 = [{
       value: 0,
       label: '0 %'
     }, {
@@ -9893,7 +9965,7 @@
         step: 0.01,
         max: 1,
         min: 0,
-        marks: marks$2,
+        marks: marks$3,
         onChange: function onChange(event, newValue) {
           event.stopPropagation();
           onLayerChangeOpacity(newValue);
@@ -10070,7 +10142,9 @@
       return /*#__PURE__*/React__namespace.createElement(shared.ManagerButton, {
         tooltipTitle: tooltipTitle,
         onClick: onClick,
-        icon: /*#__PURE__*/React__namespace.createElement(theme.Flag, {
+        icon: isActive ? /*#__PURE__*/React__namespace.createElement(theme.Both, {
+          sx: iconStyle
+        }) : /*#__PURE__*/React__namespace.createElement(theme.None, {
           sx: iconStyle
         }),
         testId: id,
@@ -12222,6 +12296,9 @@
         onClick: function onClick() {
           return onChangeSize(sizeSmall);
         },
+        onTouchEnd: function onTouchEnd() {
+          return onChangeSize(sizeSmall);
+        },
         sx: iconStyle,
         className: "collapseSmall-btn"
       }, /*#__PURE__*/React__namespace.createElement(theme.CollapseSmall, null))), /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
@@ -12232,6 +12309,9 @@
         onClick: function onClick() {
           return onChangeSize(sizeMedium);
         },
+        onTouchEnd: function onTouchEnd() {
+          return onChangeSize(sizeMedium);
+        },
         sx: iconStyle,
         className: "collapseMedium-btn"
       }, /*#__PURE__*/React__namespace.createElement(theme.CollapseMedium, null))), /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
@@ -12242,6 +12322,9 @@
         onClick: function onClick() {
           return onChangeSize(sizeLarge);
         },
+        onTouchEnd: function onTouchEnd() {
+          return onChangeSize(sizeLarge);
+        },
         sx: iconStyle,
         className: "collapseLarge-btn"
       }, /*#__PURE__*/React__namespace.createElement(theme.CollapseLarge, null))), /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
@@ -12253,6 +12336,9 @@
         sx: iconStyle,
         onClick: function onClick() {
           return onClickDockButton();
+        },
+        onTouchEnd: function onTouchEnd() {
+          return onClickDockButton();
         }
       }, isDockedLayerManager ? /*#__PURE__*/React__namespace.createElement(theme.CollapseWindow, {
         "data-testid": "dockedLayerManager-collapse"
@@ -12384,7 +12470,11 @@
             setSize(dragSize);
           }
         }
-      }, /*#__PURE__*/React__namespace.createElement(material.Box, null, isLoading && /*#__PURE__*/React__namespace.createElement(material.LinearProgress, {
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        onKeyDown: function onKeyDown(event) {
+          event.stopPropagation();
+        }
+      }, isLoading && /*#__PURE__*/React__namespace.createElement(material.LinearProgress, {
         "data-testid": "loading-bar",
         color: "secondary",
         sx: {
@@ -12491,12 +12581,20 @@
       var isDialogOpen = reactRedux.useSelector(function (store) {
         return getisDialogOpen(store, dialogType);
       });
+      var uiIsLoading = reactRedux.useSelector(function (store) {
+        return getDialogIsLoading(store, dialogType);
+      });
+      var uiError = reactRedux.useSelector(function (store) {
+        return getDialogError(store, dialogType);
+      });
       return {
         setDialogOrder: setDialogOrder,
         dialogOrder: dialogOrder,
         onCloseDialog: onCloseDialog,
         uiSource: uiSource,
-        isDialogOpen: isDialogOpen
+        isDialogOpen: isDialogOpen,
+        uiIsLoading: uiIsLoading,
+        uiError: uiError
       };
     };
 
@@ -12529,18 +12627,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"]
                 });
@@ -12549,9 +12665,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) {
@@ -12603,19 +12718,15 @@
       var mapId = reactRedux.useSelector(function (store) {
         return getDialogMapId(store, dialogType);
       });
-      var isMapPresetLoading = reactRedux.useSelector(function (store) {
-        return getIsMapPresetLoading(store, mapId);
-      });
-      var mapPresetError = reactRedux.useSelector(function (store) {
-        return getMapPresetError(store, mapId);
-      });
 
       var _d = useSetupDialog(dialogType),
           dialogOrder = _d.dialogOrder,
           setDialogOrder = _d.setDialogOrder,
           onCloseDialog = _d.onCloseDialog,
           isDialogOpen = _d.isDialogOpen,
-          uiSource = _d.uiSource;
+          uiSource = _d.uiSource,
+          uiIsLoading = _d.uiIsLoading,
+          uiError = _d.uiError;
 
       useFetchServices(dialogType, preloadedMapServices);
 
@@ -12640,8 +12751,8 @@
         order: dialogOrder,
         source: uiSource,
         leftHeaderComponent: leftHeaderComponent,
-        isLoading: isMapPresetLoading,
-        error: mapPresetError,
+        isLoading: uiIsLoading,
+        error: uiError,
         onToggleDock: onToggleDock
       });
     };
@@ -12862,7 +12973,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;
     };
@@ -12892,7 +13005,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) {
@@ -14139,7 +14254,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;
 
@@ -14310,6 +14425,7 @@
       var rowMargin = 4;
       var rowHeight = widthToRowHeight(layerSelectWidth);
       var layerSelectFilterHeight = 155 + serviceListHeight;
+      var minHeight = 400;
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "layerList"
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
@@ -14318,7 +14434,7 @@
           fontSize: '12px'
         }
       }, filteredLayers.length, " results"), /*#__PURE__*/React__namespace.createElement(reactWindow.FixedSizeList, {
-        height: layerSelectHeight - layerSelectFilterHeight,
+        height: layerSelectHeight - layerSelectFilterHeight < minHeight ? minHeight : layerSelectHeight - layerSelectFilterHeight,
         itemCount: filteredLayers.length,
         itemSize: rowHeight + rowMargin
       }, function (_a) {
@@ -14462,7 +14578,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,
@@ -14475,7 +14591,7 @@
         },
         disabled: isDisabled,
         sx: style
-      }, service ? service.serviceName : 'All'));
+      }, service ? service.serviceName : 'All')));
     };
 
     /* *
@@ -14649,7 +14765,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, {
@@ -14658,7 +14774,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
         });
       })));
     };
@@ -14928,7 +15044,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]];
@@ -15164,7 +15282,14 @@
           left: 100
         },
         isOpen: isOpen,
-        onChangeSize: onChangeSize,
+        onResizeStop: function onResizeStop(_event, _direction, node) {
+          var width = node.offsetWidth,
+              height = node.offsetHeight;
+          onChangeSize({
+            width: width,
+            height: height
+          });
+        },
         onClose: onClose,
         headerSize: "small",
         bounds: bounds,
@@ -15820,7 +15945,8 @@
           left: 0,
           margin: 1,
           zIndex: 50,
-          top: '96px'
+          top: '96px',
+          userSelect: 'none'
         }
       }, props), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         sx: {
@@ -16692,7 +16818,7 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var marks$1 = [{
+    var marks$2 = [{
       label: '1 min',
       value: 1,
       text: '1m'
@@ -16787,18 +16913,11 @@
           disabled = _b === void 0 ? false : _b,
           _c = _a.isTimestepAuto,
           isTimestepAuto = _c === void 0 ? false : _c,
-          timeDimension = _a.timeDimension,
           onChangeTimeStep = _a.onChangeTimeStep,
           _d = _a.onToggleTimestepAuto,
           onToggleTimestepAuto = _d === void 0 ? function () {} : _d,
           _e = _a.isOpenByDefault,
           isOpenByDefault = _e === void 0 ? false : _e;
-      var timeStepFromLayer = getActiveLayerTimeStep(timeDimension) || timeStep;
-      React__namespace.useEffect(function () {
-        if (isTimestepAuto) {
-          onChangeTimeStep(timeStepFromLayer);
-        }
-      }, [timeStepFromLayer, isTimestepAuto, onChangeTimeStep]);
 
       var handleMenuItemClick = function handleMenuItemClick(mark) {
         if (isTimestepAuto) {
@@ -16811,7 +16930,7 @@
       return /*#__PURE__*/React__namespace.createElement(TimeSliderMenu, {
         title: timeStepTitle,
         isOpenByDefault: isOpenByDefault,
-        marks: marks$1,
+        marks: marks$2,
         value: timeStep,
         handleMenuItemClick: handleMenuItemClick,
         isDisabled: disabled,
@@ -16838,7 +16957,7 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var marks = [{
+    var marks$1 = [{
       label: '5 min',
       value: Scale.Minutes5,
       text: '5m'
@@ -16889,7 +17008,7 @@
       var onChangeSliderValue = function onChangeSliderValue(mark) {
         var newSliderValue = mark.value;
         var newValue = newSliderValue ? Math.round(newSliderValue) : 0;
-        var newScale = marks.find(function (el) {
+        var newScale = marks$1.find(function (el) {
           return el.value === newValue;
         }).value;
         var scaleToSecPerPx = newScale === Scale.DataScale ? getScaleToSecondsPerPxForDataScale(layers) : scaleToSecondsPerPx[newScale];
@@ -16900,7 +17019,7 @@
       return /*#__PURE__*/React__namespace.createElement(TimeSliderMenu, {
         handleMenuItemClick: onChangeSliderValue,
         icon: /*#__PURE__*/React__namespace.createElement(theme.Clock, null),
-        marks: marks,
+        marks: marks$1,
         title: "Time scale",
         value: timeSliderScale,
         onChangeMouseWheel: onChangeSliderValue
@@ -16923,7 +17042,7 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var title = 'Now';
+    var title$1 = 'Now';
 
     var NowButton = function NowButton(_a) {
       var _b = _a.onSetNow,
@@ -16931,7 +17050,7 @@
           _c = _a.disabled,
           disabled = _c === void 0 ? false : _c;
       return /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: title,
+        title: title$1,
         "data-testid": "nowButtonTooltip"
       }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
         disabled: disabled,
@@ -16960,47 +17079,133 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var OptionsMenu = function OptionsMenu(_a) {
-      var autoUpdateBtn = _a.autoUpdateBtn,
-          nowBtn = _a.nowBtn,
-          speedBtn = _a.speedBtn,
-          timeScaleBtn = _a.timeScaleBtn,
-          timeStepBtn = _a.timeStepBtn;
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: "auto"
-      }, nowBtn || /*#__PURE__*/React__default["default"].createElement(NowButton, null)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: "auto"
-      }, timeScaleBtn || /*#__PURE__*/React__default["default"].createElement(TimeScaleButton, {
-        centerTime: 0,
-        onChangeTimeSliderScale: function onChangeTimeSliderScale() {},
-        secondsPerPx: 0,
-        selectedTime: 0,
-        timeSliderScale: 0
-      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: "auto"
-      }, timeStepBtn || /*#__PURE__*/React__default["default"].createElement(TimeStepButton, {
-        timeStep: 0,
-        onChangeTimeStep: function onChangeTimeStep() {}
-      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: "auto"
-      }, speedBtn || /*#__PURE__*/React__default["default"].createElement(SpeedButton, {
-        animationDelay: defaultAnimationDelayAtStart,
-        setMapAnimationDelay: function setMapAnimationDelay() {}
-      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: "auto"
-      }, autoUpdateBtn || /*#__PURE__*/React__default["default"].createElement(AutoUpdateButton, null)));
-    };
-
-    /* *
-     * 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
-     *
+    var title = 'Animation';
+    var marks = [{
+      label: '15 min',
+      value: AnimationLength.Minutes15,
+      text: '15m'
+    }, {
+      label: '30 min',
+      value: AnimationLength.Minutes30,
+      text: '30m'
+    }, {
+      label: '1 h',
+      value: AnimationLength.Hours1,
+      text: '1h'
+    }, {
+      label: '2 h',
+      value: AnimationLength.Hours2,
+      text: '2h'
+    }, {
+      label: '3 h',
+      value: AnimationLength.Hours3,
+      text: '3h'
+    }, {
+      label: '6 h',
+      value: AnimationLength.Hours6,
+      text: '6h'
+    }, {
+      label: '12 h',
+      value: AnimationLength.Hours12,
+      text: '12h'
+    }, {
+      label: '24 h',
+      value: AnimationLength.Hours24,
+      text: '24h'
+    }].sort(function (a, b) {
+      return b.value - a.value;
+    });
+
+    var AnimationLengthButton = function AnimationLengthButton(_a) {
+      var _b = _a.disabled,
+          disabled = _b === void 0 ? false : _b,
+          _c = _a.animationLength,
+          animationLength = _c === void 0 ? AnimationLength.Hours1 : _c,
+          onChangeAnimationLength = _a.onChangeAnimationLength;
+
+      var onChangeSliderValue = function onChangeSliderValue(mark) {
+        var newSliderValue = mark.value;
+        var newValue = newSliderValue ? Math.round(newSliderValue) : 0;
+        var newLength = marks.find(function (el) {
+          return el.value === newValue;
+        }).value;
+        onChangeAnimationLength(newLength);
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(TimeSliderMenu, {
+        handleMenuItemClick: onChangeSliderValue,
+        icon: /*#__PURE__*/React__namespace.createElement(theme.Animation, null),
+        marks: marks,
+        title: title,
+        isDisabled: disabled,
+        value: animationLength,
+        onChangeMouseWheel: onChangeSliderValue
+      });
+    };
+
+    /* *
+     * 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 OptionsMenu = function OptionsMenu(_a) {
+      var autoUpdateBtn = _a.autoUpdateBtn,
+          nowBtn = _a.nowBtn,
+          speedBtn = _a.speedBtn,
+          timeScaleBtn = _a.timeScaleBtn,
+          timeStepBtn = _a.timeStepBtn,
+          animationLengthBtn = _a.animationLengthBtn;
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: "auto"
+      }, nowBtn || /*#__PURE__*/React__default["default"].createElement(NowButton, null)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: "auto"
+      }, timeScaleBtn || /*#__PURE__*/React__default["default"].createElement(TimeScaleButton, {
+        centerTime: 0,
+        onChangeTimeSliderScale: function onChangeTimeSliderScale() {},
+        secondsPerPx: 0,
+        selectedTime: 0,
+        timeSliderScale: 0
+      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: "auto"
+      }, animationLengthBtn || /*#__PURE__*/React__default["default"].createElement(AnimationLengthButton, {
+        onChangeAnimationLength: function onChangeAnimationLength() {}
+      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: "auto"
+      }, timeStepBtn || /*#__PURE__*/React__default["default"].createElement(TimeStepButton, {
+        timeStep: 0,
+        onChangeTimeStep: function onChangeTimeStep() {}
+      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: "auto"
+      }, speedBtn || /*#__PURE__*/React__default["default"].createElement(SpeedButton, {
+        animationDelay: defaultAnimationDelayAtStart,
+        setMapAnimationDelay: function setMapAnimationDelay() {}
+      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: "auto"
+      }, autoUpdateBtn || /*#__PURE__*/React__default["default"].createElement(AutoUpdateButton, null)));
+    };
+
+    /* *
+     * 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
@@ -17019,22 +17224,34 @@
           speedBtn = _a.speedBtn,
           timeStepBtn = _a.timeStepBtn,
           timeScaleBtn = _a.timeScaleBtn,
+          animationLengthBtn = _a.animationLengthBtn,
           _b = _a.isOpenByDefault,
-          isOpenByDefault = _b === void 0 ? false : _b;
+          isOpenByDefault = _b === void 0 ? false : _b,
+          timeStep = _a.timeStep,
+          timeDimension = _a.timeDimension,
+          onChangeTimeStep = _a.onChangeTimeStep,
+          _c = _a.isTimestepAuto,
+          isTimestepAuto = _c === void 0 ? false : _c;
 
-      var _c = __read(React.useState(null), 2),
-          anchorEl = _c[0],
-          setAnchorEl = _c[1];
+      var _d = __read(React.useState(null), 2),
+          anchorEl = _d[0],
+          setAnchorEl = _d[1];
 
-      var _d = __read(React.useState(false), 2),
-          open = _d[0],
-          setOpen = _d[1];
+      var _e = __read(React.useState(false), 2),
+          open = _e[0],
+          setOpen = _e[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"
@@ -17070,6 +17287,7 @@
         timeScaleBtn: timeScaleBtn,
         timeStepBtn: timeStepBtn,
         speedBtn: speedBtn,
+        animationLengthBtn: animationLengthBtn,
         autoUpdateBtn: autoUpdateBtn
       })))));
     };
@@ -17352,11 +17570,12 @@
     var drawTimeText = function drawTimeText(ctx, theme, stepPx, height, timeText, scale) {
       var ctx2 = ctx;
       var _a = theme.palette.geowebColors.timeSlider.timelineText,
+          fontSize = _a.fontSize,
           fontFamily = _a.fontFamily,
           color = _a.color;
       ctx2.fillStyle = color; // time text has smaller font than other timeline text
 
-      ctx2.font = "12px " + fontFamily;
+      ctx2.font = fontSize + "px " + fontFamily;
       ctx2.textAlign = 'left';
 
       if (scale === Scale.Year || scale === Scale.Month || scale === Scale.Week || scale === Scale.Day) {
@@ -17388,7 +17607,7 @@
       ctx2.fillStyle = color;
       ctx2.font = fontSize + "px " + fontFamily;
       ctx2.textAlign = 'left';
-      ctx2.fillText(newDate, stepPx + 2, height - 30);
+      ctx2.fillText(newDate, stepPx + 2, height - 10);
     };
 
     var drawLeftSideDateText = function drawLeftSideDateText(ctx, theme, newDate, height) {
@@ -17881,9 +18100,9 @@
       drawDefaultBackground();
       drawObservedData();
       drawForecastData();
+      drawNightOrAlternateTime();
       drawAnimationArea();
       drawDraggableIcons();
-      drawNightOrAlternateTime();
 
       function drawDefaultBackground() {
         ctx.fillStyle = legendNoDataBackground.rgba;
@@ -17906,18 +18125,23 @@
 
       function drawAnimationArea() {
         ctx.fillStyle = theme$1.palette.geowebColors.timeSlider.timelineSelectionBackground.rgba;
-        ctx.fillRect(animationStartPx, y, Math.max(animationEndPx - animationStartPx, y), height);
+        ctx.strokeStyle = theme$1.palette.geowebColors.timeSlider.timelineSelectionOutline.rgba;
+        ctx.lineWidth = 3;
+        ctx.rect(animationStartPx, y, Math.max(animationEndPx - animationStartPx, y), height);
+        ctx.fill();
+        ctx.stroke();
       }
 
       function drawDraggableIcons() {
         ctx.save();
         var path = new Path2D(theme.dragHandlePath);
         ctx.translate(animationStartPx, y);
-        ctx.fillStyle = theme$1.palette.geowebColors.timeSlider.timelineSelectionBackground.rgba;
+        ctx.fillStyle = theme$1.palette.geowebColors.timeSlider.timelineTimeScale.fill;
         ctx.fill(path);
         ctx.restore();
         ctx.save();
         ctx.translate(animationEndPx - 24, y);
+        ctx.fillStyle = theme$1.palette.geowebColors.timeSlider.timelineTimeScale.fill;
         ctx.fill(path);
         ctx.restore();
       }
@@ -18067,6 +18291,11 @@
     var isRightAnimationIconArea = function isRightAnimationIconArea(x, rightMarkerPx, width) {
       return x >= rightMarkerPx - width && x <= rightMarkerPx;
     };
+    var isInsideAnimationArea = function isInsideAnimationArea(x, leftMarkerPx, rightMarkerPx) {
+      var isInsideOnLeftSide = x >= leftMarkerPx;
+      var isInsideOnRightSide = x <= rightMarkerPx;
+      return isInsideOnLeftSide && isInsideOnRightSide;
+    };
     /**
      * @param x The pin location
      * @param selectedTimePx The selected px
@@ -18097,7 +18326,8 @@
     var DRAG_AREA_WIDTH = 24;
 
     var TimeSliderLegend = function TimeSliderLegend(_a) {
-      var centerTime = _a.centerTime,
+      var mapId = _a.mapId,
+          centerTime = _a.centerTime,
           secondsPerPx = _a.secondsPerPx,
           _b = _a.dataScaleToSecondsPerPx,
           dataScaleToSecondsPerPx = _b === void 0 ? defaultDataScaleToSecondsPerPx : _b,
@@ -18109,10 +18339,11 @@
           dataEndTime = _a.dataEndTime,
           animationStartTime = _a.animationStartTime,
           animationEndTime = _a.animationEndTime,
-          isTimeSliderHoverOn = _a.isTimeSliderHoverOn,
           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,
@@ -18142,23 +18373,39 @@
           setCenterTimeDragging = _k[1];
 
       var _l = __read(React__namespace.useState(false), 2),
-          mouseDownInLegend = _l[0],
-          setMouseDownInLegend = _l[1];
+          dragTooltipOpen = _l[0],
+          setDragTooltipOpen = _l[1];
+
+      var _m = __read(React__namespace.useState(false), 2),
+          mouseDownInLegend = _m[0],
+          setMouseDownInLegend = _m[1];
 
-      var _m = __read(React__namespace.useState(animationStartTime && moment__default["default"].utc(animationStartTime).unix()), 2),
-          localAnimationStartTime = _m[0],
-          setLocalAnimationStartTime = _m[1];
+      var _o = __read(React__namespace.useState(animationStartTime && moment__default["default"].utc(animationStartTime).unix()), 2),
+          localAnimationStartTime = _o[0],
+          setLocalAnimationStartTime = _o[1];
 
-      var _o = __read(React__namespace.useState(animationEndTime && moment__default["default"].utc(animationEndTime).unix()), 2),
-          localAnimationEndTime = _o[0],
-          setLocalAnimationEndTime = _o[1];
+      var _p = __read(React__namespace.useState(animationEndTime && moment__default["default"].utc(animationEndTime).unix()), 2),
+          localAnimationEndTime = _p[0],
+          setLocalAnimationEndTime = _p[1];
 
-      var elem = document.querySelector('.timeSliderLegend');
-      var pixelsToLeft = elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect()['left']; // we need to subtract the left padding so event.x start within the canvas.
+      var _q = __read(React__namespace.useState(moment__default["default"].utc(0)), 2),
+          tooltipTime = _q[0],
+          setTooltipTime = _q[1];
 
-      var _p = __read(React__namespace.useState('auto'), 2),
-          cursorStyle = _p[0],
-          setCursorStyle = _p[1];
+      var _r = __read(React__namespace.useState(false), 2),
+          animationAreaDragging = _r[0],
+          setAnimationAreaDragging = _r[1];
+
+      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'];
+
+      var _s = __read(React__namespace.useState('auto'), 2),
+          cursorStyle = _s[0],
+          setCursorStyle = _s[1];
 
       var curTime = selectedTime !== undefined ? moment__default["default"].unix(selectedTime).toISOString() : moment__default["default"].utc().toISOString();
       React__namespace.useEffect(function () {
@@ -18188,7 +18435,7 @@
         return function () {
           document.removeEventListener('keydown', handleKeyDown);
         };
-      }, [timeStep, isTimeSliderHoverOn, currentTime, dataStartTime, dataEndTime, mapIsActive, onSetCenterTime, onSetNewDate, curTime]);
+      }, [curTime, currentTime, dataEndTime, dataStartTime, mapIsActive, onSetCenterTime, onSetNewDate, timeStep]);
       /**
        * remove active drag. can happen outside canvas.
        */
@@ -18201,13 +18448,18 @@
           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;
 
@@ -18218,43 +18470,78 @@
             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 (x >= rightMarkerPx - DRAG_AREA_WIDTH * 2 || x <= 0) return; // change local time bounds according to either dragged marker
 
-          var mouseTimeUnix = pixelToTimestamp(x - DRAG_AREA_WIDTH / 2, // lets us drag on the marker
+          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) {
-          // Similar condition for other marker
-          if (x <= leftMarkerPx + DRAG_AREA_WIDTH * 2 || x >= canvasWidth) return; // change local time bounds according to either dragged marker
+          var mousePosition = rightMarkerPx + x;
+          var leftAnimationPosition = leftMarkerPx + DRAG_AREA_WIDTH * 2; // Similar condition for other marker
 
-          var mouseTimeUnix = pixelToTimestamp(x + DRAG_AREA_WIDTH / 2, // lets us drag on the marker
+          if (leftAnimationPosition >= mousePosition || mousePosition >= canvasWidth) return; // set animation drag info dialog location
+
+          dragTooltipPosition.current = pixelsToLeft ? mousePosition + pixelsToLeft : mousePosition; // change local time bounds according to either dragged marker
+
+          var mouseTimeUnix = pixelToTimestamp(mousePosition, // lets us drag on the marker
           centerTime, canvasWidth, secondsPerPx);
           setLocalAnimationEndTime(mouseTimeUnix);
+          setTooltipTime(moment__default["default"].unix(mouseTimeUnix));
+          return;
         }
-      }, [centerTime, leftMarkerDragging, localAnimationEndTime, localAnimationStartTime, rightMarkerDragging, secondsPerPx, canvasWidth]);
+
+        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) {
-        setNewRoundedTime(x, centerTime, canvasWidth, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
-      }, [canvasWidth, centerTime, dataEndTime, dataStartTime, onSetNewDate, secondsPerPx, timeStep]);
+        var unfliteredSelectedTimePx = timestampToPixel(unfilteredSelectedTime, centerTime, canvasWidth, secondsPerPx) + x;
+        setUnfilteredSelectedTime(pixelToTimestamp(unfliteredSelectedTimePx, centerTime, canvasWidth, secondsPerPx));
+        setNewRoundedTime(unfliteredSelectedTimePx, centerTime, canvasWidth, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
+      }, [canvasWidth, centerTime, dataEndTime, dataStartTime, onSetNewDate, secondsPerPx, setUnfilteredSelectedTime, timeStep, unfilteredSelectedTime]);
       React__namespace.useEffect(function () {
         var handleMouseMove = function handleMouseMove(event) {
+          if (event.movementX === 0) return;
+
           if (mouseDownInLegend) {
             setCenterTimeDragging(true);
             var dragDistanceTime = event.movementX * secondsPerPx;
             var newCenterTime = centerTime - dragDistanceTime;
             onSetCenterTime && onSetCenterTime(newCenterTime);
-          } else {
-            if (!pixelsToLeft) return;
-
-            if (leftMarkerDragging || rightMarkerDragging) {
-              onMouseTouchMoveActions(event.clientX - pixelsToLeft);
-            } else if (selectedTimeDragging) {
-              setSelectedTime(event.clientX - pixelsToLeft);
-            }
+          } else if (leftMarkerDragging || rightMarkerDragging || animationAreaDragging) {
+            onMouseTouchMoveActions(event.movementX);
+          } else if (selectedTimeDragging) {
+            setSelectedTime(event.movementX);
           }
         };
 
@@ -18262,10 +18549,14 @@
         return function () {
           document.removeEventListener('mousemove', handleMouseMove);
         };
-      }, [centerTime, secondsPerPx, onSetCenterTime, mouseDownInLegend, leftMarkerDragging, rightMarkerDragging, onMouseTouchMoveActions, selectedTimeDragging, setSelectedTime, pixelsToLeft]);
+      }, [animationAreaDragging, centerTime, leftMarkerDragging, mouseDownInLegend, onMouseTouchMoveActions, onSetCenterTime, rightMarkerDragging, secondsPerPx, selectedTimeDragging, setSelectedTime]);
       var theme = material.useTheme();
+      var startDraggingPosition = React__namespace.useRef(0);
 
       var onMouseDown = function onMouseDown(x, y, width) {
+        isClickOrDrag.current = 'click';
+        startDraggingPosition.current = x;
+
         var _a = __read([localAnimationStartTime, localAnimationEndTime, selectedTime].map(function (timestamp) {
           return timestampToPixel(timestamp, centerTime, width, secondsPerPx);
         }), 3),
@@ -18281,16 +18572,27 @@
         }
 
         if (animationStartTime && animationEndTime && onSetAnimationStartTime && onSetAnimationEndTime) {
-          // start dragging either marker
+          dragTooltipPosition.current = pixelsToLeft ? x + pixelsToLeft : x; // start dragging either marker
+
           if (isLeftAnimationIconArea(x, leftMarkerPx, DRAG_AREA_WIDTH) && !rightMarkerDragging) {
             setCursorStyle('grabbing');
             setLeftMarkerDragging(true);
+            setTooltipTime(moment__default["default"].utc(animationStartTime));
+            setDragTooltipOpen(true);
             return;
           }
 
           if (isRightAnimationIconArea(x, rightMarkerPx, DRAG_AREA_WIDTH) && !leftMarkerDragging) {
             setCursorStyle('grabbing');
             setRightMarkerDragging(true);
+            setTooltipTime(moment__default["default"].utc(animationEndTime));
+            setDragTooltipOpen(true);
+            return;
+          }
+
+          if (isInsideAnimationArea(x, leftMarkerPx, rightMarkerPx) && !animationAreaDragging) {
+            setCursorStyle('grabbing');
+            setAnimationAreaDragging(true);
             return;
           }
         } // clicking the timeslider
@@ -18299,18 +18601,36 @@
         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) {
-        // Dispatch changes when releasing mouse
-        if (leftMarkerDragging) {
-          onSetAnimationStartTime(moment__default["default"].utc(localAnimationStartTime * 1000).format(dateFormat));
-        } else if (rightMarkerDragging) {
-          onSetAnimationEndTime(moment__default["default"].utc(localAnimationEndTime * 1000).format(dateFormat));
-        } else if (!selectedTimeDragging && !centerTimeDragging) {
-          setSelectedTime(x);
+        if (isClickOrDrag.current === 'click') {
+          // we need to set the unfiltered time, so the timebox will update accordingly
+          setUnfilteredSelectedTime(pixelToTimestamp(x, centerTime, canvasWidth, secondsPerPx));
+          setNewRoundedTime(x, centerTime, canvasWidth, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
         }
+
+        isClickOrDrag.current = undefined;
       };
 
       var onMouseMove = function onMouseMove(x, y, event, width) {
+        if (isClickOrDrag.current === 'click') {
+          isClickOrDrag.current = 'drag';
+        }
+
         if (selectedTimeDragging || leftMarkerDragging || rightMarkerDragging) return;
 
         var _a = __read([localAnimationStartTime, localAnimationEndTime, selectedTime].map(function (timestamp) {
@@ -18324,18 +18644,41 @@
         var leftAnimationIconArea = isLeftAnimationIconArea(x, leftMarkerPx, DRAG_AREA_WIDTH);
         var rightAnimationIconArea = isRightAnimationIconArea(x, rightMarkerPx, DRAG_AREA_WIDTH);
         var selectedTimeArea = isSelectedTimeIconArea(x, selectedTimePx, DRAG_AREA_WIDTH);
+        var insideAnimationArea = isInsideAnimationArea(x, leftMarkerPx, rightMarkerPx);
         var hoveringLegendHandles = leftAnimationIconArea || rightAnimationIconArea || selectedTimeArea || mouseDownInLegend;
 
         if (hoveringLegendHandles) {
           setCursorStyle('ew-resize');
+        } else if (insideAnimationArea && !animationAreaDragging) {
+          setCursorStyle('grab');
+        } else if (insideAnimationArea && animationAreaDragging) {
+          setCursorStyle('grabbing');
         } else {
           setCursorStyle('auto');
         }
       };
 
-      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+      var dragTooltipPosition = React__namespace.useRef();
+      var popperRef = React__namespace.useRef(null);
+
+      var setTooltipPosition = function setTooltipPosition() {
+        var tooltipX = dragTooltipPosition.current;
+        var tooltipY = pixelsToTop && pixelsToTop - TIME_SLIDER_LEGEND_HEIGHT * 2.5;
+        return new DOMRect(tooltipX, tooltipY, 0, 0);
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
+        title: tooltipTime.format('HH:mm'),
+        open: dragTooltipOpen,
+        PopperProps: {
+          popperRef: popperRef,
+          anchorEl: {
+            getBoundingClientRect: setTooltipPosition
+          }
+        }
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "timeSliderLegend",
-        className: "timeSliderLegend",
+        className: "timeSliderLegend_" + mapId,
         sx: {
           height: TIME_SLIDER_LEGEND_HEIGHT + "px",
           borderRadius: '4.5px',
@@ -18357,9 +18700,13 @@
           setCanvasWidth(width);
           drawTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTime, scale, currentTime, localAnimationStartTime, localAnimationEndTime, dataStartTime, dataEndTime);
         }
-      }));
+      })));
     };
 
+    function convertStringTimeToUnix(time) {
+      return time ? moment__default["default"].utc(time).unix() : undefined;
+    }
+
     var TIME_SLIDER_LEGEND_HEIGHT = 24;
 
     /* *
@@ -18411,7 +18758,7 @@
      * */
     var onMouseMove = function onMouseMove(x, width, selectedTime, centerTime, secondsPerPx, mouseDownInTimeBox, isTimeBoxArea, setCursorStyle) {
       if (!selectedTime || mouseDownInTimeBox) return;
-      var selectedTimePx = timestampToPixel(selectedTime.unix(), centerTime, width, secondsPerPx);
+      var selectedTimePx = timestampToPixel(selectedTime, centerTime, width, secondsPerPx);
 
       if (isTimeBoxArea(x, selectedTimePx)) {
         setCursorStyle('grab');
@@ -18421,7 +18768,7 @@
     };
     var onMouseDown = function onMouseDown(x, width, selectedTime, centerTime, secondsPerPx, isTimeBoxArea, setCursorStyle, setMouseDownInTimeBox) {
       if (!selectedTime) return;
-      var selectedTimePx = timestampToPixel(selectedTime.unix(), centerTime, width, secondsPerPx);
+      var selectedTimePx = timestampToPixel(selectedTime, centerTime, width, secondsPerPx);
 
       if (isTimeBoxArea(x, selectedTimePx)) {
         setCursorStyle('grabbing');
@@ -18536,7 +18883,9 @@
           timeStep = _a.timeStep,
           dataStartTime = _a.dataStartTime,
           dataEndTime = _a.dataEndTime,
-          onSetNewDate = _a.onSetNewDate;
+          unfilteredSelectedTime = _a.unfilteredSelectedTime,
+          onSetNewDate = _a.onSetNewDate,
+          setUnfilteredSelectedTime = _a.setUnfilteredSelectedTime;
       var TIME_BOX_WIDTH = 140;
       var theme = material.useTheme();
 
@@ -18577,11 +18926,9 @@
       React__default["default"].useEffect(function () {
         var handleMouseMove = function handleMouseMove(event) {
           if (mouseDownInTimeBox) {
-            var elem = document.querySelector('.timeSliderTimeBox');
-            var rect = elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect(); // we need to subtract the left padding so event.x start within the canvas.
-
-            if (!rect) return;
-            setNewRoundedTime(event.clientX - rect['left'], centerTime, canvasWidth, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
+            var localSelectedTimePx = timestampToPixel(unfilteredSelectedTime, centerTime, canvasWidth, secondsPerPx) + event.movementX;
+            setUnfilteredSelectedTime(pixelToTimestamp(localSelectedTimePx, centerTime, canvasWidth, secondsPerPx));
+            setNewRoundedTime(localSelectedTimePx, centerTime, canvasWidth, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
           }
         };
 
@@ -18589,7 +18936,7 @@
         return function () {
           document.removeEventListener('mousemove', handleMouseMove);
         };
-      });
+      }, [canvasWidth, centerTime, dataEndTime, dataStartTime, mouseDownInTimeBox, onSetNewDate, secondsPerPx, setUnfilteredSelectedTime, timeStep, unfilteredSelectedTime]);
       return /*#__PURE__*/React__default["default"].createElement(system.Box, {
         "data-testid": "timeSliderTimeBox",
         className: "timeSliderTimeBox",
@@ -18610,11 +18957,14 @@
           onMouseDown(x, width, selectedTime, centerTime, secondsPerPx, isTimeBoxArea, setCursorStyle, setMouseDownInTimeBox);
         },
         onMouseUp: function onMouseUp(x) {
-          setNewRoundedTime(x, centerTime, canvasWidth, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
+          if (mouseDownInTimeBox) {
+            setUnfilteredSelectedTime(pixelToTimestamp(x, centerTime, canvasWidth, secondsPerPx));
+            setNewRoundedTime(x, centerTime, canvasWidth, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
+          }
         },
         onRenderCanvas: function onRenderCanvas(ctx, width, height) {
           setCanvasWidth(width);
-          renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, selectedTime.unix(), secondsPerPx, scale);
+          renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, selectedTime, secondsPerPx, scale);
         }
       }));
     };
@@ -18656,12 +19006,13 @@
     var defaultProps = {
       centerTime: moment__default["default"].utc().startOf('day').hours(12).unix(),
       secondsPerPx: 5,
-      selectedTime: moment__default["default"].utc().startOf('day').hours(12),
+      selectedTime: moment__default["default"].utc().startOf('day').hours(12).unix(),
       dataScaleToSecondsPerPx: defaultDataScaleToSecondsPerPx
     };
 
     var TimeSlider = function TimeSlider(_a) {
-      var buttons = _a.buttons,
+      var mapId = _a.mapId,
+          buttons = _a.buttons,
           timeBox = _a.timeBox,
           legend = _a.legend,
           _b = _a.mapIsActive,
@@ -18671,6 +19022,11 @@
           _d = _a.onToggleTimeSlider,
           onToggleTimeSlider = _d === void 0 ? function () {} : _d;
       useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider);
+
+      var _e = __read(React__namespace.useState(defaultProps.selectedTime), 2),
+          unfilteredSelectedTime = _e[0],
+          setUnfilteredSelectedTime = _e[1];
+
       var visibilityState = isVisible ? 'visible' : 'hidden';
       return isVisible ? /*#__PURE__*/React__namespace.createElement(material.Grid, {
         style: {
@@ -18695,7 +19051,8 @@
           zIndex: 99
         }
       }, timeBox || /*#__PURE__*/React__namespace.createElement(TimeSliderCurrentTimeBox, __assign({}, defaultProps, {
-        selectedTime: defaultProps.selectedTime
+        unfilteredSelectedTime: unfilteredSelectedTime,
+        setUnfilteredSelectedTime: setUnfilteredSelectedTime
       }))), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
       }), /*#__PURE__*/React__namespace.createElement(material.Grid, {
@@ -18703,8 +19060,10 @@
       }, buttons || /*#__PURE__*/React__namespace.createElement(TimeSliderButtons, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
       }, legend || /*#__PURE__*/React__namespace.createElement(TimeSliderLegend, __assign({}, defaultProps, {
-        selectedTime: defaultProps.selectedTime.unix(),
-        mapIsActive: mapIsActive
+        mapId: mapId,
+        mapIsActive: mapIsActive,
+        unfilteredSelectedTime: unfilteredSelectedTime,
+        setUnfilteredSelectedTime: setUnfilteredSelectedTime
       })), ' '), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
         sx: {
@@ -18838,12 +19197,6 @@
       var isTimestepAuto$1 = reactRedux.useSelector(function (store) {
         return isTimestepAuto(store, mapId);
       });
-      var activeLayerId = reactRedux.useSelector(function (store) {
-        return getActiveLayerId(store, mapId);
-      });
-      var activeLayerTimeDimension = reactRedux.useSelector(function (store) {
-        return getLayerTimeDimension(store, activeLayerId);
-      });
       var onToggleTimestepAuto = React__namespace.useCallback(function () {
         dispatch(mapActions$1.toggleTimestepAuto({
           mapId: mapId,
@@ -18863,9 +19216,7 @@
         timeStep: timeStep,
         onChangeTimeStep: onSetTimeStep,
         disabled: isAnimating$1,
-        isTimestepAuto: isTimestepAuto$1,
-        onToggleTimestepAuto: onToggleTimestepAuto,
-        timeDimension: activeLayerTimeDimension
+        onToggleTimestepAuto: onToggleTimestepAuto
       });
     };
 
@@ -18999,6 +19350,57 @@
       });
     };
 
+    /* *
+     * 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 AnimationLengthButtonConnect = function AnimationLengthButtonConnect(_a) {
+      var mapId = _a.mapId;
+      var dispatch = reactRedux.useDispatch();
+      var isAnimating$1 = reactRedux.useSelector(function (store) {
+        return isAnimating(store, mapId);
+      });
+      var animationStartTime = reactRedux.useSelector(function (store) {
+        return getAnimationStartTime(store, mapId);
+      });
+      var animationEndTime = reactRedux.useSelector(function (store) {
+        return getAnimationEndTime(store, mapId);
+      });
+      var currentDiffInMinutes = moment__default["default"](animationEndTime).diff(moment__default["default"](animationStartTime), 'minutes');
+      var currentLength = Object.values(AnimationLength).map(function (val) {
+        return Number(val);
+      }).find(function (val) {
+        return val >= currentDiffInMinutes;
+      });
+
+      var handlechangeAnimationLength = function handlechangeAnimationLength(length) {
+        var animationEndTime = moment__default["default"](animationStartTime).add(length, 'minutes').toISOString();
+        dispatch(mapActions$1.setAnimationEndTime({
+          mapId: mapId,
+          animationEndTime: animationEndTime
+        }));
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(AnimationLengthButton, {
+        disabled: isAnimating$1,
+        animationLength: currentLength || Number(AnimationLength.Hours24),
+        onChangeAnimationLength: handlechangeAnimationLength
+      });
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -19027,11 +19429,35 @@
     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,
           sourceId: sourceId
         }),
+        animationLengthBtn: /*#__PURE__*/React__namespace.createElement(AnimationLengthButtonConnect, {
+          mapId: mapId
+        }),
         autoUpdateBtn: /*#__PURE__*/React__namespace.createElement(AutoUpdateButtonConnect, {
           mapId: mapId
         }),
@@ -19043,7 +19469,11 @@
         }),
         timeScaleBtn: /*#__PURE__*/React__namespace.createElement(TimeScaleButtonConnect, {
           mapId: mapId
-        })
+        }),
+        timeStep: timeStep,
+        isTimestepAuto: isTimestepAuto$1,
+        onChangeTimeStep: onSetTimeStep,
+        timeDimension: activeLayerTimeDimension
       });
     };
 
@@ -19197,9 +19627,11 @@
         timeValue: getTime(getSynchronizationGroupStore(store), props.sourceId),
         animationStartTime: getAnimationStartTime(store, props.mapId),
         animationEndTime: getAnimationEndTime(store, props.mapId),
-        activeWindowId: getActiveWindowId(store)
+        activeWindowId: getActiveWindowId(store),
+        unfilteredSelectedTime: getTimeSliderUnfilteredSelectedTime(store, props.mapId)
       };
     }, {
+      setTimeSliderUnfilteredSelectedTime: mapActions$1.setTimeSliderUnfilteredSelectedTime,
       stopMapAnimation: mapActions$1.mapStopAnimation,
       setTime: genericActions.setTime,
       mapSetTimeSliderCenterTime: mapActions$1.setTimeSliderCenterTime,
@@ -19228,7 +19660,9 @@
           mapSetTimeSliderCenterTime = _a.mapSetTimeSliderCenterTime,
           mapSetTimeSliderSecondsPerPx = _a.mapSetTimeSliderSecondsPerPx,
           setAnimationStartTime = _a.setAnimationStartTime,
-          setAnimationEndTime = _a.setAnimationEndTime;
+          setAnimationEndTime = _a.setAnimationEndTime,
+          unfilteredSelectedTime = _a.unfilteredSelectedTime,
+          setTimeSliderUnfilteredSelectedTime = _a.setTimeSliderUnfilteredSelectedTime;
       var selectedTime = getTimeBounds(dimensions).selectedTime;
       var currentTime = moment__default["default"].utc().unix();
 
@@ -19238,6 +19672,7 @@
 
       var mapIsActive = mapId === activeWindowId;
       return /*#__PURE__*/React__namespace.createElement(TimeSliderLegend, {
+        mapId: mapId,
         centerTime: centerTime,
         secondsPerPx: secondsPerPx,
         dataScaleToSecondsPerPx: dataScaleToSecondsPerPx,
@@ -19251,6 +19686,13 @@
         animationEndTime: animationEndTime,
         timeStep: timeStep,
         mapIsActive: mapIsActive,
+        unfilteredSelectedTime: unfilteredSelectedTime || selectedTime,
+        setUnfilteredSelectedTime: function setUnfilteredSelectedTime(timeSliderUnfilteredSelectedTime) {
+          if (setTimeSliderUnfilteredSelectedTime) setTimeSliderUnfilteredSelectedTime({
+            timeSliderUnfilteredSelectedTime: timeSliderUnfilteredSelectedTime,
+            mapId: mapId
+          });
+        },
         onSetNewDate: function onSetNewDate(newDate) {
           if (isAnimating) {
             stopMapAnimation({
@@ -19330,9 +19772,11 @@
         secondsPerPx: getMapTimeSliderSecondsPerPx(store, props.mapId),
         scale: getMapTimeSliderScale(store, props.mapId),
         timeStep: getMapTimeStep(store, props.mapId),
-        isAnimating: isAnimating(store, props.mapId)
+        isAnimating: isAnimating(store, props.mapId),
+        unfilteredSelectedTime: getTimeSliderUnfilteredSelectedTime(store, props.mapId)
       };
     }, {
+      setTimeSliderUnfilteredSelectedTime: mapActions$1.setTimeSliderUnfilteredSelectedTime,
       stopMapAnimation: mapActions$1.mapStopAnimation,
       setTime: genericActions.setTime
     });
@@ -19348,8 +19792,10 @@
           timeStep = _a.timeStep,
           isAnimating = _a.isAnimating,
           stopMapAnimation = _a.stopMapAnimation,
+          unfilteredSelectedTime = _a.unfilteredSelectedTime,
+          setTimeSliderUnfilteredSelectedTime = _a.setTimeSliderUnfilteredSelectedTime,
           setTime = _a.setTime;
-      var selectedTime = getMomentTimeBounds(dimensions).selectedTime;
+      var selectedTime = getTimeBounds(dimensions).selectedTime;
 
       var _b = __read(getDataLimitsFromLayers(layers), 2),
           dataStartTime = _b[0],
@@ -19363,6 +19809,13 @@
         dataStartTime: dataStartTime,
         dataEndTime: dataEndTime,
         timeStep: timeStep,
+        unfilteredSelectedTime: unfilteredSelectedTime || selectedTime,
+        setUnfilteredSelectedTime: function setUnfilteredSelectedTime(timeSliderUnfilteredSelectedTime) {
+          if (setTimeSliderUnfilteredSelectedTime) setTimeSliderUnfilteredSelectedTime({
+            timeSliderUnfilteredSelectedTime: timeSliderUnfilteredSelectedTime,
+            mapId: mapId
+          });
+        },
         onSetNewDate: function onSetNewDate(newDate) {
           if (isAnimating) {
             stopMapAnimation({
@@ -19447,6 +19900,7 @@
       };
 
       return /*#__PURE__*/React__namespace.createElement(TimeSlider, {
+        mapId: mapId,
         buttons: /*#__PURE__*/React__namespace.createElement(TimeSliderButtonsConnect, {
           mapId: mapId,
           sourceId: sourceId
@@ -23529,12 +23983,11 @@
         var handleKeyPress = function handleKeyPress(event) {
           var target = event.target;
           var map = getWMJSMapById(mapId);
+          var key = event.key,
+              type = event.type;
+          keysPressedDown[key] = type === 'keydown';
 
           if (map && target.tagName !== 'INPUT' && mapIsActive) {
-            var key = event.key,
-                type = event.type;
-            keysPressedDown[key] = type === 'keydown';
-
             if (keysPressedDown['+']) {
               map.zoomIn(1);
             } else if (keysPressedDown['-']) {
@@ -23911,6 +24364,9 @@
           mapId: mapId,
           sourceId: sourceId
         }),
+        animationLengthBtn: /*#__PURE__*/React__default["default"].createElement(AnimationLengthButtonConnect, {
+          mapId: mapId
+        }),
         autoUpdateBtn: /*#__PURE__*/React__default["default"].createElement(AutoUpdateButtonConnect, {
           mapId: mapId
         }),
@@ -24352,6 +24808,398 @@
       });
     };
 
+    /* *
+     * 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 = 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 isMapPinVisible = reactRedux.useSelector(function (store) {
+        return getDisplayMapPin(store, 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 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);
+      }, [isDialogOpen, toggleMapPinIsVisible, isMapPinVisible]);
+      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.
@@ -24375,7 +25223,8 @@
         padding: '5px',
         zIndex: 50,
         color: theme.palette.common.black,
-        whiteSpace: 'nowrap'
+        whiteSpace: 'nowrap',
+        userSelect: 'none'
       };
     };
 
@@ -24420,8 +25269,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;
@@ -24489,6 +25340,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',
@@ -24511,6 +25364,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"
@@ -24880,7 +25736,8 @@
             var mapPreset = initialProps.mapPreset;
             return /*#__PURE__*/React__default["default"].createElement(ConfigurableMapConnect, __assign({}, mapPreset, {
               id: id,
-              "data-testid": "coreConfigurableMapConnect"
+              "data-testid": "coreConfigurableMapConnect",
+              displayGetFeatureInfoButtonInMap: true
             }));
           }
 
@@ -25594,21 +26451,29 @@
      * */
     var MapWarningProperties = function MapWarningProperties(_a) {
       var selectedFeatureProperties = _a.selectedFeatureProperties,
-          languageIndex = _a.languageIndex;
+          languageIndex = _a.languageIndex,
+          parentSize = _a.parentSize;
       var language = languageIndex || 0;
+      var newWidth = parentSize ? parentSize - 100 : 350;
       return /*#__PURE__*/React__default["default"].createElement("div", {
+        style: {
+          position: 'fixed',
+          width: newWidth + "px",
+          height: '1px',
+          display: 'flex',
+          justifyContent: 'center',
+          left: '50px'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         "data-testid": "map-warning-properties",
         style: {
-          width: '100%',
-          height: '15%',
-          marginTop: '30px',
-          marginLeft: '100px',
-          position: 'relative',
-          zIndex: 10000,
-          backgroundColor: '#CCCCCCC0',
+          marginTop: '50px',
+          width: '350px',
+          height: '190px',
           padding: '0px 20px 20px',
           overflow: 'auto',
-          fontSize: '11px'
+          fontSize: '11px',
+          backgroundColor: '#CCCCCCC0'
         }
       }, /*#__PURE__*/React__default["default"].createElement("h1", {
         "data-testid": "map-warning-properties-title"
@@ -25622,7 +26487,7 @@
         "data-testid": "map-warning-properties-row"
       }, "Sender: ", selectedFeatureProperties.languages[language].senderName), selectedFeatureProperties.identifier && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
-      }, "Identifier: ", selectedFeatureProperties.identifier));
+      }, "Identifier: ", selectedFeatureProperties.identifier)));
     };
 
     /* *