@opengeoweb/webmap-react 12.1.2 → 12.3.0

package/index.esm.js

@@ -1,4 +1,4 @@
-import { WMImageStore, privateWebMapUtils, webmapUtils, WMLayer, LayerType, WMInvalidDateValues, getCorrectWMSDimName, WMProj4Defs, tilesettings, legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, getPixelCoordFromLatLong, WMJSMAP_LONLAT_EPSGCODE, getLatLongFromPixelCoord, getWMJSMapById, debugLogger, DebugType, registerWMLayer, WMBBOX, getWMLayerById, WMJSMap } from '@opengeoweb/webmap';
+import { WMImageStore, privateWebMapUtils, webmapUtils, WMLayer, LayerType, WMInvalidDateValues, getCorrectWMSDimName, WMProj4Defs, tilesettings, legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, getPixelCoordFromLatLong, WMJSMAP_LONLAT_EPSGCODE, getLatLongFromPixelCoord, getWMJSMapById, debugLogger, DebugType, registerWMLayer, WMBBOX, getWMLayerById, WMJSMap, WEBMAP_NAMESPACE } from '@opengeoweb/webmap';
 export { WEBMAP_NAMESPACE, webmapTranslations } from '@opengeoweb/webmap';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
@@ -9,7 +9,7 @@ import LayerProperty from 'ol/layer/Property';
 import ImageSource, { getRequestExtent } from 'ol/source/Image';
 import ImageState from 'ol/ImageState';
 import { fromResolutionLike } from 'ol/resolution';
-import { without, isEqual, debounce, memoize, range, cloneDeep } from 'lodash';
+import { without, isEqual, throttle, memoize, range, debounce, cloneDeep } from 'lodash';
 import ImageWrapper, { load } from 'ol/Image';
 import { getImageSrc, getRequestParams, createLoader } from 'ol/source/wms';
 import { useQuery } from '@tanstack/react-query';
@@ -21,13 +21,13 @@ import { register } from 'ol/proj/proj4';
 import WMTSCapabilities from 'ol/format/WMTSCapabilities';
 import { optionsFromCapabilities } from 'ol/source/WMTS';
 import { View, Map, Feature, Collection } from 'ol';
+import { dateUtils, CustomTooltip, CanvasComponent, useWheelStopPropagation, ToolContainerDraggable, CustomIconButton, PROJECTION } from '@opengeoweb/shared';
 import { Vector } from 'ol/layer';
 import VectorSource from 'ol/source/Vector';
 import GeoJSON from 'ol/format/GeoJSON';
-import { CustomTooltip, CanvasComponent, useWheelStopPropagation, ToolContainerDraggable, CustomIconButton, dateUtils, PROJECTION } from '@opengeoweb/shared';
-import { t } from 'i18next';
+import 'i18next';
 import { useTranslation } from 'react-i18next';
-import { Paper, Box, Typography, Grid2, TextField, FormControl, InputLabel, Select, MenuItem, Icon as Icon$1, FormLabel, Switch, styled, Slider, useTheme } from '@mui/material';
+import { Paper, Box, Typography, Grid, TextField, FormControl, InputLabel, Select, MenuItem, Icon as Icon$1, FormLabel, Switch, styled, Slider, useTheme } from '@mui/material';
 import { Home, Add, Minus, List, Delete, Edit, DrawRegion, DrawPolygon, Location, DrawFIRLand, ArrowUp, Equalizer, DimensionsElevation, Link, LinkOff, Info, DimensionsOther, DimensionsRefTime, DimensionsTime, locationPath } from '@opengeoweb/theme';
 import * as turf from '@turf/turf';
 import { polygonToLine, booleanClockwise, rewind } from '@turf/turf';
@@ -283,18 +283,18 @@ function _classCallCheck(a, n) {
 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);
