@opengeoweb/store 15.1.0 → 15.3.0

package/index.esm.js

@@ -1,14 +1,14 @@
 import { createSlice, createSelector, createAction, createListenerMiddleware, isAnyOf, createEntityAdapter, combineReducers, configureStore } from '@reduxjs/toolkit';
-import { isEqual, merge, isEmpty, compact } from 'lodash';
+import { isEqual, mergeWith, merge, isEmpty, compact } from 'lodash';
 import { webmapUtils, parseISO8601IntervalToDateInterval, LayerType, handleDateUtilsISOString, webmapTestSettings, WMLayer, getWMLayerById, WMInvalidDateValues, isProjectionSupported, queryWMSLayers } from '@opengeoweb/webmap';
-import { dateUtils, PROJECTION, defaultDelay } from '@opengeoweb/shared';
+import { dateUtils, PROJECTION, defaultDelay, useDebounce } from '@opengeoweb/shared';
 import { secondsPerPxFromCanvasWidth, defaultTimeSpan, defaultSecondsPerPx, defaultAnimationDelayAtStart, defaultTimeStep, roundWithTimeStep, getSpeedDelay } from '@opengeoweb/time-slider';
 import { produce } from 'immer';
 import { getLastEmptyFeatureIndex, getGeoJson, moveFeature, createInterSections, defaultLayers, emptyGeoJSON, defaultIntersectionStyleProperties, addSelectionTypeToGeoJSON, getFeatureCollection } from '@opengeoweb/webmap-react';
 export { defaultLayers } from '@opengeoweb/webmap-react';
