@opengeoweb/store 11.1.0 → 12.0.0

package/index.esm.js

@@ -1,321 +1,33 @@
 import { createSlice, createSelector, createAction, createListenerMiddleware, isAnyOf, createEntityAdapter, combineReducers, configureStore, compose, EnhancerArray } from '@reduxjs/toolkit';
 import { isEqual, isEmpty, compact } from 'lodash';
 import { dateUtils, PROJECTION, defaultDelay } from '@opengeoweb/shared';
-import { webmapUtils, parseISO8601IntervalToDateInterval, LayerType, getWMJSMapById, webmapTestSettings, WMLayer, getWMSRequests, handleDateUtilsISOString, isProjectionSupported, queryWMSLayers } from '@opengeoweb/webmap';
+import { webmapUtils, parseISO8601IntervalToDateInterval, LayerType, getWMJSMapById, webmapTestSettings, WMLayer, getWMSRequests, handleDateUtilsISOString, isProjectionSupported, queryWMSLayers, getWMLayerById, WMInvalidDateValues } from '@opengeoweb/webmap';
 import { defaultTimeStep, defaultTimeSpan, defaultAnimationDelayAtStart, defaultSecondsPerPx, roundWithTimeStep, getSpeedDelay } from '@opengeoweb/timeslider';
 import { produce } from 'immer';
-import { getGeoJson, moveFeature, createInterSections, getLastEmptyFeatureIndex, defaultLayers, addSelectionTypeToGeoJSON, getFeatureCollection, emptyGeoJSON, defaultIntersectionStyleProperties } from '@opengeoweb/webmap-react';
+import { getGeoJson, moveFeature, createInterSections, getLastEmptyFeatureIndex, defaultLayers, addSelectionTypeToGeoJSON, getFeatureCollection, emptyGeoJSON, defaultIntersectionStyleProperties, isOpenLayersEnabled } from '@opengeoweb/webmap-react';
 export { defaultLayers } from '@opengeoweb/webmap-react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useCallback, useEffect } from 'react';
 import * as turf from '@turf/turf';
 import { metronome } from '@opengeoweb/metronome';
-
-/* *
- * 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var initialState$6 = {
-  byId: {},
-  allIds: []
-};
-var slice$7 = createSlice({
-  initialState: initialState$6,
-  name: 'serviceReducer',
-  reducers: {
-    serviceSetLayers: function serviceSetLayers(draft, action) {
-      var id = action.payload.id;
-      draft.byId[id] = Object.assign({}, action.payload);
-      if (!draft.allIds.includes(id)) {
-        draft.allIds.push(id);
-      }
-    },
-    mapStoreRemoveService: function mapStoreRemoveService(draft, action) {
-      var foundServiceIndex = draft.allIds.findIndex(function (id) {
-        return draft.byId[id].serviceUrl === action.payload.serviceUrl;
-      });
-      if (foundServiceIndex !== -1) {
-        var serviceId = draft.allIds[foundServiceIndex];
-        draft.allIds = draft.allIds.filter(function (id) {
-          return id !== serviceId;
-        });
-        delete draft.byId[serviceId];
-      }
-    },
-    fetchInitialServices: function fetchInitialServices(
-    // eslint-disable-next-line no-unused-vars
-    draft,
-    // eslint-disable-next-line no-unused-vars
-    action) {
-      // This block is intentionally left empty so no code should be put in here
-    }
-  }
-});
-var serviceReducer = slice$7.reducer,
-  serviceActions = slice$7.actions;
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var selectorMemoizationOptions = {
-  memoizeOptions: {
-    maxSize: 1000,
-    resultEqualityCheck: isEqual
-  }
-};
-
-var utils$3 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  selectorMemoizationOptions: selectorMemoizationOptions
-});
-
-/* *
- * 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var getServicesStore = function getServicesStore(store) {
-  return store == null ? void 0 : store.services;
-};
-/**
- * Retrieves all serviceIds
- *
- * Example: serviceIds = getServiceIds(store)
- * @param {object} store store: object - object from which the service state will be extracted
- * @returns {array} returnType: array - an array of all serviceIds
- */
-var getServiceIds = createSelector(getServicesStore, function (serviceState) {
-  var _serviceState$allIds;
-  return (_serviceState$allIds = serviceState == null ? void 0 : serviceState.allIds) != null ? _serviceState$allIds : [];
-}, selectorMemoizationOptions);
-/**
- * Gets map services
- *
- * Example: services = getServices(store)
- * @param {object} store store: object - Store object
- * @returns {object} returnType: ServiceState
- */
-var getServices = createSelector(getServicesStore, function (store) {
-  var _store$byId;
-  return (_store$byId = store == null ? void 0 : store.byId) != null ? _store$byId : {};
-}, selectorMemoizationOptions);
-/**
- * Gets the service object by its url
- *
- * Example: service = getServiceByName(store, 'serviceName')
- * @param {object} store store: object - Store object
- * @returns {ReduxService} returnType: Service
- */
-var getServiceByUrl = createSelector(getServicesStore, function (state, serviceUrl) {
-  return serviceUrl;
-}, function (serviceState, serviceUrl) {
-  if (!serviceState) {
-    return undefined;
-  }
-  return Object.values(serviceState.byId).find(function (service) {
-    return service.serviceUrl === serviceUrl;
-  });
-}, selectorMemoizationOptions);
-/**
- * Gets the layer from the store using the serviceUrl and layerName
- *
- * Example: layers = getLayersFromService(store, 'https://geoservices.knmi.nl/...')
- * @param {object} store store: object - object from which the layers state will be extracted
- * @param {string}  serviceUrl serviceUrl: string - Url of the service where the layer belongs to
- * @returns {array} returnType: ServiceLayer[] - All layers within the service object.
- */
-var getLayersFromServiceSelector = createSelector(getServiceByUrl, function (service) {
-  var _service$layers;
-  return (_service$layers = service == null ? void 0 : service.layers) != null ? _service$layers : [];
-}, selectorMemoizationOptions);
-/**
- * Gets the layer from the store using the serviceUrl and layerName
- *
- * 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
- * @returns {ServiceLayer} returnType: ServiceLayer - The layer from the service object.
- */
-var getLayerFromService = createSelector(getLayersFromServiceSelector, function (_store, _serviceUrl, layerName) {
-  return layerName;
-}, function (layers, layerName) {
-  return layers.find(function (serviceLayer) {
-    return serviceLayer.name === layerName;
-  });
-}, selectorMemoizationOptions);
-/**
- * Gets the layers stylelist from the servicestore using the serviceUrl and layerName
- *
- * Example: layerStyles = getLayerStyles(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: Style[] - array containing layer styles
- */
-var getLayerStyles = createSelector(getLayerFromService, function (layer) {
-  var _layer$styles;
-  return (_layer$styles = layer == null ? void 0 : layer.styles) != null ? _layer$styles : [];
-}, selectorMemoizationOptions);
-
-var selectors$7 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  getLayerFromService: getLayerFromService,
-  getLayerStyles: getLayerStyles,
-  getLayersFromServiceSelector: getLayersFromServiceSelector,
-  getServiceByUrl: getServiceByUrl,
-  getServiceIds: getServiceIds,
-  getServices: getServices
-});
-
-/* *
- * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var types$5 = /*#__PURE__*/Object.freeze({
-  __proto__: null
-});
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var getUserAddedServices = function getUserAddedServices() {
-  try {
-    var storedString = window.localStorage.getItem('userAddedServices');
-    var parsedData = JSON.parse(storedString);
-    if (parsedData && typeof parsedData === 'object') {
-      return Object.entries(parsedData).reduce(function (userServices, _ref) {
-        var _ref2;
-        var serviceUrl = _ref[0],
-          service = _ref[1];
-        return Object.assign({}, userServices, isNoIdService(service) ? (_ref2 = {}, _ref2[serviceUrl] = Object.assign({}, service, {
-          scope: 'user'
-        }), _ref2) : {});
-      }, {});
-    }
-  } catch (e) {
-    console.error('Unable to read services from localStorage: ', e);
-  }
-  return {};
-};
-var setUserAddedServices = function setUserAddedServices(services) {
-  try {
-    window.localStorage.setItem('userAddedServices', JSON.stringify(services));
-  } catch (e) {
-    console.error('Unable to write services to localStorage: ', e);
-  }
-};
-var isNoIdService = function isNoIdService(param) {
-  var serviceParam = param;
-  return !!(serviceParam != null && serviceParam.name && serviceParam != null && serviceParam.url);
-};
-
-/* *
- * 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var AnimationLength;
-(function (AnimationLength) {
-  AnimationLength[AnimationLength["Minutes15"] = 15] = "Minutes15";
-  AnimationLength[AnimationLength["Minutes30"] = 30] = "Minutes30";
-  AnimationLength[AnimationLength["Hours1"] = 60] = "Hours1";
-  AnimationLength[AnimationLength["Hours2"] = 120] = "Hours2";
-  AnimationLength[AnimationLength["Hours3"] = 180] = "Hours3";
-  AnimationLength[AnimationLength["Hours6"] = 360] = "Hours6";
-  AnimationLength[AnimationLength["Hours12"] = 720] = "Hours12";
-  AnimationLength[AnimationLength["Hours24"] = 1440] = "Hours24";
-})(AnimationLength || (AnimationLength = {}));
-
-var types$4 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  get AnimationLength () { return AnimationLength; }
-});
+import { View, Observable } from 'ol';
+import { boundingExtent, getCenter } from 'ol/extent';
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
   for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
   return n;
 }
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function _assertThisInitialized(e) {
+  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e;
+}
 function asyncGeneratorStep(n, t, e, r, o, a, c) {
   try {
     var i = n[a](c),
@@ -323,40 +35,189 @@ function asyncGeneratorStep(n, t, e, r, o, a, c) {
   } catch (n) {
     return void e(n);
   }
-  i.done ? t(u) : Promise.resolve(u).then(r, o);
+  i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+  return function () {
+    var t = this,
+      e = arguments;
+    return new Promise(function (r, o) {
+      var a = n.apply(t, e);
+      function _next(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+      }
+      function _throw(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+      }
+      _next(void 0);
+    });
+  };
+}
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+function _classCallCheck(a, n) {
+  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
+}
+function _defineProperties(e, r) {
+  for (var t = 0; t < r.length; t++) {
+    var o = r[t];
+    o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);
+  }
+}
+function _createClass(e, r, t) {
+  return r && _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
+    writable: !1
+  }), e;
+}
+function _createForOfIteratorHelper(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (!t) {
+    if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e  ) {
+      t && (r = t);
+      var n = 0,
+        F = function () {};
+      return {
+        s: F,
+        n: function () {
+          return n >= r.length ? {
+            done: !0
+          } : {
+            done: !1,
+            value: r[n++]
+          };
+        },
+        e: function (r) {
+          throw r;
+        },
+        f: F
+      };
+    }
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+  var o,
+    a = !0,
+    u = !1;
+  return {
+    s: function () {
+      t = t.call(r);
+    },
+    n: function () {
+      var r = t.next();
+      return a = r.done, r;
+    },
+    e: function (r) {
+      u = !0, o = r;
+    },
+    f: function () {
+      try {
+        a || null == t.return || t.return();
+      } finally {
+        if (u) throw o;
+      }
+    }
+  };
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+function _getPrototypeOf(t) {
+  return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
+    return t.__proto__ || Object.getPrototypeOf(t);
+  }, _getPrototypeOf(t);
+}
+function _inherits(t, e) {
+  if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
+  t.prototype = Object.create(e && e.prototype, {
+    constructor: {
+      value: t,
+      writable: !0,
+      configurable: !0
+    }
+  }), Object.defineProperty(t, "prototype", {
+    writable: !1
+  }), e && _setPrototypeOf(t, e);
+}
+function _isNativeReflectConstruct() {
+  try {
+    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+  } catch (t) {}
+  return (_isNativeReflectConstruct = function () {
+    return !!t;
+  })();
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
 }
-function _asyncToGenerator(n) {
-  return function () {
-    var t = this,
-      e = arguments;
-    return new Promise(function (r, o) {
-      var a = n.apply(t, e);
-      function _next(n) {
-        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
-      }
-      function _throw(n) {
-        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
-      }
-      _next(void 0);
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
-  };
-}
-function _createForOfIteratorHelperLoose(r, e) {
-  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (t) return (t = t.call(r)).next.bind(t);
-  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e  ) {
-    t && (r = t);
-    var o = 0;
-    return function () {
-      return o >= r.length ? {
-        done: !0
-      } : {
-        done: !1,
-        value: r[o++]
-      };
-    };
   }
-  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  return e;
+}
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
 }
 function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
@@ -367,6 +228,11 @@ function _objectWithoutPropertiesLoose(r, e) {
   }
   return t;
 }
+function _possibleConstructorReturn(t, e) {
+  if (e && ("object" == typeof e || "function" == typeof e)) return e;
+  if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
+  return _assertThisInitialized(t);
+}
 function _regeneratorRuntime() {
   _regeneratorRuntime = function () {
     return e;
@@ -666,15 +532,332 @@ function _regeneratorRuntime() {
         nextLoc: n
       }, "next" === this.method && (this.arg = t), y;
     }
-  }, e;
-}
-function _unsupportedIterableToArray(r, a) {
-  if (r) {
-    if ("string" == typeof r) return _arrayLikeToArray(r, a);
-    var t = {}.toString.call(r).slice(8, -1);
-    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }, e;
+}
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+    return t.__proto__ = e, t;
+  }, _setPrototypeOf(t, e);
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+var initialState$6 = {
+  byId: {},
+  allIds: []
+};
+var slice$7 = createSlice({
+  initialState: initialState$6,
+  name: 'serviceReducer',
+  reducers: {
+    serviceSetLayers: function serviceSetLayers(draft, action) {
+      var id = action.payload.id;
+      draft.byId[id] = _objectSpread2({}, action.payload);
+      if (!draft.allIds.includes(id)) {
+        draft.allIds.push(id);
+      }
+    },
+    mapStoreRemoveService: function mapStoreRemoveService(draft, action) {
+      var foundServiceIndex = draft.allIds.findIndex(function (id) {
+        return draft.byId[id].serviceUrl === action.payload.serviceUrl;
+      });
+      if (foundServiceIndex !== -1) {
+        var serviceId = draft.allIds[foundServiceIndex];
+        draft.allIds = draft.allIds.filter(function (id) {
+          return id !== serviceId;
+        });
+        delete draft.byId[serviceId];
+      }
+    },
+    fetchInitialServices: function fetchInitialServices(
+    // eslint-disable-next-line no-unused-vars
+    draft,
+    // eslint-disable-next-line no-unused-vars
+    action) {
+      // This block is intentionally left empty so no code should be put in here
+    }
+  }
+});
+var serviceReducer = slice$7.reducer,
+  serviceActions = slice$7.actions;
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var selectorMemoizationOptions = {
+  memoizeOptions: {
+    maxSize: 1000,
+    resultEqualityCheck: isEqual
+  }
+};
+
+var utils$3 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  selectorMemoizationOptions: selectorMemoizationOptions
+});
+
+/* *
+ * 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2020 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var getServicesStore = function getServicesStore(store) {
+  return store === null || store === void 0 ? void 0 : store.services;
+};
+/**
+ * Retrieves all serviceIds
+ *
+ * Example: serviceIds = getServiceIds(store)
+ * @param {object} store store: object - object from which the service state will be extracted
+ * @returns {array} returnType: array - an array of all serviceIds
+ */
+var getServiceIds = createSelector(getServicesStore, function (serviceState) {
+  var _serviceState$allIds;
+  return (_serviceState$allIds = serviceState === null || serviceState === void 0 ? void 0 : serviceState.allIds) !== null && _serviceState$allIds !== void 0 ? _serviceState$allIds : [];
+}, selectorMemoizationOptions);
+/**
+ * Gets map services
+ *
+ * Example: services = getServices(store)
+ * @param {object} store store: object - Store object
+ * @returns {object} returnType: ServiceState
+ */
+var getServices = createSelector(getServicesStore, function (store) {
+  var _store$byId;
+  return (_store$byId = store === null || store === void 0 ? void 0 : store.byId) !== null && _store$byId !== void 0 ? _store$byId : {};
+}, selectorMemoizationOptions);
+/**
+ * Gets the service object by its url
+ *
+ * Example: service = getServiceByName(store, 'serviceName')
+ * @param {object} store store: object - Store object
+ * @returns {ReduxService} returnType: Service
+ */
+var getServiceByUrl = createSelector(getServicesStore, function (state, serviceUrl) {
+  return serviceUrl;
+}, function (serviceState, serviceUrl) {
+  if (!serviceState) {
+    return undefined;
+  }
+  return Object.values(serviceState.byId).find(function (service) {
+    return service.serviceUrl === serviceUrl;
+  });
+}, selectorMemoizationOptions);
+/**
+ * Gets the layer from the store using the serviceUrl and layerName
+ *
+ * Example: layers = getLayersFromService(store, 'https://geoservices.knmi.nl/...')
+ * @param {object} store store: object - object from which the layers state will be extracted
+ * @param {string}  serviceUrl serviceUrl: string - Url of the service where the layer belongs to
+ * @returns {array} returnType: ServiceLayer[] - All layers within the service object.
+ */
+var getLayersFromServiceSelector = createSelector(getServiceByUrl, function (service) {
+  var _service$layers;
+  return (_service$layers = service === null || service === void 0 ? void 0 : service.layers) !== null && _service$layers !== void 0 ? _service$layers : [];
+}, selectorMemoizationOptions);
+/**
+ * Gets the layer from the store using the serviceUrl and layerName
+ *
+ * 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
+ * @returns {ServiceLayer} returnType: ServiceLayer - The layer from the service object.
+ */
+var getLayerFromService = createSelector(getLayersFromServiceSelector, function (_store, _serviceUrl, layerName) {
+  return layerName;
+}, function (layers, layerName) {
+  return layers.find(function (serviceLayer) {
+    return serviceLayer.name === layerName;
+  });
+}, selectorMemoizationOptions);
+/**
+ * Gets the layers stylelist from the servicestore using the serviceUrl and layerName
+ *
+ * Example: layerStyles = getLayerStyles(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: Style[] - array containing layer styles
+ */
+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);
+
+var selectors$7 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  getLayerFromService: getLayerFromService,
+  getLayerStyles: getLayerStyles,
+  getLayersFromServiceSelector: getLayersFromServiceSelector,
+  getServiceByUrl: getServiceByUrl,
+  getServiceIds: getServiceIds,
+  getServices: getServices
+});
+
+/* *
+ * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
+var types$5 = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var getUserAddedServices = function getUserAddedServices() {
+  try {
+    var storedString = window.localStorage.getItem('userAddedServices');
+    var parsedData = JSON.parse(storedString);
+    if (parsedData && _typeof(parsedData) === 'object') {
+      return Object.entries(parsedData).reduce(function (userServices, _ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          serviceUrl = _ref2[0],
+          service = _ref2[1];
+        return _objectSpread2(_objectSpread2({}, userServices), isNoIdService(service) ? _defineProperty({}, serviceUrl, _objectSpread2(_objectSpread2({}, service), {}, {
+          scope: 'user'
+        })) : {});
+      }, {});
+    }
+  } catch (e) {
+    console.error('Unable to read services from localStorage: ', e);
   }
-}
+  return {};
+};
+var setUserAddedServices = function setUserAddedServices(services) {
+  try {
+    window.localStorage.setItem('userAddedServices', JSON.stringify(services));
+  } catch (e) {
+    console.error('Unable to write services to localStorage: ', e);
+  }
+};
+var isNoIdService = function isNoIdService(param) {
+  var serviceParam = param;
+  return !!(serviceParam !== null && serviceParam !== void 0 && serviceParam.name && serviceParam !== null && serviceParam !== void 0 && serviceParam.url);
+};
+
+/* *
+ * 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2020 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var AnimationLength;
+(function (AnimationLength) {
+  AnimationLength[AnimationLength["Minutes15"] = 15] = "Minutes15";
+  AnimationLength[AnimationLength["Minutes30"] = 30] = "Minutes30";
+  AnimationLength[AnimationLength["Hours1"] = 60] = "Hours1";
+  AnimationLength[AnimationLength["Hours2"] = 120] = "Hours2";
+  AnimationLength[AnimationLength["Hours3"] = 180] = "Hours3";
+  AnimationLength[AnimationLength["Hours6"] = 360] = "Hours6";
+  AnimationLength[AnimationLength["Hours12"] = 720] = "Hours12";
+  AnimationLength[AnimationLength["Hours24"] = 1440] = "Hours24";
+})(AnimationLength || (AnimationLength = {}));
+
+var types$4 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  get AnimationLength () { return AnimationLength; }
+});
 
 var dateFormat = dateUtils.DATE_FORMAT_UTC;
 var createMap = function createMap(_ref) {
@@ -774,20 +957,28 @@ var createMap = function createMap(_ref) {
 var checkValidLayersPayload = function checkValidLayersPayload(layers, mapId) {
   /* Check for duplicate ids */
   var layerIds = {};
