@opengeoweb/core 4.5.0 → 4.6.1

package/index.esm.js

@@ -7,7 +7,7 @@ import _, { debounce, isEqual, groupBy, throttle, range } from 'lodash';
 import { takeLatest, put, select, call, takeEvery, all, delay } from 'redux-saga/effects';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
 import { CustomTooltip, ToolButton, ToolContainerDraggable, IS_JEST, TooltipSelect, AlertIcon, useControlledTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, ManagerButton, CustomAccordion, EnableButton, ManagerDeleteButton, AlertBanner, calculateDialogSizeAndPosition, useIsMounted, CustomToggleButton, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
-import { Pause, Play, Add, Copy, Flag, DragHandle as DragHandle$1, Cached, CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Filter, Search, Clear, Close, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Visibility, Delete, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, Speed, FastForward, Clock, Now, Options, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
+import { Pause, Play, Add, Copy, Both, None, DragHandle as DragHandle$1, Cached, CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Filter, Search, Clear, Close, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Visibility, Delete, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, Speed, FastForward, Clock, Now, Animation, Options, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import { Paper, Box, Typography, IconButton, Grid, MenuItem, Button, Popper, FormControl, InputLabel, List, ListItem, ListItemText, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, LinearProgress, InputAdornment, Backdrop, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, styled, Slider, Menu, useTheme, Snackbar } from '@mui/material';
 import { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, clearImageCache, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
 import { ReactSortable } from 'react-sortablejs';
@@ -25,6 +25,8 @@ import proj4 from 'proj4';
 import * as turf from '@turf/turf';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
+import axios from 'axios';
+import { useDebounce } from '@opengeoweb/api';
 import { createStore } from '@redux-eggs/redux-toolkit';
 import { getSagaExtension } from '@redux-eggs/saga-extension';
 
@@ -398,6 +400,19 @@ var Scale;
   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) {
@@ -591,6 +606,7 @@ var getLastTimeStepForLayerId = function getLastTimeStepForLayerId(layerId) {
 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; },
@@ -1964,7 +1980,9 @@ var createUIDialogElement = function createUIDialogElement(_ref) {
     activeMapId: activeMapId,
     isOpen: setOpen,
     type: type,
-    source: source
+    source: source,
+    isLoading: false,
+    error: undefined
   };
 };
 var initialState$4 = {
@@ -2047,6 +2065,18 @@ var slice$4 = createSlice({
     setActiveWindowId: function setActiveWindowId(draft, action) {
       var activeWindowId = action.payload.activeWindowId;
       draft.activeWindowId = activeWindowId;
+    },
+    toggleIsLoadingDialog: function toggleIsLoadingDialog(draft, action) {
+      var _action$payload3 = action.payload,
+          isLoading = _action$payload3.isLoading,
+          type = _action$payload3.type;
+      draft.dialogs[type].isLoading = isLoading;
+    },
+    setErrorDialog: function setErrorDialog(draft, action) {
+      var _action$payload4 = action.payload,
+          error = _action$payload4.error,
+          type = _action$payload4.type;
+      draft.dialogs[type].error = error;
     }
   }
 });
@@ -2255,50 +2285,50 @@ var slice$3 = createSlice({
 
       draft.byId[mapId].animationDelay = animationDelay;
     },
-    setAnimationInterval: function setAnimationInterval(draft, action) {
+    layerMoveLayer: function layerMoveLayer(draft, action) {
       var _action$payload9 = action.payload,
-          mapId = _action$payload9.mapId,
-          interval = _action$payload9.interval;
+          oldIndex = _action$payload9.oldIndex,
+          newIndex = _action$payload9.newIndex,
+          mapId = _action$payload9.mapId;
 
       if (!draft.byId[mapId]) {
         return;
       }
 
-      draft.byId[mapId].timeStep = interval;
+      draft.byId[mapId].mapLayers = moveArrayElements(draft.byId[mapId].mapLayers, oldIndex, newIndex);
     },
-    layerMoveLayer: function layerMoveLayer(draft, action) {
+    setActiveLayerId: function setActiveLayerId(draft, action) {
       var _action$payload10 = action.payload,
-          oldIndex = _action$payload10.oldIndex,
-          newIndex = _action$payload10.newIndex,
-          mapId = _action$payload10.mapId;
+          mapId = _action$payload10.mapId,
+          layerId = _action$payload10.layerId;
 
       if (!draft.byId[mapId]) {
         return;
       }
 
-      draft.byId[mapId].mapLayers = moveArrayElements(draft.byId[mapId].mapLayers, oldIndex, newIndex);
+      draft.byId[mapId].activeLayerId = layerId;
     },
-    setActiveLayerId: function setActiveLayerId(draft, action) {
+    setTimeSliderCenterTime: function setTimeSliderCenterTime(draft, action) {
       var _action$payload11 = action.payload,
           mapId = _action$payload11.mapId,
-          layerId = _action$payload11.layerId;
+          timeSliderCenterTime = _action$payload11.timeSliderCenterTime;
 
       if (!draft.byId[mapId]) {
         return;
       }
 
-      draft.byId[mapId].activeLayerId = layerId;
+      draft.byId[mapId].timeSliderCenterTime = timeSliderCenterTime;
     },
-    setTimeSliderCenterTime: function setTimeSliderCenterTime(draft, action) {
+    setTimeSliderUnfilteredSelectedTime: function setTimeSliderUnfilteredSelectedTime(draft, action) {
       var _action$payload12 = action.payload,
           mapId = _action$payload12.mapId,
-          timeSliderCenterTime = _action$payload12.timeSliderCenterTime;
+          timeSliderUnfilteredSelectedTime = _action$payload12.timeSliderUnfilteredSelectedTime;
 
       if (!draft.byId[mapId]) {
         return;
       }
 
-      draft.byId[mapId].timeSliderCenterTime = timeSliderCenterTime;
+      draft.byId[mapId].timeSliderUnfilteredSelectedTime = timeSliderUnfilteredSelectedTime;
     },
     setTimeSliderSecondsPerPx: function setTimeSliderSecondsPerPx(draft, action) {
       var _action$payload13 = action.payload,
@@ -2424,21 +2454,10 @@ var slice$3 = createSlice({
 
       draft.byId[mapId].activeMapPresetId = presetId;
     },
-    setIsMapPresetLoading: function setIsMapPresetLoading(draft, action) {
+    setHasMapPresetChanges: function setHasMapPresetChanges(draft, action) {
       var _action$payload24 = action.payload,
           mapId = _action$payload24.mapId,
-          isLoading = _action$payload24.isLoading;
-
-      if (!draft.byId[mapId]) {
-        return;
-      }
-
-      draft.byId[mapId].isMapPresetLoading = isLoading;
-    },
-    setHasMapPresetChanges: function setHasMapPresetChanges(draft, action) {
-      var _action$payload25 = action.payload,
-          mapId = _action$payload25.mapId,
-          hasChanges = _action$payload25.hasChanges;
+          hasChanges = _action$payload24.hasChanges;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2446,21 +2465,10 @@ var slice$3 = createSlice({
 
       draft.byId[mapId].hasMapPresetChanges = hasChanges;
     },
-    setMapPresetError: function setMapPresetError(draft, action) {
-      var _action$payload26 = action.payload,
-          mapId = _action$payload26.mapId,
-          error = _action$payload26.error;
-
-      if (!draft.byId[mapId]) {
-        return;
-      }
-
-      draft.byId[mapId].mapPresetError = error;
-    },
     toggleDockedLayerManager: function toggleDockedLayerManager(draft, action) {
-      var _action$payload27 = action.payload,
-          mapId = _action$payload27.mapId,
-          openDockedLayerManager = _action$payload27.openDockedLayerManager;
+      var _action$payload25 = action.payload,
+          mapId = _action$payload25.mapId,
+          openDockedLayerManager = _action$payload25.openDockedLayerManager;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2473,9 +2481,9 @@ var slice$3 = createSlice({
   },
   extraReducers: function extraReducers(builder) {
     builder.addCase(addLayer$1, function (draft, action) {
-      var _action$payload28 = action.payload,
-          layerId = _action$payload28.layerId,
-          mapId = _action$payload28.mapId;
+      var _action$payload26 = action.payload,
+          layerId = _action$payload26.layerId,
+          mapId = _action$payload26.mapId;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2492,10 +2500,10 @@ var slice$3 = createSlice({
 
       draft.byId[mapId].mapLayers.unshift(layerId);
     }).addCase(addBaseLayer, function (draft, action) {
-      var _action$payload29 = action.payload,
-          layer = _action$payload29.layer,
-          layerId = _action$payload29.layerId,
-          mapId = _action$payload29.mapId;
+      var _action$payload27 = action.payload,
+          layer = _action$payload27.layer,
+          layerId = _action$payload27.layerId,
+          mapId = _action$payload27.mapId;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2545,9 +2553,9 @@ var slice$3 = createSlice({
         }
       }
     }).addCase(setBaseLayers$1, function (draft, action) {
-      var _action$payload30 = action.payload,
-          layers = _action$payload30.layers,
-          mapId = _action$payload30.mapId; // Split into base and overlayers
+      var _action$payload28 = action.payload,
+          layers = _action$payload28.layers,
+          mapId = _action$payload28.mapId; // Split into base and overlayers
 
       var baseLayers = [];
       var overLayers = [];
@@ -2574,9 +2582,9 @@ var slice$3 = createSlice({
         if (overLayerIds.length !== 0) draft.byId[mapId].overLayers = overLayerIds;
       }
     }).addCase(layerDelete$1, function (draft, action) {
-      var _action$payload31 = action.payload,
-          mapId = _action$payload31.mapId,
-          layerId = _action$payload31.layerId;
+      var _action$payload29 = action.payload,
+          mapId = _action$payload29.mapId,
+          layerId = _action$payload29.layerId;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2597,9 +2605,9 @@ var slice$3 = createSlice({
         draft.byId[mapId].activeLayerId = '';
       }
     }).addCase(baseLayerDelete, function (draft, action) {
-      var _action$payload32 = action.payload,
-          mapId = _action$payload32.mapId,
-          layerId = _action$payload32.layerId;
+      var _action$payload30 = action.payload,
+          mapId = _action$payload30.mapId,
+          layerId = _action$payload30.layerId;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2612,14 +2620,14 @@ var slice$3 = createSlice({
         return id !== layerId;
       });
     }).addCase(layerChangeDimension$1, function (draft, action) {
-      var _action$payload33 = action.payload,
-          layerId = _action$payload33.layerId,
-          dimension = _action$payload33.dimension;
+      var _action$payload31 = action.payload,
+          layerId = _action$payload31.layerId,
+          dimension = _action$payload31.dimension;
       produceDraftStateSetMapDimensionFromLayerChangeDimension(draft, layerId, dimension);
     }).addCase(setTimeSync, function (draft, action) {
-      var _action$payload34 = action.payload,
-          targetsFromAction = _action$payload34.targets,
-          source = _action$payload34.source;
+      var _action$payload32 = action.payload,
+          targetsFromAction = _action$payload32.targets,
+          source = _action$payload32.source;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
 
       var targets = [{
@@ -2643,9 +2651,9 @@ var slice$3 = createSlice({
         }
       });
     }).addCase(setBboxSync, function (draft, action) {
-      var _action$payload35 = action.payload,
-          targetsFromAction = _action$payload35.targets,
-          source = _action$payload35.source;
+      var _action$payload33 = action.payload,
+          targetsFromAction = _action$payload33.targets,
+          source = _action$payload33.source;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
 
       var targets = [{
@@ -2676,9 +2684,9 @@ var slice$3 = createSlice({
        * These targets can be used as payloads in new Layer actions.
        * These actions are here handled via the layer reducer, as it is the same logic
        */
-      var _action$payload36 = action.payload,
-          targets = _action$payload36.targets,
-          source = _action$payload36.source;
+      var _action$payload34 = action.payload,
+          targets = _action$payload34.targets,
+          source = _action$payload34.source;
       return targets.reduce(function (prevState, target) {
         var action = {
           payload: target,
@@ -2694,9 +2702,9 @@ var slice$3 = createSlice({
       var mapAction = mapActions$1.mapUpdateAllMapDimensions(mapDimensions);
       return reducer$3(draft, mapAction);
     }).addCase(mapChangeDimension, function (draft, action) {
-      var _action$payload37 = action.payload,
-          mapId = _action$payload37.mapId,
-          dimensionFromAction = _action$payload37.dimension;
+      var _action$payload35 = action.payload,
+          mapId = _action$payload35.mapId,
+          dimensionFromAction = _action$payload35.dimension;
       produceDraftStateSetWebMapDimension(draft, mapId, dimensionFromAction, true);
     }).addCase(setMapPreset, function (draft, action) {
       var mapId = action.payload.mapId;
@@ -2719,9 +2727,9 @@ var slice$3 = createSlice({
       draft.byId[mapId].timeStep = defaultTimeStep;
       draft.byId[mapId].animationDelay = defaultAnimationDelayAtStart;
     }).addCase(uiActions.registerDialog, function (draft, action) {
-      var _action$payload38 = action.payload,
-          mapId = _action$payload38.mapId,
-          type = _action$payload38.type;
+      var _action$payload36 = action.payload,
+          mapId = _action$payload36.mapId,
+          type = _action$payload36.type;
 
       if (!draft.byId[mapId]) {
         return;
@@ -3150,6 +3158,12 @@ var getActiveWindowId = function getActiveWindowId(store) {
 
   return (_a = store === null || store === void 0 ? void 0 : store.ui) === null || _a === void 0 ? void 0 : _a.activeWindowId;
 };
+var getDialogIsLoading = createSelector(getDialogDetailsByType, function (details) {
+  return details && details.isLoading || false;
+});
+var getDialogError = createSelector(getDialogDetailsByType, function (details) {
+  return details && details.error || '';
+});
 
 var selectors$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -3160,7 +3174,9 @@ var selectors$1 = /*#__PURE__*/Object.freeze({
   getDialogOrder: getDialogOrder,
   getDialogIsOrderedOnTop: getDialogIsOrderedOnTop,
   getDialogSource: getDialogSource,
-  getActiveWindowId: getActiveWindowId
+  getActiveWindowId: getActiveWindowId,
+  getDialogIsLoading: getDialogIsLoading,
+  getDialogError: getDialogError
 });
 
 /* *
@@ -3969,6 +3985,19 @@ var getMapAnimationDelay = createSelector(getMapById, function (store) {
 var getMapTimeSliderCenterTime = createSelector(getMapById, function (store) {
   return store ? store.timeSliderCenterTime : moment().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 = createSelector(getMapById, function (store) {
+  return store ? store.timeSliderUnfilteredSelectedTime : null;
+});
 /**
  * Returns the number of seconds per pixel on the time slider
  *
@@ -4275,18 +4304,6 @@ var getMapPreset = createSelector(getMapLayers, getMapBaseLayers, getMapOverLaye
     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 = createSelector(getMapById, function (store) {
-  return store && store.isMapPresetLoading ? store.isMapPresetLoading : false;
-});
 /**
  * Returns the has changes state of the map preset
  *
@@ -4299,18 +4316,6 @@ var getIsMapPresetLoading = createSelector(getMapById, function (store) {
 var getHasMapPresetChanges = 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 = createSelector(getMapById, function (store) {
-  return store === null || store === void 0 ? void 0 : store.mapPresetError;
-});
 /**
  * Returns whether the docked layer manager is open
  *
@@ -4353,6 +4358,7 @@ var selectors = /*#__PURE__*/Object.freeze({
   getMapTimeStep: getMapTimeStep,
   getMapAnimationDelay: getMapAnimationDelay,
   getMapTimeSliderCenterTime: getMapTimeSliderCenterTime,
+  getTimeSliderUnfilteredSelectedTime: getTimeSliderUnfilteredSelectedTime,
   getMapTimeSliderSecondsPerPx: getMapTimeSliderSecondsPerPx,
   getMapTimeSliderDataScaleToSecondsPerPx: getMapTimeSliderDataScaleToSecondsPerPx,
   isTimestepAuto: isTimestepAuto,
@@ -4372,9 +4378,7 @@ var selectors = /*#__PURE__*/Object.freeze({
   getActiveMapPresetId: getActiveMapPresetId,
   getLegendId: getLegendId,
   getMapPreset: getMapPreset,
-  getIsMapPresetLoading: getIsMapPresetLoading,
   getHasMapPresetChanges: getHasMapPresetChanges,
-  getMapPresetError: getMapPresetError,
   getIsDockedLayerManagerOpen: getIsDockedLayerManagerOpen
 });
 
@@ -4420,17 +4424,54 @@ var FilterType;
   FilterType["Group"] = "groups";
 })(FilterType || (FilterType = {}));
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var getFilterId = function getFilterId(filterType, filterName) {
+  return "".concat(filterType, "-").concat(filterName);
+};
+var produceFilters = function produceFilters(filterNames, filterType, draft, layerSelectFilterAdapter) {
+  filterNames.forEach(function (filterName) {
+    var id = getFilterId(filterType, filterName);
+
+    if (!draft.filters.filters.entities[id]) {
+      // If this filter doesn't exit yet, add it
+      layerSelectFilterAdapter.addOne(draft.filters.filters, {
+        id: id,
+        name: filterName,
+        amount: 1,
+        amountVisible: 1,
+        checked: true,
+        type: filterType
+      });
+    } else {
+      // If it exists already, up the amounts
+      draft.filters.filters.entities[id].amount += 1;
+      draft.filters.filters.entities[id].amountVisible += 1;
+    }
+  });
+};
+
+var layerSelectFilterAdapter = createEntityAdapter();
+var layerSelectActiveServicesAdapter = createEntityAdapter();
 var initialState$1 = {
   filters: {
     searchFilter: '',
-    activeServices: {
-      byId: {},
-      allIds: []
-    },
-    filters: {
-      byId: {},
-      allIds: []
-    }
+    activeServices: layerSelectActiveServicesAdapter.getInitialState(),
+    filters: layerSelectFilterAdapter.getInitialState()
   },
   allServicesEnabled: true,
   activeLayerInfo: {
@@ -4454,6 +4495,8 @@ var slice$1 = createSlice({
       draft.allServicesEnabled = allServicesEnabled;
     },
     addFiltersAndActiveServices: function addFiltersAndActiveServices(draft, action) {
+      var _a, _b;
+
       var _action$payload = action.payload,
           serviceId = _action$payload.serviceId,
           serviceName = _action$payload.serviceName,
@@ -4461,59 +4504,59 @@ var slice$1 = createSlice({
           _abstract = _action$payload["abstract"],
           keywords = _action$payload.keywords,
           scope = _action$payload.scope,
-          groups = _action$payload.groups;
-
-      if (!draft.filters.activeServices.byId[serviceId]) {
-        draft.filters.activeServices.byId[serviceId] = {};
-
-        var addFilters = function addFilters(filterNames, filterType) {
-          filterNames.forEach(function (filterName) {
-            var id = "".concat(filterType, "-").concat(filterName);
-
-            if (!draft.filters.filters.byId[id]) {
-              draft.filters.filters.byId[id] = {
-                id: id,
-                name: filterName,
-                amount: 1,
-                amountVisible: 1,
-                checked: true,
-                type: filterType
-              };
-              draft.filters.filters.allIds.push(id);
-            } else {
-              draft.filters.filters.byId[id].amount += 1;
-              draft.filters.filters.byId[id].amountVisible += 1;
-            }
-          });
+          groups = _action$payload.groups,
+          isLoading = _action$payload.isLoading;
+
+      if (isLoading) {
+        // If service is still loading, add without filters
+        draft.filters.activeServices.entities[serviceId] = {
+          serviceId: serviceId,
+          enabled: draft.allServicesEnabled,
+          filterIds: [],
+          scope: scope,
+          serviceName: serviceName,
+          serviceUrl: serviceUrl,
+          "abstract": _abstract,
+          isLoading: isLoading
         };
+      }
+
+      if (!isLoading) {
+        // If service is done loading, add with filters
+        if (!((_b = (_a = draft.filters.activeServices.entities[serviceId]) === null || _a === void 0 ? void 0 : _a.filterIds) === null || _b === void 0 ? void 0 : _b.length)) {
+          // If the service has no filters yet, add them
+          produceFilters(groups, FilterType.Group, draft, layerSelectFilterAdapter);
+          produceFilters(keywords, FilterType.Keyword, draft, layerSelectFilterAdapter);
+        }
 
-        addFilters(groups, FilterType.Group);
-        addFilters(keywords, FilterType.Keyword);
+        var filterIds = groups.map(function (group) {
+          return getFilterId(FilterType.Group, group);
+        }).concat(keywords.map(function (keyword) {
+          return getFilterId(FilterType.Keyword, keyword);
+        }));
+        draft.filters.activeServices.entities[serviceId] = {
+          serviceId: serviceId,
+          enabled: draft.allServicesEnabled,
+          filterIds: filterIds,
+          scope: scope,
+          serviceName: serviceName,
+          serviceUrl: serviceUrl,
+          "abstract": _abstract,
+          isLoading: isLoading
+        };
       }
 
-      var filterIds = groups.map(function (group) {
-        return "".concat(FilterType.Group, "-").concat(group);
-      }).concat(keywords.map(function (keyword) {
-        return "".concat(FilterType.Keyword, "-").concat(keyword);
-      }));
-      draft.filters.activeServices.byId[serviceId] = {
-        serviceId: serviceId,
-        enabled: draft.allServicesEnabled,
-        filterIds: filterIds,
-        scope: scope,
-        serviceName: serviceName,
-        serviceUrl: serviceUrl,
-        "abstract": _abstract
-      };
-      if (!draft.filters.activeServices.allIds.includes(serviceId)) draft.filters.activeServices.allIds.push(serviceId);
+      if (!draft.filters.activeServices.ids.includes(serviceId)) {
+        draft.filters.activeServices.ids.push(serviceId);
+      }
     },
     layerSelectRemoveService: function layerSelectRemoveService(draft, action) {
       var serviceId = action.payload.serviceId; // 1. Find a service that is to be removed
 
-      var foundService = draft.filters.activeServices.byId[serviceId]; // 2. Go through all keywords for removed service, and decrement the amount of all found keywords
+      var foundService = draft.filters.activeServices.entities[serviceId]; // 2. Go through all keywords for removed service, and decrement the amount of all found keywords
 
       foundService.filterIds.forEach(function (filterId) {
-        var foundObject = draft.filters.filters.byId[filterId];
+        var foundObject = draft.filters.filters.entities[filterId];
 
         if (foundObject && foundObject.amount) {
           foundObject.amount -= 1;
@@ -4521,23 +4564,20 @@ var slice$1 = createSlice({
         }
 
         if (foundObject && foundObject.amount === 0) {
-          delete draft.filters.filters.byId[filterId];
-          draft.filters.filters.allIds = draft.filters.filters.allIds.filter(function (serviceId) {
+          delete draft.filters.filters.entities[filterId];
+          draft.filters.filters.ids = draft.filters.filters.ids.filter(function (serviceId) {
             return serviceId !== filterId;
           });
         }
       }); // Finally remove object from activeServices, so if the service is added again later on, new object and keywords will be re-added
 
-      delete draft.filters.activeServices.byId[serviceId];
-      draft.filters.activeServices.allIds = draft.filters.activeServices.allIds.filter(function (id) {
-        return id !== serviceId;
-      });
+      layerSelectActiveServicesAdapter.removeOne(draft.filters.activeServices, serviceId);
     },
     enableActiveService: function enableActiveService(draft, action) {
       var _action$payload2 = action.payload,
           serviceId = _action$payload2.serviceId,
           keywords = _action$payload2.filters;
-      draft.filters.activeServices.byId[serviceId].enabled = true;
+      draft.filters.activeServices.entities[serviceId].enabled = true;
 
       var _iterator = _createForOfIteratorHelper(keywords),
           _step;
@@ -4545,7 +4585,7 @@ var slice$1 = createSlice({
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var keyword = _step.value;
-          draft.filters.filters.byId[keyword].amountVisible += 1;
+          draft.filters.filters.entities[keyword].amountVisible += 1;
         }
       } catch (err) {
         _iterator.e(err);
@@ -4557,7 +4597,7 @@ var slice$1 = createSlice({
       var _action$payload3 = action.payload,
           serviceId = _action$payload3.serviceId,
           keywords = _action$payload3.filters;
-      draft.filters.activeServices.byId[serviceId].enabled = false;
+      draft.filters.activeServices.entities[serviceId].enabled = false;
 
       var _iterator2 = _createForOfIteratorHelper(keywords),
           _step2;
@@ -4565,7 +4605,7 @@ var slice$1 = createSlice({
       try {
         for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
           var keyword = _step2.value;
-          draft.filters.filters.byId[keyword].amountVisible -= 1;
+          draft.filters.filters.entities[keyword].amountVisible -= 1;
         }
       } catch (err) {
         _iterator2.e(err);
@@ -4576,15 +4616,15 @@ var slice$1 = createSlice({
     toggleFilter: function toggleFilter(draft, action) {
       var filterIds = action.payload.filterIds;
       filterIds.forEach(function (filterId) {
-        draft.filters.filters.byId[filterId].checked = !draft.filters.filters.byId[filterId].checked;
+        draft.filters.filters.entities[filterId].checked = !draft.filters.filters.entities[filterId].checked;
       });
     },
     enableOnlyOneFilter: function enableOnlyOneFilter(draft, action) {
       var filterId = action.payload.filterId;
-      draft.filters.filters.allIds.forEach(function (filterId) {
-        draft.filters.filters.byId[filterId].checked = false;
+      draft.filters.filters.ids.forEach(function (filterId) {
+        draft.filters.filters.entities[filterId].checked = false;
       });
-      draft.filters.filters.byId[filterId].checked = true;
+      draft.filters.filters.entities[filterId].checked = true;
     },
     setActiveLayerInfo: function setActiveLayerInfo(draft, action) {
       var layer = action.payload.layer;
@@ -4680,21 +4720,32 @@ var layerSelectStore = function layerSelectStore(store) {
 
 
 var getSearchFilter = createSelector(layerSelectStore, function (store) {
-  return store ? store.filters.searchFilter : '';
+  var _a;
+
+  return ((_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.searchFilter) || '';
 });
 /**
  * Returns active services array
  *
  * Example getActiveServices(store);
  * @param {object} store store: object - store object
- * @returns {object} returnType: object of active services
+ * @returns {ActiveServiceObjectEntities} returnType: ActiveServiceObjectEntitiesobject of active services
  */
+// cast to usable type - selectEntities returns Dictionary<ActiveServiceObject> which is not usable inside of the code
 
-var getActiveServices = createSelector(layerSelectStore, function (store) {
-  var _a;
+var getActiveServices = function getActiveServices(store) {
+  return getActiveServicesDictionary(store);
+};
 
-  return store ? (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.byId : {};
-}, selectorMemoizationOptions);
+var _layerSelectActiveSer = layerSelectActiveServicesAdapter.getSelectors(function (store) {
+  var _a, _b;
+
+  return ((_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.activeServices) || {
+    entities: {},
+    ids: []
+  };
+}),
+    getActiveServicesDictionary = _layerSelectActiveSer.selectEntities;
 /**
  * Returns active services by id
  *
@@ -4704,10 +4755,11 @@ var getActiveServices = createSelector(layerSelectStore, function (store) {
  * @returns {object} returnType: object of active service
  */
 
+
 var getActiveServiceById = function getActiveServiceById(store, serviceId) {
-  var _a, _b;
+  var _a, _b, _c;
 
-  var enabledServices = ((_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.activeServices.byId[serviceId]) || {};
+  var enabledServices = ((_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.activeServices) === null || _c === void 0 ? void 0 : _c.entities[serviceId]) || {};
   return enabledServices;
 };
 /**
@@ -4721,10 +4773,10 @@ var getActiveServiceById = function getActiveServiceById(store, serviceId) {
 var getEnabledServiceIds = createSelector(layerSelectStore, function (store) {
   var _a, _b;
 
-  var enabledServices = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.allIds.filter(function (serviceId) {
-    var _a;
+  var enabledServices = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.ids.filter(function (serviceId) {
+    var _a, _b, _c;
 
-    return (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.byId[serviceId].enabled;
+    return (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices) === null || _b === void 0 ? void 0 : _b.entities[serviceId]) === null || _c === void 0 ? void 0 : _c.enabled;
   })) !== null && _b !== void 0 ? _b : [];
   return enabledServices;
 }, selectorMemoizationOptions);
@@ -4737,17 +4789,17 @@ var getEnabledServiceIds = createSelector(layerSelectStore, function (store) {
  */
 
 var getCheckedFilterIds = createSelector(layerSelectStore, function (store) {
-  var _a, _b;
+  var _a, _b, _c;
 
-  var checkedFilters = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters.allIds.filter(function (filterId) {
-    var _a, _b;
+  var checkedFilters = (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.ids.filter(function (filterId) {
+    var _a, _b, _c;
 
-    return (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters.byId[filterId]) === null || _b === void 0 ? void 0 : _b.checked;
-  })) !== null && _b !== void 0 ? _b : [];
+    return (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.entities[filterId]) === null || _c === void 0 ? void 0 : _c.checked;
+  })) !== null && _c !== void 0 ? _c : [];
   return checkedFilters.map(function (filterId) {
-    var _a;
+    var _a, _b, _c;
 
-    return (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters.byId[filterId].id;
+    return (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.entities[filterId]) === null || _c === void 0 ? void 0 : _c.id;
   });
 }, selectorMemoizationOptions);
 /**
@@ -4757,12 +4809,21 @@ var getCheckedFilterIds = createSelector(layerSelectStore, function (store) {
  * @param {object} store store: object - store object
  * @returns {array} returnType: array of all keyword ids
  */
+// cast to usable type - selectIds returns EntityId[] which is not usable inside of the code
 
-var getAllFilterIds = createSelector(layerSelectStore, function (store) {
+var getAllFilterIds = function getAllFilterIds(store) {
+  return getAllFilterIdsEntity(store);
+};
+
+var _layerSelectFilterAda = layerSelectFilterAdapter.getSelectors(function (store) {
   var _a, _b;
 
-  return (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters.allIds) !== null && _b !== void 0 ? _b : [];
-}, selectorMemoizationOptions);
+  return ((_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.filters) || {
+    entities: {},
+    ids: []
+  };
+}),
+    getAllFilterIdsEntity = _layerSelectFilterAda.selectIds;
 /**
  * Returns all filters
  *
@@ -4771,40 +4832,43 @@ var getAllFilterIds = createSelector(layerSelectStore, function (store) {
  * @returns {array} returnType: array of all filters
  */
 
-var getAllFilters = createSelector(layerSelectStore, function (store) {
-  var filters = store === null || store === void 0 ? void 0 : store.filters.filters.byId;
-
-  if (filters) {
-    return Object.values(filters);
-  }
 
-  return [];
-});
-/**
- * Returns if all keywords are checked
- *
- * Example isAllKeywordsChecked(store);
- * @param {object} store store: object - store object
- * @returns {array} returnType: boolean if all keywords are checked
- */
+var _layerSelectFilterAda2 = layerSelectFilterAdapter.getSelectors(function (store) {
+  var _a, _b;
 
+  return ((_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.filters) || {
+    entities: {},
+    ids: []
+  };
+}),
+    getAllFilters = _layerSelectFilterAda2.selectAll;
 var isAllFiltersChecked = createSelector(layerSelectStore, function (store) {
   var _a, _b;
 
-  return (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.allIds.every(function (filterId) {
+  return (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.ids.every(function (filterId) {
     var _a, _b, _c;
 
-    return (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.byId[filterId]) === null || _c === void 0 ? void 0 : _c.checked;
+    return (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.entities[filterId]) === null || _c === void 0 ? void 0 : _c.checked;
   });
 });
 /**
- * Returns the active layer info
+ * Gets a KeywordObject by its id
  *
- * Example getActiveLayerInfo(store);
- * @param {object} store store: object - store object
- * @returns {object} returnType: ActiveLayerObject
+ * Example: keywordObject = getKeywordObjectById(store, 'keywordId')
+ * @param {object} store object from which the keyword state will be extracted
+ * @param {string} filterId Id of the keyword
+ * @returns {object} object containing keyword information (id, amount, amountVisible, checked)
  */
 
+var _layerSelectFilterAda3 = layerSelectFilterAdapter.getSelectors(function (store) {
+  var _a, _b;
+
+  return ((_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.filters) || {
+    entities: {},
+    ids: []
+  };
+});
+    _layerSelectFilterAda3.selectById;
 var getActiveLayerInfo = createSelector(layerSelectStore, function (store) {
   return store === null || store === void 0 ? void 0 : store.activeLayerInfo;
 });
@@ -8149,9 +8213,9 @@ function setMapPresetSaga(_ref6) {
           }
 
           _context8.next = 42;
-          return put(mapActions$1.setAnimationInterval({
+          return put(mapActions$1.setTimeStep({
             mapId: mapId,
-            interval: interval
+            timeStep: interval
           }));
 
         case 42:
@@ -8481,7 +8545,8 @@ function newServiceAddedSaga(capturedAction) {
             keywords: keywords,
             scope: scope,
             groups: groups,
-            "abstract": _abstract
+            "abstract": _abstract,
+            isLoading: false
           }));
 
         case 8:
@@ -8606,7 +8671,7 @@ function layerSelectRemoveServiceSaga(capturedAction) {
           results = _context3.sent;
           services = results;
           servicesEnabled = Object.values(services).find(function (service) {
-            return service.enabled;
+            return service === null || service === void 0 ? void 0 : service.enabled;
           });
 
           if (!(servicesEnabled === undefined)) {
@@ -8622,7 +8687,7 @@ function layerSelectRemoveServiceSaga(capturedAction) {
 
             return put(layerSelectActions.enableActiveService({
               serviceId: serviceId,
-              filters: service.filterIds
+              filters: service === null || service === void 0 ? void 0 : service.filterIds
             }));
           }));
 
@@ -9379,7 +9444,7 @@ var RenderLayers = function RenderLayers(_ref) {
   }));
 };
 
-var marks$2 = [{
+var marks$3 = [{
   value: 0,
   label: '0 %'
 }, {
@@ -9517,7 +9582,7 @@ var OpacitySelect = function OpacitySelect(_ref) {
     step: 0.01,
     max: 1,
     min: 0,
-    marks: marks$2,
+    marks: marks$3,
     onChange: function onChange(event, newValue) {
       event.stopPropagation();
       onLayerChangeOpacity(newValue);
@@ -9695,7 +9760,9 @@ var ActivateLayer = function ActivateLayer(_ref) {
   return /*#__PURE__*/React.createElement(ManagerButton, {
     tooltipTitle: tooltipTitle,
     onClick: onClick,
-    icon: /*#__PURE__*/React.createElement(Flag, {
+    icon: isActive ? /*#__PURE__*/React.createElement(Both, {
+      sx: iconStyle
+    }) : /*#__PURE__*/React.createElement(None, {
       sx: iconStyle
     }),
     testId: id,
@@ -11767,6 +11834,9 @@ var HeaderOptions = function HeaderOptions(_ref) {
     onClick: function onClick() {
       return onChangeSize(sizeSmall);
     },
+    onTouchEnd: function onTouchEnd() {
+      return onChangeSize(sizeSmall);
+    },
     sx: iconStyle,
     className: "collapseSmall-btn"
   }, /*#__PURE__*/React.createElement(CollapseSmall, null))), /*#__PURE__*/React.createElement(CustomTooltip, {
@@ -11777,6 +11847,9 @@ var HeaderOptions = function HeaderOptions(_ref) {
     onClick: function onClick() {
       return onChangeSize(sizeMedium);
     },
+    onTouchEnd: function onTouchEnd() {
+      return onChangeSize(sizeMedium);
+    },
     sx: iconStyle,
     className: "collapseMedium-btn"
   }, /*#__PURE__*/React.createElement(CollapseMedium, null))), /*#__PURE__*/React.createElement(CustomTooltip, {
@@ -11787,6 +11860,9 @@ var HeaderOptions = function HeaderOptions(_ref) {
     onClick: function onClick() {
       return onChangeSize(sizeLarge);
     },
+    onTouchEnd: function onTouchEnd() {
+      return onChangeSize(sizeLarge);
+    },
     sx: iconStyle,
     className: "collapseLarge-btn"
   }, /*#__PURE__*/React.createElement(CollapseLarge, null))), /*#__PURE__*/React.createElement(CustomTooltip, {
@@ -11798,6 +11874,9 @@ var HeaderOptions = function HeaderOptions(_ref) {
     sx: iconStyle,
     onClick: function onClick() {
       return onClickDockButton();
+    },
+    onTouchEnd: function onTouchEnd() {
+      return onClickDockButton();
     }
   }, isDockedLayerManager ? /*#__PURE__*/React.createElement(CollapseWindow, {
     "data-testid": "dockedLayerManager-collapse"
@@ -11914,7 +11993,11 @@ var LayerManager = function LayerManager(_ref) {
         setSize(dragSize);
       }
     }
-  }, /*#__PURE__*/React.createElement(Box, null, isLoading && /*#__PURE__*/React.createElement(LinearProgress, {
+  }, /*#__PURE__*/React.createElement(Box, {
+    onKeyDown: function onKeyDown(event) {
+      event.stopPropagation();
+    }
+  }, isLoading && /*#__PURE__*/React.createElement(LinearProgress, {
     "data-testid": "loading-bar",
     color: "secondary",
     sx: {
@@ -12021,12 +12104,20 @@ var useSetupDialog = function useSetupDialog(dialogType) {
   var isDialogOpen = useSelector(function (store) {
     return getisDialogOpen(store, dialogType);
   });
+  var uiIsLoading = useSelector(function (store) {
+    return getDialogIsLoading(store, dialogType);
+  });
+  var uiError = useSelector(function (store) {
+    return getDialogError(store, dialogType);
+  });
   return {
     setDialogOrder: setDialogOrder,
     dialogOrder: dialogOrder,
     onCloseDialog: onCloseDialog,
     uiSource: uiSource,
-    isDialogOpen: isDialogOpen
+    isDialogOpen: isDialogOpen,
+    uiIsLoading: uiIsLoading,
+    uiError: uiError
   };
 };
 
@@ -12043,18 +12134,36 @@ var useFetchServices = function useFetchServices(dialogType) {
   var serviceSetLayers = React.useCallback(function (payload) {
     dispatch(serviceActions.serviceSetLayers(payload));
   }, [dispatch]);
+  var addFiltersAndActiveServices = React.useCallback(function (payload) {
+    dispatch(layerSelectActions.addFiltersAndActiveServices(payload));
+  }, [dispatch]);
   React.useEffect(function () {
     if (isOpenInStore && preloadedServices && preloadedServices.length > 0) {
       mergePresetsAndUserAddedServices(preloadedServices, getUserAddedServices()).forEach(function (service) {
+        var wmService = WMGetServiceFromStore(service.url);
+        var scope = service.scope ? service.scope : 'system';
+
+        if (isMounted.current) {
+          addFiltersAndActiveServices({
+            serviceId: wmService.id,
+            serviceName: service.name,
+            serviceUrl: service.url,
+            keywords: [],
+            scope: scope,
+            groups: [],
+            "abstract": service["abstract"] || wmService["abstract"],
+            isLoading: true
+          });
+        }
+
         getLayersFlattenedFromService(service.url).then(function (layers) {
           if (isMounted.current) {
-            var wmService = WMGetServiceFromStore(service.url);
             serviceSetLayers({
               id: wmService.id,
               name: service.name,
               serviceUrl: service.url,
               layers: layers,
-              scope: service.scope ? service.scope : 'system',
+              scope: scope,
               // first try to load the user abstract, otherwise the service abstract
               "abstract": service["abstract"] || wmService["abstract"]
             });
@@ -12063,9 +12172,8 @@ var useFetchServices = function useFetchServices(dialogType) {
           return null;
         });
       });
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [isOpenInStore, preloadedServices, serviceSetLayers]);
+    }
+  }, [addFiltersAndActiveServices, isMounted, isOpenInStore, preloadedServices, serviceSetLayers]);
 };
 var mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices(presets, userAddedServices) {
   return Object.values(Object.assign(Object.assign({}, presets.reduce(function (byUrl, preset) {
@@ -12115,19 +12223,15 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
   var mapId = useSelector(function (store) {
     return getDialogMapId(store, dialogType);
   });
-  var isMapPresetLoading = useSelector(function (store) {
-    return getIsMapPresetLoading(store, mapId);
-  });
-  var mapPresetError = useSelector(function (store) {
-    return getMapPresetError(store, mapId);
-  });
 
   var _useSetupDialog = useSetupDialog(dialogType),
       dialogOrder = _useSetupDialog.dialogOrder,
       setDialogOrder = _useSetupDialog.setDialogOrder,
       onCloseDialog = _useSetupDialog.onCloseDialog,
       isDialogOpen = _useSetupDialog.isDialogOpen,
-      uiSource = _useSetupDialog.uiSource;
+      uiSource = _useSetupDialog.uiSource,
+      uiIsLoading = _useSetupDialog.uiIsLoading,
+      uiError = _useSetupDialog.uiError;
 
   useFetchServices(dialogType, preloadedMapServices);
 
@@ -12152,8 +12256,8 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
     order: dialogOrder,
     source: uiSource,
     leftHeaderComponent: leftHeaderComponent,
-    isLoading: isMapPresetLoading,
-    error: mapPresetError,
+    isLoading: uiIsLoading,
+    error: uiError,
     onToggleDock: onToggleDock
   });
 };
@@ -12371,7 +12475,9 @@ var validateServiceName = function validateServiceName(value, services) {
   var ownServiceName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   var serviceName = value === null || value === void 0 ? void 0 : value.toLowerCase();
   var foundName = Object.keys(services).find(function (serviceId) {
-    return services[serviceId].serviceName.toLowerCase() === serviceName && serviceName !== ownServiceName.toLocaleLowerCase();
+    var _a;
+
+    return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceName.toLowerCase()) === serviceName && serviceName !== ownServiceName.toLocaleLowerCase();
   });
   return foundName === undefined ? true : VALIDATIONS_NAME_EXISTING;
 };
@@ -12401,7 +12507,9 @@ var validateServiceUrl = function validateServiceUrl(value, services) {
 
 
   var foundUrl = Object.keys(services).find(function (serviceId) {
-    return services[serviceId].serviceUrl === serviceUrl;
+    var _a;
+
+    return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceUrl) === serviceUrl;
   });
 
   if (foundUrl) {
@@ -13606,7 +13714,7 @@ var sortByService = function sortByService(serviceObj) {
     var _ref4 = _slicedToArray(_ref2, 2),
         b = _ref4[1];
 
-    return a.serviceName.localeCompare(b.serviceName);
+    return a.serviceName.localeCompare(b === null || b === void 0 ? void 0 : b.serviceName);
   }).reduce(function (r, _ref5) {
     var _ref6 = _slicedToArray(_ref5, 2),
         key = _ref6[0],
@@ -13776,6 +13884,7 @@ var LayerList = function LayerList(_ref) {
   var rowMargin = 4;
   var rowHeight = widthToRowHeight(layerSelectWidth);
   var layerSelectFilterHeight = 155 + serviceListHeight;
+  var minHeight = 400;
   return /*#__PURE__*/React.createElement(Box, {
     "data-testid": "layerList"
   }, /*#__PURE__*/React.createElement(Box, {
@@ -13784,7 +13893,7 @@ var LayerList = function LayerList(_ref) {
       fontSize: '12px'
     }
   }, filteredLayers.length, " results"), /*#__PURE__*/React.createElement(FixedSizeList, {
-    height: layerSelectHeight - layerSelectFilterHeight,
+    height: layerSelectHeight - layerSelectFilterHeight < minHeight ? minHeight : layerSelectHeight - layerSelectFilterHeight,
     itemCount: filteredLayers.length,
     itemSize: rowHeight + rowMargin
   }, function (_ref2) {
@@ -13928,7 +14037,7 @@ var ServiceChip = function ServiceChip(_ref) {
   var chip = all ? 'all' : service && service.serviceUrl;
   return /*#__PURE__*/React.createElement(CustomTooltip, {
     title: (service === null || service === void 0 ? void 0 : service["abstract"]) ? "Abstract: ".concat(service["abstract"]) : ''
-  }, /*#__PURE__*/React.createElement(CustomToggleButton, {
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CustomToggleButton, {
     variant: "boxed",
     selected: isSelected,
     tabIndex: 0,
@@ -13941,7 +14050,7 @@ var ServiceChip = function ServiceChip(_ref) {
     },
     disabled: isDisabled,
     sx: style
-  }, service ? service.serviceName : 'All'));
+  }, service ? service.serviceName : 'All')));
 };
 
 var ServiceChipConnect = function ServiceChipConnect(_ref) {
@@ -14082,7 +14191,7 @@ var ServiceList = function ServiceList(_ref) {
     all: true,
     isSelected: isAllSelected
   }), Object.keys(activeServices).map(function (serviceId) {
-    var _a;
+    var _a, _b;
 
     var service = activeServices[serviceId];
     return /*#__PURE__*/React.createElement(ServiceChipConnect, {
@@ -14091,7 +14200,7 @@ var ServiceList = function ServiceList(_ref) {
       service: service,
       isSelected: (_a = activeServices[serviceId]) === null || _a === void 0 ? void 0 : _a.enabled,
       isAllSelected: isAllSelected,
-      isDisabled: activeServices[serviceId] === undefined
+      isDisabled: activeServices[serviceId] === undefined || ((_b = activeServices[serviceId]) === null || _b === void 0 ? void 0 : _b.isLoading) === true
     });
   })));
 };
@@ -14344,7 +14453,9 @@ var Rows = function Rows(_ref2) {
 var getService = function getService(services, serviceUrl) {
   var serviceIds = Object.keys(services);
   var serviceIndex = serviceIds.findIndex(function (serviceId) {
-    return services[serviceId].serviceUrl === serviceUrl;
+    var _a;
+
+    return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceUrl) === serviceUrl;
   });
   if (serviceIndex < 0) return null;
   return services[serviceIds[serviceIndex]];
@@ -14543,7 +14654,14 @@ var LayerSelect = function LayerSelect(_ref) {
       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,
@@ -15168,7 +15286,8 @@ var MapControls = function MapControls(_a) {
       left: 0,
       margin: 1,
       zIndex: 50,
-      top: '96px'
+      top: '96px',
+      userSelect: 'none'
     }
   }, props), /*#__PURE__*/React.createElement(Grid, {
     sx: {
@@ -15996,7 +16115,7 @@ var SpeedButton = function SpeedButton(_ref) {
  * 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'
@@ -16091,18 +16210,11 @@ var TimeStepButton = function TimeStepButton(_ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$isTimestepAuto = _ref.isTimestepAuto,
       isTimestepAuto = _ref$isTimestepAuto === void 0 ? false : _ref$isTimestepAuto,
-      timeDimension = _ref.timeDimension,
       onChangeTimeStep = _ref.onChangeTimeStep,
       _ref$onToggleTimestep = _ref.onToggleTimestepAuto,
       onToggleTimestepAuto = _ref$onToggleTimestep === void 0 ? function () {} : _ref$onToggleTimestep,
       _ref$isOpenByDefault = _ref.isOpenByDefault,
       isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault;
-  var timeStepFromLayer = getActiveLayerTimeStep(timeDimension) || timeStep;
-  React.useEffect(function () {
-    if (isTimestepAuto) {
-      onChangeTimeStep(timeStepFromLayer);
-    }
-  }, [timeStepFromLayer, isTimestepAuto, onChangeTimeStep]);
 
   var handleMenuItemClick = function handleMenuItemClick(mark) {
     if (isTimestepAuto) {
@@ -16115,7 +16227,7 @@ var TimeStepButton = function TimeStepButton(_ref) {
   return /*#__PURE__*/React.createElement(TimeSliderMenu, {
     title: timeStepTitle,
     isOpenByDefault: isOpenByDefault,
-    marks: marks$1,
+    marks: marks$2,
     value: timeStep,
     handleMenuItemClick: handleMenuItemClick,
     isDisabled: disabled,
@@ -16142,7 +16254,7 @@ var TimeStepButton = function TimeStepButton(_ref) {
  * 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'
@@ -16193,7 +16305,7 @@ var TimeScaleButton = function TimeScaleButton(_ref) {
   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];
@@ -16204,7 +16316,7 @@ var TimeScaleButton = function TimeScaleButton(_ref) {
   return /*#__PURE__*/React.createElement(TimeSliderMenu, {
     handleMenuItemClick: onChangeSliderValue,
     icon: /*#__PURE__*/React.createElement(Clock, null),
-    marks: marks,
+    marks: marks$1,
     title: "Time scale",
     value: timeSliderScale,
     onChangeMouseWheel: onChangeSliderValue
@@ -16227,7 +16339,7 @@ var TimeScaleButton = function TimeScaleButton(_ref) {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var title = 'Now';
+var title$1 = 'Now';
 
 var NowButton = function NowButton(_ref) {
   var _ref$onSetNow = _ref.onSetNow,
@@ -16235,7 +16347,7 @@ var NowButton = function NowButton(_ref) {
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   return /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: title,
+    title: title$1,
     "data-testid": "nowButtonTooltip"
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
     disabled: disabled,
@@ -16264,19 +16376,100 @@ var NowButton = function NowButton(_ref) {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var OptionsMenu = function OptionsMenu(_ref) {
-  var autoUpdateBtn = _ref.autoUpdateBtn,
-      nowBtn = _ref.nowBtn,
-      speedBtn = _ref.speedBtn,
-      timeScaleBtn = _ref.timeScaleBtn,
-      timeStepBtn = _ref.timeStepBtn;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: "auto"
-  }, nowBtn || /*#__PURE__*/React__default.createElement(NowButton, null)), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: "auto"
-  }, timeScaleBtn || /*#__PURE__*/React__default.createElement(TimeScaleButton, {
+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(_ref) {
+  var _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$animationLength = _ref.animationLength,
+      animationLength = _ref$animationLength === void 0 ? AnimationLength.Hours1 : _ref$animationLength,
+      onChangeAnimationLength = _ref.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.createElement(TimeSliderMenu, {
+    handleMenuItemClick: onChangeSliderValue,
+    icon: /*#__PURE__*/React.createElement(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(_ref) {
+  var autoUpdateBtn = _ref.autoUpdateBtn,
+      nowBtn = _ref.nowBtn,
+      speedBtn = _ref.speedBtn,
+      timeScaleBtn = _ref.timeScaleBtn,
+      timeStepBtn = _ref.timeStepBtn,
+      animationLengthBtn = _ref.animationLengthBtn;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: "auto"
+  }, nowBtn || /*#__PURE__*/React__default.createElement(NowButton, null)), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: "auto"
+  }, timeScaleBtn || /*#__PURE__*/React__default.createElement(TimeScaleButton, {
     centerTime: 0,
     onChangeTimeSliderScale: function onChangeTimeSliderScale() {},
     secondsPerPx: 0,
@@ -16285,6 +16478,11 @@ var OptionsMenu = function OptionsMenu(_ref) {
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: "auto"
+  }, animationLengthBtn || /*#__PURE__*/React__default.createElement(AnimationLengthButton, {
+    onChangeAnimationLength: function onChangeAnimationLength() {}
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: "auto"
   }, timeStepBtn || /*#__PURE__*/React__default.createElement(TimeStepButton, {
     timeStep: 0,
     onChangeTimeStep: function onChangeTimeStep() {}
@@ -16306,8 +16504,14 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
       speedBtn = _ref.speedBtn,
       timeStepBtn = _ref.timeStepBtn,
       timeScaleBtn = _ref.timeScaleBtn,
+      animationLengthBtn = _ref.animationLengthBtn,
       _ref$isOpenByDefault = _ref.isOpenByDefault,
-      isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault;
+      isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault,
+      timeStep = _ref.timeStep,
+      timeDimension = _ref.timeDimension,
+      onChangeTimeStep = _ref.onChangeTimeStep,
+      _ref$isTimestepAuto = _ref.isTimestepAuto,
+      isTimestepAuto = _ref$isTimestepAuto === void 0 ? false : _ref$isTimestepAuto;
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -16324,6 +16528,12 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
       setOpen(true);
     }
   }, [anchorEl, isOpenByDefault]);
+  var timeStepFromLayer = getActiveLayerTimeStep(timeDimension) || timeStep;
+  React__default.useEffect(function () {
+    if (isTimestepAuto) {
+      onChangeTimeStep(timeStepFromLayer);
+    }
+  }, [timeStepFromLayer, isTimestepAuto, onChangeTimeStep]);
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: "Animation options",
     placement: "bottom"
@@ -16359,6 +16569,7 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
     timeScaleBtn: timeScaleBtn,
     timeStepBtn: timeStepBtn,
     speedBtn: speedBtn,
+    animationLengthBtn: animationLengthBtn,
     autoUpdateBtn: autoUpdateBtn
   })))));
 };
@@ -16625,11 +16836,12 @@ var drawStepPxLine = function drawStepPxLine(ctx, theme, stepPx, height, scale,
 var drawTimeText = function drawTimeText(ctx, theme, stepPx, height, timeText, scale) {
   var ctx2 = ctx;
   var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider.timelineText,
+      fontSize = _theme$palette$geoweb.fontSize,
       fontFamily = _theme$palette$geoweb.fontFamily,
       color = _theme$palette$geoweb.color;
   ctx2.fillStyle = color; // time text has smaller font than other timeline text
 
-  ctx2.font = "12px ".concat(fontFamily);
+  ctx2.font = "".concat(fontSize, "px ").concat(fontFamily);
   ctx2.textAlign = 'left';
 
   if (scale === Scale.Year || scale === Scale.Month || scale === Scale.Week || scale === Scale.Day) {
@@ -16661,7 +16873,7 @@ var drawYearScaleText = function drawYearScaleText(ctx, theme, newDate, stepPx,
   ctx2.fillStyle = color;
   ctx2.font = "".concat(fontSize, "px ").concat(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) {
@@ -17127,9 +17339,9 @@ var drawBackground = function drawBackground(context, theme, visibleTimeStart, v
   drawDefaultBackground();
   drawObservedData();
   drawForecastData();
+  drawNightOrAlternateTime();
   drawAnimationArea();
   drawDraggableIcons();
-  drawNightOrAlternateTime();
 
   function drawDefaultBackground() {
     ctx.fillStyle = legendNoDataBackground.rgba;
@@ -17152,18 +17364,23 @@ var drawBackground = function drawBackground(context, theme, visibleTimeStart, v
 
   function drawAnimationArea() {
     ctx.fillStyle = theme.palette.geowebColors.timeSlider.timelineSelectionBackground.rgba;
-    ctx.fillRect(animationStartPx, y, Math.max(animationEndPx - animationStartPx, y), height);
+    ctx.strokeStyle = theme.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(dragHandlePath);
     ctx.translate(animationStartPx, y);
-    ctx.fillStyle = theme.palette.geowebColors.timeSlider.timelineSelectionBackground.rgba;
+    ctx.fillStyle = theme.palette.geowebColors.timeSlider.timelineTimeScale.fill;
     ctx.fill(path);
     ctx.restore();
     ctx.save();
     ctx.translate(animationEndPx - 24, y);
+    ctx.fillStyle = theme.palette.geowebColors.timeSlider.timelineTimeScale.fill;
     ctx.fill(path);
     ctx.restore();
   }
@@ -17301,6 +17518,11 @@ var isSelectedTimeIconArea = function isSelectedTimeIconArea(x, selectedTimePx,
 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
@@ -17315,7 +17537,8 @@ var isLeftAnimationIconArea = function isLeftAnimationIconArea(x, leftMarkerPx,
 var DRAG_AREA_WIDTH = 24;
 
 var TimeSliderLegend = function TimeSliderLegend(_ref) {
-  var centerTime = _ref.centerTime,
+  var mapId = _ref.mapId,
+      centerTime = _ref.centerTime,
       secondsPerPx = _ref.secondsPerPx,
       _ref$dataScaleToSecon = _ref.dataScaleToSecondsPerPx,
       dataScaleToSecondsPerPx = _ref$dataScaleToSecon === void 0 ? defaultDataScaleToSecondsPerPx : _ref$dataScaleToSecon,
@@ -17327,10 +17550,11 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       dataEndTime = _ref.dataEndTime,
       animationStartTime = _ref.animationStartTime,
       animationEndTime = _ref.animationEndTime,
-      isTimeSliderHoverOn = _ref.isTimeSliderHoverOn,
       timeStep = _ref.timeStep,
       _ref$mapIsActive = _ref.mapIsActive,
       mapIsActive = _ref$mapIsActive === void 0 ? true : _ref$mapIsActive,
+      unfilteredSelectedTime = _ref.unfilteredSelectedTime,
+      setUnfilteredSelectedTime = _ref.setUnfilteredSelectedTime,
       onSetNewDate = _ref.onSetNewDate,
       onSetCenterTime = _ref.onSetCenterTime,
       onSetAnimationStartTime = _ref.onSetAnimationStartTime,
@@ -17367,26 +17591,45 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
 
   var _React$useState11 = React.useState(false),
       _React$useState12 = _slicedToArray(_React$useState11, 2),
-      mouseDownInLegend = _React$useState12[0],
-      setMouseDownInLegend = _React$useState12[1];
+      dragTooltipOpen = _React$useState12[0],
+      setDragTooltipOpen = _React$useState12[1];
 
-  var _React$useState13 = React.useState(animationStartTime && moment.utc(animationStartTime).unix()),
+  var _React$useState13 = React.useState(false),
       _React$useState14 = _slicedToArray(_React$useState13, 2),
-      localAnimationStartTime = _React$useState14[0],
-      setLocalAnimationStartTime = _React$useState14[1];
+      mouseDownInLegend = _React$useState14[0],
+      setMouseDownInLegend = _React$useState14[1];
 
-  var _React$useState15 = React.useState(animationEndTime && moment.utc(animationEndTime).unix()),
+  var _React$useState15 = React.useState(animationStartTime && moment.utc(animationStartTime).unix()),
       _React$useState16 = _slicedToArray(_React$useState15, 2),
-      localAnimationEndTime = _React$useState16[0],
-      setLocalAnimationEndTime = _React$useState16[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.
+      localAnimationStartTime = _React$useState16[0],
+      setLocalAnimationStartTime = _React$useState16[1];
 
-  var _React$useState17 = React.useState('auto'),
+  var _React$useState17 = React.useState(animationEndTime && moment.utc(animationEndTime).unix()),
       _React$useState18 = _slicedToArray(_React$useState17, 2),
-      cursorStyle = _React$useState18[0],
-      setCursorStyle = _React$useState18[1];
+      localAnimationEndTime = _React$useState18[0],
+      setLocalAnimationEndTime = _React$useState18[1];
+
+  var _React$useState19 = React.useState(moment.utc(0)),
+      _React$useState20 = _slicedToArray(_React$useState19, 2),
+      tooltipTime = _React$useState20[0],
+      setTooltipTime = _React$useState20[1];
+
+  var _React$useState21 = React.useState(false),
+      _React$useState22 = _slicedToArray(_React$useState21, 2),
+      animationAreaDragging = _React$useState22[0],
+      setAnimationAreaDragging = _React$useState22[1];
+
+  var animationDiff = React.useRef();
+  var isClickOrDrag = React.useRef();
+  var pixelsMovedSinceStartDragging = React.useRef(0);
+  var elem = document.querySelector(".timeSliderLegend_".concat(mapId));
+  var pixelsToLeft = elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect()['left'];
+  var pixelsToTop = elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect()['top'];
+
+  var _React$useState23 = React.useState('auto'),
+      _React$useState24 = _slicedToArray(_React$useState23, 2),
+      cursorStyle = _React$useState24[0],
+      setCursorStyle = _React$useState24[1];
 
   var curTime = selectedTime !== undefined ? moment.unix(selectedTime).toISOString() : moment.utc().toISOString();
   React.useEffect(function () {
@@ -17416,7 +17659,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     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.
    */
@@ -17429,13 +17672,18 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       setRightMarkerDragging(false);
       setMouseDownInLegend(false);
       setCenterTimeDragging(false);
+      setDragTooltipOpen(false);
+      setAnimationAreaDragging(false);
+      startDraggingPosition.current = 0;
+      pixelsMovedSinceStartDragging.current = 0;
+      animationDiff.current = undefined;
     };
 
     document.addEventListener('mouseup', handleMouseUp);
     return function () {
       document.removeEventListener('mouseup', handleMouseUp);
     };
-  });
+  }, [centerTimeDragging]);
   var onMouseTouchMoveActions = useCallback(function (x) {
     if (!localAnimationStartTime || !localAnimationEndTime) return;
 
@@ -17447,44 +17695,80 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
         rightMarkerPx = _map2[1];
 
     if (leftMarkerDragging) {
+      var mousePosition = leftMarkerPx + x;
+      var rightAnimationPosition = rightMarkerPx - DRAG_AREA_WIDTH * 2; // update tooltip position while dragging
       // Prevent dragging if it would cause markers to cross over, except if the markers
       // are moved away from being crossed over
-      if (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.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
+
+      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(x + DRAG_AREA_WIDTH / 2, // lets us drag on the marker
+      var _mouseTimeUnix = pixelToTimestamp(_mousePosition, // lets us drag on the marker
       centerTime, canvasWidth, secondsPerPx);
 
       setLocalAnimationEndTime(_mouseTimeUnix);
+      setTooltipTime(moment.unix(_mouseTimeUnix));
+      return;
+    }
+
+    if (animationAreaDragging) {
+      if (animationDiff.current === undefined) {
+        var startDraggingPositionTimestamp = pixelToTimestamp(startDraggingPosition.current, centerTime, canvasWidth, secondsPerPx);
+        var diffLeftAnimationToStartDraggingPosition = startDraggingPositionTimestamp - localAnimationStartTime;
+        var diffRightAnimationToStartDraggingPosition = localAnimationEndTime - startDraggingPositionTimestamp;
+        animationDiff.current = {
+          diffStartToRight: diffRightAnimationToStartDraggingPosition,
+          diffStartToLeft: diffLeftAnimationToStartDraggingPosition
+        };
+        return;
+      }
+
+      pixelsMovedSinceStartDragging.current += x;
+      var currentPositionTimestamp = pixelToTimestamp(startDraggingPosition.current + pixelsMovedSinceStartDragging.current, centerTime, canvasWidth, secondsPerPx);
+      var _animationDiff$curren = animationDiff.current,
+          diffStartToRight = _animationDiff$curren.diffStartToRight,
+          diffStartToLeft = _animationDiff$curren.diffStartToLeft;
+      var startTime = currentPositionTimestamp - diffStartToLeft;
+      var endTime = currentPositionTimestamp + diffStartToRight;
+      setLocalAnimationStartTime(startTime);
+      setLocalAnimationEndTime(endTime);
     }
-  }, [centerTime, leftMarkerDragging, localAnimationEndTime, localAnimationStartTime, rightMarkerDragging, secondsPerPx, canvasWidth]);
+  }, [localAnimationStartTime, localAnimationEndTime, leftMarkerDragging, rightMarkerDragging, animationAreaDragging, centerTime, canvasWidth, secondsPerPx, pixelsToLeft, animationDiff]);
   var setSelectedTime = 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.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);
       }
     };
 
@@ -17492,10 +17776,14 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     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 = useTheme();
+  var startDraggingPosition = React.useRef(0);
 
   var onMouseDown = function onMouseDown(x, y, width) {
+    isClickOrDrag.current = 'click';
+    startDraggingPosition.current = x;
+
     var _map3 = [localAnimationStartTime, localAnimationEndTime, selectedTime].map(function (timestamp) {
       return timestampToPixel(timestamp, centerTime, width, secondsPerPx);
     }),
@@ -17512,16 +17800,27 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     }
 
     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.utc(animationStartTime));
+        setDragTooltipOpen(true);
         return;
       }
 
       if (isRightAnimationIconArea(x, rightMarkerPx, DRAG_AREA_WIDTH) && !leftMarkerDragging) {
         setCursorStyle('grabbing');
         setRightMarkerDragging(true);
+        setTooltipTime(moment.utc(animationEndTime));
+        setDragTooltipOpen(true);
+        return;
+      }
+
+      if (isInsideAnimationArea(x, leftMarkerPx, rightMarkerPx) && !animationAreaDragging) {
+        setCursorStyle('grabbing');
+        setAnimationAreaDragging(true);
         return;
       }
     } // clicking the timeslider
@@ -17530,18 +17829,36 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     setMouseDownInLegend(true);
   };
 
+  React.useEffect(function () {
+    var stoppedDragging = !leftMarkerDragging && !rightMarkerDragging && !animationAreaDragging;
+
+    if (stoppedDragging) {
+      if (localAnimationStartTime !== convertStringTimeToUnix(animationStartTime)) {
+        onSetAnimationStartTime(moment.utc(localAnimationStartTime * 1000).format(dateFormat));
+      }
+
+      if (localAnimationEndTime !== convertStringTimeToUnix(animationEndTime)) {
+        onSetAnimationEndTime(moment.utc(localAnimationEndTime * 1000).format(dateFormat));
+      }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [leftMarkerDragging, rightMarkerDragging, animationAreaDragging]);
+
   var onMouseUpTouchEnd = function onMouseUpTouchEnd(x) {
-    // Dispatch changes when releasing mouse
-    if (leftMarkerDragging) {
-      onSetAnimationStartTime(moment.utc(localAnimationStartTime * 1000).format(dateFormat));
-    } else if (rightMarkerDragging) {
-      onSetAnimationEndTime(moment.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 _map5 = [localAnimationStartTime, localAnimationEndTime, selectedTime].map(function (timestamp) {
@@ -17556,18 +17873,41 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     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.createElement(Box, {
+  var dragTooltipPosition = React.useRef();
+  var popperRef = React.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.createElement(CustomTooltip, {
+    title: tooltipTime.format('HH:mm'),
+    open: dragTooltipOpen,
+    PopperProps: {
+      popperRef: popperRef,
+      anchorEl: {
+        getBoundingClientRect: setTooltipPosition
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
     "data-testid": "timeSliderLegend",
-    className: "timeSliderLegend",
+    className: "timeSliderLegend_".concat(mapId),
     sx: {
       height: "".concat(TIME_SLIDER_LEGEND_HEIGHT, "px"),
       borderRadius: '4.5px',
@@ -17589,9 +17929,13 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       setCanvasWidth(width);
       drawTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTime, scale, currentTime, localAnimationStartTime, localAnimationEndTime, dataStartTime, dataEndTime);
     }
-  }));
+  })));
 };
 
+function convertStringTimeToUnix(time) {
+  return time ? moment.utc(time).unix() : undefined;
+}
+
 var TIME_SLIDER_LEGEND_HEIGHT = 24;
 
 /* *
@@ -17643,7 +17987,7 @@ var HideSliderButton = function HideSliderButton(_ref) {
  * */
 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');
@@ -17653,7 +17997,7 @@ var onMouseMove = function onMouseMove(x, width, selectedTime, centerTime, secon
 };
 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');
@@ -17735,7 +18079,9 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
       timeStep = _ref.timeStep,
       dataStartTime = _ref.dataStartTime,
       dataEndTime = _ref.dataEndTime,
-      onSetNewDate = _ref.onSetNewDate;
+      unfilteredSelectedTime = _ref.unfilteredSelectedTime,
+      onSetNewDate = _ref.onSetNewDate,
+      setUnfilteredSelectedTime = _ref.setUnfilteredSelectedTime;
   var TIME_BOX_WIDTH = 140;
   var theme = useTheme();
 
@@ -17780,11 +18126,9 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
   React__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);
       }
     };
 
@@ -17792,7 +18136,7 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
     return function () {
       document.removeEventListener('mousemove', handleMouseMove);
     };
-  });
+  }, [canvasWidth, centerTime, dataEndTime, dataStartTime, mouseDownInTimeBox, onSetNewDate, secondsPerPx, setUnfilteredSelectedTime, timeStep, unfilteredSelectedTime]);
   return /*#__PURE__*/React__default.createElement(Box$2, {
     "data-testid": "timeSliderTimeBox",
     className: "timeSliderTimeBox",
@@ -17813,32 +18157,18 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
       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);
     }
   }));
 };
 
-/* *
- * 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 useTimeSliderKeyBoardControl = function useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider) {
   React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
@@ -17859,12 +18189,13 @@ var useTimeSliderKeyBoardControl = function useTimeSliderKeyBoardControl(mapIsAc
 var defaultProps = {
   centerTime: moment.utc().startOf('day').hours(12).unix(),
   secondsPerPx: 5,
-  selectedTime: moment.utc().startOf('day').hours(12),
+  selectedTime: moment.utc().startOf('day').hours(12).unix(),
   dataScaleToSecondsPerPx: defaultDataScaleToSecondsPerPx
 };
 
 var TimeSlider = function TimeSlider(_ref) {
-  var buttons = _ref.buttons,
+  var mapId = _ref.mapId,
+      buttons = _ref.buttons,
       timeBox = _ref.timeBox,
       legend = _ref.legend,
       _ref$mapIsActive = _ref.mapIsActive,
@@ -17874,6 +18205,12 @@ var TimeSlider = function TimeSlider(_ref) {
       _ref$onToggleTimeSlid = _ref.onToggleTimeSlider,
       onToggleTimeSlider = _ref$onToggleTimeSlid === void 0 ? function () {} : _ref$onToggleTimeSlid;
   useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider);
+
+  var _React$useState = React.useState(defaultProps.selectedTime),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      unfilteredSelectedTime = _React$useState2[0],
+      setUnfilteredSelectedTime = _React$useState2[1];
+
   var visibilityState = isVisible ? 'visible' : 'hidden';
   return isVisible ? /*#__PURE__*/React.createElement(Grid, {
     style: {
@@ -17898,7 +18235,8 @@ var TimeSlider = function TimeSlider(_ref) {
       zIndex: 99
     }
   }, timeBox || /*#__PURE__*/React.createElement(TimeSliderCurrentTimeBox, Object.assign({}, defaultProps, {
-    selectedTime: defaultProps.selectedTime
+    unfilteredSelectedTime: unfilteredSelectedTime,
+    setUnfilteredSelectedTime: setUnfilteredSelectedTime
   }))), /*#__PURE__*/React.createElement(Grid, {
     item: true
   }), /*#__PURE__*/React.createElement(Grid, {
@@ -17906,8 +18244,10 @@ var TimeSlider = function TimeSlider(_ref) {
   }, buttons || /*#__PURE__*/React.createElement(TimeSliderButtons, null)), /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, legend || /*#__PURE__*/React.createElement(TimeSliderLegend, Object.assign({}, defaultProps, {
-    selectedTime: defaultProps.selectedTime.unix(),
-    mapIsActive: mapIsActive
+    mapId: mapId,
+    mapIsActive: mapIsActive,
+    unfilteredSelectedTime: unfilteredSelectedTime,
+    setUnfilteredSelectedTime: setUnfilteredSelectedTime
   })), ' '), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     sx: {
@@ -18041,12 +18381,6 @@ var TimeStepButtonComponent = function TimeStepButtonComponent(_ref) {
   var isTimestepAuto$1 = useSelector(function (store) {
     return isTimestepAuto(store, mapId);
   });
-  var activeLayerId = useSelector(function (store) {
-    return getActiveLayerId(store, mapId);
-  });
-  var activeLayerTimeDimension = useSelector(function (store) {
-    return getLayerTimeDimension(store, activeLayerId);
-  });
   var onToggleTimestepAuto = React.useCallback(function () {
     dispatch(mapActions$1.toggleTimestepAuto({
       mapId: mapId,
@@ -18066,9 +18400,7 @@ var TimeStepButtonComponent = function TimeStepButtonComponent(_ref) {
     timeStep: timeStep,
     onChangeTimeStep: onSetTimeStep,
     disabled: isAnimating$1,
-    isTimestepAuto: isTimestepAuto$1,
-    onToggleTimestepAuto: onToggleTimestepAuto,
-    timeDimension: activeLayerTimeDimension
+    onToggleTimestepAuto: onToggleTimestepAuto
   });
 };
 
@@ -18188,6 +18520,57 @@ var NowButtonConnect = function NowButtonConnect(_ref) {
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var AnimationLengthButtonConnect = function AnimationLengthButtonConnect(_ref) {
+  var mapId = _ref.mapId;
+  var dispatch = useDispatch();
+  var isAnimating$1 = useSelector(function (store) {
+    return isAnimating(store, mapId);
+  });
+  var animationStartTime = useSelector(function (store) {
+    return getAnimationStartTime(store, mapId);
+  });
+  var animationEndTime = useSelector(function (store) {
+    return getAnimationEndTime(store, mapId);
+  });
+  var currentDiffInMinutes = moment(animationEndTime).diff(moment(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(animationStartTime).add(length, 'minutes').toISOString();
+    dispatch(mapActions$1.setAnimationEndTime({
+      mapId: mapId,
+      animationEndTime: animationEndTime
+    }));
+  };
+
+  return /*#__PURE__*/React.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.
@@ -18216,11 +18599,35 @@ var NowButtonConnect = function NowButtonConnect(_ref) {
 var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
   var sourceId = _ref.sourceId,
       mapId = _ref.mapId;
+  var dispatch = useDispatch();
+  var isTimestepAuto$1 = useSelector(function (store) {
+    return isTimestepAuto(store, mapId);
+  });
+  var timeStep = useSelector(function (store) {
+    return getMapTimeStep(store, mapId);
+  });
+  var activeLayerId = useSelector(function (store) {
+    return getActiveLayerId(store, mapId);
+  });
+  var activeLayerTimeDimension = useSelector(function (store) {
+    return getLayerTimeDimension(store, activeLayerId);
+  });
+  var onSetTimeStep = React.useCallback(function (timeStep, origin) {
+    dispatch(mapActions$1.setTimeStep(Object.assign({
+      mapId: mapId,
+      timeStep: timeStep
+    }, origin && {
+      origin: origin
+    })));
+  }, [dispatch, mapId]);
   return /*#__PURE__*/React.createElement(OptionsMenuButton, {
     nowBtn: /*#__PURE__*/React.createElement(NowButtonConnect, {
       mapId: mapId,
       sourceId: sourceId
     }),
+    animationLengthBtn: /*#__PURE__*/React.createElement(AnimationLengthButtonConnect, {
+      mapId: mapId
+    }),
     autoUpdateBtn: /*#__PURE__*/React.createElement(AutoUpdateButtonConnect, {
       mapId: mapId
     }),
@@ -18232,7 +18639,11 @@ var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
     }),
     timeScaleBtn: /*#__PURE__*/React.createElement(TimeScaleButtonConnect, {
       mapId: mapId
-    })
+    }),
+    timeStep: timeStep,
+    isTimestepAuto: isTimestepAuto$1,
+    onChangeTimeStep: onSetTimeStep,
+    timeDimension: activeLayerTimeDimension
   });
 };
 
@@ -18354,9 +18765,11 @@ var connectRedux$2 = connect(function (store, props) {
     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,
@@ -18385,7 +18798,9 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
       mapSetTimeSliderCenterTime = _ref.mapSetTimeSliderCenterTime,
       mapSetTimeSliderSecondsPerPx = _ref.mapSetTimeSliderSecondsPerPx,
       setAnimationStartTime = _ref.setAnimationStartTime,
-      setAnimationEndTime = _ref.setAnimationEndTime;
+      setAnimationEndTime = _ref.setAnimationEndTime,
+      unfilteredSelectedTime = _ref.unfilteredSelectedTime,
+      setTimeSliderUnfilteredSelectedTime = _ref.setTimeSliderUnfilteredSelectedTime;
 
   var _getTimeBounds = getTimeBounds(dimensions),
       selectedTime = _getTimeBounds.selectedTime;
@@ -18399,6 +18814,7 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
 
   var mapIsActive = mapId === activeWindowId;
   return /*#__PURE__*/React.createElement(TimeSliderLegend, {
+    mapId: mapId,
     centerTime: centerTime,
     secondsPerPx: secondsPerPx,
     dataScaleToSecondsPerPx: dataScaleToSecondsPerPx,
@@ -18412,6 +18828,13 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
     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({
@@ -18475,9 +18898,11 @@ var connectRedux$1 = connect(function (store, props) {
     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
 });
@@ -18493,10 +18918,12 @@ var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBox
       timeStep = _ref.timeStep,
       isAnimating = _ref.isAnimating,
       stopMapAnimation = _ref.stopMapAnimation,
+      unfilteredSelectedTime = _ref.unfilteredSelectedTime,
+      setTimeSliderUnfilteredSelectedTime = _ref.setTimeSliderUnfilteredSelectedTime,
       setTime = _ref.setTime;
 
-  var _getMomentTimeBounds = getMomentTimeBounds(dimensions),
-      selectedTime = _getMomentTimeBounds.selectedTime;
+  var _getTimeBounds = getTimeBounds(dimensions),
+      selectedTime = _getTimeBounds.selectedTime;
 
   var _getDataLimitsFromLay = getDataLimitsFromLayers(layers),
       _getDataLimitsFromLay2 = _slicedToArray(_getDataLimitsFromLay, 2),
@@ -18511,6 +18938,13 @@ var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBox
     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({
@@ -18595,6 +19029,7 @@ var ConnectedTimeSlider = function ConnectedTimeSlider(_ref) {
   };
 
   return /*#__PURE__*/React.createElement(TimeSlider, {
+    mapId: mapId,
     buttons: /*#__PURE__*/React.createElement(TimeSliderButtonsConnect, {
       mapId: mapId,
       sourceId: sourceId
@@ -22749,12 +23184,11 @@ var useKeyboardZoomAndPan = function useKeyboardZoomAndPan(mapIsActive, mapId) {
     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['-']) {
@@ -23131,6 +23565,9 @@ var OptionsMenuConnect = function OptionsMenuConnect(_ref) {
       mapId: mapId,
       sourceId: sourceId
     }),
+    animationLengthBtn: /*#__PURE__*/React__default.createElement(AnimationLengthButtonConnect, {
+      mapId: mapId
+    }),
     autoUpdateBtn: /*#__PURE__*/React__default.createElement(AutoUpdateButtonConnect, {
       mapId: mapId
     }),
@@ -23565,13 +24002,389 @@ var TimeSliderClockConnect = function TimeSliderClockConnect(_ref) {
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+/**
+ * Get the title for this WMS layer based on its layerId. If not defined, layerId is used instead.
+ * @param layerId
+ * @returns Title for the layer
+ */
+
+var getTitle = function getTitle(layerId) {
+  var wmjsLayer = getWMLayerById(layerId);
+  return wmjsLayer ? wmjsLayer.title || wmjsLayer.name : layerId;
+};
+/**
+ * Make a list of GFI Layers to display.
+ * @param layers
+ * @param mapId
+ * @returns
+ */
+
+
+var getLayersToUpdate = function getLayersToUpdate(layers, mapId) {
+  var wmjsMap = getWMJSMapById(mapId);
+  if (!wmjsMap || !layers || layers.length === 0) return [];
+  return layers.filter(function (layer) {
+    return layer && layer.enabled && !!getWMLayerById(layer.id);
+  }).map(function (layer) {
+    /*
+      We need a wmjsLayer to build the getfeatureinfo url (getWMSGetFeatureInfoRequestURL function).
+      But it seems that its dimension are lazely updated (by ReactMapView).
+      Therefore make a clone of this layer and set its dimensions based on the layer object.
+      Otherwise we risk making a getfeatureinfo call with outdated dimension values.
+    */
+    var wmjsLayer = getWMLayerById(layer.id).cloneLayer();
+    layer.dimensions && layer.dimensions.forEach(function (dim) {
+      var wmDim = wmjsLayer.getDimension(dim.name);
+
+      if (wmDim && wmDim.getValue() !== dim.currentValue) {
+        wmDim.setValue(dim.currentValue);
+      }
+    });
+    return {
+      layerId: layer.id,
+      url: wmjsMap.getWMSGetFeatureInfoRequestURL(wmjsLayer, "".concat(wmjsMap.getMapPin().getXY().x), "".concat(wmjsMap.getMapPin().getXY().y), 'text/html'),
+      title: getTitle(layer.id)
+    };
+  });
+};
+
+var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
+  var layers = _ref.layers,
+      isOpen = _ref.isOpen,
+      onClose = _ref.onClose,
+      _ref$onMouseDown = _ref.onMouseDown,
+      onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+      mapId = _ref.mapId,
+      _ref$showMapId = _ref.showMapId,
+      showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId,
+      _ref$order = _ref.order,
+      order = _ref$order === void 0 ? 0 : _ref$order,
+      _ref$source = _ref.source,
+      source = _ref$source === void 0 ? 'app' : _ref$source,
+      mapPinLocation = _ref.mapPinLocation;
+
+  /* Ref and state for maplocation */
+  var mapLocationWasChanged = React__default.useRef(false);
+
+  var _React$useState = React__default.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isInitialMapLocationChanged = _React$useState2[0],
+      setInitialMapLocationIsChanged = _React$useState2[1];
+  /* Ref, state and update function for results per layer map */
+
+
+  var gfiResultMap = React__default.useRef(new Map()).current;
+
+  var _React$useState3 = React__default.useState(),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      triggerRerender = _React$useState4[1];
+
+  var updateLayerResult = function updateLayerResult(_ref2) {
+    var layerId = _ref2.layerId,
+        data = _ref2.data,
+        isLoading = _ref2.isLoading;
+    gfiResultMap.set(layerId, {
+      data: data,
+      isLoading: isLoading
+    });
+    triggerRerender("".concat(layerId).concat(isLoading));
+  };
+  /* Build a layerlist array with a set of arguments per layer to do the query for */
+
+
+  var layerToUpdateList = getLayersToUpdate(layers, mapId);
+  /*
+    Build a string based on the GFI urls. If this changes for whatever reason we need to update.
+    These strings can change very often, therefore they need to be debounced and only use the most recent result  must be used.
+  */
+
+  var debouncedlayerListString = useDebounce(layerToUpdateList.map(function (layer) {
+    return layer.url;
+  }).join(','), 100);
+  /* Do a GFI call to the server and use the updateLayerResult to provide the results. */
+
+  var fetchLayerInfo = function fetchLayerInfo(url, layerId) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var _yield$axios$get, data, errorMessage;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              updateLayerResult({
+                layerId: layerId,
+                data: '',
+                isLoading: true
+              });
+              _context.next = 4;
+              return axios.get(url);
+
+            case 4:
+              _yield$axios$get = _context.sent;
+              data = _yield$axios$get.data;
+              updateLayerResult({
+                layerId: layerId,
+                data: data,
+                isLoading: false
+              });
+              _context.next = 13;
+              break;
+
+            case 9:
+              _context.prev = 9;
+              _context.t0 = _context["catch"](0);
+              errorMessage = _context.t0.message();
+              updateLayerResult({
+                layerId: layerId,
+                data: errorMessage,
+                isLoading: false
+              });
+
+            case 13:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 9]]);
+    }));
+  };
+  /*  Wait till the user has clicked the map. */
+
+
+  React__default.useEffect(function () {
+    if (mapLocationWasChanged.current !== false) {
+      setInitialMapLocationIsChanged(true);
+    }
+
+    mapLocationWasChanged.current = true;
+  }, [mapPinLocation]);
+  /* For each changed getfeature url string, load new data using WMS GetFeatureInfo */
+
+  React__default.useEffect(function () {
+    if (isInitialMapLocationChanged && isOpen) {
+      layerToUpdateList.forEach(function (_ref3) {
+        var url = _ref3.url,
+            layerId = _ref3.layerId;
+        fetchLayerInfo(url, layerId);
+      });
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [debouncedlayerListString]);
+  var hasLayers = layers && layers.length > 0;
+  return /*#__PURE__*/React__default.createElement(ToolContainerDraggable, {
+    startPosition: {
+      right: 10,
+      top: 80
+    },
+    minWidth: 300,
+    onClose: onClose,
+    title: showMapId ? "Event marker info ".concat(mapId) : 'Event marker info',
+    headerSize: "small",
+    initialMaxHeight: 440,
+    isOpen: isOpen,
+    "data-testid": "moveable-getfeatureinfo",
+    bounds: "parent",
+    onMouseDown: onMouseDown,
+    order: order,
+    source: source
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      padding: 0
+    }
+  }, isOpen && hasLayers && isInitialMapLocationChanged && /*#__PURE__*/React__default.createElement(Box, {
+    "data-testid": "GetFeatureInfoList"
+  }, layerToUpdateList.map(function (layer) {
+    var layerId = layer.layerId,
+        title = layer.title,
+        url = layer.url;
+    var result = gfiResultMap.get(layerId);
+    if (!result) return null;
+    return /*#__PURE__*/React__default.createElement(Grid, {
+      key: layerId,
+      sx: {
+        margin: '4px 6px 4px 6px',
+        padding: '6px',
+        backgroundColor: 'geowebColors.cards.cardContainer',
+        border: 'solid 1px',
+        borderColor: 'geowebColors.cards.cardContainerBorder'
+      }
+    }, /*#__PURE__*/React__default.createElement(Typography, {
+      variant: "subtitle1"
+    }, title, "\xA0", /*#__PURE__*/React__default.createElement(IconButton, {
+      sx: {
+        "float": 'right'
+      },
+      size: "small",
+      "aria-label": "Open layer featureinfo in another page",
+      onClick: function onClick() {
+        window.open(url);
+      }
+    }, /*#__PURE__*/React__default.createElement(ExitDomain, null))), !result.isLoading ? /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        fontSize: '11px',
+        padding: '6px',
+        margin: '0',
+        fontFamily: 'Roboto,Helvetica,Arial,sans-serif',
+        fontWeight: '400',
+        lineHeight: '1.75',
+        letterSpacing: '0.25px'
+      },
+      "data-testid": "layer-result-ready-".concat(layerId),
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML: {
+        __html: result.data.replace(/<hr\/>/g, '')
+      }
+    }) : /*#__PURE__*/React__default.createElement("div", {
+      "data-testid": "layer-result-loading-".concat(layerId)
+    }, /*#__PURE__*/React__default.createElement(CircularProgress, {
+      "data-testid": "spinner",
+      color: "inherit"
+    })));
+  })), hasLayers && !isInitialMapLocationChanged && /*#__PURE__*/React__default.createElement(Typography, {
+    "data-testid": "click-on-map-for-info",
+    variant: "subtitle1",
+    sx: {
+      padding: '10px'
+    }
+  }, "Click on the map for info."), !hasLayers && /*#__PURE__*/React__default.createElement(Typography, {
+    "data-testid": "NoLayers",
+    variant: "subtitle1",
+    sx: {
+      padding: '10px'
+    }
+  }, "No layers added to the map.")));
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var GetFeatureInfoConnect = function GetFeatureInfoConnect(_ref) {
+  var _ref$showMapId = _ref.showMapId,
+      showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId,
+      mapId = _ref.mapId;
+  var dispatch = useDispatch();
+  var getFeatureInfoType = "getfeatureinfo-".concat(mapId);
+  var isMapPinVisible = useSelector(function (store) {
+    return getDisplayMapPin(store, mapId);
+  });
+  var mapPinLocation = useSelector(function (store) {
+    return getPinLocation(store, mapId);
+  });
+  var toggleMapPinIsVisible = React.useCallback(function (displayMapPin) {
+    dispatch(mapActions$1.toggleMapPinIsVisible({
+      mapId: mapId,
+      displayMapPin: displayMapPin
+    }));
+  }, [dispatch, mapId]);
+  var mapLayers = useSelector(function (store) {
+    return getMapLayers(store, mapId);
+  });
+
+  var _useSetupDialog = useSetupDialog(getFeatureInfoType),
+      dialogOrder = _useSetupDialog.dialogOrder,
+      isDialogOpen = _useSetupDialog.isDialogOpen,
+      uiSource = _useSetupDialog.uiSource,
+      setDialogOrder = _useSetupDialog.setDialogOrder,
+      onCloseDialog = _useSetupDialog.onCloseDialog;
+
+  React.useEffect(function () {
+    toggleMapPinIsVisible(isDialogOpen);
+  }, [isDialogOpen, toggleMapPinIsVisible, isMapPinVisible]);
+  return /*#__PURE__*/React.createElement(GetFeatureInfoDialog, {
+    layers: mapLayers,
+    isOpen: isDialogOpen,
+    onClose: onCloseDialog,
+    mapId: mapId,
+    showMapId: showMapId,
+    onMouseDown: setDialogOrder,
+    order: dialogOrder,
+    source: uiSource,
+    mapPinLocation: mapPinLocation
+  });
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var GetFeatureInfoButtonConnect = function GetFeatureInfoButtonConnect(_ref) {
+  var mapId = _ref.mapId,
+      _ref$source = _ref.source,
+      source = _ref$source === void 0 ? 'app' : _ref$source;
+  var dispatch = useDispatch();
+  var gfiType = "getfeatureinfo-".concat(mapId);
+  var isOpenInStore = useSelector(function (store) {
+    return getisDialogOpen(store, gfiType);
+  });
+  var openGfiDialog = React.useCallback(function () {
+    dispatch(uiActions.setActiveMapIdForDialog({
+      type: gfiType,
+      mapId: mapId,
+      setOpen: !isOpenInStore,
+      source: source,
+      origin: MapActionOrigin.map
+    }));
+  }, [mapId, dispatch, isOpenInStore, source, gfiType]);
+  return /*#__PURE__*/React.createElement(MapControlButton, {
+    title: "Get information for a specific location",
+    "data-testid": "open-getfeatureinfo",
+    onClick: openGfiDialog,
+    isActive: isOpenInStore
+  }, /*#__PURE__*/React.createElement(Info, null));
+};
+
 var titleStyle = function titleStyle(theme) {
   return {
     position: 'absolute',
     padding: '5px',
     zIndex: 50,
     color: theme.palette.common.black,
-    whiteSpace: 'nowrap'
+    whiteSpace: 'nowrap',
+    userSelect: 'none'
   };
 };
 
@@ -23616,8 +24429,10 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
       shouldShowLayerManager = _a.shouldShowLayerManager,
       _a$showClock = _a.showClock,
       showClock = _a$showClock === void 0 ? true : _a$showClock,
+      _a$displayGetFeatureI = _a.displayGetFeatureInfoButtonInMap,
+      displayGetFeatureInfoButtonInMap = _a$displayGetFeatureI === void 0 ? false : _a$displayGetFeatureI,
       children = _a.children,
-      props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "showClock", "children"]);
+      props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "showClock", "displayGetFeatureInfoButtonInMap", "children"]);
 
   var dispatch = useDispatch();
   var mapId = React__default.useRef(id || generateMapId()).current;
@@ -23683,6 +24498,8 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
     multiLegend: multiLegend
   }), displayDimensionSelectButtonInMap && /*#__PURE__*/React__default.createElement(MultiDimensionSelectMapButtonsConnect, {
     mapId: mapId
+  }), displayGetFeatureInfoButtonInMap && /*#__PURE__*/React__default.createElement(GetFeatureInfoButtonConnect, {
+    mapId: mapId
   })), !disableTimeSlider && /*#__PURE__*/React__default.createElement(Box, {
     sx: {
       position: 'absolute',
@@ -23705,6 +24522,9 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
     multiLegend: multiLegend
   }), showClock && /*#__PURE__*/React__default.createElement(TimeSliderClockConnect, {
     mapId: mapId
+  }), displayGetFeatureInfoButtonInMap && /*#__PURE__*/React__default.createElement(GetFeatureInfoConnect, {
+    showMapId: true,
+    mapId: mapId
   }), /*#__PURE__*/React__default.createElement(DockedLayerManagerConnect, {
     mapId: mapId,
     bounds: "parent"
@@ -24042,7 +24862,8 @@ var componentsLookUp = function componentsLookUp(_ref) {
         var mapPreset = initialProps.mapPreset;
         return /*#__PURE__*/React__default.createElement(ConfigurableMapConnect, Object.assign({}, mapPreset, {
           id: id,
-          "data-testid": "coreConfigurableMapConnect"
+          "data-testid": "coreConfigurableMapConnect",
+          displayGetFeatureInfoButtonInMap: true
         }));
       }
 
@@ -24735,21 +25556,29 @@ var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref3) {
  * */
 var MapWarningProperties = function MapWarningProperties(_ref) {
   var selectedFeatureProperties = _ref.selectedFeatureProperties,
-      languageIndex = _ref.languageIndex;
+      languageIndex = _ref.languageIndex,
+      parentSize = _ref.parentSize;
   var language = languageIndex || 0;
+  var newWidth = parentSize ? parentSize - 100 : 350;
   return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      position: 'fixed',
+      width: "".concat(newWidth, "px"),
+      height: '1px',
+      display: 'flex',
+      justifyContent: 'center',
+      left: '50px'
+    }
+  }, /*#__PURE__*/React__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.createElement("h1", {
     "data-testid": "map-warning-properties-title"
@@ -24763,7 +25592,7 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
     "data-testid": "map-warning-properties-row"
   }, "Sender: ", selectedFeatureProperties.languages[language].senderName), selectedFeatureProperties.identifier && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "Identifier: ", selectedFeatureProperties.identifier));
+  }, "Identifier: ", selectedFeatureProperties.identifier)));
 };
 
 /* *