@opengeoweb/store 12.13.0 → 13.0.0

package/index.esm.js

@@ -1,8 +1,8 @@
 import { createSlice, createSelector, createAction, createListenerMiddleware, isAnyOf, createEntityAdapter, combineReducers, configureStore } from '@reduxjs/toolkit';
 import { isEqual, isEmpty, compact } from 'lodash';
 import { dateUtils, PROJECTION, defaultDelay } from '@opengeoweb/shared';
-import { webmapUtils, parseISO8601IntervalToDateInterval, LayerType, webmapTestSettings, WMLayer, getWMLayerById, WMInvalidDateValues, handleDateUtilsISOString, isProjectionSupported, queryWMSLayers } from '@opengeoweb/webmap';
-import { defaultSecondsPerPx, defaultAnimationDelayAtStart, defaultTimeStep, defaultTimeSpan, roundWithTimeStep, getSpeedDelay } from '@opengeoweb/timeslider';
+import { webmapUtils, parseISO8601IntervalToDateInterval, LayerType, handleDateUtilsISOString, webmapTestSettings, WMLayer, getWMLayerById, WMInvalidDateValues, isProjectionSupported, queryWMSLayers } from '@opengeoweb/webmap';
+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';
@@ -663,25 +663,15 @@ var getLayersFromServiceSelector = createSelector(getServiceByUrl, function (ser
 /**
  * Gets the layer from the store using the serviceUrl and layerName
  *
- * Example: layer = getLayerFromService(store, 'https://geoservices.knmi.nl/...', 'radar', true)
+ * Example: layer = getLayerFromService(store, 'https://geoservices.knmi.nl/...', 'radar')
  * @param {object} store store: object - The application store
  * @param {string}  serviceUrl serviceUrl: string - Url of the service where the layer belongs to
  * @param {string}  layerName layerName: string - Name of the layer in the service
- * @param {boolean}  isEDRService isEDRService: boolean - if service is EDR (optional, default to false)
  * @returns {ServiceLayer} returnType: ServiceLayer - The layer from the service object.
  */
 var getLayerFromService = createSelector(getLayersFromServiceSelector, function (_store, _serviceUrl, layerName) {
   return layerName;
-}, function (_store, _serviceUrl, _layerName) {
-  var isEDRService = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  return isEDRService;
-}, function (layers, layerName, isEDRService) {
-  if (isEDRService) {
-    var firstParam = layerName.split(',')[0];
-    return layers.find(function (serviceLayer) {
-      return serviceLayer.name === firstParam;
-    });
-  }
+}, function (layers, layerName) {
   return layers.find(function (serviceLayer) {
     return serviceLayer.name === layerName;
   });
@@ -699,11 +689,24 @@ var getLayerStyles = createSelector(getLayerFromService, function (layer) {
   var _layer$styles;
   return (_layer$styles = layer === null || layer === void 0 ? void 0 : layer.styles) !== null && _layer$styles !== void 0 ? _layer$styles : [];
 }, selectorMemoizationOptions);
+/**
+ * Gets the layer title from the servicestore using the serviceUrl and layerName
+ *
+ * Example: layerStyles = getLayerTitle(store, layerService, layerName);
+ * @param {object} store store: object - store from which the layers state will be extracted
+ * @param {string}  serviceUrl serviceUrl: string - Url of the service where the layer belongs to
+ * @param {string}  layerName layerName: string - Name of the layer in the service
+ * @returns {array} returnType: string - string containing layer title
+ */
+var getLayerTitle = createSelector(getLayerFromService, function (layer) {
+  return layer === null || layer === void 0 ? void 0 : layer.title;
+}, selectorMemoizationOptions);
 
 var selectors$7 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   getLayerFromService: getLayerFromService,
   getLayerStyles: getLayerStyles,
+  getLayerTitle: getLayerTitle,
   getLayersFromServiceSelector: getLayersFromServiceSelector,
   getServiceByUrl: getServiceByUrl,
   getServiceIds: getServiceIds,
@@ -1149,6 +1152,17 @@ var parseTimeDimToISO8601Interval = function parseTimeDimToISO8601Interval(timeI
     return interval.startTime && interval.endTime && interval.duration;
   });
 };
+var produceTimeSliderTimeSpan = function produceTimeSliderTimeSpan(draft, mapId, timeSliderSpan) {
+  if (!draft.byId[mapId] || !timeSliderSpan) {
+    return;
+  }
+  draft.byId[mapId].timeSliderSpan = timeSliderSpan;
+  if (draft.byId[mapId].timeSliderWidth) {
+    draft.byId[mapId].timeSliderSecondsPerPx = secondsPerPxFromCanvasWidth(draft.byId[mapId].timeSliderWidth, draft.byId[mapId].timeSliderSpan || defaultTimeSpan);
+  } else {
+    draft.byId[mapId].timeSliderSecondsPerPx = draft.byId[mapId].timeSliderSecondsPerPx || defaultSecondsPerPx;
+  }
+};
 
 var utils$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -1164,7 +1178,8 @@ var utils$2 = /*#__PURE__*/Object.freeze({
   moveArrayElements: moveArrayElements,
   parseTimeDimToISO8601Interval: parseTimeDimToISO8601Interval,
   produceDraftStateSetMapDimensionFromLayerChangeDimension: produceDraftStateSetMapDimensionFromLayerChangeDimension,
-  produceDraftStateSetWebMapDimension: produceDraftStateSetWebMapDimension
+  produceDraftStateSetWebMapDimension: produceDraftStateSetWebMapDimension,
+  produceTimeSliderTimeSpan: produceTimeSliderTimeSpan
 });
 
 var replaceLayerIdsToEnsureUniqueLayerIdsInStore = function replaceLayerIdsToEnsureUniqueLayerIdsInStore(layerIds) {
@@ -1719,18 +1734,26 @@ var slice$6 = createSlice({
         draft.byId[layerId].name = name;
       }
     },
-    layerChangeGeojson: function layerChangeGeojson(draft, action) {
+    layerChangeOptions: function layerChangeOptions(draft, action) {
       var _action$payload9 = action.payload,
         layerId = _action$payload9.layerId,
-        geojson = _action$payload9.geojson;
+        options = _action$payload9.options;
+      if (draft.byId[layerId] && options) {
+        draft.byId[layerId].options = _objectSpread2({}, options);
+      }
+    },
+    layerChangeGeojson: function layerChangeGeojson(draft, action) {
+      var _action$payload0 = action.payload,
+        layerId = _action$payload0.layerId,
+        geojson = _action$payload0.geojson;
       if (draft.byId[layerId]) {
         draft.byId[layerId].geojson = geojson;
       }
     },
     layerSetGeojsonFromLayer: function layerSetGeojsonFromLayer(draft, action) {
-      var _action$payload0 = action.payload,
-        layerId = _action$payload0.layerId,
-        sourceLayerId = _action$payload0.sourceLayerId;
+      var _action$payload1 = action.payload,
+        layerId = _action$payload1.layerId,
+        sourceLayerId = _action$payload1.sourceLayerId;
       if (draft.byId[layerId]) {
         var _draft$byId$sourceLay;
         draft.byId[layerId].geojson = (_draft$byId$sourceLay = draft.byId[sourceLayerId]) === null || _draft$byId$sourceLay === void 0 ? void 0 : _draft$byId$sourceLay.geojson;
@@ -1764,9 +1787,9 @@ var slice$6 = createSlice({
       }
     },
     setLayers: function setLayers(draft, action) {
-      var _action$payload1 = action.payload,
-        layers = _action$payload1.layers,
-        mapId = _action$payload1.mapId;
+      var _action$payload10 = action.payload,
+        layers = _action$payload10.layers,
+        mapId = _action$payload10.mapId;
       if (!checkValidLayersPayload(layers, mapId)) {
         return;
       }
@@ -1794,9 +1817,9 @@ var slice$6 = createSlice({
       });
     },
     setBaseLayers: function setBaseLayers(draft, action) {
-      var _action$payload10 = action.payload,
-        layers = _action$payload10.layers,
-        mapId = _action$payload10.mapId;
+      var _action$payload11 = action.payload,
+        layers = _action$payload11.layers,
+        mapId = _action$payload11.mapId;
       var filtererdBaseLayers = layers.filter(function (layer) {
         return layer.layerType === LayerType.baseLayer || layer.layerType === LayerType.overLayer;
       });
@@ -1842,9 +1865,9 @@ var slice$6 = createSlice({
       }
     },
     layerSetDimensions: function layerSetDimensions(draft, action) {
-      var _action$payload11 = action.payload,
-        dimensions = _action$payload11.dimensions,
-        layerId = _action$payload11.layerId;
+      var _action$payload12 = action.payload,
+        dimensions = _action$payload12.dimensions,
+        layerId = _action$payload12.layerId;
       if (draft.byId[layerId]) {
         draft.byId[layerId].dimensions = dimensions;
       }
@@ -1878,9 +1901,9 @@ var slice$6 = createSlice({
     },
     // Overwrites all baselayer for a certain map
     setAvailableBaseLayers: function setAvailableBaseLayers(draft, action) {
-      var _action$payload12 = action.payload,
-        layers = _action$payload12.layers,
-        mapId = _action$payload12.mapId;
+      var _action$payload13 = action.payload,
+        layers = _action$payload13.layers,
+        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) {
@@ -1899,9 +1922,9 @@ var slice$6 = createSlice({
       });
     },
     setUseLatestReferenceTime: function setUseLatestReferenceTime(draft, action) {
-      var _action$payload13 = action.payload,
-        id = _action$payload13.id,
-        useLatestReferenceTime = _action$payload13.useLatestReferenceTime;
+      var _action$payload14 = action.payload,
+        id = _action$payload14.id,
+        useLatestReferenceTime = _action$payload14.useLatestReferenceTime;
       var layer = draft.byId[id];
       if (!layer) {
         return;
@@ -1909,10 +1932,10 @@ var slice$6 = createSlice({
       layer.useLatestReferenceTime = useLatestReferenceTime;
     },
     onUpdateLayerInformation: function onUpdateLayerInformation(draft, action) {
-      var _action$payload14 = action.payload,
-        layerStyle = _action$payload14.layerStyle,
-        layerDimensions = _action$payload14.layerDimensions,
-        error = _action$payload14.error;
+      var _action$payload15 = action.payload,
+        layerStyle = _action$payload15.layerStyle,
+        layerDimensions = _action$payload15.layerDimensions,
+        error = _action$payload15.error;
       if (error) {
         draft.byId[error.layerId].status = LayerStatus.error;
         return;
@@ -2007,25 +2030,25 @@ var slice$6 = createSlice({
     },
     // feature layer actions
     setSelectedFeature: function setSelectedFeature(draft, action) {
-      var _action$payload15 = action.payload,
-        layerId = _action$payload15.layerId,
-        selectedFeatureIndex = _action$payload15.selectedFeatureIndex;
+      var _action$payload16 = action.payload,
+        layerId = _action$payload16.layerId,
+        selectedFeatureIndex = _action$payload16.selectedFeatureIndex;
       if (!draft.byId[layerId]) {
         return;
       }
       draft.byId[layerId].selectedFeatureIndex = selectedFeatureIndex;
     },
     updateFeature: function updateFeature(draft, action) {
-      var _action$payload16 = action.payload,
-        layerId = _action$payload16.layerId,
-        geojson = _action$payload16.geojson,
-        _action$payload16$sho = _action$payload16.shouldAllowMultipleShapes,
-        shouldAllowMultipleShapes = _action$payload16$sho === void 0 ? false : _action$payload16$sho,
-        _action$payload16$rea = _action$payload16.reason,
-        reason = _action$payload16$rea === void 0 ? '' : _action$payload16$rea,
-        geoJSONIntersectionLayerId = _action$payload16.geoJSONIntersectionLayerId,
-        geoJSONIntersectionBoundsLayerId = _action$payload16.geoJSONIntersectionBoundsLayerId,
-        selectionType = _action$payload16.selectionType;
+      var _action$payload17 = action.payload,
+        layerId = _action$payload17.layerId,
+        geojson = _action$payload17.geojson,
+        _action$payload17$sho = _action$payload17.shouldAllowMultipleShapes,
+        shouldAllowMultipleShapes = _action$payload17$sho === void 0 ? false : _action$payload17$sho,
+        _action$payload17$rea = _action$payload17.reason,
+        reason = _action$payload17$rea === void 0 ? '' : _action$payload17$rea,
+        geoJSONIntersectionLayerId = _action$payload17.geoJSONIntersectionLayerId,
+        geoJSONIntersectionBoundsLayerId = _action$payload17.geoJSONIntersectionBoundsLayerId,
+        selectionType = _action$payload17.selectionType;
       var currentLayer = draft.byId[layerId];
       if (!currentLayer) {
         return;
@@ -2054,10 +2077,10 @@ var slice$6 = createSlice({
       }
     },
     updateFeatureProperties: function updateFeatureProperties(draft, action) {
-      var _action$payload17 = action.payload,
-        layerId = _action$payload17.layerId,
-        properties = _action$payload17.properties,
-        selectedFeatureIndex = _action$payload17.selectedFeatureIndex;
+      var _action$payload18 = action.payload,
+        layerId = _action$payload18.layerId,
+        properties = _action$payload18.properties,
+        selectedFeatureIndex = _action$payload18.selectedFeatureIndex;
       var currentLayer = draft.byId[layerId];
       if (!currentLayer) {
         return;
@@ -2073,10 +2096,10 @@ var slice$6 = createSlice({
       }
     },
     toggleFeatureMode: function toggleFeatureMode(draft, action) {
-      var _action$payload18 = action.payload,
-        layerId = _action$payload18.layerId,
-        isInEditMode = _action$payload18.isInEditMode,
-        drawMode = _action$payload18.drawMode;
+      var _action$payload19 = action.payload,
+        layerId = _action$payload19.layerId,
+        isInEditMode = _action$payload19.isInEditMode,
+        drawMode = _action$payload19.drawMode;
       if (!draft.byId[layerId]) {
         return;
       }
@@ -2088,10 +2111,10 @@ var slice$6 = createSlice({
       }
     },
     exitFeatureDrawMode: function exitFeatureDrawMode(draft, action) {
-      var _action$payload19 = action.payload,
-        layerId = _action$payload19.layerId,
-        shouldAllowMultipleShapes = _action$payload19.shouldAllowMultipleShapes,
-        reason = _action$payload19.reason;
+      var _action$payload20 = action.payload,
+        layerId = _action$payload20.layerId,
+        shouldAllowMultipleShapes = _action$payload20.shouldAllowMultipleShapes,
+        reason = _action$payload20.reason;
       if (!draft.byId[layerId]) {
         return;
       }
@@ -2116,9 +2139,9 @@ var slice$6 = createSlice({
     },
     // layer info actions
     showLayerInfo: function showLayerInfo(draft, action) {
-      var _action$payload20 = action.payload,
-        serviceUrl = _action$payload20.serviceUrl,
-        layerName = _action$payload20.layerName;
+      var _action$payload21 = action.payload,
+        serviceUrl = _action$payload21.serviceUrl,
+        layerName = _action$payload21.layerName;
       draft.activeLayerInfo = {
         serviceUrl: serviceUrl,
         layerName: layerName
@@ -2130,9 +2153,9 @@ var slice$6 = createSlice({
   },
   extraReducers: function extraReducers(builder) {
     builder.addCase(setTimeSync, function (draft, action) {
-      var _action$payload21 = action.payload,
-        targetsFromAction = _action$payload21.targets,
-        source = _action$payload21.source;
+      var _action$payload22 = action.payload,
+        targetsFromAction = _action$payload22.targets,
+        source = _action$payload22.source;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
       var targets = [];
       if (source) {
@@ -2146,11 +2169,14 @@ var slice$6 = createSlice({
       targets.forEach(function (payload) {
         var targetId = payload.targetId,
           value = payload.value;
-        var dimension = {
-          name: 'time',
-          currentValue: value
-        };
-        produceDraftStateForAllLayersForDimensionWithinMap(draft, dimension, targetId, null);
+        if (value !== null && value !== void 0 && value.currentTime) {
+          var currentTime = value.currentTime;
+          var dimension = {
+            name: 'time',
+            currentValue: currentTime
+          };
+          produceDraftStateForAllLayersForDimensionWithinMap(draft, dimension, targetId, null);
+        }
       });
     }).addCase(setLayerActionSync, function (draft, action) {
       /*
@@ -2159,9 +2185,9 @@ var slice$6 = createSlice({
        * These targets can be used as payloads in new Layer actions.
        * These actions are here handled via the layer reducer, as it is the same logic
        */
-      var _action$payload22 = action.payload,
-        targets = _action$payload22.targets,
-        source = _action$payload22.source;
+      var _action$payload23 = action.payload,
+        targets = _action$payload23.targets,
+        source = _action$payload23.source;
       return targets.reduce(function (prevState, target) {
         var actionType = (source === null || source === void 0 ? void 0 : source.type) || 'GENERIC_SYNC_SETLAYERACTIONS';
         var action = {
@@ -2452,10 +2478,7 @@ var slice$4 = createSlice({
       var _action$payload4 = action.payload,
         mapId = _action$payload4.mapId,
         timeSliderSpan = _action$payload4.timeSliderSpan;
-      if (!draft.byId[mapId]) {
-        return;
-      }
-      draft.byId[mapId].timeSliderSpan = timeSliderSpan;
+      produceTimeSliderTimeSpan(draft, mapId, timeSliderSpan);
     },
     setTimeStep: function setTimeStep(draft, action) {
       var _action$payload5 = action.payload,
@@ -2554,6 +2577,7 @@ var slice$4 = createSlice({
         return;
       }
       draft.byId[mapId].timeSliderWidth = timeSliderWidth;
+      draft.byId[mapId].timeSliderSecondsPerPx = secondsPerPxFromCanvasWidth(timeSliderWidth, draft.byId[mapId].timeSliderSpan || defaultTimeSpan);
     },
     setTimeSliderCenterTime: function setTimeSliderCenterTime(draft, action) {
       var _action$payload12 = action.payload,
@@ -2564,118 +2588,109 @@ var slice$4 = createSlice({
       }
       draft.byId[mapId].timeSliderCenterTime = timeSliderCenterTime;
     },
-    setTimeSliderSecondsPerPx: function setTimeSliderSecondsPerPx(draft, action) {
+    toggleAutoUpdate: function toggleAutoUpdate(draft, action) {
       var _action$payload13 = action.payload,
         mapId = _action$payload13.mapId,
-        timeSliderSecondsPerPx = _action$payload13.timeSliderSecondsPerPx;
-      if (!draft.byId[mapId]) {
-        return;
-      }
-      draft.byId[mapId].timeSliderSecondsPerPx = timeSliderSecondsPerPx;
-    },
-    toggleAutoUpdate: function toggleAutoUpdate(draft, action) {
-      var _action$payload14 = action.payload,
-        mapId = _action$payload14.mapId,
-        shouldAutoUpdate = _action$payload14.shouldAutoUpdate;
+        shouldAutoUpdate = _action$payload13.shouldAutoUpdate;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].isAutoUpdating = shouldAutoUpdate;
     },
     setEndTimeOverriding: function setEndTimeOverriding(draft, action) {
-      var _action$payload15 = action.payload,
-        mapId = _action$payload15.mapId,
-        shouldEndtimeOverride = _action$payload15.shouldEndtimeOverride;
+      var _action$payload14 = action.payload,
+        mapId = _action$payload14.mapId,
+        shouldEndtimeOverride = _action$payload14.shouldEndtimeOverride;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].shouldEndtimeOverride = shouldEndtimeOverride;
     },
     toggleTimestepAuto: function toggleTimestepAuto(draft, action) {
-      var _action$payload16 = action.payload,
-        mapId = _action$payload16.mapId,
-        timestepAuto = _action$payload16.timestepAuto;
+      var _action$payload15 = action.payload,
+        mapId = _action$payload15.mapId,
+        timestepAuto = _action$payload15.timestepAuto;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].isTimestepAuto = timestepAuto;
     },
     toggleTimeSpanAuto: function toggleTimeSpanAuto(draft, action) {
-      var _action$payload17 = action.payload,
-        mapId = _action$payload17.mapId,
-        timeSpanAuto = _action$payload17.timeSpanAuto;
+      var _action$payload16 = action.payload,
+        mapId = _action$payload16.mapId,
+        timeSpanAuto = _action$payload16.timeSpanAuto;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].isTimeSpanAuto = timeSpanAuto;
     },
     toggleAnimationLengthAuto: function toggleAnimationLengthAuto(draft, action) {
-      var _action$payload18 = action.payload,
-        mapId = _action$payload18.mapId,
-        autoAnimationLength = _action$payload18.autoAnimationLength;
+      var _action$payload17 = action.payload,
+        mapId = _action$payload17.mapId,
+        autoAnimationLength = _action$payload17.autoAnimationLength;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].isAnimationLengthAuto = autoAnimationLength;
     },
     toggleTimeSliderHover: function toggleTimeSliderHover(draft, action) {
-      var _action$payload19 = action.payload,
-        mapId = _action$payload19.mapId,
-        isTimeSliderHoverOn = _action$payload19.isTimeSliderHoverOn;
+      var _action$payload18 = action.payload,
+        mapId = _action$payload18.mapId,
+        isTimeSliderHoverOn = _action$payload18.isTimeSliderHoverOn;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].isTimeSliderHoverOn = isTimeSliderHoverOn;
     },
     toggleTimeSliderIsVisible: function toggleTimeSliderIsVisible(draft, action) {
-      var _action$payload20 = action.payload,
-        mapId = _action$payload20.mapId,
-        isTimeSliderVisible = _action$payload20.isTimeSliderVisible;
+      var _action$payload19 = action.payload,
+        mapId = _action$payload19.mapId,
+        isTimeSliderVisible = _action$payload19.isTimeSliderVisible;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].isTimeSliderVisible = isTimeSliderVisible;
     },
     toggleZoomControls: function toggleZoomControls(draft, action) {
-      var _action$payload21 = action.payload,
-        mapId = _action$payload21.mapId,
-        shouldShowZoomControls = _action$payload21.shouldShowZoomControls;
+      var _action$payload20 = action.payload,
+        mapId = _action$payload20.mapId,
+        shouldShowZoomControls = _action$payload20.shouldShowZoomControls;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].shouldShowZoomControls = shouldShowZoomControls;
     },
     setMapPinLocation: function setMapPinLocation(draft, action) {
-      var _action$payload22 = action.payload,
-        mapId = _action$payload22.mapId,
-        mapPinLocation = _action$payload22.mapPinLocation;
+      var _action$payload21 = action.payload,
+        mapId = _action$payload21.mapId,
+        mapPinLocation = _action$payload21.mapPinLocation;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].mapPinLocation = mapPinLocation;
     },
     setDisableMapPin: function setDisableMapPin(draft, action) {
-      var _action$payload23 = action.payload,
-        mapId = _action$payload23.mapId,
-        disableMapPin = _action$payload23.disableMapPin;
+      var _action$payload22 = action.payload,
+        mapId = _action$payload22.mapId,
+        disableMapPin = _action$payload22.disableMapPin;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].disableMapPin = disableMapPin;
     },
     toggleMapPinIsVisible: function toggleMapPinIsVisible(draft, action) {
-      var _action$payload24 = action.payload,
-        mapId = _action$payload24.mapId,
-        displayMapPin = _action$payload24.displayMapPin;
+      var _action$payload23 = action.payload,
+        mapId = _action$payload23.mapId,
+        displayMapPin = _action$payload23.displayMapPin;
       if (!draft.byId[mapId]) {
         return;
       }
       draft.byId[mapId].displayMapPin = displayMapPin;
     },
     setDockedLayerManagerSize: function setDockedLayerManagerSize(draft, action) {
-      var _action$payload25 = action.payload,
-        mapId = _action$payload25.mapId,
-        dockedLayerManagerSize = _action$payload25.dockedLayerManagerSize;
+      var _action$payload24 = action.payload,
+        mapId = _action$payload24.mapId,
+        dockedLayerManagerSize = _action$payload24.dockedLayerManagerSize;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2690,9 +2705,9 @@ var slice$4 = createSlice({
       draft.defaultMapSettings = action.payload.preset;
     },
     changeOverlayer: function changeOverlayer(draft, action) {
-      var _action$payload26 = action.payload,
-        mapId = _action$payload26.mapId,
-        selectedOverlayer = _action$payload26.selectedOverlayer;
+      var _action$payload25 = action.payload,
+        mapId = _action$payload25.mapId,
+        selectedOverlayer = _action$payload25.selectedOverlayer;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2701,10 +2716,10 @@ var slice$4 = createSlice({
   },
   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$payload26 = action.payload,
+        layerId = _action$payload26.layerId,
+        mapId = _action$payload26.mapId,
+        layer = _action$payload26.layer;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2723,9 +2738,9 @@ var slice$4 = createSlice({
         draft.byId[mapId].mapLayers.unshift(layerId);
       }
     }).addCase(layerActions.duplicateMapLayer, function (draft, action) {
-      var _action$payload28 = action.payload,
-        newLayerId = _action$payload28.newLayerId,
-        mapId = _action$payload28.mapId;
+      var _action$payload27 = action.payload,
+        newLayerId = _action$payload27.newLayerId,
+        mapId = _action$payload27.mapId;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2735,10 +2750,10 @@ var slice$4 = createSlice({
       }
       draft.byId[mapId].mapLayers.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$payload28 = action.payload,
+        layer = _action$payload28.layer,
+        layerId = _action$payload28.layerId,
+        mapId = _action$payload28.mapId;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2768,9 +2783,9 @@ var slice$4 = 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$payload29 = action.payload,
+        layers = _action$payload29.layers,
+        mapId = _action$payload29.mapId;
       // Split into base and overlayers
       var baseLayers = [];
       var overLayers = [];
@@ -2800,9 +2815,9 @@ var slice$4 = createSlice({
         }
       }
     }).addCase(layerActions.layerDelete, function (draft, action) {
-      var _action$payload31 = action.payload,
-        mapId = _action$payload31.mapId,
-        layerId = _action$payload31.layerId;
+      var _action$payload30 = action.payload,
+        mapId = _action$payload30.mapId,
+        layerId = _action$payload30.layerId;
       var map = draft.byId[mapId];
       if (!map) {
         return;
@@ -2828,9 +2843,9 @@ var slice$4 = 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$payload31 = action.payload,
+        mapId = _action$payload31.mapId,
+        layerId = _action$payload31.layerId;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -2841,14 +2856,14 @@ var slice$4 = 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$payload32 = action.payload,
+        layerId = _action$payload32.layerId,
+        dimension = _action$payload32.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$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 = [];
       if (source) {
@@ -2863,18 +2878,47 @@ var slice$4 = createSlice({
         var targetId = target.targetId,
           value = target.value;
         if (draft.byId[targetId]) {
-          var dimension = {
-            name: 'time',
-            currentValue: value
-          };
-          produceDraftStateSetWebMapDimension(draft, targetId, dimension, true);
-          produceDraftStateSetMapDimensionFromLayerChangeDimension(draft, targetId, dimension);
+          // SetTimeSliderSpan
+          if (value !== null && value !== void 0 && value.timeSliderSpan) {
+            produceTimeSliderTimeSpan(draft, targetId, value.timeSliderSpan);
+          }
+          // SetTimeSliderCenterTime
+          if (value !== null && value !== void 0 && value.timeSliderCenterTime) {
+            draft.byId[targetId].timeSliderCenterTime = value.timeSliderCenterTime;
+          }
+          // SetTimeSliderStep
+          if (value !== null && value !== void 0 && value.timeSliderStep) {
+            draft.byId[targetId].timeStep = value.timeSliderStep;
+            // When timestep is synced between slider, isTimestepAuto should be set to false.
+            draft.byId[targetId].isTimestepAuto = false;
+          }
+          // SetAnimationStartTime
+          if (value !== null && value !== void 0 && value.timeSliderAnimationStartTime) {
+            draft.byId[targetId].animationStartTime = value.timeSliderAnimationStartTime;
+          }
+          // SetAnimationEndTime
+          if (value !== null && value !== void 0 && value.timeSliderAnimationEndTime) {
+            draft.byId[targetId].animationEndTime = value.timeSliderAnimationEndTime;
+          }
+          // SetAnimationDelay
+          if (value !== null && value !== void 0 && value.timeSliderAnimationDelay) {
+            draft.byId[targetId].animationDelay = value.timeSliderAnimationDelay;
+          }
+          // SetTime / update actual current value
+          if (value !== null && value !== void 0 && value.currentTime) {
+            var dimension = {
+              name: 'time',
+              currentValue: value.currentTime
+            };
+            produceDraftStateSetWebMapDimension(draft, targetId, dimension, true);
+            produceDraftStateSetMapDimensionFromLayerChangeDimension(draft, targetId, dimension);
+          }
         }
       });
     }).addCase(setBboxSync, function (draft, action) {
-      var _action$payload35 = action.payload,
-        targetsFromAction = _action$payload35.targets,
-        source = _action$payload35.source;
+      var _action$payload34 = action.payload,
+        targetsFromAction = _action$payload34.targets,
+        source = _action$payload34.source;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
       var targets = [];
       if (source) {
@@ -2906,9 +2950,9 @@ var slice$4 = 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$payload35 = action.payload,
+        targets = _action$payload35.targets,
+        source = _action$payload35.source;
       return targets.reduce(function (prevState, target) {
         var actionType = (source === null || source === void 0 ? void 0 : source.type) || 'GENERIC_SYNC_SETLAYERACTIONS';
         var action = {
@@ -2930,9 +2974,9 @@ var slice$4 = createSlice({
       });
       return draft;
     }).addCase(mapChangeDimension, function (draft, action) {
-      var _action$payload37 = action.payload,
-        mapId = _action$payload37.mapId,
-        dimensionFromAction = _action$payload37.dimension;
+      var _action$payload36 = action.payload,
+        mapId = _action$payload36.mapId,
+        dimensionFromAction = _action$payload36.dimension;
       produceDraftStateSetWebMapDimension(draft, mapId, dimensionFromAction, true);
     }).addCase(setMapPreset, function (draft, action) {
       var mapId = action.payload.mapId;
@@ -2952,9 +2996,9 @@ var slice$4 = 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$payload37 = action.payload,
+        mapId = _action$payload37.mapId,
+        type = _action$payload37.type;
       if (!draft.byId[mapId]) {
         return;
       }
@@ -3204,8 +3248,13 @@ var getLayerEnabled = createSelector(getLayerById, function (layer) {
  * @returns {string} returnType: string -  layer name
  */
 var getLayerName = createSelector(getLayerById, function (layer) {
-  var _layer$name;
-  return (_layer$name = layer === null || layer === void 0 ? void 0 : layer.name) !== null && _layer$name !== void 0 ? _layer$name : '';
+  if (!layer) {
+    return '';
+  }
+  if (layer.layerType === LayerType.edrFeatureLayer && layer.options && layer.options.parameterNames.length) {
+    return layer.options.parameterNames[0];
+  }
+  return (layer === null || layer === void 0 ? void 0 : layer.name) || '';
 }, selectorMemoizationOptions);
 /**
  * Gets layer service
@@ -3392,6 +3441,9 @@ var getLayerType = createSelector(getLayerById, function (layer) {
   var _layer$layerType;
   return (_layer$layerType = layer === null || layer === void 0 ? void 0 : layer.layerType) !== null && _layer$layerType !== void 0 ? _layer$layerType : 'mapLayer';
 }, selectorMemoizationOptions);
+var getLayerOptions = createSelector(getLayerById, function (layer) {
+  return layer === null || layer === void 0 ? void 0 : layer.options;
+}, selectorMemoizationOptions);
 /**
  * Gets all overlayers for a given mapId
  * Example: overlayers = getOverlayersForMapId(store, 'mapId123')
@@ -3413,6 +3465,47 @@ var getOverlayersForMapId = createSelector([layerStore, function (_store, mapId)
   });
   return overLayers;
 }, selectorMemoizationOptions);
+/**
+ * Gets the layer title from the service store using the layerId
+ *
+ * Example: layerTitle = getLayerTitleFromService(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 - string containing layer title
+ */
+var getLayerTitleFromService = createSelector(function (store) {
+  return store;
+}, getLayerService, getLayerName, function (store, service, name) {
+  return getLayerTitle(store, service, name);
+}, selectorMemoizationOptions);
+/**
+ * Gets layer displayname. For EDR layers with multiple parameters, the collectionId is used as displayname. Otherwise the layer title from the service is used.
+ *
+ * Example: layerName = getLayerDisplayName(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 displayname
+ */
+var getLayerDisplayName = createSelector(getLayerType, getLayerOptions, getLayerTitleFromService, getLayerName, function (layerType, layerOptions, layerTitle, layerName) {
+  if (layerType === LayerType.edrFeatureLayer && layerOptions) {
+    return (layerOptions === null || layerOptions === void 0 ? void 0 : layerOptions.parameterNames.length) > 1 && layerOptions.collectionId ? layerOptions.collectionId : layerTitle || layerName;
+  }
+  return layerTitle || layerName;
+}, selectorMemoizationOptions);
+/**
+ * Gets the layer missing status. A layer is missing if it is not found in the service store or if its status is 'error'.
+ *
+ * Example: isLayerMissing = getIsLayerMissing(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 {boolean} returnType: boolean - true if layer is missing
+ */
+var getIsLayerMissing = createSelector(function (store) {
+  return store;
+}, getLayerService, getLayerName, getLayerStatus, function (store, service, name, status) {
+  var layer = getLayerFromService(store, service, name);
+  return !layer || status === LayerStatus.error;
+}, selectorMemoizationOptions);
 
 var selectors$6 = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -3427,22 +3520,26 @@ var selectors$6 = /*#__PURE__*/Object.freeze({
   getFeatureLayers: getFeatureLayers,
   getHasFeatureLayerGeoJSON: getHasFeatureLayerGeoJSON,
   getIsLayerInEditMode: getIsLayerInEditMode,
+  getIsLayerMissing: getIsLayerMissing,
   getIsLayerPresent: getIsLayerPresent,
   getLayerById: getLayerById,
   getLayerByIdWithoutTimeDimension: getLayerByIdWithoutTimeDimension,
   getLayerCurrentTime: getLayerCurrentTime,
   getLayerDimension: getLayerDimension,
   getLayerDimensions: getLayerDimensions,
+  getLayerDisplayName: getLayerDisplayName,
   getLayerEnabled: getLayerEnabled,
   getLayerHasTimeDimension: getLayerHasTimeDimension,
   getLayerIsInsideAcceptanceTime: getLayerIsInsideAcceptanceTime,
   getLayerName: getLayerName,
   getLayerNonTimeDimensions: getLayerNonTimeDimensions,
   getLayerOpacity: getLayerOpacity,
+  getLayerOptions: getLayerOptions,
   getLayerService: getLayerService,
   getLayerStatus: getLayerStatus,
   getLayerStyle: getLayerStyle,
   getLayerTimeDimension: getLayerTimeDimension,
+  getLayerTitleFromService: getLayerTitleFromService,
   getLayerType: getLayerType,
   getLayers: getLayers,
   getLayersById: getLayersById,
@@ -4649,26 +4746,21 @@ function (state, mapId) {
 });
 var getSelectedFeatureAsGeoJSON = createSelector([function (state, mapId) {
   var _state$linkedState2;
-  var sharedData = (_state$linkedState2 = state.linkedState) === null || _state$linkedState2 === void 0 ? void 0 : _state$linkedState2.sharedData[mapId];
-  var _ref = sharedData || {},
-    _ref$features = _ref.features,
-    features = _ref$features === void 0 ? [] : _ref$features,
-    selectedFeatureId = _ref.selectedFeatureId;
-  return {
-    features: features,
-    selectedFeatureId: selectedFeatureId
-  };
-}], function (_ref2) {
-  var features = _ref2.features,
-    selectedFeatureId = _ref2.selectedFeatureId;
-  if (features && selectedFeatureId) {
-    var _features$2;
-    var selectedFeature = (_features$2 = features[0]) === null || _features$2 === void 0 ? void 0 : _features$2.geoJSON.features.find(function (feature) {
-      return feature.id === selectedFeatureId;
-    });
-    return selectedFeature;
+  return (_state$linkedState2 = state.linkedState) === null || _state$linkedState2 === void 0 ? void 0 : _state$linkedState2.sharedData[mapId];
+}], function (sharedData) {
+  var _features$2;
+  if (!sharedData) {
+    return null;
   }
-  return null;
+  var features = sharedData.features,
+    selectedFeatureId = sharedData.selectedFeatureId;
+  if (!features || !selectedFeatureId) {
+    return null;
+  }
+  var selectedFeature = (_features$2 = features[0]) === null || _features$2 === void 0 ? void 0 : _features$2.geoJSON.features.find(function (feature) {
+    return feature.id === selectedFeatureId;
+  });
+  return selectedFeature;
 });
 
 var selectors$3 = /*#__PURE__*/Object.freeze({
@@ -5166,16 +5258,16 @@ var isAnimating = function isAnimating(store, mapId) {
  * @param {string} mapId mapId: string - Id of the map
  * @returns {object} returnType: object - object containing isAnimating boolean and id string
  */
-var linkedMapAnimationInfo = function linkedMapAnimationInfo(store, mapId) {
-  var _genericSelectors$get;
+var linkedMapAnimationInfo = createSelector(getMapStore, getSynchronizationGroupStore, getMapById, function (mapStore, syncStore, mapState) {
   var animationInfo = {
-    isAnimating: isAnimating(store, mapId),
-    id: mapId
+    isAnimating: (mapState === null || mapState === void 0 ? void 0 : mapState.isAnimating) || false,
+    id: (mapState === null || mapState === void 0 ? void 0 : mapState.id) || ''
   };
-  (_genericSelectors$get = getSynchronizationGroupStore(store)) === null || _genericSelectors$get === void 0 || _genericSelectors$get.groups.allIds.forEach(function (groupId) {
-    if (getSynchronizationGroupStore(store).groups.byId[groupId].targets.byId[animationInfo.id] && getSynchronizationGroupStore(store).groups.byId[groupId].targets.byId[animationInfo.id].linked) {
-      getSynchronizationGroupStore(store).groups.byId[groupId].targets.allIds.forEach(function (id) {
-        if (isAnimating(store, id) === true) {
+  syncStore === null || syncStore === void 0 || syncStore.groups.allIds.forEach(function (groupId) {
+    if (syncStore.groups.byId[groupId].targets.byId[animationInfo.id] && syncStore.groups.byId[groupId].targets.byId[animationInfo.id].linked) {
+      syncStore.groups.byId[groupId].targets.allIds.forEach(function (id) {
+        var _mapStore$byId$id;
+        if ((mapStore === null || mapStore === void 0 || (_mapStore$byId$id = mapStore.byId[id]) === null || _mapStore$byId$id === void 0 ? void 0 : _mapStore$byId$id.isAnimating) === true) {
           animationInfo.isAnimating = true;
           animationInfo.id = id;
         }
@@ -5183,7 +5275,7 @@ var linkedMapAnimationInfo = function linkedMapAnimationInfo(store, mapId) {
     }
   });
   return animationInfo;
-};
+}, selectorMemoizationOptions);
 /**
  * Gets start time of animation
  *
@@ -5702,6 +5794,11 @@ var getAnimationList = createSelector(getLayersById, getMapById, getAnimationSta
   }
   return animationList;
 }, selectorMemoizationOptions);
+var getAnimationListAsEpochTimes = createSelector(getAnimationList, function (list) {
+  return list.map(function (kvp) {
+    return dateUtils.parseISO(handleDateUtilsISOString(kvp.value)).getTime();
+  });
+}, selectorMemoizationOptions);
 /**
  * @param {object} store store: object - store object
  * @param {string} mapId mapId: string - Id of the map
@@ -5759,6 +5856,7 @@ var selectors$1 = /*#__PURE__*/Object.freeze({
   getAllUniqueDimensions: getAllUniqueDimensions,
   getAnimationEndTime: getAnimationEndTime,
   getAnimationList: getAnimationList,
+  getAnimationListAsEpochTimes: getAnimationListAsEpochTimes,
   getAnimationRange: getAnimationRange,
   getAnimationStartTime: getAnimationStartTime,
   getAutoTimeStepLayerId: getAutoTimeStepLayerId,
@@ -5880,7 +5978,7 @@ var filterLayers = function filterLayers() {
         overLayers: overLayers
       };
     }
-    if (layer.layerType === LayerType.mapLayer || layer.layerType === LayerType.edrLayer) {
+    if (layer.layerType === LayerType.mapLayer || layer.layerType === LayerType.edrFeatureLayer) {
       return {
         mapLayers: mapLayers.concat(parsedLayer),
         baseLayers: baseLayers,
@@ -6297,20 +6395,23 @@ genericListener.startListening({
   actionCreator: setTime,
   effect: function () {
     var _effect = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref, listenerApi) {
-      var payload, value, origin, targets, groups;
+      var payload, value, origin, currentTime, targets, groups;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             payload = _ref.payload;
             listenerApi.cancelActiveListeners();
             value = payload.value, origin = payload.origin;
-            /* Test if the value is according to the expected time format */
-            if (!setTimeValidatorRexexp.test(value)) {
-              console.error("setTime value ".concat(value, " 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) {
+              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));
+              }
             }
           case 4:
           case "end":
@@ -6324,20 +6425,37 @@ genericListener.startListening({
     return effect;
   }()
 });
+// Synchronize timeslider settings for actions 'centertime', 'span' and 'timestep'.
 genericListener.startListening({
-  actionCreator: setBbox,
+  matcher: isAnyOf(mapActions.setTimeSliderCenterTime, mapActions.setTimeSliderSpan, mapActions.setTimeStep, mapActions.setAnimationStartTime, mapActions.setAnimationEndTime, mapActions.setAnimationDelay),
   effect: function () {
     var _effect2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref2, listenerApi) {
-      var payload, targets, groups;
+      var _synchronizationGroup;
+      var payload, type, sourceId, syncGroupState, newPayload, targets, groups;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            payload = _ref2.payload;
+            payload = _ref2.payload, type = _ref2.type;
             listenerApi.cancelActiveListeners();
-            targets = getTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETBBOX);
-            groups = getTargetGroups(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETBBOX);
-            listenerApi.dispatch(setBboxSync(payload, targets, groups));
-          case 5:
+            sourceId = payload.mapId;
+            syncGroupState = (_synchronizationGroup = getSynchronizationGroupSource(listenerApi.getState(), sourceId)) === null || _synchronizationGroup === void 0 || (_synchronizationGroup = _synchronizationGroup.payloadByType['SYNCGROUPS_TYPE_SETTIME']) === null || _synchronizationGroup === void 0 ? void 0 : _synchronizationGroup.value;
+            newPayload = {
+              sourceId: sourceId,
+              origin: 'timeslidersynclistener',
+              value: {
+                currentTime: syncGroupState === null || syncGroupState === void 0 ? void 0 : syncGroupState.currentTime,
+                timeSliderCenterTime: type === mapActions.setTimeSliderCenterTime.type ? payload.timeSliderCenterTime : (syncGroupState === null || syncGroupState === void 0 ? void 0 : syncGroupState.timeSliderCenterTime) || 0,
+                timeSliderSpan: type === mapActions.setTimeSliderSpan.type ? payload.timeSliderSpan : syncGroupState === null || syncGroupState === void 0 ? void 0 : syncGroupState.timeSliderSpan,
+                timeSliderStep: type === mapActions.setTimeStep.type ? payload.timeStep : syncGroupState === null || syncGroupState === void 0 ? void 0 : syncGroupState.timeSliderStep,
+                timeSliderAnimationStartTime: type === mapActions.setAnimationStartTime.type ? payload.animationStartTime : syncGroupState === null || syncGroupState === void 0 ? void 0 : syncGroupState.timeSliderAnimationStartTime,
+                timeSliderAnimationEndTime: type === mapActions.setAnimationEndTime.type ? payload.animationEndTime : syncGroupState === null || syncGroupState === void 0 ? void 0 : syncGroupState.timeSliderAnimationEndTime,
+                timeSliderAnimationDelay: type === mapActions.setAnimationDelay.type ? payload.animationDelay : syncGroupState === null || syncGroupState === void 0 ? void 0 : syncGroupState.timeSliderAnimationDelay
+              }
+            };
+            targets = getTargets(listenerApi.getState(), newPayload, SYNCGROUPS_TYPE_SETTIME);
+            groups = getTargetGroups(listenerApi.getState(), newPayload, SYNCGROUPS_TYPE_SETTIME);
+            listenerApi.dispatch(setTimeSync(newPayload, targets, groups));
+          case 8:
           case "end":
             return _context2.stop();
         }
@@ -6350,27 +6468,19 @@ genericListener.startListening({
   }()
 });
 genericListener.startListening({
-  matcher: isAnyOf(layerActions.layerChangeName, layerActions.layerChangeEnabled, layerActions.layerChangeOpacity, layerActions.layerChangeDimension, layerActions.layerChangeStyle),
+  actionCreator: setBbox,
   effect: function () {
     var _effect3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(_ref3, listenerApi) {
-      var payload, type, targets;
+      var payload, targets, groups;
       return _regeneratorRuntime().wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
-            payload = _ref3.payload, type = _ref3.type;
+            payload = _ref3.payload;
             listenerApi.cancelActiveListeners();
-            /* Should not listen to actions from itself */
-            if (!(payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer)) {
-              _context3.next = 4;
-              break;
-            }
-            return _context3.abrupt("return");
-          case 4:
-            targets = getLayerActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
-            if (targets && targets.length > 0) {
-              listenerApi.dispatch(setLayerActionSync(payload, targets, type));
-            }
-          case 6:
+            targets = getTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETBBOX);
+            groups = getTargetGroups(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETBBOX);
+            listenerApi.dispatch(setBboxSync(payload, targets, groups));
+          case 5:
           case "end":
             return _context3.stop();
         }
@@ -6383,7 +6493,7 @@ genericListener.startListening({
   }()
 });
 genericListener.startListening({
-  actionCreator: layerActions.addLayer,
+  matcher: isAnyOf(layerActions.layerChangeName, layerActions.layerChangeEnabled, layerActions.layerChangeOpacity, layerActions.layerChangeDimension, layerActions.layerChangeStyle),
   effect: function () {
     var _effect4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4(_ref4, listenerApi) {
       var payload, type, targets;
@@ -6399,7 +6509,7 @@ genericListener.startListening({
             }
             return _context4.abrupt("return");
           case 4:
-            targets = getAddLayerActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
+            targets = getLayerActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
             if (targets && targets.length > 0) {
               listenerApi.dispatch(setLayerActionSync(payload, targets, type));
             }
@@ -6416,24 +6526,25 @@ genericListener.startListening({
   }()
 });
 genericListener.startListening({
-  actionCreator: layerActions.duplicateMapLayer,
+  actionCreator: layerActions.addLayer,
   effect: function () {
     var _effect5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5(_ref5, listenerApi) {
-      var payload, sourceLayer, newPayload, targets;
+      var payload, type, targets;
       return _regeneratorRuntime().wrap(function _callee5$(_context5) {
         while (1) switch (_context5.prev = _context5.next) {
           case 0:
-            payload = _ref5.payload;
+            payload = _ref5.payload, type = _ref5.type;
             listenerApi.cancelActiveListeners();
-            sourceLayer = getLayerById(listenerApi.getState(), payload.oldLayerId);
-            newPayload = {
-              mapId: payload.mapId,
-              layer: sourceLayer,
-              origin: payload.origin
-            };
-            targets = getAddLayerActionsTargets(listenerApi.getState(), newPayload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
+            /* Should not listen to actions from itself */
+            if (!(payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer)) {
+              _context5.next = 4;
+              break;
+            }
+            return _context5.abrupt("return");
+          case 4:
+            targets = getAddLayerActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
             if (targets && targets.length > 0) {
-              listenerApi.dispatch(setLayerActionSync(newPayload, targets, layerActions.addLayer.type));
+              listenerApi.dispatch(setLayerActionSync(payload, targets, type));
             }
           case 6:
           case "end":
@@ -6448,25 +6559,24 @@ genericListener.startListening({
   }()
 });
 genericListener.startListening({
-  actionCreator: mapActions.layerMoveLayer,
+  actionCreator: layerActions.duplicateMapLayer,
   effect: function () {
     var _effect6 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6(_ref6, listenerApi) {
-      var payload, type, targets;
+      var payload, sourceLayer, newPayload, targets;
       return _regeneratorRuntime().wrap(function _callee6$(_context6) {
         while (1) switch (_context6.prev = _context6.next) {
           case 0:
-            payload = _ref6.payload, type = _ref6.type;
+            payload = _ref6.payload;
             listenerApi.cancelActiveListeners();
-            /* Should not listen to actions from itself */
-            if (!(payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer)) {
-              _context6.next = 4;
-              break;
-            }
-            return _context6.abrupt("return");
-          case 4:
-            targets = getLayerMoveActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
+            sourceLayer = getLayerById(listenerApi.getState(), payload.oldLayerId);
+            newPayload = {
+              mapId: payload.mapId,
+              layer: sourceLayer,
+              origin: payload.origin
+            };
+            targets = getAddLayerActionsTargets(listenerApi.getState(), newPayload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
             if (targets && targets.length > 0) {
-              listenerApi.dispatch(setLayerActionSync(payload, targets, type));
+              listenerApi.dispatch(setLayerActionSync(newPayload, targets, layerActions.addLayer.type));
             }
           case 6:
           case "end":
@@ -6481,7 +6591,7 @@ genericListener.startListening({
   }()
 });
 genericListener.startListening({
-  matcher: isAnyOf(mapActions.setAutoLayerId, mapActions.setAutoUpdateLayerId, mapActions.setAutoTimestepLayerId),
+  actionCreator: mapActions.layerMoveLayer,
   effect: function () {
     var _effect7 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee7(_ref7, listenerApi) {
       var payload, type, targets;
@@ -6490,11 +6600,18 @@ genericListener.startListening({
           case 0:
             payload = _ref7.payload, type = _ref7.type;
             listenerApi.cancelActiveListeners();
-            targets = getSetAutoLayerIdActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
+            /* Should not listen to actions from itself */
+            if (!(payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer)) {
+              _context7.next = 4;
+              break;
+            }
+            return _context7.abrupt("return");
+          case 4:
+            targets = getLayerMoveActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
             if (targets && targets.length > 0) {
               listenerApi.dispatch(setLayerActionSync(payload, targets, type));
             }
-          case 4:
+          case 6:
           case "end":
             return _context7.stop();
         }
@@ -6507,7 +6624,7 @@ genericListener.startListening({
   }()
 });
 genericListener.startListening({
-  actionCreator: layerActions.setBaseLayers,
+  matcher: isAnyOf(mapActions.setAutoLayerId, mapActions.setAutoUpdateLayerId, mapActions.setAutoTimestepLayerId),
   effect: function () {
     var _effect8 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee8(_ref8, listenerApi) {
       var payload, type, targets;
@@ -6516,18 +6633,11 @@ genericListener.startListening({
           case 0:
             payload = _ref8.payload, type = _ref8.type;
             listenerApi.cancelActiveListeners();
-            /* Should not listen to actions from itself */
-            if (!(payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer)) {
-              _context8.next = 4;
-              break;
-            }
-            return _context8.abrupt("return");
-          case 4:
-            targets = getMapBaseLayerActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
+            targets = getSetAutoLayerIdActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
             if (targets && targets.length > 0) {
               listenerApi.dispatch(setLayerActionSync(payload, targets, type));
             }
-          case 6:
+          case 4:
           case "end":
             return _context8.stop();
         }
@@ -6540,7 +6650,7 @@ genericListener.startListening({
   }()
 });
 genericListener.startListening({
-  actionCreator: layerActions.layerDelete,
+  actionCreator: layerActions.setBaseLayers,
   effect: function () {
     var _effect9 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9(_ref9, listenerApi) {
       var payload, type, targets;
@@ -6556,7 +6666,7 @@ genericListener.startListening({
             }
             return _context9.abrupt("return");
           case 4:
-            targets = getLayerDeleteActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
+            targets = getMapBaseLayerActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
             if (targets && targets.length > 0) {
               listenerApi.dispatch(setLayerActionSync(payload, targets, type));
             }
@@ -6572,6 +6682,39 @@ genericListener.startListening({
     return effect;
   }()
 });
+genericListener.startListening({
+  actionCreator: layerActions.layerDelete,
+  effect: function () {
+    var _effect0 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee0(_ref0, listenerApi) {
+      var payload, type, targets;
+      return _regeneratorRuntime().wrap(function _callee0$(_context0) {
+        while (1) switch (_context0.prev = _context0.next) {
+          case 0:
+            payload = _ref0.payload, type = _ref0.type;
+            listenerApi.cancelActiveListeners();
+            /* Should not listen to actions from itself */
+            if (!(payload && payload.origin === LayerActionOrigin.ReactMapViewParseLayer)) {
+              _context0.next = 4;
+              break;
+            }
+            return _context0.abrupt("return");
+          case 4:
+            targets = getLayerDeleteActionsTargets(listenerApi.getState(), payload, SYNCGROUPS_TYPE_SETLAYERACTIONS);
+            if (targets && targets.length > 0) {
+              listenerApi.dispatch(setLayerActionSync(payload, targets, type));
+            }
+          case 6:
+          case "end":
+            return _context0.stop();
+        }
+      }, _callee0);
+    }));
+    function effect(_x17, _x18) {
+      return _effect0.apply(this, arguments);
+    }
+    return effect;
+  }()
+});
 
 /* A map with all the timerIds and their current step */
 var stepMap = new Map();
@@ -6663,14 +6806,14 @@ var isNextStepAvailable = function isNextStepAvailable(reduxLayers, nextTimeStri
       };
     }
     var olSource = layer.olSource;
-    var hasImageAvailableForRequestedTimeStep = olSource.hasImageForTimeValue(closestValue);
+    var hasImageAvailableForRequestedTimeStep = olSource.isImageLoadingForTimestep(closestValue);
     // If there is no image available for requested timestep, return true and flag that this thing is not ready yet.
     if (hasImageAvailableForRequestedTimeStep) {
       return {
         status: true
       };
     }
-    olSource.loadImageForTimeValue(closestValue);
+    olSource.setImageForTimeValue(closestValue);
     return {
       status: false
     };
@@ -6706,7 +6849,9 @@ var olMetronomeHandler = function olMetronomeHandler(timerIds, listenerApi) {
         // When there are no targets, default to one
         targets.push({
           targetId: timerId,
-          value: ''
+          value: {
+            currentTime: ''
+          }
         });
       }
       var timerIsInDwell = handleTimerDwell(timerId, animationListValues.length);
@@ -6725,7 +6870,9 @@ var olMetronomeHandler = function olMetronomeHandler(timerIds, listenerApi) {
       var updatedValue = animationListValues[timerStep];
       targetsWithUpdateValue.push.apply(targetsWithUpdateValue, _toConsumableArray(targets.map(function (target) {
         return _objectSpread2(_objectSpread2({}, target), {}, {
-          value: updatedValue
+          value: {
+            currentTime: updatedValue
+          }
         });
       })));
       var speedDelay = getMapAnimationDelay(listenerApi.getState(), timerId);
@@ -6763,7 +6910,8 @@ mapListener.startListening({
     var payload = _ref.payload;
     var mapId = payload.mapId;
     var layers = getMapLayersWithoutDimensionCurrentValue(listenerApi.getState(), mapId);
-    if (!layers.length) {
+    var isAnimating$1 = isAnimating(listenerApi.getState(), mapId);
+    if (!layers.length && isAnimating$1) {
       listenerApi.dispatch(mapActions.mapStopAnimation({
         mapId: mapId
       }));
@@ -6820,7 +6968,9 @@ mapListener.startListening({
               return listenerApi.dispatch(setTime({
                 origin: LayerActionOrigin.updateLayerInformationListener,
                 sourceId: syncedMapId,
-                value: incomingMaxTime
+                value: {
+                  currentTime: incomingMaxTime
+                }
               }));
             });
           }
@@ -6902,7 +7052,9 @@ mapListener.startListening({
                     return listenerApi.dispatch(setTime({
                       origin: LayerActionOrigin.toggleAutoUpdateListener,
                       sourceId: syncedMapId,
-                      value: timeDimension.maxValue
+                      value: {
+                        currentTime: timeDimension.maxValue
+                      }
                     }));
                   });
                 }
@@ -7016,7 +7168,7 @@ mapListener.startListening({
   actionCreator: mapActions.setMapPreset,
   effect: function () {
     var _effect2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref6, listenerApi) {
-      var payload, mapId, initialProps, mapPreset, layers, activeLayerId, autoTimeStepLayerId, autoUpdateLayerId, proj, shouldAutoUpdate, shouldAnimate, animationPayload, toggleTimestepAuto, showTimeSlider, displayMapPin, shouldShowZoomControls, shouldShowLegend, shouldShowDataExplorer, dockedLayerManagerSize, timeSliderSpan, toggleTimeSpanAuto, defaultOverlayer, _filterLayers, mapLayers, baseLayers, overLayers, _newLayerIds$layers$f, _newLayerIds$layers$f2, autoTimeStepLayerIdNew, autoUpdateLayerIdNew, onlyActiveLayerIdIsSet, newLayerIds, newAutoTimeStepLayerId, newAutoUpdateLayerId, customLayers, customBaseLayer, customOverLayer, baseLayersWithDefaultLayer, overLayersWithDefaultLayer, allBaseLayers, _overLayers$find, foundOverlayerId, checkIsprojectionSupported, animationLength, animationEndTime, shouldEndtimeOverride, interval, endTime, startTime, centerTimeInSeconds, animationEnd, _startTime, duration, _animationEnd, animationStart, shouldOpenLegend, legendId, fiveMinuteDelayForAnimation, _animationEnd2, _animationStart;
+      var payload, mapId, initialProps, mapPreset, layers, activeLayerId, autoTimeStepLayerId, autoUpdateLayerId, proj, shouldAutoUpdate, shouldAnimate, animationPayload, toggleTimestepAuto, showTimeSlider, displayMapPin, shouldShowZoomControls, shouldShowLegend, shouldShowDataExplorer, dockedLayerManagerSize, timeSliderSpan, toggleTimeSpanAuto, defaultOverlayer, _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, endTime, startTime, centerTimeInSeconds, animationEnd, _startTime, duration, _animationEnd, animationStart, shouldOpenLegend, legendId, fiveMinuteDelayForAnimation, _animationEnd2, _animationStart;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -7075,10 +7227,11 @@ mapListener.startListening({
               });
             });
             handleBaseLayers(mapId, allBaseLayers, listenerApi);
-            if (defaultOverlayer && overLayers) {
-              foundOverlayerId = ((_overLayers$find = overLayers.find(function (overlayer) {
+            if (defaultOverlayer) {
+              overlayersFromStore = getOverlayersForMapId(listenerApi.getState(), mapId);
+              foundOverlayerId = ((_overlayersFromStore$ = overlayersFromStore.find(function (overlayer) {
                 return overlayer.name === defaultOverlayer;
-              })) === null || _overLayers$find === void 0 ? void 0 : _overLayers$find.id) || 'none';
+              })) === null || _overlayersFromStore$ === void 0 ? void 0 : _overlayersFromStore$.id) || 'none';
               listenerApi.dispatch(mapActions.changeOverlayer({
                 mapId: mapId,
                 selectedOverlayer: foundOverlayerId,
@@ -7178,7 +7331,9 @@ mapListener.startListening({
               listenerApi.dispatch(genericActions.setTime({
                 origin: '',
                 sourceId: mapId,
-                value: startTime
+                value: {
+                  currentTime: startTime
+                }
               }));
               centerTimeInSeconds = new Date(handleDateUtilsISOString(endTime)).getTime();
               listenerApi.dispatch(mapActions.setTimeSliderCenterTime({
@@ -7199,7 +7354,9 @@ mapListener.startListening({
               listenerApi.dispatch(genericActions.setTime({
                 origin: '',
                 sourceId: mapId,
-                value: _startTime
+                value: {
+                  currentTime: _startTime
+                }
               }));
             }
             // sets animationDelay by speed of animationPayload
@@ -7364,7 +7521,9 @@ mapListener.startListening({
       listenerApi.dispatch(genericActions.setTime({
         origin: '',
         sourceId: mapId,
-        value: handleDateUtilsISOString(selectedTimeString)
+        value: {
+          currentTime: handleDateUtilsISOString(selectedTimeString)
+        }
       }));
     }
   }
@@ -8753,8 +8912,9 @@ var SupportedComponentTypes;
 (function (SupportedComponentTypes) {
   SupportedComponentTypes["WarningList"] = "WarningList";
   SupportedComponentTypes["TimeSeries"] = "TimeSeries";
+  SupportedComponentTypes["Soundings"] = "Soundings";
 })(SupportedComponentTypes || (SupportedComponentTypes = {}));
-var supportedComponentTypesForLinking = [SupportedComponentTypes.WarningList, SupportedComponentTypes.TimeSeries];
+var supportedComponentTypesForLinking = [SupportedComponentTypes.WarningList, SupportedComponentTypes.TimeSeries, SupportedComponentTypes.Soundings];
 
 var constants = /*#__PURE__*/Object.freeze({
   __proto__: null,