-  for (var _iterator = _createForOfIteratorHelperLoose(layers), _step; !(_step = _iterator()).done;) {
-    var layer = _step.value;
-    if (layer.id) {
-      /* Check if layer is already added to a different map */
-      if (layer.mapId && mapId && layer.mapId !== mapId) {
-        return false;
-      }
-      /* Check duplicate */
-      if (!layerIds[layer.id]) {
-        layerIds[layer.id] = true;
-      } else {
-        return false;
+  var _iterator = _createForOfIteratorHelper(layers),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var layer = _step.value;
+      if (layer.id) {
+        /* Check if layer is already added to a different map */
+        if (layer.mapId && mapId && layer.mapId !== mapId) {
+          return false;
+        }
+        /* Check duplicate */
+        if (!layerIds[layer.id]) {
+          layerIds[layer.id] = true;
+        } else {
+          return false;
+        }
       }
     }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
   }
   return true;
 };
@@ -883,7 +1074,7 @@ var produceDraftStateSetMapDimensionFromLayerChangeDimension = function produceD
  * @param newIndex New index of element in array
  */
 function moveArrayElements(array, oldIndex, newIndex) {
-  var newArray = [].concat(array);
+  var newArray = _toConsumableArray(array);
   var indexNew = Math.min(newIndex, newArray.length - 1);
   newArray.splice(indexNew, 0, newArray.splice(oldIndex, 1)[0]);
   return newArray;
@@ -988,13 +1179,14 @@ var parseTimeDimToISO8601Interval = function parseTimeDimToISO8601Interval(timeI
   }
   var intervalList = timeInterval.split(',').map(function (interval) {
     var _interval$split = interval.split('/'),
-      startTime = _interval$split[0],
-      endTime = _interval$split[1],
-      duration = _interval$split[2];
+      _interval$split2 = _slicedToArray(_interval$split, 3),
+      startTime = _interval$split2[0],
+      endTime = _interval$split2[1],
+      duration = _interval$split2[2];
     return {
-      startTime: startTime == null ? void 0 : startTime.trim(),
-      endTime: endTime == null ? void 0 : endTime.trim(),
-      duration: duration == null ? void 0 : duration.trim()
+      startTime: startTime === null || startTime === void 0 ? void 0 : startTime.trim(),
+      endTime: endTime === null || endTime === void 0 ? void 0 : endTime.trim(),
+      duration: duration === null || duration === void 0 ? void 0 : duration.trim()
     };
   });
   // Filter out intervals with missing start, end or duration
@@ -1020,23 +1212,6 @@ var utils$2 = /*#__PURE__*/Object.freeze({
   produceDraftStateSetWebMapDimension: produceDraftStateSetWebMapDimension
 });
 
-/* *
- * 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
 var replaceLayerIdsToEnsureUniqueLayerIdsInStore = function replaceLayerIdsToEnsureUniqueLayerIdsInStore(layerIds) {
   var layers = layerIds.layers,
     autoTimeStepLayerId = layerIds.autoTimeStepLayerId,
@@ -1062,16 +1237,16 @@ var replaceLayerIdsToEnsureUniqueLayerIdsInStore = function replaceLayerIdsToEns
     });
     var _layersWithNewIds = layers.map(function (layer, index) {
       if (layer.id && index === autoTimeStepLayerIndex) {
-        return Object.assign({}, layer, {
+        return _objectSpread2(_objectSpread2({}, layer), {}, {
           id: autoTimeStepLayerIdNew
         });
       }
       if (layer.id && index === autoUpdateLayerIndex) {
-        return Object.assign({}, layer, {
+        return _objectSpread2(_objectSpread2({}, layer), {}, {
           id: autoUpdateLayerIdNew
         });
       }
-      return Object.assign({}, layer, {
+      return _objectSpread2(_objectSpread2({}, layer), {}, {
         id: webmapUtils.generateLayerId()
       });
     });
@@ -1096,7 +1271,7 @@ var replaceLayerIdsToEnsureUniqueLayerIdsInStore = function replaceLayerIdsToEns
   // The code below is executed if neither auto timestep
   // nor auto update layer id was provided
   var layersWithNewIds = layers.map(function (layer) {
-    return Object.assign({}, layer, {
+    return _objectSpread2(_objectSpread2({}, layer), {}, {
       id: webmapUtils.generateLayerId()
     });
   });
@@ -1110,11 +1285,11 @@ function replaceLayerIds(layers, autoLayerIdOld, autoLayerIdNew) {
   });
   var layersWithNewIds = layers.map(function (layer, index) {
     if (layer.id && index === autoLayerIndex) {
-      return Object.assign({}, layer, {
+      return _objectSpread2(_objectSpread2({}, layer), {}, {
         id: autoLayerIdNew
       });
     }
-    return Object.assign({}, layer, {
+    return _objectSpread2(_objectSpread2({}, layer), {}, {
       id: webmapUtils.generateLayerId()
     });
   });
@@ -1281,23 +1456,6 @@ var types$3 = /*#__PURE__*/Object.freeze({
   get LayerStatus () { return LayerStatus; }
 });
 
-/* *
- * 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
 /**
  * Sets a dimension value for a layer in the state. If the dimension does not exist it is added to the layer.
  * @param draft The draft layerstate
@@ -1313,7 +1471,7 @@ var produceLayerDimensionDraftState = function produceLayerDimensionDraftState(d
     return layerDim.name === dimensionValueToUpdate.name;
   });
   if (existingLayerDimIndex < 0) {
-    layer.dimensions.push(Object.assign({}, dimensionValueToUpdate));
+    layer.dimensions.push(_objectSpread2({}, dimensionValueToUpdate));
   } else {
     var layerDimension = layer.dimensions[existingLayerDimIndex];
     if (dimensionValueToUpdate.currentValue) {
@@ -1347,7 +1505,7 @@ var isActionLayerSynced = function isActionLayerSynced(state, layerIdFromAction,
 var produceDimensionActionForMapLayer = function produceDimensionActionForMapLayer(layerDim, wmjsDimension, newDimension) {
   // If new value does not occur in the wmjsdimension - do not update the value but set the validSyncSelection to false
   if (wmjsDimension.getIndexForValue(newDimension.currentValue) === -1) {
-    return Object.assign({}, layerDim, {
+    return _objectSpread2(_objectSpread2({}, layerDim), {}, {
       name: newDimension.name,
       units: newDimension.units,
       currentValue: layerDim.currentValue,
@@ -1355,7 +1513,7 @@ var produceDimensionActionForMapLayer = function produceDimensionActionForMapLay
     });
   }
   // Otherwise, update to new value and set validSyncSelection to true
-  return Object.assign({}, layerDim, {
+  return _objectSpread2(_objectSpread2({}, layerDim), {}, {
     name: newDimension.name,
     units: newDimension.units,
     currentValue: newDimension.currentValue,
@@ -1379,20 +1537,20 @@ var produceDraftStateForAllLayersForDimensionWithinMap = function produceDraftSt
       return;
     }
     var wmjsDimension = webmapUtils.getWMJSDimensionForLayerAndDimension(layerId, dimension.name);
-    if (wmjsDimension != null && wmjsDimension.linked && wmjsDimension.name === 'reference_time') {
+    if (wmjsDimension !== null && wmjsDimension !== void 0 && wmjsDimension.linked && wmjsDimension.name === 'reference_time') {
       wmjsDimension.linked = false;
     }
-    if (layerIdFromAction === layerId || wmjsDimension != null && wmjsDimension.linked) {
+    if (layerIdFromAction === layerId || wmjsDimension !== null && wmjsDimension !== void 0 && wmjsDimension.linked) {
       var evenWhenOutsideRange = true;
       var closestValue = wmjsDimension ? wmjsDimension.getClosestValue(dimension.currentValue, evenWhenOutsideRange) : dimension.currentValue;
       var synced = dimension.synced !== undefined ? {
         synced: dimension.synced
       } : {};
-      var dimensionValueToUpdate = Object.assign({
+      var dimensionValueToUpdate = _objectSpread2(_objectSpread2({
         name: dimension.name,
         units: dimension.units,
         currentValue: closestValue
-      }, synced, {
+      }, synced), {}, {
         validSyncSelection: true
       });
       /* Set the dimension value for this layer */
@@ -1419,9 +1577,9 @@ var produceDraftStateForAllLayersForDimensionWithinMap = function produceDraftSt
  */
 var filterNonTimeDimensions = function filterNonTimeDimensions(dimensions) {
   var _dimensions$filter;
-  return (_dimensions$filter = dimensions == null ? void 0 : dimensions.filter(function (dim) {
+  return (_dimensions$filter = dimensions === null || dimensions === void 0 ? void 0 : dimensions.filter(function (dim) {
     return dim.name !== 'time';
-  })) != null ? _dimensions$filter : [];
+  })) !== null && _dimensions$filter !== void 0 ? _dimensions$filter : [];
 };
 /**
  * Returns the list of dimensions without the time dimension
@@ -1429,11 +1587,11 @@ var filterNonTimeDimensions = function filterNonTimeDimensions(dimensions) {
  */
 var filterCurrentValueFromDimensions = function filterCurrentValueFromDimensions(dimensions) {
   var _dimensions$map;
-  return (_dimensions$map = dimensions == null ? void 0 : dimensions.map(function (dim) {
+  return (_dimensions$map = dimensions === null || dimensions === void 0 ? void 0 : dimensions.map(function (dim) {
     // eslint-disable-next-line no-param-reassign
     dim.currentValue = '';
     return dim;
-  })) != null ? _dimensions$map : [];
+  })) !== null && _dimensions$map !== void 0 ? _dimensions$map : [];
 };
 /**
  * The timeslider range is depending on values set via reference_time dimension.
@@ -1445,7 +1603,7 @@ var filterCurrentValueFromDimensions = function filterCurrentValueFromDimensions
  * @returns
  */
 var updateMinMaxValueWhenReferenceTimeChanges = function updateMinMaxValueWhenReferenceTimeChanges(draftLayer, dimensionValueToUpdate) {
-  if (!(draftLayer != null && draftLayer.id) || !(draftLayer != null && draftLayer.dimensions) || dimensionValueToUpdate.name !== 'reference_time') {
+  if (!(draftLayer !== null && draftLayer !== void 0 && draftLayer.id) || !(draftLayer !== null && draftLayer !== void 0 && draftLayer.dimensions) || dimensionValueToUpdate.name !== 'reference_time') {
     return;
   }
   // If dimension reference_time is updated, we might have to update the time minValue and maxValue as well.
@@ -1459,7 +1617,7 @@ var updateMinMaxValueWhenReferenceTimeChanges = function updateMinMaxValueWhenRe
     if (reduxTimeDim && timeDimension && referenceTimeDimension) {
       // When the reference time changes, a new set of timevalues needs to be set in the layer.
       // From the new timevalues the min.max can be derived.
-      timeDimension == null || timeDimension.setTimeValuesForReferenceTime(dimensionValueToUpdate.currentValue, referenceTimeDimension);
+      timeDimension === null || timeDimension === void 0 || timeDimension.setTimeValuesForReferenceTime(dimensionValueToUpdate.currentValue, referenceTimeDimension);
       reduxTimeDim.minValue = timeDimension.getFirstValue();
       reduxTimeDim.maxValue = timeDimension.getLastValue();
     }
@@ -1491,7 +1649,7 @@ var createLayer = function createLayer(_ref) {
     status = _ref$status === void 0 ? 'default' : _ref$status,
     _ref$useLatestReferen = _ref.useLatestReferenceTime,
     useLatestReferenceTime = _ref$useLatestReferen === void 0 ? true : _ref$useLatestReferen,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$3);
   var wmjsLayer = webmapUtils.getWMLayerById(id);
   var dimensions = props.dimensions || (wmjsLayer ? wmjsLayer.getDimensions() : []).map(function (dim) {
     return {
@@ -1500,7 +1658,7 @@ var createLayer = function createLayer(_ref) {
       units: dim.units
     };
   });
-  return Object.assign({}, props, {
+  return _objectSpread2(_objectSpread2({}, props), {}, {
     dimensions: dimensions,
     id: id,
     opacity: opacity,
@@ -1533,7 +1691,7 @@ var slice$6 = createSlice({
       }
       if (!draft.byId[layerId]) {
         // TODO: (Sander de Snaijer, 2020-03-19) remove layerIds from the layer utils
-        draft.byId[layerId] = createLayer(Object.assign({}, layer, {
+        draft.byId[layerId] = createLayer(_objectSpread2(_objectSpread2({}, layer), {}, {
           id: layerId,
           mapId: mapId
         }));
@@ -1547,7 +1705,7 @@ var slice$6 = createSlice({
         mapId = _action$payload2.mapId;
       var oldLayer = draft.byId[oldLayerId];
       if (oldLayer && !draft.byId[newLayerId]) {
-        draft.byId[newLayerId] = createLayer(Object.assign({}, draft.byId[oldLayerId], {
+        draft.byId[newLayerId] = createLayer(_objectSpread2(_objectSpread2({}, draft.byId[oldLayerId]), {}, {
           id: newLayerId,
           mapId: mapId
         }));
@@ -1619,7 +1777,7 @@ var slice$6 = createSlice({
         sourceLayerId = _action$payload10.sourceLayerId;
       if (draft.byId[layerId]) {
         var _draft$byId$sourceLay;
-        draft.byId[layerId].geojson = (_draft$byId$sourceLay = draft.byId[sourceLayerId]) == null ? void 0 : _draft$byId$sourceLay.geojson;
+        draft.byId[layerId].geojson = (_draft$byId$sourceLay = draft.byId[sourceLayerId]) === null || _draft$byId$sourceLay === void 0 ? void 0 : _draft$byId$sourceLay.geojson;
       }
     },
     layerDelete: function layerDelete(draft, action) {
@@ -1672,7 +1830,7 @@ var slice$6 = createSlice({
           Here we set the layers for the mapId from the action. byId and allIds is updated.
         */
       layers.forEach(function (layer) {
-        draft.byId[layer.id] = createLayer(Object.assign({
+        draft.byId[layer.id] = createLayer(_objectSpread2({
           id: layer.id,
           mapId: mapId
         }, layer));
@@ -1706,7 +1864,7 @@ var slice$6 = createSlice({
       });
       // set over and base layers
       filtererdBaseLayers.forEach(function (layer) {
-        draft.byId[layer.id] = createLayer(Object.assign({
+        draft.byId[layer.id] = createLayer(_objectSpread2({
           id: layer.id,
           layerType: layer.layerType,
           mapId: mapId
@@ -1720,7 +1878,7 @@ var slice$6 = createSlice({
         return;
       }
       if (!draft.byId[layer.id]) {
-        draft.byId[layer.id] = createLayer(Object.assign({
+        draft.byId[layer.id] = createLayer(_objectSpread2({
           id: layer.id,
           layerType: layer.layerType
         }, layer));
@@ -1741,7 +1899,7 @@ var slice$6 = createSlice({
         return;
       }
       if (!draft.availableBaseLayers.byId[layer.id]) {
-        draft.availableBaseLayers.byId[layer.id] = createLayer(Object.assign({
+        draft.availableBaseLayers.byId[layer.id] = createLayer(_objectSpread2({
           id: layer.id,
           layerType: layer.layerType
         }, layer));
@@ -1755,7 +1913,7 @@ var slice$6 = createSlice({
         if (layer.layerType !== LayerType.baseLayer || draft.availableBaseLayers.byId[layer.id] || !layer.mapId) {
           return;
         }
-        draft.availableBaseLayers.byId[layer.id] = createLayer(Object.assign({
+        draft.availableBaseLayers.byId[layer.id] = createLayer(_objectSpread2({
           id: layer.id,
           layerType: layer.layerType
         }, layer));
@@ -1780,7 +1938,7 @@ var slice$6 = createSlice({
         if (layer.layerType !== LayerType.baseLayer || !layer.mapId) {
           return;
         }
-        draft.availableBaseLayers.byId[layer.id] = createLayer(Object.assign({}, layer));
+        draft.availableBaseLayers.byId[layer.id] = createLayer(_objectSpread2({}, layer));
         draft.availableBaseLayers.allIds.push(layer.id);
       });
     },
@@ -1799,7 +1957,7 @@ var slice$6 = createSlice({
         layerStyle = _action$payload16.layerStyle,
         layerDimensions = _action$payload16.layerDimensions;
       if (layerStyle && draft.byId[layerStyle.layerId]) {
-        draft.byId[layerStyle.layerId].style = layerStyle == null ? void 0 : layerStyle.style;
+        draft.byId[layerStyle.layerId].style = layerStyle === null || layerStyle === void 0 ? void 0 : layerStyle.style;
       }
       if (!layerDimensions) {
         return;
@@ -1816,7 +1974,9 @@ var slice$6 = createSlice({
         var _reduxLayer$dimension;
         var layerId = layerToUpdate.id;
         var reduxLayer = draft.byId[layerId];
-        (_reduxLayer$dimension = reduxLayer.dimensions) != null ? _reduxLayer$dimension : reduxLayer.dimensions = [];
+        /* Find the wmLayer */
+        var wmLayer = webmapUtils.getWMLayerById(layerId);
+        (_reduxLayer$dimension = reduxLayer.dimensions) !== null && _reduxLayer$dimension !== void 0 ? _reduxLayer$dimension : reduxLayer.dimensions = [];
         // remove dimensions not in incoming list of dimensions
         reduxLayer.dimensions = reduxLayer.dimensions.filter(function (dimension) {
           return incomingDimensionNames.includes(dimension.name);
@@ -1824,12 +1984,10 @@ var slice$6 = createSlice({
         var reduxDimensions = reduxLayer.dimensions;
         /* Now update or insert the dimension for each layer */
         layerDimensions.dimensions.forEach(function (newLayerDimension) {
-          /* Find the wmLayer */
-          var wmLayer = webmapUtils.getWMLayerById(layerId);
           /* Find the wmDimension */
-          var wmDimension = wmLayer == null ? void 0 : wmLayer.getDimension(newLayerDimension.name);
+          var wmDimension = wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.getDimension(newLayerDimension.name);
           /* This will set the new range of start/stop values for this dimension, making getClosestValue work properly */
-          wmDimension == null || wmDimension.reInitializeValues(newLayerDimension.values);
+          wmDimension === null || wmDimension === void 0 || wmDimension.reInitializeValues(newLayerDimension.values);
           var existingDimension = reduxDimensions.find(function (d) {
             return d.name === newLayerDimension.name;
           });
@@ -1846,9 +2004,24 @@ var slice$6 = createSlice({
             }
           } else if (layerId === layerDimensions.layerId) {
             /* Otherwise add a new one, but only for this layer. */
-            reduxDimensions.push(Object.assign({}, newLayerDimension));
+            reduxDimensions.push(_objectSpread2({}, newLayerDimension));
           }
         });
+        // Ensure that the time range is correctly set based on the current reference time value
+        var timeDimension = layerDimensions.dimensions.find(function (layerDim) {
+          return layerDim.name === 'time';
+        });
+        var refTimeDimension = layerDimensions.dimensions.find(function (layerDim) {
+          return layerDim.name === 'reference_time';
+        });
+        if (timeDimension && refTimeDimension && wmLayer) {
+          /* Find the wmDimension */
+          var wmTimeDimension = wmLayer.getDimension('time');
+          var wmRefTimeDimension = wmLayer.getDimension('reference_time');
+          if (wmTimeDimension && wmRefTimeDimension) {
+            wmTimeDimension === null || wmTimeDimension === void 0 || wmTimeDimension.setTimeValuesForReferenceTime(refTimeDimension.currentValue, wmRefTimeDimension);
+          }
+        }
       });
     },
     // feature layer actions
@@ -1860,7 +2033,7 @@ var slice$6 = createSlice({
       if (!layerId || layerIdsWithoutNewId.length === draft.allIds.length) {
         return;
       }
-      var newLayerIds = [layerId].concat(layerIdsWithoutNewId);
+      var newLayerIds = [layerId].concat(_toConsumableArray(layerIdsWithoutNewId));
       draft.allIds = newLayerIds;
     },
     // feature layer actions
@@ -1907,7 +2080,7 @@ var slice$6 = createSlice({
           return;
         }
         var bounds = intersectionBoundsLayer.geojson;
-        var geoJSONProperties = intersectionLayer.defaultGeoJSONProperties || ((_currentLayer$geojson = currentLayer.geojson) == null || (_currentLayer$geojson = _currentLayer$geojson.features[0]) == null ? void 0 : _currentLayer$geojson.properties);
+        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);
       }
     },
@@ -1961,7 +2134,7 @@ var slice$6 = createSlice({
           var currentGeoJSON = draft.byId[layerId].geojson;
           var lastFeatureIndex = currentGeoJSON !== undefined && getLastEmptyFeatureIndex(currentGeoJSON);
           if (currentGeoJSON && lastFeatureIndex !== undefined) {
-            var newGeoJSON = Object.assign({}, currentGeoJSON, {
+            var newGeoJSON = _objectSpread2(_objectSpread2({}, currentGeoJSON), {}, {
               features: currentGeoJSON.features.filter(function (_feature, index) {
                 return index !== lastFeatureIndex;
               })
@@ -2000,7 +2173,7 @@ var slice$6 = createSlice({
         });
       }
       /* And then append the targets form the action */
-      targets.push.apply(targets, targetsFromAction);
+      targets.push.apply(targets, _toConsumableArray(targetsFromAction));
       targets.forEach(function (payload) {
         var targetId = payload.targetId,
           value = payload.value;
@@ -2049,28 +2222,11 @@ var slice$6 = createSlice({
 var layerReducer = slice$6.reducer,
   layerActions = slice$6.actions;
 
-/* *
- * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
 var moveToTop = function moveToTop(list, element) {
   var filteredList = list.filter(function (item) {
     return item !== element;
   });
-  var newOrder = [element].concat(filteredList);
+  var newOrder = [element].concat(_toConsumableArray(filteredList));
   return newOrder;
 };
 var createUIDialogElement = function createUIDialogElement(_ref) {
@@ -2209,14 +2365,19 @@ var createLayersWithIds = function createLayersWithIds(state, layers) {
     return layers;
   }
   return produce(layers, function (draft) {
-    for (var _iterator = _createForOfIteratorHelperLoose(draft), _step; !(_step = _iterator()).done;) {
-      var layer = _step.value;
-      if (!layer.id) {
-        layer.id = webmapUtils.generateLayerId();
-      } else if (checkIfMapLayerIdIsAlreadyTaken(state, layer.id)) {
-        console.warn("Warning: Layer id " + layer.id + " was already taken: Generating new one.");
-        layer.id = webmapUtils.generateLayerId();
+    var _iterator = _createForOfIteratorHelper(draft),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var layer = _step.value;
+        if (!layer.id) {
+          console.warn("Warning: Layer id was not provided");
+        }
       }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
     }
   });
 };
@@ -2569,7 +2730,7 @@ var slice$4 = createSlice({
         return;
       }
       if (checkIfMapLayerIdIsAlreadyTaken(draft, layerId)) {
-        console.warn("Warning: Layer id " + layerId + " was already taken");
+        console.warn("Warning: Layer id ".concat(layerId, " was already taken"));
         return;
       }
       if (!draft.byId[mapId].mapLayers.length) {
@@ -2590,7 +2751,7 @@ var slice$4 = createSlice({
         return;
       }
       if (checkIfMapLayerIdIsAlreadyTaken(draft, newLayerId)) {
-        console.warn("Warning: Layer id " + newLayerId + " was already taken");
+        console.warn("Warning: Layer id ".concat(newLayerId, " was already taken"));
         return;
       }
       draft.byId[mapId].mapLayers.unshift(newLayerId);
@@ -2603,7 +2764,7 @@ var slice$4 = createSlice({
         return;
       }
       if (checkIfMapLayerIdIsAlreadyTaken(draft, layerId)) {
-        console.warn("Warning: Layer id " + layerId + " was already taken");
+        console.warn("Warning: Layer id ".concat(layerId, " was already taken"));
         return;
       }
       if (layer.layerType === LayerType.baseLayer) {
@@ -2620,7 +2781,8 @@ var slice$4 = createSlice({
         var id = _ref.id;
         return id;
       });
-      var activeLayerId = layerIds[0];
+      var _layerIds = _slicedToArray(layerIds, 1),
+        activeLayerId = _layerIds[0];
       if (draft.byId[mapId]) {
         draft.byId[mapId].mapLayers = layerIds;
         draft.byId[mapId].autoUpdateLayerId = activeLayerId;
@@ -2701,7 +2863,7 @@ var slice$4 = createSlice({
         map.autoTimeStepLayerId = undefined;
         return;
       }
-      var _map$mapLayers = map.mapLayers,
+      var _map$mapLayers = _slicedToArray(map.mapLayers, 1),
         activeLayerId = _map$mapLayers[0];
       if (map.autoUpdateLayerId === layerId) {
         map.autoUpdateLayerId = activeLayerId;
@@ -2743,7 +2905,7 @@ var slice$4 = createSlice({
         });
       }
       /* And then append the targets form the action */
-      targets.push.apply(targets, targetsFromAction);
+      targets.push.apply(targets, _toConsumableArray(targetsFromAction));
       targets.forEach(function (target) {
         var targetId = target.targetId,
           value = target.value;
@@ -2770,7 +2932,7 @@ var slice$4 = createSlice({
         });
       }
       /* And then append the targets form the action */
-      targets.push.apply(targets, targetsFromAction);
+      targets.push.apply(targets, _toConsumableArray(targetsFromAction));
       targets.forEach(function (payload) {
         var targetId = payload.targetId,
           bbox = payload.bbox,
@@ -2846,14 +3008,14 @@ var slice$4 = createSlice({
     });
   }
 });
-var mapActions = Object.assign({}, slice$4.actions, {
+var mapActions = _objectSpread2(_objectSpread2({}, slice$4.actions), {}, {
   setMapPreset: setMapPreset,
   mapChangeDimension: mapChangeDimension
 });
 var mapReducer = slice$4.reducer;
 
 var layerStore = function layerStore(store) {
-  return store == null ? void 0 : store.layers;
+  return store === null || store === void 0 ? void 0 : store.layers;
 };
 /**
  * Gets a layer from the layers part of the store by its Id
@@ -2904,7 +3066,7 @@ var getLayerByIdWithoutTimeDimension = createSelector([layerStore, function (lay
  */
 var getLayersById = createSelector(layerStore, function (store) {
   var _store$byId;
-  return (_store$byId = store == null ? void 0 : store.byId) != null ? _store$byId : null;
+  return (_store$byId = store === null || store === void 0 ? void 0 : store.byId) !== null && _store$byId !== void 0 ? _store$byId : null;
 }, selectorMemoizationOptions);
 /**
  * Retrieves all layerIds
@@ -3001,7 +3163,7 @@ var getFeatureLayers = createSelector(getAllLayers, function (layers) {
  */
 var getLayerDimensions = createSelector(getLayerById, function (layer) {
   var _layer$dimensions;
-  return (_layer$dimensions = layer == null ? void 0 : layer.dimensions) != null ? _layer$dimensions : [];
+  return (_layer$dimensions = layer === null || layer === void 0 ? void 0 : layer.dimensions) !== null && _layer$dimensions !== void 0 ? _layer$dimensions : [];
 }, selectorMemoizationOptions);
 /**
  * Gets dimensions of the passed layer, excluding the time dimension
@@ -3023,7 +3185,7 @@ var getLayerNonTimeDimensions = createSelector(getLayerDimensions, function (dim
  * @returns {object} returnType: object - object of layer time dimension
  */
 var getLayerTimeDimension = createSelector(getLayerDimensions, function (dimensions) {
-  return dimensions == null ? void 0 : dimensions.find(function (dimension) {
+  return dimensions === null || dimensions === void 0 ? void 0 : dimensions.find(function (dimension) {
     return dimension.name === 'time';
   });
 }, selectorMemoizationOptions);
@@ -3039,7 +3201,7 @@ var getLayerHasTimeDimension = createSelector(getLayerTimeDimension, function (t
   return !!timeDimension;
 }, selectorMemoizationOptions);
 var getLayerCurrentTime = createSelector(getLayerTimeDimension, function (dimension) {
-  return dimension == null ? void 0 : dimension.currentValue;
+  return dimension === null || dimension === void 0 ? void 0 : dimension.currentValue;
 }, selectorMemoizationOptions);
 /**
  * Gets specified dimension of the passed layer
@@ -3053,7 +3215,7 @@ var getLayerCurrentTime = createSelector(getLayerTimeDimension, function (dimens
 var getLayerDimension = createSelector(getLayerDimensions, function (_store, _layerId, dimensionName) {
   return dimensionName;
 }, function (dimensions, dimensionName) {
-  return dimensions == null ? void 0 : dimensions.find(function (dimension) {
+  return dimensions === null || dimensions === void 0 ? void 0 : dimensions.find(function (dimension) {
     return dimension.name === dimensionName;
   });
 }, selectorMemoizationOptions);
@@ -3077,7 +3239,7 @@ var getLayerOpacity = createSelector(getLayerById, function (layer) {
  * @returns {boolean} returnType: boolean -  true if enabled, false if disabled
  */
 var getLayerEnabled = createSelector(getLayerById, function (layer) {
-  return Boolean(layer == null ? void 0 : layer.enabled);
+  return Boolean(layer === null || layer === void 0 ? void 0 : layer.enabled);
 }, selectorMemoizationOptions);
 /**
  * Gets layer name
@@ -3089,7 +3251,7 @@ var getLayerEnabled = createSelector(getLayerById, function (layer) {
  */
 var getLayerName = createSelector(getLayerById, function (layer) {
   var _layer$name;
-  return (_layer$name = layer == null ? void 0 : layer.name) != null ? _layer$name : '';
+  return (_layer$name = layer === null || layer === void 0 ? void 0 : layer.name) !== null && _layer$name !== void 0 ? _layer$name : '';
 }, selectorMemoizationOptions);
 /**
  * Gets layer service
@@ -3101,7 +3263,7 @@ var getLayerName = createSelector(getLayerById, function (layer) {
  */
 var getLayerService = createSelector(getLayerById, function (layer) {
   var _layer$service;
-  return (_layer$service = layer == null ? void 0 : layer.service) != null ? _layer$service : '';
+  return (_layer$service = layer === null || layer === void 0 ? void 0 : layer.service) !== null && _layer$service !== void 0 ? _layer$service : '';
 }, selectorMemoizationOptions);
 /**
  * Gets selected style of the passed layer
@@ -3156,7 +3318,7 @@ var getAvailableBaseLayersForMap = createSelector(layerStore, function (_store,
  * @returns {number} selectedFeatureIndex: the index of the selected geojson feature
  */
 var getSelectedFeatureIndex = createSelector(getLayerById, function (layer) {
-  return layer == null ? void 0 : layer.selectedFeatureIndex;
+  return layer === null || layer === void 0 ? void 0 : layer.selectedFeatureIndex;
 }, selectorMemoizationOptions);
 /**
  * Returns the layer is in edit mode
@@ -3167,20 +3329,18 @@ var getSelectedFeatureIndex = createSelector(getLayerById, function (layer) {
  * @returns {number} isLayerInEditMode: boolean - isInEditMode
  */
 var getIsLayerInEditMode = createSelector(getLayerById, function (layer) {
-  return (layer == null ? void 0 : layer.isInEditMode) || false;
+  return (layer === null || layer === void 0 ? void 0 : layer.isInEditMode) || false;
 }, selectorMemoizationOptions);
 var getFeatureLayerGeoJSON = createSelector(getLayerById, function (layer) {
-  return (layer == null ? void 0 : layer.geojson) || undefined;
+  return (layer === null || layer === void 0 ? void 0 : layer.geojson) || undefined;
 }, selectorMemoizationOptions);
 var getHasFeatureLayerGeoJSON = createSelector(getFeatureLayerGeoJSON, function (geojson) {
   return !!geojson;
 }, selectorMemoizationOptions);
-var getFeatureLayerGeoJSONProperties = createSelector(getLayerById, getSelectedFeatureIndex, function (layer, selecteFeatureIndex) {
+var getFeatureLayerGeoJSONProperties = createSelector(getLayerById, getSelectedFeatureIndex, function (layer) {
   var _layer$geojson;
-  if (selecteFeatureIndex === void 0) {
-    selecteFeatureIndex = 0;
-  }
-  return (layer == null || (_layer$geojson = layer.geojson) == null || (_layer$geojson = _layer$geojson.features[selecteFeatureIndex]) == null ? void 0 : _layer$geojson.properties) || {};
+  var selecteFeatureIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return (layer === null || layer === void 0 || (_layer$geojson = layer.geojson) === null || _layer$geojson === void 0 || (_layer$geojson = _layer$geojson.features[selecteFeatureIndex]) === null || _layer$geojson === void 0 ? void 0 : _layer$geojson.properties) || {};
 }, selectorMemoizationOptions);
 /**
  * Gets layerIds that contain passed dimension
@@ -3195,7 +3355,7 @@ var getDimensionLayerIds = createSelector(getLayersIds, getLayersById, function
 }, function (layerIds, layers, dimensionName) {
   return layerIds.reduce(function (list, layerId) {
     var layer = layers[layerId];
-    var dimensions = layer != null && layer.dimensions ? layer.dimensions : [];
+    var dimensions = layer !== null && layer !== void 0 && layer.dimensions ? layer.dimensions : [];
     if (dimensions.find(function (dimension) {
       return dimension.name === dimensionName;
     })) {
@@ -3205,13 +3365,13 @@ var getDimensionLayerIds = createSelector(getLayersIds, getLayersById, function
   }, []);
 }, selectorMemoizationOptions);
 var getAcceptanceTimeInMinutes = createSelector(getLayerById, function (layer) {
-  return layer == null ? void 0 : layer.acceptanceTimeInMinutes;
+  return layer === null || layer === void 0 ? void 0 : layer.acceptanceTimeInMinutes;
 }, selectorMemoizationOptions);
 var getLayerIsInsideAcceptanceTime = createSelector(getAcceptanceTimeInMinutes, getLayerCurrentTime, function (state, _layerId, mapId) {
   var _state$webmap;
-  return (_state$webmap = state.webmap) == null || (_state$webmap = _state$webmap.byId[mapId]) == null || (_state$webmap = _state$webmap.dimensions) == null || (_state$webmap = _state$webmap.find(function (dimension) {
+  return (_state$webmap = state.webmap) === null || _state$webmap === void 0 || (_state$webmap = _state$webmap.byId[mapId]) === null || _state$webmap === void 0 || (_state$webmap = _state$webmap.dimensions) === null || _state$webmap === void 0 || (_state$webmap = _state$webmap.find(function (dimension) {
     return dimension.name === 'time';
-  })) == null ? void 0 : _state$webmap.currentValue;
+  })) === null || _state$webmap === void 0 ? void 0 : _state$webmap.currentValue;
 }, function (acceptanceTimeInMinutes, layerCurrentTime, mapCurrentTime) {
   if (!mapCurrentTime || !layerCurrentTime) {
     return 'equal';
@@ -3231,7 +3391,7 @@ var getLayerIsInsideAcceptanceTime = createSelector(getAcceptanceTimeInMinutes,
   return 'inside';
 }, selectorMemoizationOptions);
 var getUseLatestReferenceTime = createSelector(getLayerById, function (layer) {
-  return Boolean(layer == null ? void 0 : layer.useLatestReferenceTime);
+  return Boolean(layer === null || layer === void 0 ? void 0 : layer.useLatestReferenceTime);
 }, selectorMemoizationOptions);
 /**
  * Returns the timestep for this layerId in seconds, or undefined if it has no time dimension or timeinterval.
@@ -3248,23 +3408,31 @@ var getTimeStepForLayerId = createSelector(getLayerTimeDimension, function (time
     return isEmpty(timeInterval) ? undefined : getTimeStepFromDataInterval(timeInterval);
   }
   var iso8601Intervals = parseTimeDimToISO8601Interval(values);
-  for (var _iterator = _createForOfIteratorHelperLoose(iso8601Intervals), _step; !(_step = _iterator()).done;) {
-    var _step$value = _step.value,
-      startTime = _step$value.startTime,
-      endTime = _step$value.endTime,
-      duration = _step$value.duration;
-    if (dateUtils.isWithinInterval(currentValue, {
-      start: startTime,
-      end: endTime
-    })) {
-      var parsedInterval = parseISO8601IntervalToDateInterval(duration);
-      return getTimeStepFromDataInterval(parsedInterval);
+  var _iterator = _createForOfIteratorHelper(iso8601Intervals),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = _step.value,
+        startTime = _step$value.startTime,
+        endTime = _step$value.endTime,
+        duration = _step$value.duration;
+      if (dateUtils.isWithinInterval(currentValue, {
+        start: startTime,
+        end: endTime
+      })) {
+        var parsedInterval = parseISO8601IntervalToDateInterval(duration);
+        return getTimeStepFromDataInterval(parsedInterval);
+      }
     }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
   }
   return getTimeStepFromDataInterval(timeInterval);
 }, selectorMemoizationOptions);
 var getActiveLayerInfo = createSelector(layerStore, function (store) {
-  return store == null ? void 0 : store.activeLayerInfo;
+  return store === null || store === void 0 ? void 0 : store.activeLayerInfo;
 });
 
 var selectors$6 = /*#__PURE__*/Object.freeze({
@@ -3382,7 +3550,7 @@ var getDialogOrder = createSelector(function (store, dialogType) {
     var order = store.ui.order;
     var visibleOrder = order.filter(function (orderedDialogType) {
       var _store$ui$dialogs$ord;
-      return (_store$ui$dialogs$ord = store.ui.dialogs[orderedDialogType]) == null ? void 0 : _store$ui$dialogs$ord.isOpen;
+      return (_store$ui$dialogs$ord = store.ui.dialogs[orderedDialogType]) === null || _store$ui$dialogs$ord === void 0 ? void 0 : _store$ui$dialogs$ord.isOpen;
     });
     if (!visibleOrder.includes(dialogType)) {
       return 0;
@@ -3423,7 +3591,7 @@ var getDialogSource = createSelector(getDialogDetailsByType, function (details)
  * @returns {string} active window id
  */
 var getActiveWindowId = createSelector(getUiStore, function (store) {
-  return store == null ? void 0 : store.activeWindowId;
+  return store === null || store === void 0 ? void 0 : store.activeWindowId;
 }, selectorMemoizationOptions);
 /**
  * Gets the panelId of which the dialog is opened from
@@ -3434,9 +3602,9 @@ var getActiveWindowId = createSelector(getUiStore, function (store) {
  */
 var getSourcePanelId = createSelector(function (store, dialogType) {
   var _store$ui;
-  return (_store$ui = store.ui) == null ? void 0 : _store$ui.dialogs[dialogType];
+  return (_store$ui = store.ui) === null || _store$ui === void 0 ? void 0 : _store$ui.dialogs[dialogType];
 }, function (dialog) {
-  return (dialog == null ? void 0 : dialog.sourcePanelId) || '';
+  return (dialog === null || dialog === void 0 ? void 0 : dialog.sourcePanelId) || '';
 }, selectorMemoizationOptions);
 /**
  * Gets if this is the active window
@@ -3448,7 +3616,7 @@ var getSourcePanelId = createSelector(function (store, dialogType) {
 var getIsActiveWindowId = createSelector(getUiStore, function (_store, viewId) {
   return viewId;
 }, function (store, viewId) {
-  return viewId === (store == null ? void 0 : store.activeWindowId);
+  return viewId === (store === null || store === void 0 ? void 0 : store.activeWindowId);
 }, selectorMemoizationOptions);
 var getDialogIsLoading = createSelector(getDialogDetailsByType, function (details) {
   return details && details.isLoading || false;
@@ -3460,11 +3628,11 @@ var getUiDialogsByActiveMapId = function getUiDialogsByActiveMapId(store, mapId)
   if (store && store.ui && store.ui.order) {
     var foundDialogsIds = store.ui.order.filter(function (id) {
       var _store$ui2;
-      return ((_store$ui2 = store.ui) == null || (_store$ui2 = _store$ui2.dialogs[id]) == null ? void 0 : _store$ui2.activeMapId) === mapId;
+      return ((_store$ui2 = store.ui) === null || _store$ui2 === void 0 || (_store$ui2 = _store$ui2.dialogs[id]) === null || _store$ui2 === void 0 ? void 0 : _store$ui2.activeMapId) === mapId;
     });
     var foundDialogs = foundDialogsIds.reduce(function (list, id) {
       var _store$ui3;
-      var dialog = (_store$ui3 = store.ui) == null ? void 0 : _store$ui3.dialogs[id];
+      var dialog = (_store$ui3 = store.ui) === null || _store$ui3 === void 0 ? void 0 : _store$ui3.dialogs[id];
       if (dialog) {
         return list.concat(dialog);
       }
@@ -3552,10 +3720,8 @@ var types$2 = /*#__PURE__*/Object.freeze({
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
-var useSetupDialog = function useSetupDialog(dialogType, source) {
-  if (source === void 0) {
-    source = 'app';
-  }
+var useSetupDialog = function useSetupDialog(dialogType) {
+  var source = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
   var dispatch = useDispatch();
   var onCloseDialog = useCallback(function () {
     dispatch(uiActions.setToggleOpenDialog({
@@ -3690,23 +3856,6 @@ var removeInPlace = function removeInPlace(inDraftArray, condition) {
   inDraftArray.length = j;
 };
 
-/* *
- * 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
 var initialState$2 = {
   sources: {
     byId: {},
@@ -3765,7 +3914,7 @@ var slice$3 = createSlice({
       var _action$payload2 = action.payload,
         panelId = _action$payload2.panelId,
         data = _action$payload2.data;
-      draft.linkedState.sharedData[panelId] = Object.assign({}, draft.linkedState.sharedData[panelId], data);
+      draft.linkedState.sharedData[panelId] = _objectSpread2(_objectSpread2({}, draft.linkedState.sharedData[panelId]), data);
     },
     deleteSharedData: function deleteSharedData(draft, action) {
       var panelId = action.payload.panelId;
@@ -3816,7 +3965,7 @@ var slice$3 = createSlice({
         linked = _action$payload4.linked;
       var synchronizationGroup = draft.groups.byId[groupId];
       if (!synchronizationGroup) {
-        console.warn("SYNCGROUPS_ADD_TARGET: Group " + groupId + " does not exist.");
+        console.warn("SYNCGROUPS_ADD_TARGET: Group ".concat(groupId, " does not exist."));
         return;
       }
       if (!targetId) {
@@ -3826,7 +3975,7 @@ var slice$3 = createSlice({
       if (synchronizationGroup.targets.allIds.includes(targetId)) {
         return;
       }
-      var isSourceLinked = (_synchronizationGroup = synchronizationGroup.targets.byId[targetId]) == null ? void 0 : _synchronizationGroup.linked;
+      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
@@ -3956,10 +4105,10 @@ var setBboxOrTimeSync = function setBboxOrTimeSync(draft, action) {
     });
   }
 };
-var _slice$actions = slice$3.actions;
-  _slice$actions.syncGroupAddGroup;
+var _slice$actions = slice$3.actions,
+  syncGroupAddGroup = _slice$actions.syncGroupAddGroup;
   _slice$actions.syncGroupAddSource;
-  _slice$actions.syncGroupAddTarget;
+  var syncGroupAddTarget = _slice$actions.syncGroupAddTarget;
   _slice$actions.syncGroupClear;
   _slice$actions.syncGroupLinkTarget;
   _slice$actions.syncGroupRemoveGroup;
@@ -3969,23 +4118,6 @@ var _slice$actions = slice$3.actions;
 var syncGroupsReducer = slice$3.reducer,
   syncGroupsActions = slice$3.actions;
 
-/* *
- * 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
 var syncGroupStore = function syncGroupStore(store) {
   return store.syncGroups || null;
 };
@@ -4025,7 +4157,7 @@ var getTargets = createSelector([syncGroupStore, function (syncGroupStore, paylo
           /* Remember that we have already added this target in the action payloads, prevents adding it twice */
           targetsInActionPayload[targetId] = true;
           /* Compose the payload */
-          var newPayload = Object.assign({
+          var newPayload = _objectSpread2({
             targetId: targetId
           }, payload);
           actionPayloads.push(newPayload);
@@ -4045,7 +4177,7 @@ var getTargets = createSelector([syncGroupStore, function (syncGroupStore, paylo
               /* Remember that we have already added this target in the action payloads, prevents adding it twice */
               targetsInActionPayload[targetId] = true;
               /* Compose the payload */
-              var newPayload = Object.assign({
+              var newPayload = _objectSpread2({
                 targetId: targetId
               }, payload);
               actionPayloads.push(newPayload);
@@ -4082,7 +4214,7 @@ var getSourceId = createSelector([syncGroupStore, function (syncGroupStore, sour
   return typeof sourceId === 'string' ? sourceId : sourceId.sourceId;
 }, selectorMemoizationOptions);
 var getAllTargetGroupsForSource = createSelector([syncGroupStore, getSourceId], function (syncGroupStore, sourceId) {
-  if (syncGroupStore != null && syncGroupStore.groups) {
+  if (syncGroupStore !== null && syncGroupStore !== void 0 && syncGroupStore.groups) {
     return syncGroupStore.groups.allIds.reduce(function (linkedSyncGroupIds, groupId) {
       var syncronizationGroup = syncGroupStore.groups.byId[groupId];
       var source = syncronizationGroup.targets.byId[sourceId];
@@ -4103,7 +4235,7 @@ var isTimeScrollingEnabled = createSelector(syncGroupStore, function (store) {
 }, selectorMemoizationOptions);
 var getSyncedMapIdsForTimeslider = createSelector(syncGroupStore, function (store) {
   var _store$viewState$time, _store$viewState$time2;
-  return (_store$viewState$time = (_store$viewState$time2 = store.viewState.timeslider.groups[0]) == null ? void 0 : _store$viewState$time2.selected) != null ? _store$viewState$time : [];
+  return (_store$viewState$time = (_store$viewState$time2 = store.viewState.timeslider.groups[0]) === null || _store$viewState$time2 === void 0 ? void 0 : _store$viewState$time2.selected) !== null && _store$viewState$time !== void 0 ? _store$viewState$time : [];
 }, selectorMemoizationOptions);
 var getSyncGroupTargets = createSelector(syncGroupStore, function (store) {
   if (!store || !store.groups) {
@@ -4194,7 +4326,7 @@ var createSyncGroupViewState = function createSyncGroupViewState(groups, sources
       var _groupTypes$find;
       var groupType = (_groupTypes$find = groupTypes.find(function (object) {
         return object.syncType === groups.byId[id].type;
-      })) == null ? void 0 : _groupTypes$find.groupType;
+      })) === null || _groupTypes$find === void 0 ? void 0 : _groupTypes$find.groupType;
       if (groupType) {
         draft[groupType].groups.push({
           id: id,
@@ -4395,7 +4527,7 @@ var getTime = createSelector(getSyncSourceBySourceId, function (store) {
   return store && store.payloadByType && store.payloadByType[SYNCGROUPS_TYPE_SETTIME] ? store.payloadByType[SYNCGROUPS_TYPE_SETTIME].value : null;
 }, selectorMemoizationOptions);
 var selectLinkedState = createSelector(synchronizationGroupStore, function (syncState) {
-  return (syncState == null ? void 0 : syncState.linkedState) || {
+  return (syncState === null || syncState === void 0 ? void 0 : syncState.linkedState) || {
     links: {},
     sharedData: {}
   };
@@ -4427,7 +4559,7 @@ var selectLinkedPanelId = createSelector([selectLinkedState, function (_, mapVie
   // Find the panelId where mapView(s) is linked
   var panelId = Object.keys(linkedState.links).find(function (panelId) {
     var _linkedState$links$pa;
-    return (_linkedState$links$pa = linkedState.links[panelId]) == null ? void 0 : _linkedState$links$pa.includes(mapViewId);
+    return (_linkedState$links$pa = linkedState.links[panelId]) === null || _linkedState$links$pa === void 0 ? void 0 : _linkedState$links$pa.includes(mapViewId);
   });
   return panelId;
 });
@@ -4444,7 +4576,7 @@ var selectLinkedFeatures = createSelector([function (linkedState) {
 }, getLinkedFeatureProviders], function (linkedState, featureProviders) {
   var features = featureProviders.flatMap(function (providerId) {
     var _linkedState$sharedDa;
-    return ((_linkedState$sharedDa = linkedState.sharedData[providerId]) == null ? void 0 : _linkedState$sharedDa.features) || [];
+    return ((_linkedState$sharedDa = linkedState.sharedData[providerId]) === null || _linkedState$sharedDa === void 0 ? void 0 : _linkedState$sharedDa.features) || [];
   }).filter(function (f) {
     return f !== undefined;
   });
@@ -4455,7 +4587,7 @@ var selectLinkedFormFeatures = createSelector([function (linkedState) {
 }, getLinkedFeatureProviders], function (linkedState, featureProviders) {
   var features = featureProviders.flatMap(function (providerId) {
     var _linkedState$sharedDa2;
-    return ((_linkedState$sharedDa2 = linkedState.sharedData[providerId]) == null ? void 0 : _linkedState$sharedDa2.formFeatures) || [];
+    return ((_linkedState$sharedDa2 = linkedState.sharedData[providerId]) === null || _linkedState$sharedDa2 === void 0 ? void 0 : _linkedState$sharedDa2.formFeatures) || [];
   }).filter(function (f) {
     return f !== undefined;
   });
@@ -4465,7 +4597,7 @@ var getSelectedFeature = createSelector([
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function (state, mapId) {
   var _state$linkedState;
-  var sharedData = (_state$linkedState = state.linkedState) == null ? void 0 : _state$linkedState.sharedData[mapId];
+  var sharedData = (_state$linkedState = state.linkedState) === null || _state$linkedState === void 0 ? void 0 : _state$linkedState.sharedData[mapId];
   var _ref = sharedData || {},
     _ref$features = _ref.features,
     features = _ref$features === void 0 ? [] : _ref$features,
@@ -4478,7 +4610,7 @@ function (state, mapId) {
   var _features$;
   var features = _ref2.features,
     selectedFeatureId = _ref2.selectedFeatureId;
-  var selectedFeature = (_features$ = features[0]) == null ? void 0 : _features$.geoJSON.features.find(function (feature) {
+  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') {
@@ -4488,9 +4620,9 @@ function (state, mapId) {
       lat: coordinates[1],
       lon: coordinates[0],
       id: selectedFeature.id,
-      serviceId: (_selectedFeature$prop = selectedFeature.properties) == null ? void 0 : _selectedFeature$prop.serviceId,
-      collectionId: (_selectedFeature$prop2 = selectedFeature.properties) == null ? void 0 : _selectedFeature$prop2.collectionId,
-      name: (_selectedFeature$prop3 = selectedFeature.properties) == null ? void 0 : _selectedFeature$prop3.name
+      serviceId: (_selectedFeature$prop = selectedFeature.properties) === null || _selectedFeature$prop === void 0 ? void 0 : _selectedFeature$prop.serviceId,
+      collectionId: (_selectedFeature$prop2 = selectedFeature.properties) === null || _selectedFeature$prop2 === void 0 ? void 0 : _selectedFeature$prop2.collectionId,
+      name: (_selectedFeature$prop3 = selectedFeature.properties) === null || _selectedFeature$prop3 === void 0 ? void 0 : _selectedFeature$prop3.name
     };
   }
   if (selectedFeature) {
@@ -4500,9 +4632,9 @@ function (state, mapId) {
       lat: center.geometry.coordinates[1],
       lon: center.geometry.coordinates[0],
       id: selectedFeature.id,
-      serviceId: (_selectedFeature$prop4 = selectedFeature.properties) == null ? void 0 : _selectedFeature$prop4.serviceId,
-      collectionId: (_selectedFeature$prop5 = selectedFeature.properties) == null ? void 0 : _selectedFeature$prop5.collectionId,
-      name: (_selectedFeature$prop6 = selectedFeature.properties) == null ? void 0 : _selectedFeature$prop6.name
+      serviceId: (_selectedFeature$prop4 = selectedFeature.properties) === null || _selectedFeature$prop4 === void 0 ? void 0 : _selectedFeature$prop4.serviceId,
+      collectionId: (_selectedFeature$prop5 = selectedFeature.properties) === null || _selectedFeature$prop5 === void 0 ? void 0 : _selectedFeature$prop5.collectionId,
+      name: (_selectedFeature$prop6 = selectedFeature.properties) === null || _selectedFeature$prop6 === void 0 ? void 0 : _selectedFeature$prop6.name
     };
   }
   return null;
@@ -4522,23 +4654,6 @@ var selectors$3 = /*#__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 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2024 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
 var useUpdateSharedData = function useUpdateSharedData(data, panelId) {
   var sharedData = useSelector(function (state) {
     return selectSharedData(state, panelId);
@@ -4548,8 +4663,8 @@ var useUpdateSharedData = function useUpdateSharedData(data, panelId) {
   });
   var dispatch = useDispatch();
   useEffect(function () {
-    var diff = Object.assign({}, sharedData, data);
-    if (panelId && (linkedMaps == null ? void 0 : linkedMaps.length) > 0 && !isEqual(diff, sharedData)) {
+    var diff = _objectSpread2(_objectSpread2({}, sharedData), data);
+    if (panelId && (linkedMaps === null || linkedMaps === void 0 ? void 0 : linkedMaps.length) > 0 && !isEqual(diff, sharedData)) {
       dispatch(syncGroupsActions.addSharedData({
         panelId: panelId,
         data: data
@@ -4668,7 +4783,7 @@ var slice$2 = createSlice({
       // When one EDR is loading with a known id (panelId), do not set the any ANY_EDR_SERVICE as the panelId is known.
       if (isEDRLoading && id === ANY_EDR_SERVICE && draft.ids.some(function (id) {
         var _draft$entities$id;
-        return (_draft$entities$id = draft.entities[id]) == null ? void 0 : _draft$entities$id.isEDRLoading;
+        return (_draft$entities$id = draft.entities[id]) === null || _draft$entities$id === void 0 ? void 0 : _draft$entities$id.isEDRLoading;
       })) {
         draft.entities[id].isEDRLoading = false;
       } else {
@@ -4699,20 +4814,20 @@ var loadingIndicatorActions = slice$2.actions,
  * */
 var _loadingIndicatorAdap = loadingIndicatorAdapter.getSelectors(function (state) {
     var _state$loadingIndicat;
-    return (_state$loadingIndicat = state == null ? void 0 : state.loadingIndicator) != null ? _state$loadingIndicat : {
+    return (_state$loadingIndicat = state === null || state === void 0 ? void 0 : state.loadingIndicator) !== null && _state$loadingIndicat !== void 0 ? _state$loadingIndicat : {
       entities: {},
       ids: []
     };
   }),
   selectLoadingIndicatorById = _loadingIndicatorAdap.selectById;
 var isGetMapLoading = createSelector(selectLoadingIndicatorById, function (loadingIndicator) {
-  return (loadingIndicator == null ? void 0 : loadingIndicator.isGetMapLoading) || false;
+  return (loadingIndicator === null || loadingIndicator === void 0 ? void 0 : loadingIndicator.isGetMapLoading) || false;
 }, selectorMemoizationOptions);
 var isGetCapabilitiesLoading = createSelector(selectLoadingIndicatorById, function (loadingIndicator) {
-  return (loadingIndicator == null ? void 0 : loadingIndicator.isGetCapabilitiesLoading) || false;
+  return (loadingIndicator === null || loadingIndicator === void 0 ? void 0 : loadingIndicator.isGetCapabilitiesLoading) || false;
 }, selectorMemoizationOptions);
 var isAnyEdrTypeLoading = function isAnyEdrTypeLoading(loadingIndicator) {
-  return (loadingIndicator == null ? void 0 : loadingIndicator.isEDRLoading) || false;
+  return (loadingIndicator === null || loadingIndicator === void 0 ? void 0 : loadingIndicator.isEDRLoading) || false;
 };
 var isEDRLoading = createSelector(selectLoadingIndicatorById, isAnyEdrTypeLoading, selectorMemoizationOptions);
 var isAnyEDRLoading = createSelector([function (store) {
@@ -4731,24 +4846,7 @@ var selectors$2 = /*#__PURE__*/Object.freeze({
   selectLoadingIndicatorById: selectLoadingIndicatorById
 });
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var genericActions = Object.assign({}, syncGroupsActions, {
+var genericActions = _objectSpread2(_objectSpread2({}, syncGroupsActions), {}, {
   initialSyncState: initialState$2,
   setTime: setTime,
   setBbox: setBbox
@@ -4824,7 +4922,7 @@ var getIsMapPresent = createSelector(getMapById, function (map) {
  */
 var getLayerIds = createSelector(getMapById, function (map) {
   var _map$mapLayers;
-  return (_map$mapLayers = map == null ? void 0 : map.mapLayers) != null ? _map$mapLayers : [];
+  return (_map$mapLayers = map === null || map === void 0 ? void 0 : map.mapLayers) !== null && _map$mapLayers !== void 0 ? _map$mapLayers : [];
 }, selectorMemoizationOptions);
 /**
  * Gets all layer states for a map
@@ -4836,7 +4934,7 @@ var getLayerIds = createSelector(getMapById, function (map) {
  */
 var getMapLayers = createSelector(getLayerIds, getLayersById, function (layerIdsInMap, allLayers) {
   var layersWithUndefined = layerIdsInMap.map(function (layerId) {
-    return allLayers == null ? void 0 : allLayers[layerId];
+    return allLayers === null || allLayers === void 0 ? void 0 : allLayers[layerId];
   });
   var layersWithoutUndefined = compact(layersWithUndefined);
   return layersWithoutUndefined;
@@ -4853,7 +4951,7 @@ var getMapLayers = createSelector(getLayerIds, getLayersById, function (layerIds
  */
 var getMapLayersWithoutDimensionCurrentValue = createSelector(getLayerIds, getLayersById, function (layerIdsInMap, allLayers) {
   var layersWithUndefined = layerIdsInMap.map(function (layerId) {
-    return allLayers == null ? void 0 : allLayers[layerId];
+    return allLayers === null || allLayers === void 0 ? void 0 : allLayers[layerId];
   });
   var layersWithoutUndefined = compact(layersWithUndefined);
   var layersWithoutTimeDim = layersWithoutUndefined.map(function (layer) {
@@ -4900,7 +4998,7 @@ var getMapOverLayersIds = createSelector(getMapById, function (store) {
   return store ? store.overLayers : [];
 }, selectorMemoizationOptions);
 var getMapFeatureLayers = createSelector(getMapById, getFeatureLayers, function (store, featureLayers) {
-  var featureLayersOnMap = (store == null ? void 0 : store.featureLayers) || [];
+  var featureLayersOnMap = (store === null || store === void 0 ? void 0 : store.featureLayers) || [];
   return featureLayers.filter(function (layer) {
     return featureLayersOnMap.indexOf(layer.id) !== -1;
   });
@@ -4916,6 +5014,8 @@ var getMapFeatureLayers = createSelector(getMapById, getFeatureLayers, function
 var getMapOverLayers = createSelector(getMapOverLayersIds, getLayersById, function (layerIds, layers) {
   return layerIds.map(function (layerId) {
     return layers[layerId];
+  }).filter(function (layer) {
+    return layer === null || layer === void 0 ? void 0 : layer.name;
   });
 }, selectorMemoizationOptions);
 /**
@@ -4973,12 +5073,13 @@ var getSelectedTime = createSelector(function (store, mapId) {
 var getDataLimitsFromLayers = createSelector(getMapLayers, function (layers) {
   return layers.reduce(function (_ref, layer) {
     var _layer$dimensions;
-    var start = _ref[0],
-      end = _ref[1];
-    var dimension = (_layer$dimensions = layer.dimensions) == null ? void 0 : _layer$dimensions.find(function (dimension) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      start = _ref2[0],
+      end = _ref2[1];
+    var dimension = (_layer$dimensions = layer.dimensions) === null || _layer$dimensions === void 0 ? void 0 : _layer$dimensions.find(function (dimension) {
       return dimension.name === 'time';
     });
-    if (dimension != null && dimension.minValue && dimension.maxValue) {
+    if (dimension !== null && dimension !== void 0 && dimension.minValue && dimension.maxValue) {
       var lastValue = dateUtils.unix(new Date(dimension.maxValue));
       var firstValue = dateUtils.unix(new Date(dimension.minValue));
       var newLast = Math.max(lastValue, end);
@@ -5062,7 +5163,7 @@ var linkedMapAnimationInfo = createSelector(function (store, mapId) {
  * @returns {string} returnType: string
  */
 var getAnimationStartTime = createSelector(getMapById, function (store) {
-  return store != null && store.animationStartTime ? store.animationStartTime : dateUtils.dateToString(dateUtils.sub(dateUtils.utc(), {
+  return store !== null && store !== void 0 && store.animationStartTime ? store.animationStartTime : dateUtils.dateToString(dateUtils.sub(dateUtils.utc(), {
     hours: 6
   }), dateFormat);
 }, selectorMemoizationOptions);
@@ -5075,7 +5176,7 @@ var getAnimationStartTime = createSelector(getMapById, function (store) {
  * @returns {string} returnType: string
  */
 var getAnimationEndTime = createSelector(getMapById, function (store) {
-  return store != null && store.animationEndTime ? store.animationEndTime : dateUtils.dateToString(dateUtils.sub(dateUtils.utc(), {
+  return store !== null && store !== void 0 && store.animationEndTime ? store.animationEndTime : dateUtils.dateToString(dateUtils.sub(dateUtils.utc(), {
     minutes: 10
   }), dateFormat);
 }, selectorMemoizationOptions);
@@ -5109,7 +5210,7 @@ var shouldEndtimeOverride = createSelector(getMapById, function (store) {
  * @param {string} mapId mapId: string - Id of the map
  */
 var getActiveLayerId = createSelector(getMapById, function (store) {
-  if (store != null && store.autoUpdateLayerId && store.autoUpdateLayerId === store.autoTimeStepLayerId) {
+  if (store !== null && store !== void 0 && store.autoUpdateLayerId && store.autoUpdateLayerId === store.autoTimeStepLayerId) {
     return store.autoUpdateLayerId;
   }
   return undefined;
@@ -5122,7 +5223,7 @@ var getActiveLayerId = createSelector(getMapById, function (store) {
  * @param {string} mapId mapId: string - Id of the map
  */
 var getAutoUpdateLayerId = createSelector(getMapById, function (store) {
-  return store == null ? void 0 : store.autoUpdateLayerId;
+  return store === null || store === void 0 ? void 0 : store.autoUpdateLayerId;
 }, selectorMemoizationOptions);
 /**
  * Gets autoUpdateLayerId for map
@@ -5132,7 +5233,7 @@ var getAutoUpdateLayerId = createSelector(getMapById, function (store) {
  * @param {string} mapId mapId: string - Id of the map
  */
 var getAutoTimeStepLayerId = createSelector(getMapById, function (store) {
-  return store == null ? void 0 : store.autoTimeStepLayerId;
+  return store === null || store === void 0 ? void 0 : store.autoTimeStepLayerId;
 }, selectorMemoizationOptions);
 /**
  * Gets span of a time slider of a map
@@ -5155,10 +5256,10 @@ var getMapTimeSliderSpan = createSelector(getMapById, function (store) {
  */
 var getMapTimeStep = createSelector(getMapById, function (store) {
   var _store$timeStep;
-  return (_store$timeStep = store == null ? void 0 : store.timeStep) != null ? _store$timeStep : defaultTimeStep;
+  return (_store$timeStep = store === null || store === void 0 ? void 0 : store.timeStep) !== null && _store$timeStep !== void 0 ? _store$timeStep : defaultTimeStep;
 }, selectorMemoizationOptions);
 var getMapTimeStepWithoutDefault = createSelector(getMapById, function (store) {
-  return store == null ? void 0 : store.timeStep;
+  return store === null || store === void 0 ? void 0 : store.timeStep;
 }, selectorMemoizationOptions);
 /**
  * Returns the speed of animation
@@ -5193,6 +5294,20 @@ var getMapTimeSliderWidth = createSelector(getMapById, function (store) {
 var getMapTimeSliderCenterTime = createSelector(getMapById, function (store) {
   return store ? store.timeSliderCenterTime : dateUtils.unix(dateUtils.utc());
 }, selectorMemoizationOptions);
+var getMapTimeSliderStartCenterEndAndStep = createSelector(getMapById, function (store) {
+  var _store$timeStep2;
+  var timeSliderWidth = ((store === null || store === void 0 ? void 0 : store.timeSliderWidth) || 0) * 60;
+  var center = store ? store.timeSliderCenterTime : dateUtils.unix(dateUtils.utc());
+  var start = center ? center - timeSliderWidth / 2 : undefined;
+  var end = center ? center + timeSliderWidth / 2 : undefined;
+  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
+  };
+}, selectorMemoizationOptions);
 /**
  * Returns the number of seconds per pixel on the time slider
  *
@@ -5222,7 +5337,7 @@ var isTimestepAuto = createSelector(getMapById, function (store) {
  * @returns {boolean} returnType: boolean
  */
 var isAnimationLengthAuto = createSelector(getMapById, function (store) {
-  return (store == null ? void 0 : store.isAnimationLengthAuto) || false;
+  return (store === null || store === void 0 ? void 0 : store.isAnimationLengthAuto) || false;
 }, selectorMemoizationOptions);
 /**
  * Returns map is timespan auto
@@ -5291,7 +5406,7 @@ var getIsLayerActiveLayer = createSelector(getActiveLayerId, function (_store, _
  * @returns {string} returnType: string - the mapId, or null if not found
  */
 var getMapIdFromLayerId = createSelector(function (store) {
-  return store == null ? void 0 : store.webmap;
+  return store === null || store === void 0 ? void 0 : store.webmap;
 }, function (_store, layerId) {
   return layerId;
 }, findMapIdFromLayerId, selectorMemoizationOptions);
@@ -5378,7 +5493,7 @@ var getAllUniqueDimensions = createSelector(getAllMapIds, function (store) {
  * @returns {object} returnType: latitude and longitude of pin
  */
 var getPinLocation = createSelector(getMapById, function (store) {
-  return store == null ? void 0 : store.mapPinLocation;
+  return store === null || store === void 0 ? void 0 : store.mapPinLocation;
 }, selectorMemoizationOptions);
 /**
  * Returns the disable map pin boolean for the current map
@@ -5389,7 +5504,7 @@ var getPinLocation = createSelector(getMapById, function (store) {
  * @returns {boolean} returnType: boolean
  */
 var getDisableMapPin = createSelector([getMapById], function (map) {
-  return map == null ? void 0 : map.disableMapPin;
+  return map === null || map === void 0 ? void 0 : map.disableMapPin;
 }, selectorMemoizationOptions);
 /**
  * Returns the display map pin boolean for the current map
@@ -5423,15 +5538,15 @@ var getLegendId = createSelector(getMapById, function (store) {
  */
 var getMapPreset = createSelector(getMapLayers, getMapBaseLayers, getMapOverLayers, getBbox, getSrs, getActiveLayerId, getAutoTimeStepLayerId, getAutoUpdateLayerId, isAnimating, isAutoUpdating, isTimeSliderVisible, getDisplayMapPin, isZoomControlsVisible, getMapTimeStep, getMapAnimationDelay, getAnimationStartTime, getAnimationEndTime, getMapTimeSliderSpan, isTimestepAuto, isTimeSpanAuto, getLegendId, getUiStore, function (mapLayers, baseLayers, overLayers, bbox, srs, activeLayerId, autoUpdateLayerId, autoTimeStepLayerId, isAnimating, isAutoUpdating, isTimeSliderVisible, displayMapPin, isZoomControlsVisible, mapTimeStep, mapAnimationDelay, animationStartTime, animationEndTime, timeSliderSpan, isTimestepAuto, isTimeSpanAuto, legendId, uiStore) {
   var _uiStore$dialogs$lege;
-  var allLayers = [].concat(baseLayers, overLayers, mapLayers).map(function (_ref2) {
-    _ref2.mapId;
-      var layer = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
+  var allLayers = [].concat(_toConsumableArray(baseLayers), _toConsumableArray(overLayers), _toConsumableArray(mapLayers)).map(function (_ref3) {
+    _ref3.mapId;
+      var layer = _objectWithoutProperties(_ref3, _excluded$2);
     if (layer.dimensions !== undefined) {
       // Filter out (reference) time dimension as these should not be part of the preset for now
       var dimensions = layer.dimensions.filter(function (dimension) {
         return dimension.name !== 'time' && dimension.name !== 'reference_time';
       });
-      return Object.assign({}, layer, {
+      return _objectSpread2(_objectSpread2({}, layer), {}, {
         dimensions: dimensions
       });
     }
@@ -5442,16 +5557,16 @@ var getMapPreset = createSelector(getMapLayers, getMapBaseLayers, getMapOverLaye
     speed: mapAnimationDelay ? getSpeedFactor(mapAnimationDelay) : 1,
     duration: getAnimationDuration(animationEndTime, animationStartTime)
   };
-  var shouldShowLegend = legendId ? uiStore == null || (_uiStore$dialogs$lege = uiStore.dialogs[legendId]) == null ? void 0 : _uiStore$dialogs$lege.isOpen : false;
-  return Object.assign({
+  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;
+  return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
     layers: allLayers
   }, activeLayerId !== undefined && {
     activeLayerId: activeLayerId
-  }, autoTimeStepLayerId !== undefined && {
+  }), autoTimeStepLayerId !== undefined && {
     autoTimeStepLayerId: autoTimeStepLayerId
-  }, autoUpdateLayerId !== undefined && {
+  }), autoUpdateLayerId !== undefined && {
     autoUpdateLayerId: autoUpdateLayerId
-  }, {
+  }), {}, {
     proj: {
       bbox: bbox,
       srs: srs
@@ -5523,15 +5638,15 @@ var getAnimationList = createSelector(getLayersById, getMapById, getAnimationSta
   // - start, end and interval for a continuous animation loop
   // - timeList, for a custom timeList
   // Here the animation is defined by a timeList
-  if (mapStore != null && (_mapStore$timeList = mapStore.timeList) != null && _mapStore$timeList.length) {
+  if (mapStore !== null && mapStore !== void 0 && (_mapStore$timeList = mapStore.timeList) !== null && _mapStore$timeList !== void 0 && _mapStore$timeList.length) {
     return mapStore.timeList;
   }
-  var autoTimeStepLayerId = mapStore == null ? void 0 : mapStore.autoTimeStepLayerId;
-  var timeDimension = autoTimeStepLayerId && (layers == null || (_layers$autoTimeStepL = layers[autoTimeStepLayerId]) == null || (_layers$autoTimeStepL = _layers$autoTimeStepL.dimensions) == null ? void 0 : _layers$autoTimeStepL.find(function (dimension) {
+  var autoTimeStepLayerId = mapStore === null || mapStore === void 0 ? void 0 : mapStore.autoTimeStepLayerId;
+  var timeDimension = autoTimeStepLayerId && (layers === null || layers === void 0 || (_layers$autoTimeStepL = layers[autoTimeStepLayerId]) === null || _layers$autoTimeStepL === void 0 || (_layers$autoTimeStepL = _layers$autoTimeStepL.dimensions) === null || _layers$autoTimeStepL === void 0 ? void 0 : _layers$autoTimeStepL.find(function (dimension) {
     return dimension.name === 'time';
   }));
-  var _ref3 = timeDimension || {},
-    values = _ref3.values;
+  var _ref4 = timeDimension || {},
+    values = _ref4.values;
   var unixAnimationStart = roundWithTimeStep(Number(animationStart && dateUtils.unix(dateUtils.utc(animationStart))), animationInterval, 'ceil');
   var unixAnimationEnd = roundWithTimeStep(Number(animationEnd && dateUtils.unix(dateUtils.utc(animationEnd))), animationInterval, 'floor');
   var animationList = generateAnimationList(unixAnimationStart, unixAnimationEnd, values);
@@ -5539,10 +5654,10 @@ var getAnimationList = createSelector(getLayersById, getMapById, getAnimationSta
   if (!animationList.length) {
     var timeList = [];
     var intervalSeconds = animationInterval * 60;
-    for (var j = unixAnimationStart; j <= unixAnimationEnd; j += intervalSeconds) {
+    for (var animTimeStep = unixAnimationStart; animTimeStep <= unixAnimationEnd; animTimeStep += intervalSeconds) {
       timeList.push({
         name: 'time',
-        value: dateUtils.fromUnix(j).toISOString()
+        value: dateUtils.fromUnix(animTimeStep).toISOString()
       });
     }
     return timeList;
@@ -5556,12 +5671,12 @@ var getAnimationList = createSelector(getLayersById, getMapById, getAnimationSta
  */
 var getAnimationRange = createSelector(getLayersById, getAutoTimeStepLayerId, getAnimationStartTime, getAnimationEndTime, isAnimationLengthAuto, function (layers, autoTimeStepLayerId, startTime, endTime, isAnimationLengthAuto) {
   var _layers$autoTimeStepL2;
-  var layerTimeDimension = autoTimeStepLayerId && (layers == null || (_layers$autoTimeStepL2 = layers[autoTimeStepLayerId]) == null || (_layers$autoTimeStepL2 = _layers$autoTimeStepL2.dimensions) == null ? void 0 : _layers$autoTimeStepL2.find(function (dimension) {
+  var layerTimeDimension = autoTimeStepLayerId && (layers === null || layers === void 0 || (_layers$autoTimeStepL2 = layers[autoTimeStepLayerId]) === null || _layers$autoTimeStepL2 === void 0 || (_layers$autoTimeStepL2 = _layers$autoTimeStepL2.dimensions) === null || _layers$autoTimeStepL2 === void 0 ? void 0 : _layers$autoTimeStepL2.find(function (dimension) {
     return dimension.name === 'time';
   }));
-  var _ref4 = layerTimeDimension || {},
-    minValue = _ref4.minValue,
-    maxValue = _ref4.maxValue;
+  var _ref5 = layerTimeDimension || {},
+    minValue = _ref5.minValue,
+    maxValue = _ref5.maxValue;
   var hasTimeDimension = minValue && maxValue;
   var animationStartTime = isAnimationLengthAuto && autoTimeStepLayerId && hasTimeDimension ? minValue : startTime;
   var animationEndTime = isAnimationLengthAuto && autoTimeStepLayerId && hasTimeDimension ? maxValue : endTime;
@@ -5633,6 +5748,7 @@ var selectors$1 = /*#__PURE__*/Object.freeze({
   getMapTimeSliderCenterTime: getMapTimeSliderCenterTime,
   getMapTimeSliderSecondsPerPx: getMapTimeSliderSecondsPerPx,
   getMapTimeSliderSpan: getMapTimeSliderSpan,
+  getMapTimeSliderStartCenterEndAndStep: getMapTimeSliderStartCenterEndAndStep,
   getMapTimeSliderWidth: getMapTimeSliderWidth,
   getMapTimeStep: getMapTimeStep,
   getMapTimeStepWithoutDefault: getMapTimeStepWithoutDefault,
@@ -5699,32 +5815,11 @@ var enums = /*#__PURE__*/Object.freeze({
  * */
 var IS_LEGEND_OPEN_BY_DEFAULT = false;
 
-/* *
- * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var filterLayers = function filterLayers(layers, layerParser) {
-  if (layers === void 0) {
-    layers = [];
-  }
-  if (layerParser === void 0) {
-    layerParser = function layerParser(layer) {
-      return layer;
-    };
-  }
+var filterLayers = function filterLayers() {
+  var layers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var layerParser = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function (layer) {
+    return layer;
+  };
   return layers.reduce(function (layers, layer) {
     var mapLayers = layers.mapLayers,
       baseLayers = layers.baseLayers,
@@ -5765,39 +5860,22 @@ var parseBoolean = function parseBoolean(value) {
   return typeof value === 'boolean' ? value : value === 'true';
 };
 var parseLayer = function parseLayer(layer) {
-  return Object.assign({}, layer, !layer.id && {
+  return _objectSpread2(_objectSpread2(_objectSpread2({}, layer), !layer.id && {
     id: webmapUtils.generateLayerId()
-  }, layer.enabled && {
-    enabled: parseBoolean(layer.enabled)
-  });
-};
-
-var filterLayers$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  createEmtpyFilteredList: createEmtpyFilteredList,
-  filterLayers: filterLayers,
-  parseBoolean: parseBoolean,
-  parseLayer: parseLayer
-});
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var mapUtils = Object.assign({}, utils$2, {
+  }), layer.enabled && {
+    enabled: parseBoolean(layer.enabled)
+  });
+};
+
+var filterLayers$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  createEmtpyFilteredList: createEmtpyFilteredList,
+  filterLayers: filterLayers,
+  parseBoolean: parseBoolean,
+  parseLayer: parseLayer
+});
+
+var mapUtils = _objectSpread2(_objectSpread2({}, utils$2), {}, {
   replaceLayerIdsToEnsureUniqueLayerIdsInStore: replaceLayerIdsToEnsureUniqueLayerIdsInStore
 });
 
@@ -6059,7 +6137,7 @@ var getLayerActionsTargets = function getLayerActionsTargets(state, payload, act
   var foundTargets = findTargets(state, payload, actionType, mapId);
   return foundTargets.map(function (target) {
     var payload = target.payload;
-    return Object.assign({}, payload, {
+    return _objectSpread2(_objectSpread2({}, payload), {}, {
       layerId: target.layerId,
       origin: SyncGroupActionOrigin.layerActions,
       mapId: payload.mapId
@@ -6080,9 +6158,9 @@ var getAddLayerActionsTargets = function getAddLayerActionsTargets(state, payloa
       targetId = _ref.targetId;
     var layer = payload.layer;
     layer.id;
-      var layerWithoutId = _objectWithoutPropertiesLoose(layer, _excluded$1);
+      var layerWithoutId = _objectWithoutProperties(layer, _excluded$1);
     var layerId = webmapUtils.generateLayerId();
-    return Object.assign({}, payload, {
+    return _objectSpread2(_objectSpread2({}, payload), {}, {
       layer: layerWithoutId,
       layerId: layerId,
       mapId: targetId,
@@ -6100,7 +6178,7 @@ var getAddLayerActionsTargets = function getAddLayerActionsTargets(state, payloa
 var getLayerDeleteActionsTargets = function getLayerDeleteActionsTargets(state, payload, actionType) {
   var foundTargets = findTargets(state, payload, actionType, payload.mapId);
   return foundTargets.map(function (target) {
-    return Object.assign({}, target.payload, {
+    return _objectSpread2(_objectSpread2({}, target.payload), {}, {
       mapId: target.targetId,
       layerId: target.layerId,
       origin: SyncGroupActionOrigin["delete"]
@@ -6117,7 +6195,7 @@ var getLayerDeleteActionsTargets = function getLayerDeleteActionsTargets(state,
 var getLayerMoveActionsTargets = function getLayerMoveActionsTargets(state, payload, actionType) {
   var foundTargets = findTargets(state, payload, actionType, payload.mapId);
   return foundTargets.map(function (target) {
-    return Object.assign({}, target.payload, {
+    return _objectSpread2(_objectSpread2({}, target.payload), {}, {
       mapId: target.targetId,
       origin: SyncGroupActionOrigin.move
     });
@@ -6131,7 +6209,7 @@ var getLayerMoveActionsTargets = function getLayerMoveActionsTargets(state, payl
  * @returns
  */
 var getSetAutoLayerIdActionsTargets = function getSetAutoLayerIdActionsTargets(state, payload, actionType) {
-  var payloadWithLayerId = Object.assign({}, payload, {
+  var payloadWithLayerId = _objectSpread2(_objectSpread2({}, payload), {}, {
     layerId: payload.autoUpdateLayerId || payload.autoTimeStepLayerId || payload.layerId
   });
   var foundTargets = findTargets(state, payloadWithLayerId, actionType, payload.mapId);
@@ -6155,7 +6233,7 @@ var getMapBaseLayerActionsTargets = function getMapBaseLayerActionsTargets(state
   return foundTargets.map(function (target) {
     return {
       layers: payload.layers.map(function (layer) {
-        return Object.assign({}, layer, {
+        return _objectSpread2(_objectSpread2({}, layer), {}, {
           id: webmapUtils.generateLayerId()
         });
       }),
@@ -6180,7 +6258,7 @@ genericListener.startListening({
             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 " + value + " does not conform to format [YYYY-MM-DDThh:mm:ssZ]. It was triggered by " + origin);
+              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);
@@ -6448,9 +6526,9 @@ genericListener.startListening({
 });
 
 /* A map with all the timerIds and their current step */
-var stepMap = new Map();
+var stepMap$1 = new Map();
 /* A map with a list of timers and their dwell */
-var timerDwellMap = new Map();
+var timerDwellMap$1 = new Map();
 /**
  * Returns the next step for given timerId.
  * @param timerId The timer id
@@ -6458,11 +6536,9 @@ var timerDwellMap = new Map();
  * @param numStepsToGoForward Amount of steps to go forwards, defaults to 1. Can be positive and negative
  * @returns
  */
-var getNextStep = function getNextStep(timerId, numberOfStepsInAnimation, numStepsToGoForward) {
-  if (numStepsToGoForward === void 0) {
-    numStepsToGoForward = 1;
-  }
-  var currentStep = getCurrentStep(timerId);
+var getNextStep$1 = function getNextStep(timerId, numberOfStepsInAnimation) {
+  var numStepsToGoForward = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  var currentStep = getCurrentStep$1(timerId);
   var nextStep = currentStep + numStepsToGoForward;
   var nextStepClipped = (nextStep % numberOfStepsInAnimation + numberOfStepsInAnimation) % numberOfStepsInAnimation;
   return nextStepClipped;
@@ -6474,21 +6550,19 @@ var getNextStep = function getNextStep(timerId, numberOfStepsInAnimation, numSte
  * @param dwell The number of steps to wait at the end of the animation sequence before to continue
  * @returns
  */
-var handleTimerDwell = function handleTimerDwell(timerId, numberOfStepsInAnimation, dwell) {
-  if (dwell === void 0) {
-    dwell = 8;
-  }
+var handleTimerDwell$1 = function handleTimerDwell(timerId, numberOfStepsInAnimation) {
+  var dwell = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 8;
   if (dwell > 0) {
-    var currentStep = getCurrentStep(timerId);
+    var currentStep = getCurrentStep$1(timerId);
     // Reset the dwell if we are not at the last animation step
     if (currentStep < numberOfStepsInAnimation - 1) {
-      timerDwellMap.set(timerId, dwell);
+      timerDwellMap$1.set(timerId, dwell);
       return false;
     }
     // We are at the last animation step, check the dwell
-    var timerDwell = timerDwellMap.has(timerId) && timerDwellMap.get(timerId) || 0;
+    var timerDwell = timerDwellMap$1.has(timerId) && timerDwellMap$1.get(timerId) || 0;
     if (currentStep === numberOfStepsInAnimation - 1 && timerDwell > 0) {
-      timerDwellMap.set(timerId, timerDwell - 1);
+      timerDwellMap$1.set(timerId, timerDwell - 1);
       return true;
     }
   }
@@ -6499,16 +6573,16 @@ var handleTimerDwell = function handleTimerDwell(timerId, numberOfStepsInAnimati
  * @param timerId
  * @param timerStep
  */
-var setStep = function setStep(timerId, timerStep) {
-  stepMap.set(timerId, timerStep);
+var setStep$1 = function setStep(timerId, timerStep) {
+  stepMap$1.set(timerId, timerStep);
 };
 /**
  * Gets the current step for the timer
  * @param timerId
  * @returns
  */
-var getCurrentStep = function getCurrentStep(timerId) {
-  return stepMap.get(timerId) || 0;
+var getCurrentStep$1 = function getCurrentStep(timerId) {
+  return stepMap$1.get(timerId) || 0;
 };
 var MAX_NUMBER_STEPS_FORWARD_TO_PREFETCH = 2;
 var MAX_NUMBER_OF_PARALLEL_LOADING_IMAGES = 8;
@@ -6523,41 +6597,57 @@ var prefetchAnimationTargetsForMetronome = function prefetchAnimationTargetsForM
   var timerShouldStepForward = true;
   // The following code prefetches/buffers for all maps in the group
   for (var numPrefetch = 0; numPrefetch < MAX_NUMBER_STEPS_FORWARD_TO_PREFETCH; numPrefetch += 1) {
-    var nextStep = getNextStep(timerId, animationListValues.length, numPrefetch + 1);
+    var nextStep = getNextStep$1(timerId, animationListValues.length, numPrefetch + 1);
     var nextTimeValueStepToCheck = animationListValues[nextStep];
-    for (var _iterator = _createForOfIteratorHelperLoose(targets), _step; !(_step = _iterator()).done;) {
-      var target = _step.value;
-      var targetMapId = target.targetId;
-      var wmMap = getWMJSMapById(targetMapId);
-      if (!wmMap) {
-        return true; // Map was not registered so there is nothing to prefetch, do not block going forward
-      }
-      var layersImageUrls = getWMSRequests(wmMap, [{
-        name: 'time',
-        currentValue: nextTimeValueStepToCheck
-      }]);
-      for (var _iterator2 = _createForOfIteratorHelperLoose(layersImageUrls), _step2; !(_step2 = _iterator2()).done;) {
-        var layersImageUrl = _step2.value;
-        var image = wmMap.getMapImageStore.getImage(layersImageUrl.url);
-        if (!image.isLoaded()) {
-          if (wmMap.getMapImageStore.getNumImagesLoading() < MAX_NUMBER_OF_PARALLEL_LOADING_IMAGES) {
-            image.load();
-          }
-          if (numPrefetch === 0) {
-            var altImage = wmMap.getAlternativeImage(layersImageUrl.url, wmMap.getBBOX(), true);
-            // No alternative image available yet, so skipping animation.
-            if (altImage.length === 0) {
-              // This is useful to indicate that the map is loading and has nothing yet to display.
-              // console.warn('No data available: Not stepping forward');
-              timerShouldStepForward = false;
+    var _iterator = _createForOfIteratorHelper(targets),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var target = _step.value;
+        var targetMapId = target.targetId;
+        var wmMap = getWMJSMapById(targetMapId);
+        if (!wmMap) {
+          return true; // Map was not registered so there is nothing to prefetch, do not block going forward
+        }
+        var layersImageUrls = getWMSRequests(wmMap, [{
+          name: 'time',
+          currentValue: nextTimeValueStepToCheck
+        }]);
+        var _iterator2 = _createForOfIteratorHelper(layersImageUrls),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var layersImageUrl = _step2.value;
+            var image = wmMap.getMapImageStore.getImage(layersImageUrl.url);
+            if (!image.isLoaded()) {
+              if (wmMap.getMapImageStore.getNumImagesLoading() < MAX_NUMBER_OF_PARALLEL_LOADING_IMAGES) {
+                image.load();
+              }
+              if (numPrefetch === 0) {
+                var altImage = wmMap.getAlternativeImage(layersImageUrl.url, wmMap.getBBOX(), true);
+                // No alternative image available yet, so skipping animation.
+                if (altImage.length === 0) {
+                  // This is useful to indicate that the map is loading and has nothing yet to display.
+                  // console.warn('No data available: Not stepping forward');
+                  timerShouldStepForward = false;
+                }
+              }
+            } else if (image.isStale()) {
+              if (wmMap.getMapImageStore.getNumImagesLoading() < MAX_NUMBER_OF_PARALLEL_LOADING_IMAGES) {
+                image.forceReload(true);
+              }
             }
           }
-        } else if (image.isStale()) {
-          if (wmMap.getMapImageStore.getNumImagesLoading() < MAX_NUMBER_OF_PARALLEL_LOADING_IMAGES) {
-            image.forceReload(true);
-          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
         }
       }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
     }
   }
   return timerShouldStepForward;
@@ -6614,8 +6704,8 @@ mapListener.startListening({
       var shouldAutoUpdate = isAutoUpdating(listenerApi.getState(), mapId);
       var prevTimeDimension = getLayerTimeDimension(listenerApi.getState(), layerId);
       var isAutoUpdateLayer = layerId === autoUpdateLayerId;
-      var incomingMaxTime = newTimeDimension == null ? void 0 : newTimeDimension.maxValue;
-      var isIncomingMaxTimeLaterThanCurrentLayerTime = incomingMaxTime && (prevTimeDimension == null ? void 0 : prevTimeDimension.currentValue) && prevTimeDimension.currentValue !== incomingMaxTime;
+      var incomingMaxTime = newTimeDimension === null || newTimeDimension === void 0 ? void 0 : newTimeDimension.maxValue;
+      var isIncomingMaxTimeLaterThanCurrentLayerTime = incomingMaxTime && (prevTimeDimension === null || prevTimeDimension === void 0 ? void 0 : prevTimeDimension.currentValue) && prevTimeDimension.currentValue !== incomingMaxTime;
       if (isAutoUpdateLayer &&
       // only update the active layer
       shouldAutoUpdate && isIncomingMaxTimeLaterThanCurrentLayerTime) {
@@ -6704,7 +6794,7 @@ mapListener.startListening({
               autoUpdateLayerId = getAutoUpdateLayerId(listenerApi.getState(), mapId);
               timeDimension = getLayerTimeDimension(listenerApi.getState(), autoUpdateLayerId);
               syncedMapIds = getSyncedMapIdsForTimeslider(listenerApi.getState()); // go to end of active layer
-              if (timeDimension != null && timeDimension.maxValue && autoUpdateLayerId) {
+              if (timeDimension !== null && timeDimension !== void 0 && timeDimension.maxValue && autoUpdateLayerId) {
                 listenerApi.dispatch(layerActions.layerChangeDimension({
                   layerId: autoUpdateLayerId,
                   origin: LayerActionOrigin.toggleAutoUpdateListener,
@@ -6777,11 +6867,11 @@ mapListener.startListening({
     // In case of the timeList
     if (timeList && timeList.length > 0) {
       // Determine animation step based on initialTime and timeList
-      var initalTimerStep = timeList == null ? void 0 : timeList.findIndex(function (timeNameValue) {
+      var initalTimerStep = timeList === null || timeList === void 0 ? void 0 : timeList.findIndex(function (timeNameValue) {
         return timeNameValue.value === initialTime;
       });
       if (initalTimerStep !== -1) {
-        setStep(useMapId, initalTimerStep);
+        setStep$1(useMapId, initalTimerStep);
       }
     }
   }
@@ -6813,14 +6903,14 @@ var handleBaseLayers = function handleBaseLayers(mapId, baseLayers, listenerApi)
   // This happens when switching to a preset that has non-default baselayers
   if (!activeAvailableBaseLayer && currentAvailableBaseLayers.length) {
     listenerApi.dispatch(layerActions.addAvailableBaseLayers({
-      layers: [Object.assign({}, baseLayer, {
+      layers: [_objectSpread2(_objectSpread2({}, baseLayer), {}, {
         mapId: mapId,
         id: activeBaseLayerId
       })]
     }));
   }
   var baseLayersWithActiveId = baseLayers.map(function (layer, index) {
-    return index === 0 ? Object.assign({}, layer, {
+    return index === 0 ? _objectSpread2(_objectSpread2({}, layer), {}, {
       id: activeBaseLayerId || layer.id
     }) : layer;
   });
@@ -6868,10 +6958,10 @@ mapListener.startListening({
               // make sure layer with new id exist and if not, default to first layer
               newAutoUpdateLayerId = ((_newLayerIds$layers$f = newLayerIds.layers.find(function (layer) {
                 return layer.id === newLayerIds.autoUpdateLayerId;
-              })) == null ? void 0 : _newLayerIds$layers$f.id) || ((_newLayerIds$layers$ = newLayerIds.layers[0]) == null ? void 0 : _newLayerIds$layers$.id);
+              })) === null || _newLayerIds$layers$f === void 0 ? void 0 : _newLayerIds$layers$f.id) || ((_newLayerIds$layers$ = newLayerIds.layers[0]) === null || _newLayerIds$layers$ === void 0 ? void 0 : _newLayerIds$layers$.id);
               newAutoTimeStepLayerId = ((_newLayerIds$layers$f2 = newLayerIds.layers.find(function (layer) {
                 return layer.id === newLayerIds.autoTimeStepLayerId;
-              })) == null ? void 0 : _newLayerIds$layers$f2.id) || ((_newLayerIds$layers$2 = newLayerIds.layers[0]) == null ? void 0 : _newLayerIds$layers$2.id);
+              })) === null || _newLayerIds$layers$f2 === void 0 ? void 0 : _newLayerIds$layers$f2.id) || ((_newLayerIds$layers$2 = newLayerIds.layers[0]) === null || _newLayerIds$layers$2 === void 0 ? void 0 : _newLayerIds$layers$2.id);
               listenerApi.dispatch(mapActions.setAutoLayerId({
                 mapId: mapId,
                 autoUpdateLayerId: newAutoUpdateLayerId,
@@ -6879,16 +6969,16 @@ mapListener.startListening({
               }));
             }
             customLayers = getdefaultMapSettingsLayers(listenerApi.getState());
-            customBaseLayer = customLayers == null ? void 0 : customLayers.find(function (layer) {
+            customBaseLayer = customLayers === null || customLayers === void 0 ? void 0 : customLayers.find(function (layer) {
               return layer.layerType === LayerType.baseLayer;
             });
-            customOverLayer = customLayers == null ? void 0 : customLayers.find(function (layer) {
+            customOverLayer = customLayers === null || customLayers === void 0 ? void 0 : customLayers.find(function (layer) {
               return layer.layerType === LayerType.overLayer;
             }); // sets (default) baseLayers
             baseLayersWithDefaultLayer = baseLayers.length ? baseLayers : [customBaseLayer || defaultLayers.baseLayerGrey]; // sets (default) overLayers
             overLayersWithDefaultLayer = overLayers.length ? overLayers : [customOverLayer || defaultLayers.overLayer];
-            allBaseLayers = [].concat(baseLayersWithDefaultLayer, overLayersWithDefaultLayer).map(function (layer) {
-              return Object.assign({}, layer, {
+            allBaseLayers = [].concat(_toConsumableArray(baseLayersWithDefaultLayer), _toConsumableArray(overLayersWithDefaultLayer)).map(function (layer) {
+              return _objectSpread2(_objectSpread2({}, layer), {}, {
                 id: webmapUtils.generateLayerId()
               });
             });
@@ -6902,7 +6992,7 @@ mapListener.startListening({
               _context2.next = 19;
               break;
             }
-            throw new Error("Projection " + proj.srs + " is not supported");
+            throw new Error("Projection ".concat(proj.srs, " is not supported"));
           case 19:
             //  set bbox
             listenerApi.dispatch(mapActions.setBbox({
@@ -7135,8 +7225,9 @@ mapListener.startListening({
     var timeStep = getMapTimeStep(listenerApi.getState(), mapId);
     var currentTime = getSelectedTime(listenerApi.getState(), mapId);
     var _mapSelectors$getData = getDataLimitsFromLayers(listenerApi.getState(), mapId),
-      dataStartTime = _mapSelectors$getData[0],
-      dataEndTime = _mapSelectors$getData[1];
+      _mapSelectors$getData2 = _slicedToArray(_mapSelectors$getData, 2),
+      dataStartTime = _mapSelectors$getData2[0],
+      dataEndTime = _mapSelectors$getData2[1];
     if (dateUtils.isValid(currentTime)) {
       var makeForwardStep = function makeForwardStep() {
         var nextTime = currentTime + timeStep;
@@ -7167,6 +7258,186 @@ mapListener.startListening({
   }
 });
 
+var copyView = function copyView(view) {
+  return new View({
+    center: view.getCenter(),
+    resolution: view.getResolution(),
+    projection: view.getProjection()
+  });
+};
+/**
+ * The StoredView objects keep references to OpenLayers View objects that may be shared
+ * between multiple maps (when maps are pan/zoom synced).
+ * This file then offers and API for each map to retrieve the StoredView object
+ * that is relevant for the current workspace configuration.
+ *
+ * React is functional, but OpenLayers is object oriented.
+ * This component sits in between the two and thus you can make an argument for either style.
+ * Object oriented was chosen since:
+ * - This allows us to use OpenLayers's Observable as a base class to provide event handling,
+ *   which is useful for the implementation.
+ * - For this mechanism to work smoothly with OpenLayers,
+ *   we need to pass the exact same View object reference for all maps that are synchronized. Redux stores cannot be used in this context and prop drilling and/or context providers would likely lead to more invasive implementations.
+ */
+var StoredView = /*#__PURE__*/function (_Observable) {
+  function StoredView(name, view) {
+    var _this;
+    _classCallCheck(this, StoredView);
+    _this = _callSuper(this, StoredView);
+    _this.name = name;
+    _this.view = view;
+    return _this;
+  }
+  _inherits(StoredView, _Observable);
+  return _createClass(StoredView, [{
+    key: "setView",
+    value: function setView(view) {
+      this.view = view;
+      this.changed();
+    }
+  }]);
+}(Observable);
+var VIEW_PER_SYNCGROUP = {};
+var VIEW_PER_MAP = {};
+var getViewObjectForMapId = function getViewObjectForMapId(id) {
+  var storedView = VIEW_PER_MAP[id];
+  if (!storedView) {
+    var newStoredView = new StoredView("view:".concat(id), new View());
+    VIEW_PER_MAP[id] = newStoredView;
+    return newStoredView;
+  }
+  return storedView;
+};
+var createViewObjectForNewMap = function createViewObjectForNewMap(createFromId, newId) {
+  var orig = VIEW_PER_MAP[createFromId];
+  if (!orig) {
+    return;
+  }
+  // If there already is a view for `newId`, use that one but set the view from createFromId
+  // this can happen for example when switching presets
+  if (VIEW_PER_MAP[newId] !== undefined) {
+    VIEW_PER_MAP[newId].setView(copyView(orig.view));
+    return;
+  }
+  VIEW_PER_MAP[newId] = new StoredView("view:".concat(newId), copyView(orig.view));
+};
+var getViewObjectForSyncGroup = function getViewObjectForSyncGroup(id) {
+  var storedView = VIEW_PER_SYNCGROUP[id];
+  if (!storedView) {
+    var newStoredView = new StoredView("syncgroup:".concat(id), new View());
+    VIEW_PER_SYNCGROUP[id] = newStoredView;
+    return newStoredView;
+  }
+  return storedView;
+};
+
+/* *
+ * 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 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var openlayersListener = createListenerMiddleware();
+var getGroupForMap = function getGroupForMap(mapId, state) {
+  var syncGroupState = getSynchronizationGroupState(state);
+  return syncGroupState.groups.allIds.find(function (id) {
+    var group = syncGroupState.groups.byId[id];
+    return group.type === SYNCGROUPS_TYPE_SETBBOX && group.targets.allIds.indexOf(mapId) !== -1;
+  });
+};
+// This is fired when the preset is set up and when the projection is changed
+openlayersListener.startListening({
+  actionCreator: mapActions.setBbox,
+  effect: function effect(_ref, listenerApi) {
+    var payload = _ref.payload;
+    var mapId = payload.mapId,
+      bbox = payload.bbox,
+      srs = payload.srs;
+    var extent = boundingExtent([[bbox.left, bbox.bottom], [bbox.right, bbox.top]]);
+    var storedViewForMap = getViewObjectForMapId(mapId);
+    var view = new View({
+      projection: srs,
+      center: getCenter(extent)
+    });
+    storedViewForMap.setView(view);
+    // 1024 is the current best guess for width / height of a map
+    // Feature request made for OL to help us get this right https://github.com/openlayers/openlayers/issues/16572
+    view.setViewportSize([1024, 1024]);
+    var resolution = view.getResolutionForExtent(extent);
+    view.setResolution(resolution);
+    // Also: if this map is part of a group and the srs has changed => change group view
+    var mapSyncGroup = getGroupForMap(mapId, listenerApi.getState());
+    if (!mapSyncGroup) {
+      return;
+    }
+    var groupView = getViewObjectForSyncGroup(mapSyncGroup);
+    if (!groupView.view.isDef() || groupView.view.getProjection().getCode() !== srs) {
+      groupView.setView(copyView(view));
+    }
+  }
+});
+// This is fired when the map view is updated (regardless of if the map is in a group or not)
+// When a map is in a group, this needs to ensure the view of the map is kept up-to-date
+openlayersListener.startListening({
+  actionCreator: setBboxSync,
+  effect: function effect(_ref2, listenerApi) {
+    var _payload$source;
+    var payload = _ref2.payload;
+    var mapId = (_payload$source = payload.source) === null || _payload$source === void 0 ? void 0 : _payload$source.payload.sourceId;
+    var mapSyncGroup = getGroupForMap(mapId, listenerApi.getState());
+    if (!mapSyncGroup) {
+      return;
+    }
+    var groupView = getViewObjectForSyncGroup(mapSyncGroup);
+    var mapView = getViewObjectForMapId(mapId);
+    if (mapView.view.getProjection() === groupView.view.getProjection()) {
+      mapView.view.setCenter(groupView.view.getCenter());
+      mapView.view.setResolution(groupView.view.getResolution());
+    } else {
+      mapView.setView(copyView(groupView.view));
+    }
+  }
+});
+openlayersListener.startListening({
+  actionCreator: syncGroupAddGroup,
+  effect: function effect(_ref3) {
+    var payload = _ref3.payload;
+    if (payload.type !== SYNCGROUPS_TYPE_SETBBOX) {
+      return;
+    }
+    // Ensure there is an openlayers view for the sync group
+    getViewObjectForSyncGroup(payload.groupId);
+  }
+});
+// Ensure sync group view has contents: when a target is added to a group whose view is undefined, copy the view from the target
+openlayersListener.startListening({
+  actionCreator: syncGroupAddTarget,
+  effect: function effect(_ref4, listenerApi) {
+    var payload = _ref4.payload;
+    var group = getSynchronizationGroup(listenerApi.getState(), payload.groupId);
+    if (!group || group.type !== SYNCGROUPS_TYPE_SETBBOX) {
+      return;
+    }
+    var groupView = getViewObjectForSyncGroup(payload.groupId);
+    if (groupView.view.isDef()) {
+      return;
+    }
+    var mapView = getViewObjectForMapId(payload.targetId);
+    groupView.setView(copyView(mapView.view));
+  }
+});
+
 var _excluded = ["url"];
 var serviceListener = createListenerMiddleware();
 var fetchService = /*#__PURE__*/function () {
@@ -7180,7 +7451,7 @@ var fetchService = /*#__PURE__*/function () {
           return queryWMSLayers(service.serviceUrl);
         case 3:
           layers = _context.sent;
-          listenerApi.dispatch(serviceActions.serviceSetLayers(Object.assign({}, service, {
+          listenerApi.dispatch(serviceActions.serviceSetLayers(_objectSpread2(_objectSpread2({}, service), {}, {
             layers: layers
           })));
           _context.next = 10;
@@ -7216,8 +7487,8 @@ var fetchInitialServices = /*#__PURE__*/function () {
           _context2.next = 5;
           return Promise.all(payload.services.map(function (_ref3) {
             var url = _ref3.url,
-              service = _objectWithoutPropertiesLoose(_ref3, _excluded);
-            return fetchService(Object.assign({}, service, {
+              service = _objectWithoutProperties(_ref3, _excluded);
+            return fetchService(_objectSpread2(_objectSpread2({}, service), {}, {
               serviceUrl: url
             }), listenerApi);
           }));
@@ -7348,23 +7619,6 @@ routerListener.startListening({
   }()
 });
 
-/* *
- * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
 // reducer utils
 var drawAdapter = createEntityAdapter({
   selectId: function selectId(draw) {
@@ -7375,9 +7629,9 @@ var getDrawToolByLayerId = function getDrawToolByLayerId(draft, layerId) {
   var drawTool = draft.ids.map(function (id) {
     return draft.entities[id];
   }).find(function (tool) {
-    return (tool == null ? void 0 : tool.geoJSONLayerId) === layerId;
+    return (tool === null || tool === void 0 ? void 0 : tool.geoJSONLayerId) === layerId;
   });
-  return (drawTool == null ? void 0 : drawTool.drawToolId) || undefined;
+  return (drawTool === null || drawTool === void 0 ? void 0 : drawTool.drawToolId) || undefined;
 };
 var initialState = drawAdapter.getInitialState();
 var slice = createSlice({
@@ -7424,11 +7678,11 @@ var slice = createSlice({
       var tool = drawTool.drawModes.find(function (drawMode) {
         return drawMode.drawModeId === drawModeId;
       });
-      if ((tool == null ? void 0 : tool.isSelectable) === false) {
+      if ((tool === null || tool === void 0 ? void 0 : tool.isSelectable) === false) {
         drawTool.activeDrawModeId = '';
         return;
       }
-      if ((drawTool == null ? void 0 : drawTool.activeDrawModeId) !== drawModeId || !shouldUpdateShape) {
+      if ((drawTool === null || drawTool === void 0 ? void 0 : drawTool.activeDrawModeId) !== drawModeId || !shouldUpdateShape) {
         drawTool.activeDrawModeId = drawModeId;
       } else {
         drawTool.activeDrawModeId = '';
@@ -7457,7 +7711,7 @@ var slice = createSlice({
       }
       var newModes = drawTool.drawModes.map(function (mode) {
         if (mode.drawModeId === drawModeId) {
-          return Object.assign({}, mode, {
+          return _objectSpread2(_objectSpread2({}, mode), {}, {
             shape: shape
           }, title && {
             title: title
@@ -7496,11 +7750,11 @@ var slice = createSlice({
       var entity = draft.entities[drawToolId];
       if (drawToolId && entity !== undefined) {
         var _entity$drawModes;
-        var newDrawModes = entity == null || (_entity$drawModes = entity.drawModes) == null ? void 0 : _entity$drawModes.map(function (mode) {
+        var newDrawModes = entity === null || entity === void 0 || (_entity$drawModes = entity.drawModes) === null || _entity$drawModes === void 0 ? void 0 : _entity$drawModes.map(function (mode) {
           if (mode.shape.type === 'Feature') {
-            return Object.assign({}, mode, {
-              shape: Object.assign({}, mode.shape, {
-                properties: Object.assign({}, mode.shape.properties, properties)
+            return _objectSpread2(_objectSpread2({}, mode), {}, {
+              shape: _objectSpread2(_objectSpread2({}, mode.shape), {}, {
+                properties: _objectSpread2(_objectSpread2({}, mode.shape.properties), properties)
               })
             });
           }
@@ -7552,7 +7806,7 @@ var getDrawingtoolStore = function getDrawingtoolStore(store) {
 };
 var _drawAdapter$getSelec = drawAdapter.getSelectors(function (state) {
     var _state$drawingtools;
-    return (_state$drawingtools = state == null ? void 0 : state.drawingtools) != null ? _state$drawingtools : {
+    return (_state$drawingtools = state === null || state === void 0 ? void 0 : state.drawingtools) !== null && _state$drawingtools !== void 0 ? _state$drawingtools : {
       entities: {},
       ids: []
     };
@@ -7560,35 +7814,35 @@ var _drawAdapter$getSelec = drawAdapter.getSelectors(function (state) {
   selectDrawToolById = _drawAdapter$getSelec.selectById,
   selectAllDrawingTools = _drawAdapter$getSelec.selectAll;
 var getActiveDrawToolId = createSelector(selectAllDrawingTools, function (drawtools) {
-  var activeDrawTool = drawtools == null ? void 0 : drawtools.find(function (drawtool) {
+  var activeDrawTool = drawtools === null || drawtools === void 0 ? void 0 : drawtools.find(function (drawtool) {
     return drawtool.activeDrawModeId !== '';
   });
-  return (activeDrawTool == null ? void 0 : activeDrawTool.drawToolId) || '';
+  return (activeDrawTool === null || activeDrawTool === void 0 ? void 0 : activeDrawTool.drawToolId) || '';
 });
 var getDrawModeById = createSelector(selectDrawToolById, function (_store, _drawToolId, drawModeId) {
   return drawModeId;
 }, function (draw, drawModeId) {
-  return draw == null ? void 0 : draw.drawModes.find(function (tool) {
+  return draw === null || draw === void 0 ? void 0 : draw.drawModes.find(function (tool) {
     return tool.drawModeId === drawModeId;
   });
 });
 var getActiveDrawModeId = createSelector(selectDrawToolById, function (drawingTool) {
-  return (drawingTool == null ? void 0 : drawingTool.activeDrawModeId) || '';
+  return (drawingTool === null || drawingTool === void 0 ? void 0 : drawingTool.activeDrawModeId) || '';
 });
 var getDrawToolGeoJSONLayerId = createSelector(selectDrawToolById, function (drawingTool) {
-  return (drawingTool == null ? void 0 : drawingTool.geoJSONLayerId) || '';
+  return (drawingTool === null || drawingTool === void 0 ? void 0 : drawingTool.geoJSONLayerId) || '';
 });
 var getGeoJSONIntersectionLayerId = createSelector(selectDrawToolById, function (drawingTool) {
-  return drawingTool == null ? void 0 : drawingTool.geoJSONIntersectionLayerId;
+  return drawingTool === null || drawingTool === void 0 ? void 0 : drawingTool.geoJSONIntersectionLayerId;
 });
 var getGeoJSONIntersectionBoundsLayerId = createSelector(selectDrawToolById, function (drawingTool) {
-  return drawingTool == null ? void 0 : drawingTool.geoJSONIntersectionBoundsLayerId;
+  return drawingTool === null || drawingTool === void 0 ? void 0 : drawingTool.geoJSONIntersectionBoundsLayerId;
 });
 var getShouldAllowMultipleShapes = createSelector(selectDrawToolById, function (drawingTool) {
-  return (drawingTool == null ? void 0 : drawingTool.shouldAllowMultipleShapes) || false;
+  return (drawingTool === null || drawingTool === void 0 ? void 0 : drawingTool.shouldAllowMultipleShapes) || false;
 });
 var getActiveDrawMode = createSelector(selectDrawToolById, function (drawingTool) {
-  return drawingTool == null ? void 0 : drawingTool.drawModes.find(function (mode) {
+  return drawingTool === null || drawingTool === void 0 ? void 0 : drawingTool.drawModes.find(function (mode) {
     return mode.drawModeId === drawingTool.activeDrawModeId;
   });
 });
@@ -7709,10 +7963,10 @@ drawingToolListener.startListening({
               drawMode: ''
             }));
             geoJSONLayer = getLayerById(listenerApi.getState(), drawingTool.geoJSONLayerId);
-            geoJSON = geoJSONLayer == null ? void 0 : geoJSONLayer.geojson;
+            geoJSON = geoJSONLayer === null || geoJSONLayer === void 0 ? void 0 : geoJSONLayer.geojson;
             lastFeatureIndex = geoJSON !== undefined ? getLastEmptyFeatureIndex(geoJSON) : undefined;
             if (lastFeatureIndex !== undefined) {
-              newGeoJSON = Object.assign({}, geoJSON, {
+              newGeoJSON = _objectSpread2(_objectSpread2({}, geoJSON), {}, {
                 features: geoJSON.features.filter(function (_feature, index) {
                   return index !== lastFeatureIndex;
                 })
@@ -7753,10 +8007,10 @@ drawingToolListener.startListening({
             // check tool is selected of existing drawn shape
             currentGeoJSONLayer = getLayerById(listenerApi.getState(), drawingTool.geoJSONLayerId);
             _ref3 = currentGeoJSONLayer || {}, currentGeoJSON = _ref3.geojson, _ref3$selectedFeature = _ref3.selectedFeatureIndex, selectedFeatureIndex = _ref3$selectedFeature === void 0 ? 0 : _ref3$selectedFeature;
-            currentSelectionType = currentGeoJSON == null || (_currentGeoJSON$featu = currentGeoJSON.features[selectedFeatureIndex]) == null || (_currentGeoJSON$featu = _currentGeoJSON$featu.properties) == null ? void 0 : _currentGeoJSON$featu.selectionType;
+            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$featu2 = currentGeoJSON.features) != null && _currentGeoJSON$featu2.length) || isNewToolSelected || !newDrawMode.isSelectable && shouldAllowMultipleShapes; // don't change anything if same tool is selected again
+            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
             if (shouldUpdateNewShape && shouldUpdateShape) {
               shapeWithSelectionType = addSelectionTypeToGeoJSON(newDrawMode.shape, newDrawMode.selectionType);
               geoJSONFeatureCollection = getFeatureCollection(shapeWithSelectionType, shouldAllowMultipleShapes, currentGeoJSON);
@@ -7768,12 +8022,12 @@ drawingToolListener.startListening({
                 layerId: drawingTool.geoJSONLayerId,
                 selectedFeatureIndex: _newGeoJSON.features.length - 1
               }));
-              listenerApi.dispatch(layerActions.updateFeature(Object.assign({
+              listenerApi.dispatch(layerActions.updateFeature(_objectSpread2(_objectSpread2({
                 layerId: drawingTool.geoJSONLayerId,
                 geojson: _newGeoJSON
               }, geoJSONIntersectionLayerId && {
                 geoJSONIntersectionLayerId: geoJSONIntersectionLayerId
-              }, geoJSONIntersectionBoundsLayerId && {
+              }), geoJSONIntersectionBoundsLayerId && {
                 geoJSONIntersectionBoundsLayerId: geoJSONIntersectionBoundsLayerId
               })));
             }
@@ -7907,6 +8161,179 @@ layersListener.startListening({
   }()
 });
 
+/* A map with all the timerIds and their current step */
+var stepMap = new Map();
+/* A map with a list of timers and their dwell */
+var timerDwellMap = new Map();
+/**
+ * Returns the next step for given timerId.
+ * @param timerId The timer id
+ * @param numberOfStepsInAnimation Animation length in steps
+ * @param numStepsToGoForward Amount of steps to go forwards, defaults to 1. Can be positive and negative
+ * @returns
+ */
+var getNextStep = function getNextStep(timerId, numberOfStepsInAnimation) {
+  var numStepsToGoForward = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  var currentStep = getCurrentStep(timerId);
+  var nextStep = currentStep + numStepsToGoForward;
+  var nextStepClipped = (nextStep % numberOfStepsInAnimation + numberOfStepsInAnimation) % numberOfStepsInAnimation;
+  return nextStepClipped;
+};
+/**
+ * Handles dwell at the end of the animation loop sequence. The number of steps to wait till proceed can be set by the dwell parameter.
+ * @param timerId The timer id
+ * @param numberOfStepsInAnimation Number of steps in the animation
+ * @param dwell The number of steps to wait at the end of the animation sequence before to continue
+ * @returns
+ */
+var handleTimerDwell = function handleTimerDwell(timerId, numberOfStepsInAnimation) {
+  var dwell = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 8;
+  if (dwell > 0) {
+    var currentStep = getCurrentStep(timerId);
+    // Reset the dwell if we are not at the last animation step
+    if (currentStep < numberOfStepsInAnimation - 1) {
+      timerDwellMap.set(timerId, dwell);
+      return false;
+    }
+    // We are at the last animation step, check the dwell
+    var timerDwell = timerDwellMap.has(timerId) && timerDwellMap.get(timerId) || 0;
+    if (currentStep === numberOfStepsInAnimation - 1 && timerDwell > 0) {
+      timerDwellMap.set(timerId, timerDwell - 1);
+      return true;
+    }
+  }
+  return false;
+};
+/**
+ * Set step for the timerId
+ * @param timerId
+ * @param timerStep
+ */
+var setStep = function setStep(timerId, timerStep) {
+  stepMap.set(timerId, timerStep);
+};
+/**
+ * Gets the current step for the timer
+ * @param timerId
+ * @returns
+ */
+var getCurrentStep = function getCurrentStep(timerId) {
+  return stepMap.get(timerId) || 0;
+};
+/**
+ * Checks if the next step is available for all provided layers
+ * @param reduxLayers
+ * @param nextTimeString
+ * @returns
+ */
+var isNextStepAvailable = function isNextStepAvailable(reduxLayers, nextTimeString) {
+  // Get all wmLayers for the found id's
+  var wmLayers = reduxLayers.map(function (reduxLayer) {
+    return reduxLayer.id && getWMLayerById(reduxLayer.id);
+  }).filter(function (l) {
+    return !!l;
+  });
+  // Returns a layer which could have an image for the requested time, but which isn't loaded yet.
+  var isThereSomethingNotAvailable = wmLayers.map(function (l) {
+    var _l$getDimension;
+    if (!l || !l.olSource) {
+      // No OpenLayers source, do nothing, so do not flag that something is not available
+      return {
+        status: true
+      };
+    }
+    // Check if there is a timevalue available
+    var closestValue = (_l$getDimension = l.getDimension('time')) === null || _l$getDimension === void 0 ? void 0 : _l$getDimension.getClosestValue(nextTimeString);
+    if (!closestValue || WMInvalidDateValues.has(closestValue)) {
+      // No value available, so do not flag that something is not available
+      return {
+        status: true
+      };
+    }
+    var olSource = l.olSource;
+    var hasImageAvailableForRequestedTimeStep = olSource.hasImageForTimeValue(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);
+    return {
+      status: false
+    };
+  });
+  var nextStepIsAvailable = isThereSomethingNotAvailable.filter(function (d) {
+    return d.status === true;
+  }).length === wmLayers.length;
+  return nextStepIsAvailable;
+};
+/**
+ * This handler is triggered by the metronome. An array of timerIds is given as argument.
+ * It will update the animation loop of multiple maps and sliders
+ * It will prefetch images for maps
+ * @param timerIds string[] array of timerIds
+ * @param listenerApi ListenerEffectAPI<CoreAppStore, Dispatch, unknown> listenerApi as received from listener
+ */
+var olMetronomeHandler = function olMetronomeHandler(timerIds, listenerApi) {
+  var targetsWithUpdateValue = [];
+  var _iterator = _createForOfIteratorHelper(timerIds),
+    _step;
+  try {
+    var _loop = function _loop() {
+      var timerId = _step.value;
+      var animationListValuesNameAndValue = getAnimationList(listenerApi.getState(), timerId);
+      var animationListValues = animationListValuesNameAndValue.map(function (nameAndValue) {
+        return nameAndValue.value;
+      });
+      var targets = getTargets(listenerApi.getState(), {
+        sourceId: timerId,
+        origin: timerId
+      }, SYNCGROUPS_TYPE_SETTIME);
+      if (targets.length === 0) {
+        // When there are no targets, default to one
+        targets.push({
+          targetId: timerId,
+          value: ''
+        });
+      }
+      var timerIsInDwell = handleTimerDwell(timerId, animationListValues.length);
+      // Collect all layers for this syncgroups target
+      var reduxLayers = [];
+      targets.forEach(function (target) {
+        reduxLayers.push.apply(reduxLayers, _toConsumableArray(getLayersByMapId(listenerApi.getState(), target.targetId).filter(function (l) {
+          return l.layerType === LayerType.mapLayer;
+        })));
+      });
+      var nextStep = getNextStep(timerId, animationListValues.length, 1);
+      var timerShouldStepForward = isNextStepAvailable(reduxLayers, animationListValues[nextStep]) && !timerIsInDwell;
+      // Determine the next step
+      var timerStep = timerShouldStepForward ? getNextStep(timerId, animationListValues.length) : getCurrentStep(timerId);
+      setStep(timerId, timerStep);
+      var updatedValue = animationListValues[timerStep];
+      targetsWithUpdateValue.push.apply(targetsWithUpdateValue, _toConsumableArray(targets.map(function (target) {
+        return _objectSpread2(_objectSpread2({}, target), {}, {
+          value: updatedValue
+        });
+      })));
+      var speedDelay = getMapAnimationDelay(listenerApi.getState(), timerId);
+      var speed = 1000 / (speedDelay || 1);
+      metronome.setSpeed(timerId, speed);
+    };
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      _loop();
+    }
+    // Update all targets of all sync groups in one action.
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  if (targetsWithUpdateValue.length > 0) {
+    listenerApi.dispatch(setTimeSync(null, targetsWithUpdateValue, ['metronomelistener']));
+  }
+};
+
 /**
  * This handler is triggered by the metronome. An array of timerIds is given as argument.
  * It will update the animation loop of multiple maps and sliders
@@ -7915,43 +8342,55 @@ layersListener.startListening({
  * @param listenerApi ListenerEffectAPI<CoreAppStore, Dispatch, unknown> listenerApi as received from listener
  */
 var metronomeHandler = function metronomeHandler(timerIds, listenerApi) {
+  if (isOpenLayersEnabled()) {
+    olMetronomeHandler(timerIds, listenerApi);
+    return;
+  }
   var targetsWithUpdateValue = [];
-  var _loop = function _loop() {
-    var timerId = _step.value;
-    var animationListValuesNameAndValue = getAnimationList(listenerApi.getState(), timerId);
-    var animationListValues = animationListValuesNameAndValue.map(function (nameAndValue) {
-      return nameAndValue.value;
-    });
-    var targets = getTargets(listenerApi.getState(), {
-      sourceId: timerId,
-      origin: timerId
-    }, SYNCGROUPS_TYPE_SETTIME);
-    if (targets.length === 0) {
-      // When there are no targets, default to one
-      targets.push({
-        targetId: timerId,
-        value: ''
+  var _iterator = _createForOfIteratorHelper(timerIds),
+    _step;
+  try {
+    var _loop = function _loop() {
+      var timerId = _step.value;
+      var animationListValuesNameAndValue = getAnimationList(listenerApi.getState(), timerId);
+      var animationListValues = animationListValuesNameAndValue.map(function (nameAndValue) {
+        return nameAndValue.value;
       });
+      var targets = getTargets(listenerApi.getState(), {
+        sourceId: timerId,
+        origin: timerId
+      }, SYNCGROUPS_TYPE_SETTIME);
+      if (targets.length === 0) {
+        // When there are no targets, default to one
+        targets.push({
+          targetId: timerId,
+          value: ''
+        });
+      }
+      var timerIsInDwell = handleTimerDwell$1(timerId, animationListValues.length);
+      var timerShouldStepForward = prefetchAnimationTargetsForMetronome(timerId, animationListValues, targets) && !timerIsInDwell;
+      // Determine the next step
+      var timerStep = timerShouldStepForward ? getNextStep$1(timerId, animationListValues.length) : getCurrentStep$1(timerId);
+      setStep$1(timerId, timerStep);
+      var updatedValue = animationListValues[timerStep];
+      targetsWithUpdateValue.push.apply(targetsWithUpdateValue, _toConsumableArray(targets.map(function (target) {
+        return _objectSpread2(_objectSpread2({}, target), {}, {
+          value: updatedValue
+        });
+      })));
+      var speedDelay = getMapAnimationDelay(listenerApi.getState(), timerId);
+      var speed = 1000 / (speedDelay || 1);
+      metronome.setSpeed(timerId, speed);
+    };
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      _loop();
     }
-    var timerIsInDwell = handleTimerDwell(timerId, animationListValues.length);
-    var timerShouldStepForward = prefetchAnimationTargetsForMetronome(timerId, animationListValues, targets) && !timerIsInDwell;
-    // Determine the next step
-    var timerStep = timerShouldStepForward ? getNextStep(timerId, animationListValues.length) : getCurrentStep(timerId);
-    setStep(timerId, timerStep);
-    var updatedValue = animationListValues[timerStep];
-    targetsWithUpdateValue.push.apply(targetsWithUpdateValue, targets.map(function (target) {
-      return Object.assign({}, target, {
-        value: updatedValue
-      });
-    }));
-    var speedDelay = getMapAnimationDelay(listenerApi.getState(), timerId);
-    var speed = 1000 / (speedDelay || 1);
-    metronome.setSpeed(timerId, speed);
-  };
-  for (var _iterator = _createForOfIteratorHelperLoose(timerIds), _step; !(_step = _iterator()).done;) {
-    _loop();
+    // Update all targets of all sync groups in one action.
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
   }
-  // Update all targets of all sync groups in one action.
   if (targetsWithUpdateValue.length > 0) {
     listenerApi.dispatch(setTimeSync(null, targetsWithUpdateValue, ['metronomelistener']));
   }
@@ -8000,18 +8439,26 @@ metronomeListener.startListening({
  * */
 var unifyReducerMaps = function unifyReducerMaps(reducerMaps) {
   var unifiedReducerMaps = {};
-  for (var _iterator = _createForOfIteratorHelperLoose(reducerMaps), _step; !(_step = _iterator()).done;) {
-    var reducersMap = _step.value;
-    for (var _i = 0, _Object$entries = Object.entries(reducersMap); _i < _Object$entries.length; _i++) {
-      var _Object$entries$_i = _Object$entries[_i],
-        key = _Object$entries$_i[0],
-        reducer = _Object$entries$_i[1];
-      if (key in unifiedReducerMaps && unifiedReducerMaps[key] !== reducer) {
-        throw new Error("Reducer key " + key + " is already defined with a different reducer");
-      } else {
-        unifiedReducerMaps[key] = reducer;
+  var _iterator = _createForOfIteratorHelper(reducerMaps),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var reducersMap = _step.value;
+      for (var _i = 0, _Object$entries = Object.entries(reducersMap); _i < _Object$entries.length; _i++) {
+        var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+          key = _Object$entries$_i[0],
+          reducer = _Object$entries$_i[1];
+        if (key in unifiedReducerMaps && unifiedReducerMaps[key] !== reducer) {
+          throw new Error("Reducer key ".concat(key, " is already defined with a different reducer"));
+        } else {
+          unifiedReducerMaps[key] = reducer;
+        }
       }
     }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
   }
   return unifiedReducerMaps;
 };
@@ -8034,18 +8481,15 @@ var unifyReducerMaps = function unifyReducerMaps(reducerMaps) {
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 var getSingularDrawtoolDrawLayerId = function getSingularDrawtoolDrawLayerId(mapId) {
-  return "drawlayer-" + mapId;
+  return "drawlayer-".concat(mapId);
 };
 
-var createLayersState = function createLayersState(layerId, props) {
-  var _byId;
-  if (props === void 0) {
-    props = {};
-  }
+var createLayersState = function createLayersState(layerId) {
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return {
-    byId: (_byId = {}, _byId[layerId] = createLayer(Object.assign({
+    byId: _defineProperty({}, layerId, createLayer(_objectSpread2({
       id: layerId
-    }, props)), _byId),
+    }, props))),
     allIds: [layerId],
     availableBaseLayers: {
       allIds: [],
@@ -8062,18 +8506,26 @@ var createMultipleLayersState = function createMultipleLayersState(layers, mapId
       byId: {}
     }
   };
-  for (var _iterator = _createForOfIteratorHelperLoose(layers), _step; !(_step = _iterator()).done;) {
-    var layer = _step.value;
-    var layerState = createLayer(Object.assign({}, layer, {
-      id: layer.id,
-      mapId: mapId
-    }));
-    mockState.byId[layer.id] = Object.assign({}, layerState);
-    mockState.allIds.push(layer.id);
-    if (layer.layerType === LayerType.baseLayer) {
-      mockState.availableBaseLayers.byId[layer.id] = Object.assign({}, layerState);
-      mockState.availableBaseLayers.allIds.push(layer.id);
+  var _iterator = _createForOfIteratorHelper(layers),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var layer = _step.value;
+      var layerState = createLayer(_objectSpread2(_objectSpread2({}, layer), {}, {
+        id: layer.id,
+        mapId: mapId
+      }));
+      mockState.byId[layer.id] = _objectSpread2({}, layerState);
+      mockState.allIds.push(layer.id);
+      if (layer.layerType === LayerType.baseLayer) {
+        mockState.availableBaseLayers.byId[layer.id] = _objectSpread2({}, layerState);
+        mockState.availableBaseLayers.allIds.push(layer.id);
+      }
     }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
   }
   return mockState;
 };
@@ -8090,7 +8542,7 @@ var createWebmapState = function createWebmapState() {
     var mapState = createMap({
       id: mapId
     });
-    mockState.byId[mapId] = Object.assign({}, mapState);
+    mockState.byId[mapId] = _objectSpread2({}, mapState);
     mockState.allIds.push(mapId);
   }
   return mockState;
@@ -8108,7 +8560,7 @@ var createMapDimensionsState = function createMapDimensionsState(dimensions) {
     var mapState = createMap({
       id: mapId
     });
-    mockState.byId[mapId] = Object.assign({}, mapState);
+    mockState.byId[mapId] = _objectSpread2({}, mapState);
     mockState.byId[mapId].dimensions = dimensions;
     mockState.allIds.push(mapId);
   }
@@ -8153,7 +8605,7 @@ var mockStateMapWithLayer = function mockStateMapWithLayer(layer, mapId) {
       service: layer.service,
       dimensions: layer.dimensions
     }),
-    syncGroups: Object.assign({}, initialState$2, {
+    syncGroups: _objectSpread2(_objectSpread2({}, initialState$2), {}, {
       viewState: {
         timeslider: {
           groups: [{
@@ -8176,7 +8628,7 @@ var mockStateMapWithLayer = function mockStateMapWithLayer(layer, mapId) {
 };
 var mockLinkedState = function mockLinkedState() {
   return {
-    syncGroups: Object.assign({}, initialState$2, {
+    syncGroups: _objectSpread2(_objectSpread2({}, initialState$2), {}, {
       viewState: {
         timeslider: {
           groups: [{
@@ -8289,7 +8741,7 @@ var mockStateMapWithMultipleLayers = function mockStateMapWithMultipleLayers(lay
       allIds: ['serviceid_1']
     },
     layers: createMultipleLayersState(layers, mapId),
-    syncGroups: Object.assign({}, initialState$2, {
+    syncGroups: _objectSpread2(_objectSpread2({}, initialState$2), {}, {
       viewState: {
         timeslider: {
           groups: [{
@@ -8362,7 +8814,7 @@ var mockStateMapWithDimensions = function mockStateMapWithDimensions(layer, mapI
       mapId: mapId,
       service: layer.service,
       dimensions: layer.dimensions,
-      enabled: (layer == null ? void 0 : layer.enabled) !== undefined ? layer.enabled : true
+      enabled: (layer === null || layer === void 0 ? void 0 : layer.enabled) !== undefined ? layer.enabled : true
     })
   };
 };
@@ -8425,23 +8877,6 @@ var constants = /*#__PURE__*/Object.freeze({
   supportedComponentTypesForLinking: supportedComponentTypesForLinking
 });
 
-/* *
- * 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 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2025 - Finnish Meteorological Institute (FMI)
- * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
- * */
 var storeReducerMap = {
   webmap: mapReducer,
   services: serviceReducer,
@@ -8452,7 +8887,7 @@ var storeReducerMap = {
   drawingtools: drawingToolReducer,
   router: routerReducer
 };
-var storeMiddlewares = [mapListener.middleware, serviceListener.middleware, layersListener.middleware, metronomeListener.middleware, syncGroupsListener.middleware, genericListener.middleware, drawingToolListener.middleware, routerListener.middleware];
+var storeMiddlewares = [mapListener.middleware, serviceListener.middleware, layersListener.middleware, metronomeListener.middleware, syncGroupsListener.middleware, genericListener.middleware, drawingToolListener.middleware, routerListener.middleware, openlayersListener.middleware];
 var storeRootReducer = combineReducers(storeReducerMap);
 var createMockStore = function createMockStore(mockState) {
   return configureStore({
@@ -8476,26 +8911,16 @@ var getDefaultEnhancers = function getDefaultEnhancers() {
  * @param enableDevTools Set to true to enable redux devtools.
  * @returns A redux store you can use with the core components
  */
-var configureOpenGeoWebStore = function configureOpenGeoWebStore(preloadedState, extraReducers, extraMiddleWares, extraEnhancers, enableDevTools) {
-  if (preloadedState === void 0) {
-    preloadedState = {};
-  }
-  if (extraReducers === void 0) {
-    extraReducers = {};
-  }
-  if (extraMiddleWares === void 0) {
-    extraMiddleWares = [];
-  }
-  if (extraEnhancers === void 0) {
-    extraEnhancers = getDefaultEnhancers();
-  }
-  if (enableDevTools === void 0) {
-    enableDevTools = false;
-  }
+var configureOpenGeoWebStore = function configureOpenGeoWebStore() {
+  var preloadedState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var extraReducers = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var extraMiddleWares = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  var extraEnhancers = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : getDefaultEnhancers();
+  var enableDevTools = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   var allReducers = unifyReducerMaps([storeReducerMap, extraReducers]);
   var openGeoWebReducers = combineReducers(allReducers);
   // Combine middlewares
-  var middlewares = [mapListener.middleware, serviceListener.middleware, layersListener.middleware, genericListener.middleware].concat(extraMiddleWares);
+  var middlewares = [mapListener.middleware, serviceListener.middleware, layersListener.middleware, genericListener.middleware].concat(_toConsumableArray(extraMiddleWares));
   // Ensure we do not add middlewares twice
   var uniqueMiddlewares = Array.from(new Set(middlewares.map(function (obj) {
     return obj;
@@ -8504,11 +8929,11 @@ var configureOpenGeoWebStore = function configureOpenGeoWebStore(preloadedState,
     reducer: openGeoWebReducers,
     preloadedState: preloadedState,
     enhancers: function enhancers(defaultEnhancers) {
-      return [compose.apply(void 0, [].concat(defaultEnhancers, extraEnhancers))];
+      return [compose.apply(void 0, [].concat(_toConsumableArray(defaultEnhancers), _toConsumableArray(extraEnhancers)))];
     },
     devTools: enableDevTools,
     middleware: function middleware(getDefaultMiddleware) {
-      return [].concat(getDefaultMiddleware({
+      return _toConsumableArray(getDefaultMiddleware({
         serializableCheck: {
           warnAfter: 128
         },
@@ -8520,4 +8945,4 @@ var configureOpenGeoWebStore = function configureOpenGeoWebStore(preloadedState,
   });
 };
 
-export { IS_LEGEND_OPEN_BY_DEFAULT, configureOpenGeoWebStore, createMockStore, drawingToolActions, drawingToolListener, drawingToolReducer, selectors as drawingToolSelectors, filterLayers$1 as filterLayers, genericActions, genericListener, selectors$3 as genericSelectors, types as genericTypes, getSingularDrawtoolDrawLayerId, getUserAddedServices, initialState$2 as initialState, layerActions, layerReducer, selectors$6 as layerSelectors, types$3 as layerTypes, utils$1 as layerUtils, layersListener, constants as linkComponentTypesConstants, loadingIndicatorActions, constants$1 as loadingIndicatorConstants, loadingIndicatorReducer, selectors$2 as loadingIndicatorSelectors, mapActions, enums as mapEnums, mapListener, mapReducer, selectors$1 as mapSelectors, types$4 as mapTypes, mapUtils, metronomeListener, routerActions, routerListener, routerReducer, utils as routerUtils, selectorMemoizationOptions, serviceActions, serviceListener, serviceReducer, selectors$7 as serviceSelectors, types$5 as serviceTypes, setUserAddedServices, storeMiddlewares, storeReducerMap, storeTestSettings, storeTestUtils, utils$3 as storeUtils, constants$2 as syncConstants, syncGroupsActions, syncGroupsListener, syncGroupsReducer, selector as syncGroupsSelector, selectors$4 as syncGroupsSelectors, types$1 as syncGroupsTypes, types$1 as types, uiActions, uiReducer, selectors$5 as uiSelectors, types$2 as uiTypes, unifyReducerMaps, useSetupDialog, useUpdateSharedData };
+export { IS_LEGEND_OPEN_BY_DEFAULT, configureOpenGeoWebStore, createMockStore, createViewObjectForNewMap, drawingToolActions, drawingToolListener, drawingToolReducer, selectors as drawingToolSelectors, filterLayers$1 as filterLayers, genericActions, genericListener, selectors$3 as genericSelectors, types as genericTypes, getSingularDrawtoolDrawLayerId, getUserAddedServices, getViewObjectForMapId, getViewObjectForSyncGroup, initialState$2 as initialState, layerActions, layerReducer, selectors$6 as layerSelectors, types$3 as layerTypes, utils$1 as layerUtils, layersListener, constants as linkComponentTypesConstants, loadingIndicatorActions, constants$1 as loadingIndicatorConstants, loadingIndicatorReducer, selectors$2 as loadingIndicatorSelectors, mapActions, enums as mapEnums, mapListener, mapReducer, selectors$1 as mapSelectors, types$4 as mapTypes, mapUtils, metronomeListener, openlayersListener, routerActions, routerListener, routerReducer, utils as routerUtils, selectorMemoizationOptions, serviceActions, serviceListener, serviceReducer, selectors$7 as serviceSelectors, types$5 as serviceTypes, setUserAddedServices, storeMiddlewares, storeReducerMap, storeTestSettings, storeTestUtils, utils$3 as storeUtils, constants$2 as syncConstants, syncGroupsActions, syncGroupsListener, syncGroupsReducer, selector as syncGroupsSelector, selectors$4 as syncGroupsSelectors, types$1 as syncGroupsTypes, types$1 as types, uiActions, uiReducer, selectors$5 as uiSelectors, types$2 as uiTypes, unifyReducerMaps, useSetupDialog, useUpdateSharedData };