+    o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
   }
 }
 function _createClass(e, r, t) {
   return r && _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
-    writable: !1
+    writable: false
   }), 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  ) {
+    if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
       t && (r = t);
       var n = 0,
         F = function () {};
@@ -302,9 +302,9 @@ function _createForOfIteratorHelper(r, e) {
         s: F,
         n: function () {
           return n >= r.length ? {
-            done: !0
+            done: true
           } : {
-            done: !1,
+            done: false,
             value: r[n++]
           };
         },
@@ -317,8 +317,8 @@ function _createForOfIteratorHelper(r, e) {
     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;
+    a = true,
+    u = false;
   return {
     s: function () {
       t = t.call(r);
@@ -328,7 +328,7 @@ function _createForOfIteratorHelper(r, e) {
       return a = r.done, r;
     },
     e: function (r) {
-      u = !0, o = r;
+      u = true, o = r;
     },
     f: function () {
       try {
@@ -342,9 +342,9 @@ function _createForOfIteratorHelper(r, e) {
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
+    enumerable: true,
+    configurable: true,
+    writable: true
   }) : e[r] = t, e;
 }
 function _getPrototypeOf(t) {
@@ -357,11 +357,11 @@ function _inherits(t, e) {
   t.prototype = Object.create(e && e.prototype, {
     constructor: {
       value: t,
-      writable: !0,
-      configurable: !0
+      writable: true,
+      configurable: true
     }
   }), Object.defineProperty(t, "prototype", {
-    writable: !1
+    writable: false
   }), e && _setPrototypeOf(t, e);
 }
 function _isNativeReflectConstruct() {
@@ -383,15 +383,15 @@ function _iterableToArrayLimit(r, l) {
       i,
       u,
       a = [],
-      f = !0,
-      o = !1;
+      f = true,
+      o = false;
     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;
+      o = true, n = r;
     } finally {
       try {
         if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
@@ -421,7 +421,7 @@ function ownKeys(e, r) {
 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) {
+    r % 2 ? ownKeys(Object(t), true).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));
@@ -436,7 +436,7 @@ function _objectWithoutProperties(e, t) {
     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]);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
   }
   return i;
 }
@@ -444,7 +444,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.indexOf(n) >= 0) continue;
+    if (-1 !== e.indexOf(n)) continue;
     t[n] = r[n];
   }
   return t;
@@ -472,9 +472,9 @@ function _regeneratorRuntime() {
   function define(t, e, r) {
     return Object.defineProperty(t, e, {
       value: r,
-      enumerable: !0,
-      configurable: !0,
-      writable: !0
+      enumerable: true,
+      configurable: true,
+      writable: true
     }), t[e];
   }
   try {
@@ -567,7 +567,7 @@ function _regeneratorRuntime() {
         if ("throw" === i) throw a;
         return {
           value: t,
-          done: !0
+          done: true
         };
       }
       for (n.method = i, n.arg = a;;) {
@@ -618,7 +618,7 @@ function _regeneratorRuntime() {
   function Context(t) {
     this.tryEntries = [{
       tryLoc: "root"
-    }], t.forEach(pushTryEntry, this), this.reset(!0);
+    }], t.forEach(pushTryEntry, this), this.reset(true);
   }
   function values(e) {
     if (e || "" === e) {
@@ -628,8 +628,8 @@ function _regeneratorRuntime() {
       if (!isNaN(e.length)) {
         var o = -1,
           i = function next() {
-            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
-            return next.value = t, next.done = !0, next;
+            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = false, next;
+            return next.value = t, next.done = true, next;
           };
         return i.next = i;
       }
@@ -638,10 +638,10 @@ function _regeneratorRuntime() {
   }
   return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
     value: GeneratorFunctionPrototype,
-    configurable: !0
+    configurable: true
   }), o(GeneratorFunctionPrototype, "constructor", {
     value: GeneratorFunction,
-    configurable: !0
+    configurable: true
   }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
     var e = "function" == typeof t && t.constructor;
     return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
@@ -670,17 +670,17 @@ function _regeneratorRuntime() {
     return r.reverse(), function next() {
       for (; r.length;) {
         var t = r.pop();
-        if (t in e) return next.value = t, next.done = !1, next;
+        if (t in e) return next.value = t, next.done = false, next;
       }
-      return next.done = !0, next;
+      return next.done = true, next;
     };
   }, e.values = values, Context.prototype = {
     constructor: Context,
     reset: function (e) {
-      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
+      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = false, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
     },
     stop: function () {
-      this.done = !0;
+      this.done = true;
       var t = this.tryEntries[0].completion;
       if ("throw" === t.type) throw t.arg;
       return this.rval;
@@ -699,10 +699,10 @@ function _regeneratorRuntime() {
           var c = n.call(i, "catchLoc"),
             u = n.call(i, "finallyLoc");
           if (c && u) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
+            if (this.prev < i.catchLoc) return handle(i.catchLoc, true);
             if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
           } else if (c) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
+            if (this.prev < i.catchLoc) return handle(i.catchLoc, true);
           } else {
             if (!u) throw Error("try statement without catch or finally");
             if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
@@ -770,11 +770,11 @@ 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");
+    var i = e.call(t, r);
     if ("object" != typeof i) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return ("string" === r ? String : Number)(t);
+  return (String )(t);
 }
 function _toPropertyKey(t) {
   var i = _toPrimitive(t, "string");
@@ -970,7 +970,6 @@ var TimeAwareImageWrapper = /*#__PURE__*/function (_ImageWrapper) {
         };
       }
       var options = {
-        hidpi: false,
         serverType: 'mapserver'
       };
       var resolution = resolutionToLoad;
@@ -1147,27 +1146,6 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
       visible = _ref.visible;
     _classCallCheck(this, TimeawareImageSource);
     _this = _callSuper(this, TimeawareImageSource, [{}]);
-    // Debounce prefetch to add a slight delay before prefetching commences
-    _this.debouncedPrefetch = debounce(function (_ref2) {
-      var _this$_previousPrefet;
-      var extent = _ref2.extent,
-        resolution = _ref2.resolution,
-        pixelRatio = _ref2.pixelRatio,
-        projection = _ref2.projection;
-      // If the extent has changed => trigger prefetching
-      if (!_this._previousPrefetchExtent || !((_this$_previousPrefet = _this._previousPrefetchExtent) !== null && _this$_previousPrefet !== void 0 && _this$_previousPrefet.extent) || !equals(extent, _this._previousPrefetchExtent.extent) || _this._previousPrefetchExtent.layerName !== _this._layerName || _this._previousPrefetchExtent.styleName !== _this._styleName || _this._previousPrefetchExtent.timeStampsToPrefetch !== _this._timeStampsToPrefetch || _this._previousPrefetchExtent.dimProperties !== _this._dimProperties) {
-        _this._previousPrefetchExtent = {
-          extent: extent,
-          layerName: _this._layerName,
-          styleName: _this._styleName,
-          timeStampsToPrefetch: _this._timeStampsToPrefetch,
-          dimProperties: _this._dimProperties
-        };
-        // Clear old jobs
-        _this._prefetchWorkers.clearJobs();
-        _this.prefetch(extent, resolution, pixelRatio, projection);
-      }
-    }, 500);
     _this._wmsUrl = wmsUrl;
     _this._extraWMSParams = _objectSpread2({}, params);
     _this._layerName = layerName;
@@ -1179,7 +1157,11 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
     _this.prefetch = _this.prefetch.bind(_this);
     _this.hasImageForTimeValue = _this.hasImageForTimeValue.bind(_this);
     _this.loadImageForTimeValue = _this.loadImageForTimeValue.bind(_this);
-    _this.debouncedPrefetch = _this.debouncedPrefetch.bind(_this);
+    _this._conditionalPrefetch = _this._conditionalPrefetch.bind(_this);
+    _this.throttledPrefetch = throttle(_this._conditionalPrefetch, 500, {
+      leading: true,
+      trailing: true
+    });
     _this.triggerPrefetch = _this.triggerPrefetch.bind(_this);
     _this._imWrapperEmptyButLoading = initImageWrapper();
     _this._imWrapperForOlSource = initImageWrapper();
@@ -1190,6 +1172,28 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
   }
   _inherits(TimeawareImageSource, _ImageSource);
   return _createClass(TimeawareImageSource, [{
+    key: "_conditionalPrefetch",
+    value: function _conditionalPrefetch(_ref2) {
+      var _this$_previousPrefet;
+      var extent = _ref2.extent,
+        resolution = _ref2.resolution,
+        pixelRatio = _ref2.pixelRatio,
+        projection = _ref2.projection;
+      // If the extent has changed => trigger prefetching
+      if (!this._previousPrefetchExtent || !((_this$_previousPrefet = this._previousPrefetchExtent) !== null && _this$_previousPrefet !== void 0 && _this$_previousPrefet.extent) || !equals(extent, this._previousPrefetchExtent.extent) || this._previousPrefetchExtent.layerName !== this._layerName || this._previousPrefetchExtent.styleName !== this._styleName || this._previousPrefetchExtent.timeStampsToPrefetch !== this._timeStampsToPrefetch || this._previousPrefetchExtent.dimProperties !== this._dimProperties) {
+        this._previousPrefetchExtent = {
+          extent: extent,
+          layerName: this._layerName,
+          styleName: this._styleName,
+          timeStampsToPrefetch: this._timeStampsToPrefetch,
+          dimProperties: this._dimProperties
+        };
+        // Clear old jobs
+        this._prefetchWorkers.clearJobs();
+        this.prefetch(extent, resolution, pixelRatio, projection);
+      }
+    }
+  }, {
     key: "prefetch",
     value: function prefetch(extent, resolution, pixelRatio, projection) {
       var _this2 = this;
@@ -1211,13 +1215,14 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
   }, {
     key: "triggerPrefetch",
     value: function triggerPrefetch(extent, resolution, pixelRatio, projection) {
-      this.debouncedPrefetch({
-        that: this,
-        extent: extent,
-        resolution: resolution,
-        pixelRatio: pixelRatio,
-        projection: projection
-      });
+      if (this._timeStampsToPrefetch.length > 0) {
+        this.throttledPrefetch({
+          extent: extent,
+          resolution: resolution,
+          pixelRatio: pixelRatio,
+          projection: projection
+        });
+      }
     }
   }, {
     key: "getImage",
@@ -2081,7 +2086,8 @@ var WMSLayer = function WMSLayer(_ref) {
             LAYERS: layerName,
             STYLES: styleName
           }
-        })
+        }),
+        projection: projection
       })
     });
     map.addLayer(layer);
@@ -2138,10 +2144,7 @@ var baseLayerGrey = {
 };
 // Over Layers List
 var KNMIgeoservicesBaselayers = {
-  name: 'KNMIgeoservicesBaselayers',
-  url: 'https://geoservices.knmi.nl/wms?DATASET=baselayers&',
-  id: 'KNMIgeoservicesBaselayers'
-};
+  url: 'https://geoservices.knmi.nl/wms?DATASET=baselayers&'};
 var overLayer = {
   service: KNMIgeoservicesBaselayers.url,
   name: 'countryborders',
@@ -2801,24 +2804,37 @@ var useSetIntervalWhenVisible = function useSetIntervalWhenVisible(autoUpdate, r
  * 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)
+ * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
+initializeOpenLayersProjections();
 var useViewFromLayer = function useViewFromLayer(layerProps) {
   var baseView = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
     projection: 'EPSG:3857',
     zoom: 1,
     center: [0, 0]
   };
-  var viewRef = useRef(new View(baseView));
+  var viewRef = useRef(null);
+  if (viewRef.current === null) {
+    try {
+      viewRef.current = new View(baseView);
+    } catch (e) {
+      viewRef.current = new View({
+        projection: 'EPSG:3857',
+        zoom: 1,
+        center: [0, 0]
+      });
+      console.warn('Projection not supported');
+    }
+  }
   var wmLayer = useGetWMLayerInstance(layerProps.service, layerProps.name, layerProps.id);
   useEffect(function () {
     if (!wmLayer) {
       return;
     }
     var layerProjectionForCode = wmLayer.getProjection(viewRef.current.getProjection().getCode());
-    if (!layerProjectionForCode) {
+    if (!layerProjectionForCode || !layerProjectionForCode.bbox) {
       return;
     }
     viewRef.current.fit(layerProjectionForCode.bbox.getExtent());
@@ -2826,14 +2842,30 @@ var useViewFromLayer = function useViewFromLayer(layerProps) {
   return viewRef.current;
 };
 
+var USEANIMATIONFORLAYER_DEFAULT_NUMSTEPS = 48;
+var USEANIMATIONFORLAYER_DEFAULT_UPDATEINTERVALMS = 60000;
+var USEANIMATIONFORLAYER_DEFAULT_MSINHOUR = 3600000;
+// eslint-disable-next-line import/prefer-default-export
 var useAnimationForLayer = function useAnimationForLayer(layerProps, intervalInMs) {
-  var numStepsTillLatest = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 48;
-  var checkForUpdatesMs = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 60000;
+  var numStepsTillLatest = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : USEANIMATIONFORLAYER_DEFAULT_NUMSTEPS;
+  var checkForUpdatesMs = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : USEANIMATIONFORLAYER_DEFAULT_UPDATEINTERVALMS;
+  var now = dateUtils.getNowUtc().getTime();
   var animationStep = useRef(0);
   var _React$useState = React__default.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     timeValue = _React$useState2[0],
     setTimeValue = _React$useState2[1];
+  var _React$useState3 = React__default.useState({
+      timespan: {
+        start: now - USEANIMATIONFORLAYER_DEFAULT_MSINHOUR,
+        end: now,
+        step: USEANIMATIONFORLAYER_DEFAULT_MSINHOUR
+      },
+      isAnimating: true
+    }),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    timeSpan = _React$useState4[0],
+    setTimeSpan = _React$useState4[1];
   var wmLayer = useGetWMLayerInstance(layerProps.service, layerProps.name, layerProps.id);
   var trigger = React__default.useCallback(function () {
     animationStep.current += 1;
@@ -2850,6 +2882,36 @@ var useAnimationForLayer = function useAnimationForLayer(layerProps, intervalInM
     }
   }, [numStepsTillLatest, wmLayer]);
   useSetIntervalWhenVisible(trigger, intervalInMs);
+  var calculateTimeSpan = React__default.useCallback(function () {
+    var timeDim = wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.getDimension('time');
+    if (!timeDim || timeDim.size() < 2) {
+      return;
+    }
+    var animStartTimeStep = Math.max(0, timeDim.size() - numStepsTillLatest);
+    var lastTimeStep = Math.max(0, timeDim.size() - 1);
+    // There are no timesteps available
+    if (lastTimeStep <= animStartTimeStep) {
+      return;
+    }
+    var secondTolastTimeStep = Math.max(0, timeDim.size() - 2);
+    var timeResolution = timeDim.getValueForIndexAsTime(lastTimeStep) - timeDim.getValueForIndexAsTime(secondTolastTimeStep);
+    var newTimeSpan = {
+      timespan: {
+        start: timeDim.getValueForIndexAsTime(animStartTimeStep),
+        end: timeDim.getValueForIndexAsTime(lastTimeStep),
+        step: timeResolution
+      },
+      isAnimating: true
+    };
+    if (timeValue === '') {
+      setTimeValue(timeDim.getValueForIndex(animStartTimeStep));
+    }
+    setTimeSpan(newTimeSpan);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [numStepsTillLatest, wmLayer]);
+  useEffect(function () {
+    calculateTimeSpan();
+  }, [calculateTimeSpan, wmLayer]);
   var refetchLayer = React__default.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
@@ -2857,16 +2919,22 @@ var useAnimationForLayer = function useAnimationForLayer(layerProps, intervalInM
           _context.next = 2;
           return wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.parseLayer(true);
         case 2:
+          calculateTimeSpan();
+        case 3:
         case "end":
           return _context.stop();
       }
     }, _callee);
-  })), [wmLayer]);
+  })), [calculateTimeSpan, wmLayer]);
+  // eslint-disable-next-line @typescript-eslint/no-misused-promises
   useSetIntervalWhenVisible(refetchLayer, checkForUpdatesMs);