+import React, { useEffect, useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { center } from '@turf/turf';
-import { useEffect, useCallback } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
 import { metronome } from '@opengeoweb/metronome';
 import { View, Observable } from 'ol';
 import { boundingExtent, getCenter } from 'ol/extent';
@@ -1610,7 +1610,7 @@ var produceDraftStateForAllLayersForDimensionWithinMap = function produceDraftSt
   var actionLayerSynced = isActionLayerSynced(draft, layerIdFromAction, dimension);
   draft.allIds.forEach(function (layerId) {
     var layer = draft.byId[layerId];
-    if (!layer || layer.mapId !== mapId) {
+    if (!layer || (layer === null || layer === void 0 ? void 0 : layer.mapId) !== mapId) {
       return;
     }
     var wmjsDimension = webmapUtils.getWMJSDimensionForLayerAndDimension(layerId, dimension.name);
@@ -1823,6 +1823,9 @@ var slice$6 = createSlice({
       if (draft.byId[layerId]) {
         draft.byId[layerId].style = style;
       }
+      if (draft.activeLayerInfo) {
+        draft.activeLayerInfo.style = style;
+      }
     },
     layerChangeAcceptanceTime: function layerChangeAcceptanceTime(draft, action) {
       var _action$payload7 = action.payload,
@@ -2012,7 +2015,8 @@ var slice$6 = createSlice({
         mapId = _action$payload13.mapId;
       // remove current baselayers for passed map
       draft.availableBaseLayers.allIds = draft.availableBaseLayers.allIds.filter(function (layerId) {
-        if (draft.availableBaseLayers.byId[layerId] && draft.availableBaseLayers.byId[layerId].mapId === mapId) {
+        var _draft$availableBaseL;
+        if (((_draft$availableBaseL = draft.availableBaseLayers.byId[layerId]) === null || _draft$availableBaseL === void 0 ? void 0 : _draft$availableBaseL.mapId) === mapId) {
           delete draft.availableBaseLayers.byId[layerId];
           return false;
         }
@@ -2192,7 +2196,15 @@ var slice$6 = createSlice({
           currentLayer.selectedFeatureIndex = newFeatureIndex;
         }
       }
-      currentLayer.geojson = updatedGeoJSON;
+      var updatedGeoJSONWithIds = shouldAllowMultipleShapes ? _objectSpread2(_objectSpread2({}, updatedGeoJSON), {}, {
+        features: updatedGeoJSON.features.map(function (feature, index) {
+          return _objectSpread2(_objectSpread2({}, feature), {}, {
+            // Save the index as id so we can use it to select features
+            id: index
+          });
+        })
+      }) : updatedGeoJSON;
+      currentLayer.geojson = updatedGeoJSONWithIds;
       if (geoJSONIntersectionBoundsLayerId && geoJSONIntersectionLayerId) {
         var _currentLayer$geojson;
         var intersectionLayer = draft.byId[geoJSONIntersectionLayerId];
@@ -2202,7 +2214,7 @@ var slice$6 = createSlice({
         }
         var bounds = intersectionBoundsLayer.geojson;
         var geoJSONProperties = intersectionLayer.defaultGeoJSONProperties || ((_currentLayer$geojson = currentLayer.geojson) === null || _currentLayer$geojson === void 0 || (_currentLayer$geojson = _currentLayer$geojson.features[0]) === null || _currentLayer$geojson === void 0 ? void 0 : _currentLayer$geojson.properties);
-        intersectionLayer.geojson = createInterSections(updatedGeoJSON, bounds, geoJSONProperties);
+        intersectionLayer.geojson = createInterSections(updatedGeoJSONWithIds, bounds, geoJSONProperties);
       }
     },
     updateFeatureProperties: function updateFeatureProperties(draft, action) {
@@ -2279,10 +2291,12 @@ var slice$6 = createSlice({
     showLayerInfo: function showLayerInfo(draft, action) {
       var _action$payload21 = action.payload,
         serviceUrl = _action$payload21.serviceUrl,
-        layerName = _action$payload21.layerName;
+        layerName = _action$payload21.layerName,
+        style = _action$payload21.style;
       draft.activeLayerInfo = {
         serviceUrl: serviceUrl,
-        layerName: layerName
+        layerName: layerName,
+        style: style
       };
     },
     hideLayerInfo: function hideLayerInfo(draft) {
@@ -2340,7 +2354,7 @@ var slice$6 = createSlice({
       var layers = draft.allIds.map(function (id) {
         return draft.byId[id];
       }).filter(function (layer) {
-        return layer && layer.mapId === mapId;
+        return (layer === null || layer === void 0 ? void 0 : layer.mapId) === mapId;
       });
       layers.forEach(function (layer) {
         delete draft.byId[layer.id];
@@ -2710,35 +2724,68 @@ var slice$5 = createSlice({
       }
       draft.byId[mapId].dockedLayerManagerSize = dockedLayerManagerSize;
     },
+    setDockedLayerManagerPosition: function setDockedLayerManagerPosition(draft, action) {
+      var _action$payload25 = action.payload,
+        mapId = _action$payload25.mapId,
+        dockedLayerManagerPosition = _action$payload25.dockedLayerManagerPosition;
+      if (!draft.byId[mapId]) {
+        return;
+      }
+      draft.byId[mapId].dockedLayerManagerPosition = dockedLayerManagerPosition;
+    },
+    setDockedLayerManagerDimensions: function setDockedLayerManagerDimensions(draft, action) {
+      var _action$payload26 = action.payload,
+        mapId = _action$payload26.mapId,
+        dockedLayerManagerDimensions = _action$payload26.dockedLayerManagerDimensions;
+      if (!draft.byId[mapId]) {
+        return;
+      }
+      draft.byId[mapId].dockedLayerManagerDimensions = dockedLayerManagerDimensions;
+    },
     setMapPresetError: function setMapPresetError(_draft, _action) {},
     setDefaultMapSettings: function setDefaultMapSettings(draft, action) {
       draft.defaultMapSettings = action.payload.preset;
     },
     changeOverlayer: function changeOverlayer(draft, action) {
-      var _action$payload25 = action.payload,
-        mapId = _action$payload25.mapId,
-        selectedOverlayer = _action$payload25.selectedOverlayer;
+      var _action$payload27 = action.payload,
+        mapId = _action$payload27.mapId,
+        selectedOverlayer = _action$payload27.selectedOverlayer;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].overLayers = [selectedOverlayer];
     },
     toggleClock: function toggleClock(draft, action) {
-      var _action$payload26 = action.payload,
-        mapId = _action$payload26.mapId,
-        isClockVisible = _action$payload26.isClockVisible;
+      var _action$payload28 = action.payload,
+        mapId = _action$payload28.mapId,
+        isClockVisible = _action$payload28.isClockVisible;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].isClockVisible = isClockVisible;
+    },
+    setClockPositionSize: function setClockPositionSize(draft, action) {
+      var _action$payload29 = action.payload,
+        mapId = _action$payload29.mapId,
+        position = _action$payload29.position,
+        size = _action$payload29.size;
+      if (!draft.byId[mapId]) {
+        return;
+      }
+      if (position) {
+        draft.byId[mapId].clockPosition = position;
+      }
+      if (size) {
+        draft.byId[mapId].clockSize = size;
+      }
     }
   },
   extraReducers: function extraReducers(builder) {
     builder.addCase(layerActions.addLayer, function (draft, action) {
-      var _action$payload27 = action.payload,
-        layerId = _action$payload27.layerId,
-        mapId = _action$payload27.mapId,
-        layer = _action$payload27.layer;
+      var _action$payload30 = action.payload,
+        layerId = _action$payload30.layerId,
+        mapId = _action$payload30.mapId,
+        layer = _action$payload30.layer;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2750,17 +2797,17 @@ var slice$5 = createSlice({
         draft.byId[mapId].autoUpdateLayerId = layerId;
         draft.byId[mapId].autoTimeStepLayerId = layerId;
       }
-      var isFeatureLayer = layer && layer.layerType === LayerType.featureLayer;
+      var isFeatureLayer = (layer === null || layer === void 0 ? void 0 : layer.layerType) === LayerType.featureLayer;
       if (isFeatureLayer) {
         draft.byId[mapId].featureLayers.unshift(layerId);
       } else {
         draft.byId[mapId].mapLayers.unshift(layerId);
       }
     }).addCase(layerActions.duplicateMapLayer, function (draft, action) {
-      var _action$payload28 = action.payload,
-        newLayerId = _action$payload28.newLayerId,
-        oldLayerId = _action$payload28.oldLayerId,
-        mapId = _action$payload28.mapId;
+      var _action$payload31 = action.payload,
+        newLayerId = _action$payload31.newLayerId,
+        oldLayerId = _action$payload31.oldLayerId,
+        mapId = _action$payload31.mapId;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2777,10 +2824,10 @@ var slice$5 = createSlice({
         draft.byId[mapId].featureLayers.unshift(newLayerId);
       }
     }).addCase(layerActions.addBaseLayer, function (draft, action) {
-      var _action$payload29 = action.payload,
-        layer = _action$payload29.layer,
-        layerId = _action$payload29.layerId,
-        mapId = _action$payload29.mapId;
+      var _action$payload32 = action.payload,
+        layer = _action$payload32.layer,
+        layerId = _action$payload32.layerId,
+        mapId = _action$payload32.mapId;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2810,9 +2857,9 @@ var slice$5 = createSlice({
         draft.byId[mapId].autoTimeStepLayerId = activeLayerId;
       }
     }).addCase(layerActions.setBaseLayers, function (draft, action) {
-      var _action$payload30 = action.payload,
-        layers = _action$payload30.layers,
-        mapId = _action$payload30.mapId;
+      var _action$payload33 = action.payload,
+        layers = _action$payload33.layers,
+        mapId = _action$payload33.mapId;
       // Split into base and overlayers
       var baseLayers = [];
       var overLayers = [];
@@ -2842,9 +2889,9 @@ var slice$5 = createSlice({
         }
       }
     }).addCase(layerActions.layerDelete, function (draft, action) {
-      var _action$payload31 = action.payload,
-        mapId = _action$payload31.mapId,
-        layerId = _action$payload31.layerId;
+      var _action$payload34 = action.payload,
+        mapId = _action$payload34.mapId,
+        layerId = _action$payload34.layerId;
       var map = draft.byId[mapId];
       if (!map) {
         return;
@@ -2870,9 +2917,9 @@ var slice$5 = createSlice({
         return id !== layerId;
       });
     }).addCase(layerActions.baseLayerDelete, function (draft, action) {
-      var _action$payload32 = action.payload,
-        mapId = _action$payload32.mapId,
-        layerId = _action$payload32.layerId;
+      var _action$payload35 = action.payload,
+        mapId = _action$payload35.mapId,
+        layerId = _action$payload35.layerId;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2883,14 +2930,14 @@ var slice$5 = createSlice({
         return id !== layerId;
       });
     }).addCase(layerActions.layerChangeDimension, function (draft, action) {
-      var _action$payload33 = action.payload,
-        layerId = _action$payload33.layerId,
-        dimension = _action$payload33.dimension;
+      var _action$payload36 = action.payload,
+        layerId = _action$payload36.layerId,
+        dimension = _action$payload36.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$payload37 = action.payload,
+        targetsFromAction = _action$payload37.targets,
+        source = _action$payload37.source;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
       var targets = [];
       if (source) {
@@ -2943,9 +2990,9 @@ var slice$5 = createSlice({
         }
       });
     }).addCase(setBboxSync, function (draft, action) {
-      var _action$payload35 = action.payload,
-        targetsFromAction = _action$payload35.targets,
-        source = _action$payload35.source;
+      var _action$payload38 = action.payload,
+        targetsFromAction = _action$payload38.targets,
+        source = _action$payload38.source;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
       var targets = [];
       if (source) {
@@ -2977,9 +3024,9 @@ var slice$5 = 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$payload39 = action.payload,
+        targets = _action$payload39.targets,
+        source = _action$payload39.source;
       return targets.reduce(function (prevState, target) {
         var actionType = (source === null || source === void 0 ? void 0 : source.type) || 'GENERIC_SYNC_SETLAYERACTIONS';
         var action = {
@@ -3001,9 +3048,9 @@ var slice$5 = createSlice({
       });
       return draft;
     }).addCase(mapChangeDimension, function (draft, action) {
-      var _action$payload37 = action.payload,
-        mapId = _action$payload37.mapId,
-        dimensionFromAction = _action$payload37.dimension;
+      var _action$payload40 = action.payload,
+        mapId = _action$payload40.mapId,
+        dimensionFromAction = _action$payload40.dimension;
       produceDraftStateSetWebMapDimension(draft, mapId, dimensionFromAction, true);
     }).addCase(setMapPreset, function (draft, action) {
       var mapId = action.payload.mapId;
@@ -3023,9 +3070,9 @@ var slice$5 = createSlice({
       draft.byId[mapId].animationDelay = defaultAnimationDelayAtStart;
       draft.byId[mapId].dockedLayerManagerSize = '';
     }).addCase(uiActions.registerDialog, function (draft, action) {
-      var _action$payload38 = action.payload,
-        mapId = _action$payload38.mapId,
-        type = _action$payload38.type;
+      var _action$payload41 = action.payload,
+        mapId = _action$payload41.mapId,
+        type = _action$payload41.type;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -3276,14 +3323,31 @@ var slice$4 = createSlice({
       if (synchronizationGroup.targets.allIds.includes(targetId)) {
         return;
       }
-      var isSourceLinked = (_synchronizationGroup = synchronizationGroup.targets.byId[targetId]) === null || _synchronizationGroup === void 0 ? void 0 : _synchronizationGroup.linked;
       synchronizationGroup.targets.allIds.push(targetId);
       synchronizationGroup.targets.byId[targetId] = {
         linked: linked !== false
       };
+      var isSourceLinked = (_synchronizationGroup = synchronizationGroup.targets.byId[targetId]) === null || _synchronizationGroup === void 0 ? void 0 : _synchronizationGroup.linked;
       if (isSourceLinked) {
-        var type = synchronizationGroup.type;
-        draft.sources.byId[targetId].payloadByType[type] = synchronizationGroup.payloadByType[type];
+        // In order to make syncgroup work correctly we need to have defaults
+        var defaultS = {
+          payloadByType: {
+            SYNCGROUPS_TYPE_SETTIME: {
+              value: {
+                timeSliderSpan: defaultTimeSpan,
+                timeSliderStep: defaultTimeStep
+              }
+            }
+          }
+        };
+        if (draft.sources.byId[targetId]) {
+          // Assign object based on 1: defaults, 2: The values in the group, 3: the values of the source.
+          mergeWith(draft.sources.byId[targetId], defaultS, synchronizationGroup, draft.sources.byId[targetId],
+          // eslint-disable-next-line id-length, @typescript-eslint/no-unsafe-return
+          function (a, b) {
+            return b === null ? a : undefined;
+          });
+        }
       }
     },
     syncGroupRemoveTarget: function syncGroupRemoveTarget(draft, action) {
@@ -3408,13 +3472,13 @@ var setBboxOrTimeSync = function setBboxOrTimeSync(draft, action) {
   }
 };
 var _slice$actions = slice$4.actions,
-  syncGroupAddGroup = _slice$actions.syncGroupAddGroup;
-  _slice$actions.syncGroupAddSource;
-  var syncGroupAddTarget = _slice$actions.syncGroupAddTarget;
+  syncGroupAddGroup = _slice$actions.syncGroupAddGroup,
+  syncGroupAddSource = _slice$actions.syncGroupAddSource,
+  syncGroupAddTarget = _slice$actions.syncGroupAddTarget;
   _slice$actions.syncGroupClear;
   _slice$actions.syncGroupLinkTarget;
   _slice$actions.syncGroupRemoveGroup;
-  _slice$actions.syncGroupRemoveSource;
+  var syncGroupRemoveSource = _slice$actions.syncGroupRemoveSource;
   _slice$actions.syncGroupRemoveTarget;
   _slice$actions.syncGroupSetViewState;
 var syncGroupsReducer = slice$4.reducer,
@@ -3918,7 +3982,7 @@ function (state, mapId) {
   var selectedFeature = (_features$ = features[0]) === null || _features$ === void 0 ? void 0 : _features$.geoJSON.features.find(function (feature) {
     return feature.id === selectedFeatureId;
   });
-  if (selectedFeature && selectedFeature.geometry.type === 'Point') {
+  if ((selectedFeature === null || selectedFeature === void 0 ? void 0 : selectedFeature.geometry.type) === 'Point') {
     var _selectedFeature$prop, _selectedFeature$prop2, _selectedFeature$prop3;
     var coordinates = selectedFeature.geometry.coordinates;
     return {
@@ -3961,12 +4025,26 @@ var getSelectedFeatureAsGeoJSON = createSelector([function (state, mapId) {
   });
   return selectedFeature;
 });
+var getSyncedStartCenterEndStepCurrentTime = createSelector(function (coreAppStore, sourceId) {
+  return getTime(getSynchronizationGroupStore(coreAppStore), sourceId);
+}, function (store) {
+  if (!(store !== null && store !== void 0 && store.timeSliderCenterTime) || !(store !== null && store !== void 0 && store.timeSliderSpan)) {
+    return undefined;
+  }
+  return {
+    start: Math.round(store.timeSliderCenterTime - store.timeSliderSpan / 2),
+    end: Math.round(store.timeSliderCenterTime + store.timeSliderSpan / 2),
+    step: (store === null || store === void 0 ? void 0 : store.timeSliderStep) || 60,
+    current: dateUtils.unixFromISOString(store === null || store === void 0 ? void 0 : store.currentTime)
+  };
+}, selectorMemoizationOptions);
 
 var selectors$5 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   getLinkedMaps: getLinkedMaps,
   getSelectedFeature: getSelectedFeature,
   getSelectedFeatureAsGeoJSON: getSelectedFeatureAsGeoJSON,
+  getSyncedStartCenterEndStepCurrentTime: getSyncedStartCenterEndStepCurrentTime,
   getSynchronizationGroupStore: getSynchronizationGroupStore,
   getTime: getTime,
   selectLinkedFeatures: selectLinkedFeatures,
@@ -3976,6 +4054,60 @@ var selectors$5 = /*#__PURE__*/Object.freeze({
   selectSharedData: selectSharedData
 });
 
+/* *
+ * 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 2026 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2026 - Finnish Meteorological Institute (FMI)
+ * Copyright 2026 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+/**
+ * This registers a new syncgroup souce for given panel id. The source is not synced to any group by default.
+ * When the user links the source with a group, this hook returns an object with the timeslider state: start, end, step and current time.
+ * @param panelId panelId to register
+ * @returns the timeslider state
+ */
+var useSyncgroupTimeState = function useSyncgroupTimeState(panelId) {
+  var debounceMs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
+  var dispatch = useDispatch();
+  var syncGroupsAddSourceCallBack = React.useCallback(function (payload) {
+    dispatch(syncGroupAddSource(payload));
+  }, [dispatch]);
+  var syncGroupRemoveSourceCallback = React.useCallback(function (payload) {
+    dispatch(syncGroupRemoveSource(payload));
+  }, [dispatch]);
+  // Register
+  useEffect(function () {
+    syncGroupsAddSourceCallBack({
+      id: panelId,
+      type: [SYNCGROUPS_TYPE_SETTIME]
+    });
+    return function () {
+      syncGroupRemoveSourceCallback({
+        id: panelId
+      });
+    };
+  }, [panelId, syncGroupsAddSourceCallBack, syncGroupRemoveSourceCallback]);
+  var syncGroupTimeSliderCenterStartEndStep = useSelector(function (store) {
+    return getSyncedStartCenterEndStepCurrentTime(store, panelId);
+  });
+  var syncTargets = useSelector(function (store) {
+    return getAllTargetGroupsForSource(store, panelId);
+  });
+  var isSyncgroupLinked = syncTargets.length > 0;
+  return useDebounce(isSyncgroupLinked ? syncGroupTimeSliderCenterStartEndStep : undefined, debounceMs);
+};
+
 var useUpdateSharedData = function useUpdateSharedData(data, panelId) {
   var sharedData = useSelector(function (state) {
     return selectSharedData(state, panelId);
@@ -4743,6 +4875,20 @@ var getLayerService = createSelector(getLayerById, function (layer) {
   var _layer$service;
   return (_layer$service = layer === null || layer === void 0 ? void 0 : layer.service) !== null && _layer$service !== void 0 ? _layer$service : '';
 }, selectorMemoizationOptions);
+/**
+ * Gets layer service name
+ *
+ * Example: layerService = getLayerServiceName(store, 'layerId_1')
+ * @param {object} store store: object - object from which the layers state will be extracted
+ * @param {string} layerId layerId: string - Id of the layer
+ * @returns {string} returnType: string -  layer service name
+ */
+var getLayerServiceName = createSelector(function (store) {
+  return store;
+}, getLayerById, getLayerService, function (store, layer, service) {
+  var layerService = getServiceByUrl(store, service);
+  return layerService !== null && layerService !== void 0 && layerService.name ? layerService === null || layerService === void 0 ? void 0 : layerService.name : '';
+}, selectorMemoizationOptions);
 /**
  * Gets selected style of the passed layer
  *
@@ -5018,6 +5164,7 @@ var selectors$2 = /*#__PURE__*/Object.freeze({
   getLayerOpacity: getLayerOpacity,
   getLayerOptions: getLayerOptions,
   getLayerService: getLayerService,
+  getLayerServiceName: getLayerServiceName,
   getLayerStatus: getLayerStatus,
   getLayerStyle: getLayerStyle,
   getLayerTimeDimension: getLayerTimeDimension,
@@ -5491,7 +5638,6 @@ var getMapTimeSliderStartCenterEndAndStep = createSelector(getMapById, function
   var step = (_store$timeStep2 = store === null || store === void 0 ? void 0 : store.timeStep) !== null && _store$timeStep2 !== void 0 ? _store$timeStep2 : defaultTimeStep;
   return {
     start: start,
-    center: center,
     end: end,
     step: step
   };
@@ -5725,6 +5871,24 @@ var getLegendId = createSelector(getMapById, function (store) {
 var getIsClockVisible = createSelector(getMapById, function (store) {
   return store === null || store === void 0 ? void 0 : store.isClockVisible;
 }, selectorMemoizationOptions);
+/**
+ * Returns if clock position from webmap state
+ *
+ * @param {CoreAppStore} store - The Redux store from which the map state will be extracted.
+ * @returns {ClockPosition | undefined} returnType: boolean
+ */
+var getClockPosition = createSelector(getMapById, function (store) {
+  return store === null || store === void 0 ? void 0 : store.clockPosition;
+}, selectorMemoizationOptions);
+/**
+ * Returns if clock size from webmap state
+ *
+ * @param {CoreAppStore} store - The Redux store from which the map state will be extracted.
+ * @returns {ClockSize | undefined} returnType: boolean
+ */
+var getClockSize = createSelector(getMapById, function (store) {
+  return store === null || store === void 0 ? void 0 : store.clockSize;
+}, selectorMemoizationOptions);
 /**
  * Creates a MapPreset from mapId
  *
@@ -5734,14 +5898,26 @@ var getIsClockVisible = createSelector(getMapById, function (store) {
  * @param {boolean} keepAllDims? keepAllDims: boolean - default false: whether or not to leave the time and reference_time dimentions
  * @returns {MapPreset} returnType: MapPreset
  */
-var getMapPreset = createSelector(getMapLayers, getMapBaseLayers, getMapOverLayers, getBbox, getSrs, getActiveLayerId, getAutoTimeStepLayerId, getAutoUpdateLayerId, isAnimating, isAutoUpdating, isTimeSliderVisible, getDisplayMapPin, isZoomControlsVisible, getMapTimeStep, getMapAnimationDelay, getAnimationStartTime, getAnimationEndTime, getMapTimeSliderSpan, getMapDimensions, isTimestepAuto, isTimeSpanAuto, getLegendId, getIsClockVisible, getUiStore, function (_store, mapId) {
+var getMapPreset = createSelector(getMapLayers, getMapBaseLayers, getMapOverLayers, getBbox, getSrs, getActiveLayerId, getAutoTimeStepLayerId, getAutoUpdateLayerId, isAnimating, isAutoUpdating, isTimeSliderVisible, getDisplayMapPin, isZoomControlsVisible, getMapTimeStep, getMapAnimationDelay, getAnimationStartTime, getAnimationEndTime, getMapTimeSliderSpan, getMapDimensions, isTimestepAuto, isTimeSpanAuto, getLegendId, function (store, mapId) {
+  var _getMapById$dockedLay, _getMapById;
+  return (_getMapById$dockedLay = (_getMapById = getMapById(store, mapId)) === null || _getMapById === void 0 ? void 0 : _getMapById.dockedLayerManagerSize) !== null && _getMapById$dockedLay !== void 0 ? _getMapById$dockedLay : 'sizeSmall';
+}, function (store, mapId) {
+  var _getMapById$dockedLay2, _getMapById2;
+  return (_getMapById$dockedLay2 = (_getMapById2 = getMapById(store, mapId)) === null || _getMapById2 === void 0 ? void 0 : _getMapById2.dockedLayerManagerPosition) !== null && _getMapById$dockedLay2 !== void 0 ? _getMapById$dockedLay2 : {
+    x: 0,
+    y: 0
+  };
+}, function (store, mapId) {
+  var _getMapById3;
+  return (_getMapById3 = getMapById(store, mapId)) === null || _getMapById3 === void 0 ? void 0 : _getMapById3.dockedLayerManagerDimensions;
+}, getIsClockVisible, getClockPosition, getClockSize, getUiStore, function (_store, mapId) {
   return mapId;
 }, function (_store, _mapId) {
   var keepAllDims = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return keepAllDims;
-}, function (mapLayers, baseLayers, overLayers, bbox, srs, activeLayerId, autoTimeStepLayerId, autoUpdateLayerId, isAnimating, isAutoUpdating, isTimeSliderVisible, displayMapPin, isZoomControlsVisible, mapTimeStep, mapAnimationDelay, animationStartTime, animationEndTime, timeSliderSpan, mapDimensions, isTimestepAuto, isTimeSpanAuto, legendId, isClockVisible, uiStore, mapId, keepAllDims) {
+}, function (mapLayers, baseLayers, overLayers, bbox, srs, activeLayerId, autoTimeStepLayerId, autoUpdateLayerId, isAnimating, isAutoUpdating, isTimeSliderVisible, displayMapPin, isZoomControlsVisible, mapTimeStep, mapAnimationDelay, animationStartTime, animationEndTime, timeSliderSpan, mapDimensions, isTimestepAuto, isTimeSpanAuto, legendId, dockedLayerManagerSize, dockedLayerManagerPosition, dockedLayerManagerDimensions, isClockVisible, clockPosition, clockSize, uiStore, mapId, keepAllDims) {
   var _overLayers$, _uiStore$dialogs$lege;
-  var defaultOverlayer = arguments.length > 26 && arguments[26] !== undefined ? arguments[26] : ((_overLayers$ = overLayers[0]) === null || _overLayers$ === void 0 ? void 0 : _overLayers$.name) || 'none';
+  var defaultOverlayer = arguments.length > 31 && arguments[31] !== undefined ? arguments[31] : ((_overLayers$ = overLayers[0]) === null || _overLayers$ === void 0 ? void 0 : _overLayers$.name) || 'none';
   var allLayers = [].concat(_toConsumableArray(baseLayers), _toConsumableArray(overLayers), _toConsumableArray(mapLayers)).map(function (_ref3) {
     _ref3.mapId;
       var layer = _objectWithoutProperties(_ref3, _excluded$2);
@@ -5769,7 +5945,19 @@ var getMapPreset = createSelector(getMapLayers, getMapBaseLayers, getMapOverLaye
   var shouldShowLegend = legendId ? uiStore === null || uiStore === void 0 || (_uiStore$dialogs$lege = uiStore.dialogs[legendId]) === null || _uiStore$dialogs$lege === void 0 ? void 0 : _uiStore$dialogs$lege.isOpen : false;
   var dataExplorerDialog = uiStore === null || uiStore === void 0 ? void 0 : uiStore.dialogs[DialogTypes.DataExplorer];
   var shouldShowDataExplorer = (dataExplorerDialog === null || dataExplorerDialog === void 0 ? void 0 : dataExplorerDialog.isOpen) && (dataExplorerDialog === null || dataExplorerDialog === void 0 ? void 0 : dataExplorerDialog.activeMapId) === mapId || false;
-  return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+  var dockedLayerManagerDialog = uiStore === null || uiStore === void 0 ? void 0 : uiStore.dialogs["".concat(DialogTypes.DockedLayerManager, "-").concat(mapId)];
+  var floatingLayerManagerDialog = uiStore === null || uiStore === void 0 ? void 0 : uiStore.dialogs[DialogTypes.LayerManager];
+  var floatingLayerManagerMultimapDialog = uiStore === null || uiStore === void 0 ? void 0 : uiStore.dialogs["".concat(DialogTypes.LayerManager, "-").concat(mapId)];
+  var isFloatingLayerManagerOpenForMap = (floatingLayerManagerDialog === null || floatingLayerManagerDialog === void 0 ? void 0 : floatingLayerManagerDialog.isOpen) && (floatingLayerManagerDialog === null || floatingLayerManagerDialog === void 0 ? void 0 : floatingLayerManagerDialog.activeMapId) === mapId || (floatingLayerManagerMultimapDialog === null || floatingLayerManagerMultimapDialog === void 0 ? void 0 : floatingLayerManagerMultimapDialog.isOpen) || false;
+  var shouldShowDockedLayerManager = ((dockedLayerManagerDialog === null || dockedLayerManagerDialog === void 0 ? void 0 : dockedLayerManagerDialog.isOpen) || false) && !isFloatingLayerManagerOpenForMap;
+  var dockedLayerManagerPreset = shouldShowDockedLayerManager ? _objectSpread2({
+    shouldShowDockedLayerManager: shouldShowDockedLayerManager,
+    dockedLayerManagerSize: dockedLayerManagerSize,
+    dockedLayerManagerPosition: dockedLayerManagerPosition
+  }, dockedLayerManagerDimensions && {
+    dockedLayerManagerDimensions: dockedLayerManagerDimensions
+  }) : {};
+  return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
     layers: allLayers
   }, activeLayerId && {
     activeLayerId: activeLayerId
@@ -5794,8 +5982,12 @@ var getMapPreset = createSelector(getMapLayers, getMapBaseLayers, getMapOverLaye
     timeSliderSpan: timeSliderSpan,
     shouldShowDataExplorer: shouldShowDataExplorer,
     defaultOverlayer: defaultOverlayer
-  }, isClockVisible !== undefined && {
+  }, dockedLayerManagerPreset), isClockVisible !== undefined && {
     isClockVisible: isClockVisible
+  }), clockPosition !== undefined && {
+    clockPosition: clockPosition
+  }), clockSize !== undefined && {
+    clockSize: clockSize
   }), keepAllDims && {
     dimensions: mapDimensions
   });
@@ -5910,6 +6102,24 @@ var getIsEnabledLayersForMapDimension = createSelector(getMapLayerIdsEnabled, fu
 var getDockedLayerManagerSize = createSelector(getMapById, function (store) {
   return store ? store.dockedLayerManagerSize : 'sizeSmall';
 }, selectorMemoizationOptions);
+/**
+ * Returns the dockedLayerManagerPosition originally set in mapPresets
+ *
+ * Example getDockedLayerManagerPosition(store);
+ * @param {object} store store: object - store object
+ * @param {string} mapId mapId: string - Id of the map
+ * @returns {DockedLayerManagerPosition} returnType: object
+ */
+var getDockedLayerManagerPosition = createSelector(getMapById, function (store) {
+  var _store$dockedLayerMan;
+  return (_store$dockedLayerMan = store === null || store === void 0 ? void 0 : store.dockedLayerManagerPosition) !== null && _store$dockedLayerMan !== void 0 ? _store$dockedLayerMan : {
+    x: 0,
+    y: 0
+  };
+}, selectorMemoizationOptions);
+var getDockedLayerManagerDimensions = createSelector(getMapById, function (store) {
+  return store === null || store === void 0 ? void 0 : store.dockedLayerManagerDimensions;
+}, selectorMemoizationOptions);
 /**
  * Returns the animation list for given map id
  * @param {object} store store: object - store object
@@ -6025,9 +6235,13 @@ var selectors$1 = /*#__PURE__*/Object.freeze({
   getAutoTimeStepLayerId: getAutoTimeStepLayerId,
   getAutoUpdateLayerId: getAutoUpdateLayerId,
   getBbox: getBbox,
+  getClockPosition: getClockPosition,
+  getClockSize: getClockSize,
   getDataLimitsFromLayers: getDataLimitsFromLayers,
   getDisableMapPin: getDisableMapPin,
   getDisplayMapPin: getDisplayMapPin,
+  getDockedLayerManagerDimensions: getDockedLayerManagerDimensions,
+  getDockedLayerManagerPosition: getDockedLayerManagerPosition,
   getDockedLayerManagerSize: getDockedLayerManagerSize,
   getFirstMap: getFirstMap,
   getFirstMapId: getFirstMapId,
@@ -6551,18 +6765,25 @@ genericListener.startListening({
             payload = _ref.payload;
             listenerApi.cancelActiveListeners();
             value = payload.value, origin = payload.origin;
-            if (value !== null && value !== void 0 && value.currentTime) {
-              currentTime = value.currentTime;
-              /* Test if the current is according to the expected time format */
-              if (!setTimeValidatorRexexp.test(currentTime)) {
-                console.error("setTime value ".concat(currentTime, " does not conform to format [YYYY-MM-DDThh:mm:ssZ]. It was triggered by ").concat(origin));
-              } else {
-                targets = getTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETTIME);
-                groups = getTargetGroups(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETTIME);
-                listenerApi.dispatch(setTimeSync(payload, targets, groups));
-              }
+            if (!(value !== null && value !== void 0 && value.currentTime)) {
+              _context.next = 8;
+              break;
             }
-          case 4:
+            currentTime = value.currentTime;
+            /* Test if the current is according to the expected time format */
+            if (setTimeValidatorRexexp.test(currentTime)) {
+              _context.next = 8;
+              break;
+            }
+            console.error("setTime value ".concat(currentTime, " does not conform to format [YYYY-MM-DDThh:mm:ssZ]. It was triggered by ").concat(origin));
+            // Do not do anything
+            return _context.abrupt("return");
+          case 8:
+            // SetTimeSyncProps contains besides currenttime many other props. Set these.
+            targets = getTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETTIME);
+            groups = getTargetGroups(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETTIME);
+            listenerApi.dispatch(setTimeSync(payload, targets, groups));
+          case 11:
           case "end":
             return _context.stop();
         }
@@ -6658,7 +6879,7 @@ genericListener.startListening({
             payload = _ref4.payload, type = _ref4.type;
             listenerApi.cancelActiveListeners();
             /* Should not listen to actions from itself */
-            if (!(payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer)) {
+            if (!((payload === null || payload === void 0 ? void 0 : payload.origin) === LayerActionOrigin.ReactMapViewParseLayer)) {
               _context4.next = 4;
               break;
             }
@@ -6691,7 +6912,7 @@ genericListener.startListening({
             payload = _ref5.payload, type = _ref5.type;
             listenerApi.cancelActiveListeners();
             /* Should not listen to actions from itself */
-            if (!(payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer)) {
+            if (!((payload === null || payload === void 0 ? void 0 : payload.origin) === LayerActionOrigin.ReactMapViewParseLayer)) {
               _context5.next = 4;
               break;
             }
@@ -6756,7 +6977,7 @@ genericListener.startListening({
             payload = _ref7.payload, type = _ref7.type;
             listenerApi.cancelActiveListeners();
             /* Should not listen to actions from itself */
-            if (!(payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer)) {
+            if (!((payload === null || payload === void 0 ? void 0 : payload.origin) === LayerActionOrigin.ReactMapViewParseLayer)) {
               _context7.next = 4;
               break;
             }
@@ -6815,7 +7036,7 @@ genericListener.startListening({
             payload = _ref9.payload, type = _ref9.type;
             listenerApi.cancelActiveListeners();
             /* Should not listen to actions from itself */
-            if (!(payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer)) {
+            if (!((payload === null || payload === void 0 ? void 0 : payload.origin) === LayerActionOrigin.ReactMapViewParseLayer)) {
               _context9.next = 4;
               break;
             }
@@ -6848,7 +7069,7 @@ genericListener.startListening({
             payload = _ref0.payload, type = _ref0.type;
             listenerApi.cancelActiveListeners();
             /* Should not listen to actions from itself */
-            if (!(payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer)) {
+            if (!((payload === null || payload === void 0 ? void 0 : payload.origin) === LayerActionOrigin.ReactMapViewParseLayer)) {
               _context0.next = 4;
               break;
             }
@@ -7327,7 +7548,7 @@ mapListener.startListening({
   actionCreator: mapActions.setMapPreset,
   effect: function () {
     var _effect2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref6, listenerApi) {
-      var payload, mapId, initialProps, mapPreset, _mapPreset$dimensions, layers, activeLayerId, autoTimeStepLayerId, autoUpdateLayerId, proj, shouldAutoUpdate, shouldAnimate, animationPayload, toggleTimestepAuto, showTimeSlider, displayMapPin, shouldShowZoomControls, shouldShowLegend, shouldShowDataExplorer, dockedLayerManagerSize, timeSliderSpan, toggleTimeSpanAuto, defaultOverlayer, isClockVisible, _filterLayers, mapLayers, baseLayers, overLayers, _newLayerIds$layers$f, _newLayerIds$layers$f2, autoTimeStepLayerIdNew, autoUpdateLayerIdNew, onlyActiveLayerIdIsSet, newLayerIds, newAutoTimeStepLayerId, newAutoUpdateLayerId, customLayers, customBaseLayer, customOverLayer, baseLayersWithDefaultLayer, overLayersWithDefaultLayer, allBaseLayers, _overlayersFromStore$, overlayersFromStore, foundOverlayerId, checkIsprojectionSupported, animationLength, animationEndTime, shouldEndtimeOverride, interval, timeAlreadySet, endTime, startTime, centerTimeInSeconds, animationEnd, _startTime, duration, _animationEnd, animationStart, shouldOpenLegend, legendId, fiveMinuteDelayForAnimation, _animationEnd2, _animationStart;
+      var payload, mapId, initialProps, mapPreset, _mapPreset$dimensions, layers, activeLayerId, autoTimeStepLayerId, autoUpdateLayerId, proj, shouldAutoUpdate, shouldAnimate, animationPayload, toggleTimestepAuto, showTimeSlider, displayMapPin, shouldShowZoomControls, shouldShowLegend, shouldShowDockedLayerManager, shouldShowDataExplorer, dockedLayerManagerSize, dockedLayerManagerPosition, dockedLayerManagerDimensions, timeSliderSpan, toggleTimeSpanAuto, defaultOverlayer, isClockVisible, clockPosition, clockSize, _filterLayers, mapLayers, baseLayers, overLayers, _newLayerIds$layers$f, _newLayerIds$layers$f2, autoTimeStepLayerIdNew, autoUpdateLayerIdNew, onlyActiveLayerIdIsSet, newLayerIds, newAutoTimeStepLayerId, newAutoUpdateLayerId, customLayers, customBaseLayer, customOverLayer, baseLayersWithDefaultLayer, overLayersWithDefaultLayer, allBaseLayers, _overlayersFromStore$, overlayersFromStore, foundOverlayerId, checkIsprojectionSupported, animationLength, animationEndTime, shouldEndtimeOverride, interval, timeAlreadySet, endTime, startTime, centerTimeInSeconds, animationEnd, _startTime, duration, _animationEnd, animationStart, shouldOpenLegend, legendId, dockedLayerManagerType, fiveMinuteDelayForAnimation, _animationEnd2, _animationStart;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -7336,10 +7557,10 @@ mapListener.startListening({
             mapId = payload.mapId, initialProps = payload.initialProps;
             mapPreset = initialProps.mapPreset;
             if (!mapPreset) {
-              _context2.next = 54;
+              _context2.next = 61;
               break;
             }
-            layers = mapPreset.layers, activeLayerId = mapPreset.activeLayerId, autoTimeStepLayerId = mapPreset.autoTimeStepLayerId, autoUpdateLayerId = mapPreset.autoUpdateLayerId, proj = mapPreset.proj, shouldAutoUpdate = mapPreset.shouldAutoUpdate, shouldAnimate = mapPreset.shouldAnimate, animationPayload = mapPreset.animationPayload, toggleTimestepAuto = mapPreset.toggleTimestepAuto, showTimeSlider = mapPreset.showTimeSlider, displayMapPin = mapPreset.displayMapPin, shouldShowZoomControls = mapPreset.shouldShowZoomControls, shouldShowLegend = mapPreset.shouldShowLegend, shouldShowDataExplorer = mapPreset.shouldShowDataExplorer, dockedLayerManagerSize = mapPreset.dockedLayerManagerSize, timeSliderSpan = mapPreset.timeSliderSpan, toggleTimeSpanAuto = mapPreset.toggleTimeSpanAuto, defaultOverlayer = mapPreset.defaultOverlayer, isClockVisible = mapPreset.isClockVisible;
+            layers = mapPreset.layers, activeLayerId = mapPreset.activeLayerId, autoTimeStepLayerId = mapPreset.autoTimeStepLayerId, autoUpdateLayerId = mapPreset.autoUpdateLayerId, proj = mapPreset.proj, shouldAutoUpdate = mapPreset.shouldAutoUpdate, shouldAnimate = mapPreset.shouldAnimate, animationPayload = mapPreset.animationPayload, toggleTimestepAuto = mapPreset.toggleTimestepAuto, showTimeSlider = mapPreset.showTimeSlider, displayMapPin = mapPreset.displayMapPin, shouldShowZoomControls = mapPreset.shouldShowZoomControls, shouldShowLegend = mapPreset.shouldShowLegend, shouldShowDockedLayerManager = mapPreset.shouldShowDockedLayerManager, shouldShowDataExplorer = mapPreset.shouldShowDataExplorer, dockedLayerManagerSize = mapPreset.dockedLayerManagerSize, dockedLayerManagerPosition = mapPreset.dockedLayerManagerPosition, dockedLayerManagerDimensions = mapPreset.dockedLayerManagerDimensions, timeSliderSpan = mapPreset.timeSliderSpan, toggleTimeSpanAuto = mapPreset.toggleTimeSpanAuto, defaultOverlayer = mapPreset.defaultOverlayer, isClockVisible = mapPreset.isClockVisible, clockPosition = mapPreset.clockPosition, clockSize = mapPreset.clockSize;
             _filterLayers = filterLayers(layers), mapLayers = _filterLayers.mapLayers, baseLayers = _filterLayers.baseLayers, overLayers = _filterLayers.overLayers;
             if (layers) {
               //  make sure all layers have a unique id before going forward
@@ -7472,6 +7693,20 @@ mapListener.startListening({
                 isClockVisible: isClockVisible
               }));
             }
+            if (clockPosition !== undefined) {
+              // set clock position
+              listenerApi.dispatch(mapActions.setClockPositionSize({
+                mapId: mapId,
+                position: clockPosition
+              }));
+            }
+            if (clockSize !== undefined) {
+              // set clock size
+              listenerApi.dispatch(mapActions.setClockPositionSize({
+                mapId: mapId,
+                size: clockSize
+              }));
+            }
             // sets timestep by interval of animationPayload
             interval = animationPayload === null || animationPayload === void 0 ? void 0 : animationPayload.interval;
             if (interval) {
@@ -7591,15 +7826,40 @@ mapListener.startListening({
                 dockedLayerManagerSize: dockedLayerManagerSize
               }));
             }
-          case 44:
+            dockedLayerManagerType = "".concat(DialogTypes.DockedLayerManager, "-").concat(mapId);
+            if (shouldShowDockedLayerManager !== undefined) {
+              listenerApi.dispatch(uiActions.setToggleOpenDialog({
+                type: dockedLayerManagerType,
+                setOpen: shouldShowDockedLayerManager
+              }));
+            }
+            if (shouldShowDockedLayerManager) {
+              listenerApi.dispatch(uiActions.setToggleOpenDialog({
+                type: DialogTypes.LayerManager,
+                setOpen: false
+              }));
+            }
+            if (dockedLayerManagerPosition) {
+              listenerApi.dispatch(mapActions.setDockedLayerManagerPosition({
+                mapId: mapId,
+                dockedLayerManagerPosition: dockedLayerManagerPosition
+              }));
+            }
+            if (dockedLayerManagerDimensions) {
+              listenerApi.dispatch(mapActions.setDockedLayerManagerDimensions({
+                mapId: mapId,
+                dockedLayerManagerDimensions: dockedLayerManagerDimensions
+              }));
+            }
+          case 51:
             if (!(animationEndTime && (shouldEndtimeOverride || !(shouldAutoUpdate || shouldAnimate)))) {
-              _context2.next = 54;
+              _context2.next = 61;
               break;
             }
             fiveMinuteDelayForAnimation = 1000 * 60 * 5; // eslint-disable-next-line no-await-in-loop
-            _context2.next = 48;
+            _context2.next = 55;
             return listenerApi.delay(fiveMinuteDelayForAnimation);
-          case 48:
+          case 55:
             _animationEnd2 = getAnimationEndTime(listenerApi.getState(), mapId);
             listenerApi.dispatch(mapActions.setAnimationEndTime({
               mapId: mapId,
@@ -7614,13 +7874,13 @@ mapListener.startListening({
                 minutes: 5
               }).toISOString()
             }));
-            _context2.next = 44;
+            _context2.next = 51;
             break;
-          case 54:
-            _context2.next = 59;
+          case 61:
+            _context2.next = 66;
             break;
-          case 56:
-            _context2.prev = 56;
+          case 63:
+            _context2.prev = 63;
             _context2.t0 = _context2["catch"](1);
             if (_context2.t0 instanceof Error) {
               listenerApi.dispatch(mapActions.setMapPresetError({
@@ -7628,11 +7888,11 @@ mapListener.startListening({
                 error: _context2.t0.message
               }));
             }
-          case 59:
+          case 66:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[1, 56]]);
+      }, _callee2, null, [[1, 63]]);
     }));
     function effect(_x3, _x4) {
       return _effect2.apply(this, arguments);
@@ -7665,6 +7925,7 @@ mapListener.startListening({
     var payload = _ref8.payload;
     var mapId = payload.mapId,
       isForwardStep = payload.isForwardStep;
+    // timeStep is stored in minutes
     var timeStep = getMapTimeStep(listenerApi.getState(), mapId);
     var currentTime = getSelectedTime(listenerApi.getState(), mapId);
     var _mapSelectors$getData = getDataLimitsFromLayers(listenerApi.getState(), mapId),
@@ -7673,14 +7934,23 @@ mapListener.startListening({
       dataEndTime = _mapSelectors$getData2[1];
     if (dateUtils.isValid(currentTime)) {
       var makeForwardStep = function makeForwardStep() {
-        var nextTime = currentTime + timeStep;
-        var roundedTime = roundWithTimeStep(nextTime, timeStep, 'ceil');
+        // timeStep is in minutes, convert to seconds
+        var timeStepInSeconds = timeStep * 60;
+        var nextTime = currentTime + timeStepInSeconds;
+        // For large timesteps (>12h), round to nearest hour instead of timestep
+        // This ensures 12:07 with 24h step goes to 12:00 next day, not 00:00
+        var roundingStep = timeStep > 12 * 60 ? 60 : timeStep; // Use 1 hour for large steps
+        var roundedTime = roundWithTimeStep(nextTime, roundingStep, 'round');
         var newTime = Math.min(roundedTime, dataEndTime || roundedTime);
         return dateUtils.fromUnix(newTime).toISOString();
       };
       var makeBackwardStep = function makeBackwardStep() {
-        var nextTime = currentTime - timeStep;
-        var roundedTime = roundWithTimeStep(nextTime, timeStep, 'floor');
+        // timeStep is in minutes, convert to seconds
+        var timeStepInSeconds = timeStep * 60;
+        var nextTime = currentTime - timeStepInSeconds;
+        // For large timesteps (>12h), round to nearest hour instead of timestep
+        var roundingStep = timeStep > 12 * 60 ? 60 : timeStep; // Use 1 hour for large steps
+        var roundedTime = roundWithTimeStep(nextTime, roundingStep, 'round');
         var newTime = Math.max(roundedTime, dataStartTime || roundedTime);
         return dateUtils.fromUnix(newTime).toISOString();
       };
@@ -7876,7 +8146,7 @@ openlayersListener.startListening({
   effect: function effect(_ref4, listenerApi) {
     var payload = _ref4.payload;
     var group = getSynchronizationGroup(listenerApi.getState(), payload.groupId);
-    if (!group || group.type !== SYNCGROUPS_TYPE_SETBBOX) {
+    if (!group || (group === null || group === void 0 ? void 0 : group.type) !== SYNCGROUPS_TYPE_SETBBOX) {
       return;
     }
     var groupView = getViewObjectForSyncGroup(payload.groupId);
@@ -8466,8 +8736,9 @@ drawingToolListener.startListening({
             _ref3 = currentGeoJSONLayer || {}, currentGeoJSON = _ref3.geojson, _ref3$selectedFeature = _ref3.selectedFeatureIndex, selectedFeatureIndex = _ref3$selectedFeature === void 0 ? 0 : _ref3$selectedFeature;
             currentSelectionType = currentGeoJSON === null || currentGeoJSON === void 0 || (_currentGeoJSON$featu = currentGeoJSON.features[selectedFeatureIndex]) === null || _currentGeoJSON$featu === void 0 || (_currentGeoJSON$featu = _currentGeoJSON$featu.properties) === null || _currentGeoJSON$featu === void 0 ? void 0 : _currentGeoJSON$featu.selectionType;
             newSelectionType = newDrawMode.selectionType;
-            isNewToolSelected = currentSelectionType !== newSelectionType;
-            shouldUpdateNewShape = !(currentGeoJSON !== null && currentGeoJSON !== void 0 && (_currentGeoJSON$featu2 = currentGeoJSON.features) !== null && _currentGeoJSON$featu2 !== void 0 && _currentGeoJSON$featu2.length) || isNewToolSelected || !newDrawMode.isSelectable && shouldAllowMultipleShapes; // don't change anything if same tool is selected again
+            isNewToolSelected = currentSelectionType !== newSelectionType; // don't change anything if same tool is selected again
+            // but for shouldAllowMultipleShapes same tool will also be a new drawing
+            shouldUpdateNewShape = !(currentGeoJSON !== null && currentGeoJSON !== void 0 && (_currentGeoJSON$featu2 = currentGeoJSON.features) !== null && _currentGeoJSON$featu2 !== void 0 && _currentGeoJSON$featu2.length) || isNewToolSelected || shouldAllowMultipleShapes;
             if (shouldUpdateNewShape && shouldUpdateShape) {
               shapeWithSelectionType = addSelectionTypeToGeoJSON(newDrawMode.shape, newDrawMode.selectionType);
               geoJSONFeatureCollection = getFeatureCollection(shapeWithSelectionType, shouldAllowMultipleShapes, currentGeoJSON);
@@ -9297,4 +9568,4 @@ var configureOpenGeoWebStore = function configureOpenGeoWebStore() {
   });
 };
 
-export { IS_LEGEND_OPEN_BY_DEFAULT, SECONDS_IN_DAY, SECONDS_IN_HOUR, commonActions, commonListener, commonReducers, commonSelectors, configureOpenGeoWebStore, createMockStore, createViewObjectForNewMap, drawingToolActions, drawingToolListener, drawingToolReducer, selectors as drawingToolSelectors, filterLayers$1 as filterLayers, genericActions, genericListener, selectors$5 as genericSelectors, getSingularDrawtoolDrawLayerId, getUserAddedServices, getViewObjectForMapId, getViewObjectForSyncGroup, initialState$3 as initialState, layerActions, layerReducer, selectors$2 as layerSelectors, types$2 as layerTypes, utils$1 as layerUtils, layersListener, constants as linkComponentTypesConstants, loadingIndicatorActions, constants$1 as loadingIndicatorConstants, loadingIndicatorReducer, selectors$4 as loadingIndicatorSelectors, mapActions, enums as mapEnums, mapListener, mapReducer, selectors$1 as mapSelectors, types$3 as mapTypes, mapUtils, metronomeListener, openlayersListener, routerActions, routerListener, routerReducer, utils as routerUtils, selectorMemoizationOptions, serviceActions, serviceListener, serviceReducer, selectors$7 as serviceSelectors, setUserAddedServices, storeMiddlewares, storeReducerMap, storeTestSettings, storeTestUtils, utils$3 as storeUtils, constants$2 as syncConstants, syncGroupsActions, syncGroupsListener, syncGroupsReducer, selector as syncGroupsSelector, selectors$6 as syncGroupsSelectors, types$1 as syncGroupsTypes, types$1 as types, uiActions, uiReducer, selectors$3 as uiSelectors, types as uiTypes, unifyReducerMaps, useSetupDialog, useUpdateSharedData };
+export { IS_LEGEND_OPEN_BY_DEFAULT, SECONDS_IN_DAY, SECONDS_IN_HOUR, commonActions, commonListener, commonReducers, commonSelectors, configureOpenGeoWebStore, createMockStore, createViewObjectForNewMap, drawingToolActions, drawingToolListener, drawingToolReducer, selectors as drawingToolSelectors, filterLayers$1 as filterLayers, genericActions, genericListener, selectors$5 as genericSelectors, getSingularDrawtoolDrawLayerId, getUserAddedServices, getViewObjectForMapId, getViewObjectForSyncGroup, initialState$3 as initialState, layerActions, layerReducer, selectors$2 as layerSelectors, types$2 as layerTypes, utils$1 as layerUtils, layersListener, constants as linkComponentTypesConstants, loadingIndicatorActions, constants$1 as loadingIndicatorConstants, loadingIndicatorReducer, selectors$4 as loadingIndicatorSelectors, mapActions, enums as mapEnums, mapListener, mapReducer, selectors$1 as mapSelectors, types$3 as mapTypes, mapUtils, metronomeListener, openlayersListener, routerActions, routerListener, routerReducer, utils as routerUtils, selectorMemoizationOptions, serviceActions, serviceListener, serviceReducer, selectors$7 as serviceSelectors, setUserAddedServices, storeMiddlewares, storeReducerMap, storeTestSettings, storeTestUtils, utils$3 as storeUtils, constants$2 as syncConstants, syncGroupsActions, syncGroupsListener, syncGroupsReducer, selector as syncGroupsSelector, selectors$6 as syncGroupsSelectors, types$1 as syncGroupsTypes, types$1 as types, uiActions, uiReducer, selectors$3 as uiSelectors, types as uiTypes, unifyReducerMaps, useSetupDialog, useSyncgroupTimeState, useUpdateSharedData };