-  return [{
-    name: 'time',
-    currentValue: timeValue
-  }];
+  return {
+    dimensions: [{
+      name: 'time',
+      currentValue: timeValue
+    }],
+    timeContext: timeSpan
+  };
 };
 
 var TiledWMSLayer = function TiledWMSLayer(_ref) {
@@ -3209,7 +3277,8 @@ var OpenLayersFeatureLayer = function OpenLayersFeatureLayer(_ref) {
 
 var WEBMAP_REACT_NAMESPACE = 'webmapreact';
 var useWebmapReactTranslation = function useWebmapReactTranslation() {
-  return useTranslation(WEBMAP_REACT_NAMESPACE);
+  var ns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : WEBMAP_REACT_NAMESPACE;
+  return useTranslation(ns);
 };
 
 var LegendLayout = function LegendLayout(_ref) {
@@ -3543,7 +3612,7 @@ var MapControls = function MapControls(_ref) {
       userSelect: 'none'
     }
   }, props), {}, {
-    children: jsx(Grid2, {
+    children: jsx(Grid, {
       sx: {
         '& > button': {
           marginBottom: 1
@@ -6013,7 +6082,7 @@ var GeoJSONTextField = function GeoJSONTextField(_ref) {
       setValidity(false);
     }
   };
-  return jsx(Grid2, {
+  return jsx(Grid, {
     size: {
       xs: 12
     },
@@ -6055,7 +6124,7 @@ var FeatureLayers = function FeatureLayers(_ref) {
       label: "".concat(index + 1, ": ").concat(geojson.features[index].geometry.type)
     };
   }) : [];
-  return jsx(Grid2, {
+  return jsx(Grid, {
     size: {
       sm: 12
     },
@@ -6100,7 +6169,7 @@ var EditModeButton = function EditModeButton(_ref) {
   var isInEditMode = _ref.isInEditMode,
     drawMode = _ref.drawMode,
     onToggleEditMode = _ref.onToggleEditMode;
-  return jsx(Grid2, {
+  return jsx(Grid, {
     size: {
       xs: 12
     },
@@ -6648,7 +6717,7 @@ var StoryLayoutGrid = function StoryLayoutGrid(_ref) {
           height: '100%',
           padding: 2
         },
-        children: jsx(Grid2, {
+        children: jsx(Grid, {
           spacing: 2,
           container: true,
           children: children
@@ -6712,7 +6781,7 @@ var IntersectionSelect = function IntersectionSelect(_ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     activeIntersection = _React$useState2[0],
     setActiveIntersection = _React$useState2[1];
-  return jsx(Grid2, {
+  return jsx(Grid, {
     size: {
       sm: 12
     },
@@ -7714,13 +7783,9 @@ var shapeButtonNL = {
   selectionType: firSelectionType
 };
 var shapeButtonBE = {
-  drawModeId: 'fir-tool-BE',
   value: DRAWMODE.POLYGON,
   title: 'Custom FIR BE polygon',
-  shape: intersectionShapeBE,
-  isSelectable: false,
-  selectionType: firSelectionType
-};
+  shape: intersectionShapeBE};
 var exampleIntersectionsMultiDrawTool = [{
   title: 'NL',
   geojson: shapeButtonNL.shape
@@ -9103,7 +9168,10 @@ var getLayerUpdateInfo = function getLayerUpdateInfo(wmLayer, mapId) {
       origin: origin,
       layerId: wmLayer.id,
       dimensions: layerDimensions
-    }
+    },
+    error: wmLayer.hasError ? {
+      layerId: wmLayer.id
+    } : undefined
   };
   return updateObject;
 };
@@ -10407,6 +10475,7 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
       display: 'flex',
       justifyContent: 'center',
       left: '50px',
+      top: '70px',
       zIndex: 10
     },
     children: jsxs("div", {
@@ -10555,7 +10624,7 @@ var DimensionSelectDialog = function DimensionSelectDialog(_ref) {
       style: {
         padding: 4
       },
-      children: jsx(Grid2, {
+      children: jsx(Grid, {
         container: true,
         direction: "row",
         children: children
@@ -10700,7 +10769,7 @@ var MapDimensionSelect = function MapDimensionSelect(_ref2) {
   var marks = marksByDimension(t, wmsDimension);
   var isLayerDimensionSynced = layerDimension.synced !== undefined && layerDimension.synced === true;
   var tooltipTitle = isLayerDimensionSynced ? t('webmap-react-click-disconnect') : t('webmap-react-click-connect');
-  return jsxs(Grid2, {
+  return jsxs(Grid, {
     size: {
       xs: 'auto'
     },
@@ -10786,15 +10855,15 @@ var LayerInfoList = function LayerInfoList(_ref) {
       variant: "body2",
       sx: textStyleWithMargin,
       children: "-"
-    }) : jsx(Grid2, {
+    }) : jsx(Grid, {
       container: true,
       direction: "column",
       children: list.map(function (item) {
         return jsxs("div", {
-          children: [jsxs(Grid2, {
+          children: [jsxs(Grid, {
             container: true,
             direction: "row",
-            children: [item.icon, jsx(Grid2, {
+            children: [item.icon, jsx(Grid, {
               sx: {
                 marginLeft: '10px'
               },
@@ -10804,7 +10873,7 @@ var LayerInfoList = function LayerInfoList(_ref) {
                 children: [item.label, ":"]
               })
             })]
-          }), jsx(Grid2, {
+          }), jsx(Grid, {
             container: true,
             direction: "row",
             sx: {
@@ -11108,6 +11177,8 @@ var HoldShiftToZoomMessage = function HoldShiftToZoomMessage() {
     showMessage = _useState2[0],
     setShowMessage = _useState2[1];
   var timerRef = useRef();
+  var _useWebmapReactTransl = useWebmapReactTranslation(WEBMAP_NAMESPACE),
+    t = _useWebmapReactTransl.t;
   useEffect(function () {
     var updateScroll = function updateScroll(e) {
       if (e.deltaY) {
@@ -11157,7 +11228,8 @@ var OpenLayersMapView = function OpenLayersMapView(_ref) {
     _ref$passiveMap = _ref.passiveMap,
     passiveMap = _ref$passiveMap === void 0 ? false : _ref$passiveMap,
     _ref$holdShiftToScrol = _ref.holdShiftToScroll,
-    holdShiftToScroll = _ref$holdShiftToScrol === void 0 ? false : _ref$holdShiftToScrol;
+    holdShiftToScroll = _ref$holdShiftToScrol === void 0 ? false : _ref$holdShiftToScrol,
+    mapId = _ref.mapId;
   var mapRef = useRef(null);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -11169,7 +11241,7 @@ var OpenLayersMapView = function OpenLayersMapView(_ref) {
     zoom: 1,
     center: [0, 0]
   }));
-  var mapView = view || viewRef.current;
+  var mapView = view && view.getCenter() ? view : viewRef.current;
   useEffect(function () {
     if (!mapRef.current) {
       return function () {};
@@ -11248,6 +11320,7 @@ var OpenLayersMapView = function OpenLayersMapView(_ref) {
   return jsx(MapContext.Provider, {
     value: memoizedMapContext,
     children: jsxs("div", {
+      id: "mapcontainer_".concat(mapId),
       ref: mapRef,
       "data-testid": "openlayers-mapview",
       role: "application",
@@ -11526,7 +11599,7 @@ var FEATURE_VERTICE_HANDLE_IMAGE = new Circle({
 });
 var ICON_LOCATIONMARKER = createIconStyle(locationPath, {
   render: {
-    fillStyle: '#000'
+    fillStyle: '#051039'
   },
   icon: {
     anchor: [0.5, 1]
@@ -11612,6 +11685,29 @@ var FEATURE_EDR_HOVER = [new Style$1({
     width: 1.5
   })
 })];
+var FEATURE_MY_LOCATION = new Style$1({
+  renderer: function renderer(pixelCoordinates, state) {
+    var ctx = state.context;
+    var coord = pixelCoordinates;
+    ctx.save();
+    // Draw outer circle with shadow
+    ctx.strokeStyle = '#fff';
+    ctx.fillStyle = '#fff';
+    ctx.shadowColor = '#00000080';
+    ctx.shadowBlur = 10;
+    ctx.beginPath();
+    ctx.arc(coord[0], coord[1], 24, 0, 2 * Math.PI);
+    ctx.fill();
+    ctx.shadowBlur = 0;
+    // Draw inner circle
+    ctx.fillStyle = '#186dff';
+    ctx.beginPath();
+    ctx.arc(coord[0], coord[1], 18, 0, 2 * Math.PI);
+    ctx.fill();
+    // Reset transformations
+    ctx.restore();
+  }
+});
 var labelOptions = {
   font: '16px Roboto',
   padding: [8, 8, 8, 8],
@@ -11646,6 +11742,17 @@ var multiPolygonLabelBaseStyle = new Style$1({
     return largestPolygon.getInteriorPoint();
   }
 });
+// MultiLineStrings need separate handling to only draw single label
+var multiLineStringLabelBaseStyle = new Style$1({
+  text: new Text(labelOptions),
+  geometry: function geometry(feature) {
+    var lines = feature.getGeometry().getLineStrings();
+    var longestLine = lines.reduce(function (prev, curr) {
+      return prev.getLength() > curr.getLength() ? prev : curr;
+    });
+    return longestLine;
+  }
+});
 var textLabelStyle = function textLabelStyle(text) {
   var _labelBaseStyle$getTe;
   (_labelBaseStyle$getTe = labelBaseStyle.getText()) === null || _labelBaseStyle$getTe === void 0 || _labelBaseStyle$getTe.setText(text);
@@ -11656,31 +11763,16 @@ var multiPolygonLabelStyle = function multiPolygonLabelStyle(text) {
   (_multiPolygonLabelBas = multiPolygonLabelBaseStyle.getText()) === null || _multiPolygonLabelBas === void 0 || _multiPolygonLabelBas.setText(text);
   return multiPolygonLabelBaseStyle;
 };
+var multiLineStringLabelStyle = function multiLineStringLabelStyle(text) {
+  var _multiLineStringLabel;
+  (_multiLineStringLabel = multiLineStringLabelBaseStyle.getText()) === null || _multiLineStringLabel === void 0 || _multiLineStringLabel.setText(text);
+  return multiLineStringLabelBaseStyle;
+};
 var stylesByMapFeatureClass = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, MapFeatureClass.GenericMarker, function (f) {
   return !f.get('hover') ? ICON_LOCATIONMARKER : [ICON_LOCATIONMARKER, textLabelStyle(f.getProperties().name)];
-}), MapFeatureClass.MyLocation, [
-// Outer circle
-new Style$1({
-  image: new Circle({
-    radius: 12,
-    stroke: new Stroke({
-      color: 'black',
-      width: 1
-    }),
-    fill: new Fill({
-      color: '#8888ff'
-    })
-  })
-}),
-// Inner circle
-new Style$1({
-  image: new Circle({
-    radius: 2,
-    fill: new Fill({
-      color: '#000'
-    })
-  })
-})]), MapFeatureClass.ObservationStation, function (f) {
+}), MapFeatureClass.MyLocation, function (feature) {
+  return !feature.get('hover') ? FEATURE_MY_LOCATION : [FEATURE_MY_LOCATION, textLabelStyle(feature.getProperties().name)];
+}), MapFeatureClass.ObservationStation, function (f) {
   return !f.get('hover') ? FEATURE_OBSERVATIONSTATION : [].concat(FEATURE_OBSERVATIONSTATION_HOVER, [textLabelStyle(f.getProperties().name)]);
 }), MapFeatureClass.EDRFeature, function (f) {
   return !f.get('hover') ? FEATURE_EDR : [].concat(FEATURE_EDR_HOVER, [textLabelStyle(f.getProperties().name)]);
@@ -11751,22 +11843,49 @@ var inlineFeatureStyle = function inlineFeatureStyle(f) {
   return styles;
 };
 var genericOpenLayersFeatureStyle = function genericOpenLayersFeatureStyle(f, resolution) {
-  var _f$getProperties = f.getProperties(),
-    hidden = _f$getProperties.hidden,
-    fill = _f$getProperties.fill,
-    stroke = _f$getProperties.stroke;
+  var props = f.getProperties();
+  var hidden = props.hidden,
+    fill = props.fill,
+    stroke = props.stroke,
+    hover = props.hover,
+    mapFeatureClass = props.mapFeatureClass,
+    showNameOnHover = props.showNameOnHover,
+    name = props.name,
+    geometry = props.geometry,
+    selectionType = props.selectionType;
   if (hidden === true) {
     return [];
   }
+  var shouldHighlight = mapFeatureClass !== MapFeatureClass.ObservationStation && !showNameOnHover && selectionType !== 'fir';
+  // Highlight map polygons on hover
+  if (hover && shouldHighlight) {
+    return new Style$1({
+      stroke: new Stroke({
+        color: stroke || '#E27D00',
+        width: 3
+      }),
+      fill: new Fill({
+        color: fill || 'rgba(226, 125, 0, 0.6)'
+      }),
+      zIndex: 9999
+    });
+  }
+  if (hover && showNameOnHover && (fill || stroke)) {
+    var type = geometry.getType();
+    switch (type) {
+      case 'MultiPolygon':
+        return [].concat(_toConsumableArray(inlineFeatureStyle(f)), [multiPolygonLabelStyle(name)]);
+      case 'MultiLineString':
+        return [].concat(_toConsumableArray(inlineFeatureStyle(f)), [multiLineStringLabelStyle(name)]);
+      default:
+        return [].concat(_toConsumableArray(inlineFeatureStyle(f)), [textLabelStyle(name)]);
+    }
+  }
   if (fill || stroke) {
     return inlineFeatureStyle(f);
   }
-  var mapFeatureClass = f.getProperties().mapFeatureClass || MapFeatureClass["default"];
-  var styleOrFunction = stylesByMapFeatureClass[mapFeatureClass];
-  if (typeof styleOrFunction === 'function') {
-    return styleOrFunction(f, resolution);
-  }
-  return styleOrFunction;
+  var styleOrFunction = stylesByMapFeatureClass[mapFeatureClass || MapFeatureClass["default"]];
+  return typeof styleOrFunction === 'function' ? styleOrFunction(f, resolution) : styleOrFunction;
 };
 // Used for polygons, boxes and linestrings
 var drawPolygonLikeFeatureStyle = function drawPolygonLikeFeatureStyle(f) {
@@ -12121,4 +12240,4 @@ var isOpenLayersEnabled = function isOpenLayersEnabled() {
   return _useOpenLayers;
 };
 
-export { ClickOnMapTool, DRAWMODE, DefaultBaseLayers, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EDITMODE, EditModeButton as EditModeButtonField, FEATURE_FILL, FEATURE_STROKE, FEATURE_STROKE_EDIT, FEATURE_VERTICES_EDIT_HANDLES, FEATURE_VERTICE_HANDLE_IMAGE, FEATURE_VERTICE_IMAGE, FeatureLayers, GeoJSONTextField, ICON_LOCATIONMARKER, ICON_LOCATIONMARKER_MODIFY, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MINUTE_TO_MILLISECOND, MapContext, MapControlButton, MapControls, MapDimensionSelect, MapDrawContainer, MapFeatureClass, MapTime, MapView, MapViewLayer, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, OpenLayersFeatureLayer, OpenLayersGetFeatureInfo, OpenLayersLayer, OpenLayersMapDraw, OpenLayersMapView, OpenLayersZoomControl, Proj4js, radarGetCapabilities_spec as RadarGetCapabilities, ReactMapView, ReactMapViewLayer, SelectField, StoryLayoutGrid, TimeContext, TimeawareImageSource, WEBMAP_REACT_NAMESPACE, WMSLayer, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, addWMLayerPropsBasedOnChildProps, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, checkHoverFeatures, convertGeoCoordsToScreenCoords, createIconStyle, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, dimensionConfig, distance, drawPolyStoryStyles, drawStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, findClosestCoords, firSelectionType, formatTime, genericOpenLayersFeatureStyle, geowebColorToOpenLayersColor, getCurrentDimensionValue, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getDrawFunctionFromStore, getFeatureCollection, getFeatureExtent, getFeatureLayers, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getPixelCoordFromGeoCoord, getProj4, getTimeDimension, getToolIcon, initializeOpenLayersProjections, inlineFeatureStyle, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isAGeoJSONLayer, isAMapLayer, isBetween, isGeoJSONFeatureCreatedByTool, isGeoJSONGeometryEmpty, isOpenLayersEnabled, isPointFeatureCollection, lineString, lineStringCollection, makeLayerPropListFromChildren, makeView, marksByDimension, modifyStyles, moveFeature, multiPolygonLabelStyle, opacityOptions, openLayersGetMapImageStore, orderLayers, parseWMJSLayer, projectorCache, publicLayers, publicServices, registerDrawFunction, removeWMLayerFromMap, rewindGeometry, selectPreferredWMSProjection, setMapCenter, setOpenLayersEnabled, setViewFromExtent, setViewFromFeature, setWMLayerPropsBasedOnChildProps, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleGeometryCollectionGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, textLabelStyle, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useAnimationForLayer, useGeoJSON, useGetWMLayerInstance, useGetWMSLayerStyleList, useIconStyle, useMapDrawTool, useProjection, useQueryGetWMSGetCapabilities, useQueryGetWMSLayer, useQueryGetWMSLayers, useQueryGetWMSLayersTree, useQueryGetWMSServiceInfo, useQueryWMTSGetCapabilities, useSetIntervalWhenVisible, useViewFromLayer, viewUtils, webmapReactTranslations };
+export { ClickOnMapTool, DRAWMODE, DefaultBaseLayers, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EDITMODE, EditModeButton as EditModeButtonField, FEATURE_FILL, FEATURE_STROKE, FEATURE_STROKE_EDIT, FEATURE_VERTICES_EDIT_HANDLES, FEATURE_VERTICE_HANDLE_IMAGE, FEATURE_VERTICE_IMAGE, FeatureLayers, GeoJSONTextField, ICON_LOCATIONMARKER, ICON_LOCATIONMARKER_MODIFY, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MINUTE_TO_MILLISECOND, MapContext, MapControlButton, MapControls, MapDimensionSelect, MapDrawContainer, MapFeatureClass, MapTime, MapView, MapViewLayer, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, OpenLayersFeatureLayer, OpenLayersGetFeatureInfo, OpenLayersLayer, OpenLayersMapDraw, OpenLayersMapView, OpenLayersZoomControl, Proj4js, radarGetCapabilities_spec as RadarGetCapabilities, ReactMapView, ReactMapViewLayer, SelectField, StoryLayoutGrid, TimeContext, TimeawareImageSource, WEBMAP_REACT_NAMESPACE, WMSLayer, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, addWMLayerPropsBasedOnChildProps, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, checkHoverFeatures, convertGeoCoordsToScreenCoords, createIconStyle, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, dimensionConfig, distance, drawPolyStoryStyles, drawStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, findClosestCoords, firSelectionType, formatTime, genericOpenLayersFeatureStyle, geowebColorToOpenLayersColor, getCurrentDimensionValue, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getDrawFunctionFromStore, getFeatureCollection, getFeatureExtent, getFeatureLayers, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getPixelCoordFromGeoCoord, getProj4, getTimeDimension, getToolIcon, initializeOpenLayersProjections, inlineFeatureStyle, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isAGeoJSONLayer, isAMapLayer, isBetween, isGeoJSONFeatureCreatedByTool, isGeoJSONGeometryEmpty, isOpenLayersEnabled, isPointFeatureCollection, lineString, lineStringCollection, makeLayerPropListFromChildren, makeView, marksByDimension, modifyStyles, moveFeature, multiLineStringLabelStyle, multiPolygonLabelStyle, opacityOptions, openLayersGetMapImageStore, orderLayers, parseWMJSLayer, projectorCache, publicLayers, publicServices, registerDrawFunction, removeWMLayerFromMap, rewindGeometry, selectPreferredWMSProjection, setMapCenter, setOpenLayersEnabled, setViewFromExtent, setViewFromFeature, setWMLayerPropsBasedOnChildProps, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleGeometryCollectionGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, textLabelStyle, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useAnimationForLayer, useGeoJSON, useGetWMLayerInstance, useGetWMSLayerStyleList, useIconStyle, useMapDrawTool, useProjection, useQueryGetWMSGetCapabilities, useQueryGetWMSLayer, useQueryGetWMSLayers, useQueryGetWMSLayersTree, useQueryGetWMSServiceInfo, useQueryWMTSGetCapabilities, useSetIntervalWhenVisible, useViewFromLayer, viewUtils, webmapReactTranslations };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap-react",
-  "version": "12.1.2",
+  "version": "12.3.0",
   "description": "GeoWeb react wrapper for webmap",
   "license": "Apache-2.0",
   "repository": {
@@ -8,10 +8,10 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/webmap": "12.1.2",
+    "@opengeoweb/webmap": "12.3.0",
     "axios": "^1.7.7",
-    "@opengeoweb/theme": "12.1.2",
-    "@opengeoweb/shared": "12.1.2",
+    "@opengeoweb/theme": "12.3.0",
+    "@opengeoweb/shared": "12.3.0",
     "lodash": "^4.17.21",
     "ol": "^10.4.0",
     "proj4": "^2.9.2",
@@ -19,9 +19,9 @@
     "immer": "^10.0.3",
     "react-resize-detector": "^9.1.0",
     "i18next": "^23.11.5",
-    "@mui/material": "^6.1.1",
+    "@mui/material": "^7.0.1",
     "react-i18next": "^15.1.1",
-    "@tanstack/react-query": "^5.62.7"
+    "@tanstack/react-query": "^5.69.2"
   },
   "peerDependencies": {
     "react": "18",

package/src/lib/components/OpenLayers/OlStyles.d.ts

@@ -1,6 +1,7 @@
+import { ColorLike } from 'ol/colorlike';
+import { FeatureLike } from 'ol/Feature';
 import { Circle, Fill, Stroke } from 'ol/style';
 import Style, { StyleFunction, StyleLike } from 'ol/style/Style';
-import { ColorLike } from 'ol/colorlike';
 import { DrawModeValue } from '../MapDrawTool';
 export declare enum MapFeatureClass {
     MyLocation = "MyLocation",
@@ -20,8 +21,9 @@ export declare const ICON_LOCATIONMARKER_MODIFY: Style;
 export declare const FEATURE_VERTICES_EDIT_HANDLES: Style;
 export declare const textLabelStyle: (text: string) => Style;
 export declare const multiPolygonLabelStyle: (text: string) => Style;
+export declare const multiLineStringLabelStyle: (text: string) => Style;
 export declare const geowebColorToOpenLayersColor: (color: string, opacity?: string | number) => ColorLike;
-export declare const inlineFeatureStyle: StyleFunction;
+export declare const inlineFeatureStyle: (f: FeatureLike) => Style[];
 export declare const genericOpenLayersFeatureStyle: StyleFunction;
 export declare const drawStyles: Record<DrawModeValue, StyleLike>;
 export declare const modifyStyles: Record<DrawModeValue, Style[]>;

package/src/lib/components/OpenLayers/component/OpenLayersMapView.d.ts

@@ -8,5 +8,6 @@ export interface OpenLayersMapViewProps {
     isMouseWheelZoomEnabled?: boolean;
     passiveMap?: boolean;
     holdShiftToScroll?: boolean;
+    mapId?: string;
 }
 export declare const OpenLayersMapView: React.FC<OpenLayersMapViewProps>;

package/src/lib/components/OpenLayers/utils/TimeawareImageSource.d.ts

@@ -27,11 +27,12 @@ export declare class TimeawareImageSource extends ImageSource {
     private _imWrapperForAltImage;
     private _styleName;
     private _layerName;
-    private debouncedPrefetch;
     private _wantedPixelRatio;
     private _wantedProjection;
     private _imWrapperForPrefetch;
+    private throttledPrefetch;
     constructor({ wmsUrl, timeStampsToPrefetch, layerName, styleName, dimProps, params, visible, }: TimeawareImageSourceOptions);
+    private _conditionalPrefetch;
     private prefetch;
     triggerPrefetch(extent: Extent, resolution: number, pixelRatio: number, projection: Projection): void;
     getImage(extent: Extent, resolution: number, pixelRatio: number, projection: Projection): ImageWrapper;

package/src/lib/components/ReactMapView/types.d.ts

@@ -92,4 +92,7 @@ export interface UpdateLayerInfoPayload {
     mapDimensions?: UpdateAllMapDimensionsPayload;
     layerStyle?: SetLayerStylePayload;
     layerDimensions?: SetLayerDimensionsPayload;
+    error?: {
+        layerId: string;
+    } | undefined;
 }

package/src/lib/hooks/useAnimationForLayer.d.ts

@@ -1,3 +1,9 @@
 import { Dimension } from '@opengeoweb/webmap';
 import type { OpenLayersLayerProps } from '../components/OpenLayers/layers';
-export declare const useAnimationForLayer: (layerProps: OpenLayersLayerProps, intervalInMs: number, numStepsTillLatest?: number, checkForUpdatesMs?: number) => Dimension[];
+import { TimeContextType } from '../components/OpenLayers/types/Timespan';
+interface UseAnimationForLayerProps {
+    dimensions: Dimension[];
+    timeContext: TimeContextType;
+}
+export declare const useAnimationForLayer: (layerProps: OpenLayersLayerProps, intervalInMs: number, numStepsTillLatest?: number, checkForUpdatesMs?: number) => UseAnimationForLayerProps;
+export {};

package/src/lib/hooks/useAnimationForLayer.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/src/lib/hooks/useViewFromLayer.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/src/lib/utils/i18n.d.ts

@@ -1,7 +1,7 @@
-import i18n from 'i18next';
+import i18n, { Namespace } from 'i18next';
 import { UseTranslationResponse } from 'react-i18next';
 export declare const WEBMAP_REACT_NAMESPACE = "webmapreact";
 export declare const initWebmapReactTestI18n: () => void;
-export declare const translateKeyOutsideComponents: (key: string, params?: Record<string, string | number> | undefined) => string;
-export declare const useWebmapReactTranslation: () => UseTranslationResponse<typeof WEBMAP_REACT_NAMESPACE, typeof i18n>;
+export declare const translateKeyOutsideComponents: (key: string, params?: Record<string, string | number> | undefined, ns?: string) => string;
+export declare const useWebmapReactTranslation: (ns?: Namespace) => UseTranslationResponse<Namespace, import("i18next").i18n>;
 export { i18n };