@opengeoweb/webmap-react 14.0.0 → 14.1.0

package/index.esm.js

@@ -7,7 +7,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, throttle, debounce, memoize, range } from 'lodash';
+import { without, isEqual, throttle, debounce, memoize, range, cloneDeep } from 'lodash';
 import ImageWrapper, { load } from 'ol/Image';
 import { getImageSrc, getRequestParams, createLoader } from 'ol/source/wms';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -15,14 +15,13 @@ import { CustomTooltip, CanvasComponent, useWheelStopPropagation, ToolContainerD
 import 'i18next';
 import { useTranslation } from 'react-i18next';
 import { Paper, Box, Typography, useTheme, Grid, TextField, FormControl, InputLabel, Select, MenuItem, Icon as Icon$2, FormLabel, Switch, styled, Slider } from '@mui/material';
-import { useQuery } from '@tanstack/react-query';
+import { queryOptions, useQuery } from '@tanstack/react-query';
 import { Style, Icon as Icon$1, Circle, Stroke, Fill, Text } from 'ol/style';
 import { Point, MultiPoint, LineString, Polygon } from 'ol/geom';
 import { arrowUpPath, Home, Add, Minus, List, Delete, Edit, DrawRegion, DrawPolygon, Location, DrawFIRLand, ArrowUp, SandStorm, Equalizer, DimensionsElevation, Link, LinkOff, Info, DimensionsOther, DimensionsRefTime, DimensionsTime, locationPath } from '@opengeoweb/theme';
 import { http, HttpResponse } from 'msw';
 import proj4 from 'proj4';
-import * as turf from '@turf/turf';
-import { polygonToLine, booleanClockwise, rewind } from '@turf/turf';
+import { feature, simplify, booleanPointInPolygon, intersect, cleanCoords, polygonToLine, booleanClockwise, rewind, bbox, toWgs84, toMercator, coordEach } from '@turf/turf';
 import { produce } from 'immer';
 import Box$1 from '@mui/material/Box';
 import Typography$1 from '@mui/material/Typography';
@@ -1115,6 +1114,7 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
     });
     _this._layerId = layerId;
     _this.triggerPrefetch = _this.triggerPrefetch.bind(_this);
+    _this.cancelPrefetch = _this.cancelPrefetch.bind(_this);
     _this._imWrapperEmptyButLoading = initImageWrapper();
     _this._imWrapperForOlSource = initImageWrapper();
     _this._imWrapperForAltImage = initImageWrapper();
@@ -1225,6 +1225,11 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
         this.throttledPrefetch();
       }
     }
+  }, {
+    key: "cancelPrefetch",
+    value: function cancelPrefetch() {
+      this._prefetchWorkers.clearJobs();
+    }
   }, {
     key: "getImage",
     value: function getImage(extent, resolution, pixelRatio, projection) {
@@ -1441,13 +1446,15 @@ var timeSpanToTimeList = function timeSpanToTimeList(timespan) {
     }
     if (numStepsToFetch > MAX_NUMBER_STEPS_IN_TIME_SLIDER_TO_PREFETCH) {
       var msg = "too many steps to prefetch: ".concat(numStepsToFetch);
-      throw new RangeError(msg);
+      console.warn(msg);
+      return [];
     }
     var stepsToCheck = range(timespan.start, timespan.end + timespan.step, timespan.step);
     // Find out which dimension time values are available for prefetching
     if (stepsToCheck.length > MAX_NUMBER_STEPS_IN_TIME_SLIDER_TO_PREFETCH) {
       var _msg = "too many steps to prefetch: ".concat(stepsToCheck.length);
-      throw new RangeError(_msg);
+      console.warn(_msg);
+      return [];
     }
     return stepsToCheck;
   }
@@ -1553,12 +1560,40 @@ var LegendLayout = function LegendLayout(_ref) {
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
+// This function is a copy of /libs/api/src/utils.ts which cannot be used here due to circular dependency
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type, @typescript-eslint/explicit-module-boundary-types
+var handleResponse = function handleResponse(response) {
+  if (response.ok) {
+    return response.json().then(function (json) {
+      return json || response.headers;
+    })["catch"](function () {
+      // No JSON response
+    });
+  }
+  return response.json()["catch"](function () {
+    // Couldn't parse the JSON
+    throw new Error("".concat(response.status));
+  }).then(function (json) {
+    // Got valid JSON with error response, use it
+    if (json) {
+      var message = json.message;
+      if (message) {
+        throw new Error(message, {
+          cause: response.status
+        });
+      }
+      var result = JSON.stringify(json);
+      throw new Error(result);
+    }
+    throw new Error("".concat(response.status));
+  });
+};
 var joinUrlParams = function joinUrlParams(params) {
   return params.filter(function (x) {
     return x !== undefined && x.length > 0;
   }).join('/');
 };
-var fetchEDRLayerCollection = /*#__PURE__*/function () {
+var fetchEDRCollectionDetails = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(edrBaseUrlWithCollection) {
     var instanceId,
       _args = arguments;
@@ -1566,31 +1601,24 @@ var fetchEDRLayerCollection = /*#__PURE__*/function () {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           instanceId = _args.length > 1 && _args[1] !== undefined ? _args[1] : '';
-          _context.next = 3;
-          return fetch(joinUrlParams([edrBaseUrlWithCollection, instanceId]));
-        case 3:
-          _context.next = 5;
-          return _context.sent.json();
-        case 5:
-          return _context.abrupt("return", _context.sent);
-        case 6:
+          return _context.abrupt("return", fetch(joinUrlParams([edrBaseUrlWithCollection, instanceId])).then(handleResponse));
+        case 2:
         case "end":
           return _context.stop();
       }
     }, _callee);
   }));
-  return function fetchEDRLayerCollection(_x) {
+  return function fetchEDRCollectionDetails(_x) {
     return _ref.apply(this, arguments);
   };
 }();
-var fetchEDRLayerCollectionCube = /*#__PURE__*/function () {
+var fetchEDRCube = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(edrBaseUrlWithCollection, parameterName) {
     var datetime,
       instanceId,
       bbox,
       queryParams,
       url,
-      response,
       _args2 = arguments;
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
@@ -1603,68 +1631,229 @@ var fetchEDRLayerCollectionCube = /*#__PURE__*/function () {
           queryParams.append('parameter-name', parameterName);
           datetime && queryParams.append('datetime', datetime);
           url = "".concat(joinUrlParams([edrBaseUrlWithCollection, instanceId, 'cube']), "?").concat(queryParams.toString());
-          _context2.next = 10;
-          return fetch(url);
-        case 10:
-          response = _context2.sent;
-          _context2.next = 13;
-          return response.json();
-        case 13:
-          return _context2.abrupt("return", _context2.sent);
-        case 14:
+          return _context2.abrupt("return", fetch(url).then(handleResponse));
+        case 9:
         case "end":
           return _context2.stop();
       }
     }, _callee2);
   }));
-  return function fetchEDRLayerCollectionCube(_x2, _x3) {
+  return function fetchEDRCube(_x2, _x3) {
     return _ref2.apply(this, arguments);
   };
 }();
+var fetchEDRArea = /*#__PURE__*/function () {
+  var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(edrBaseUrlWithCollection, parameterName) {
+    var datetime,
+      instanceId,
+      coords,
+      queryParams,
+      url,
+      _args3 = arguments;
+    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          datetime = _args3.length > 2 && _args3[2] !== undefined ? _args3[2] : '';
+          instanceId = _args3.length > 3 && _args3[3] !== undefined ? _args3[3] : '';
+          coords = _args3.length > 4 && _args3[4] !== undefined ? _args3[4] : 'POLYGON((-180 -90, -180 90, 180 90, 180 -90, -180 -90))';
+          queryParams = new URLSearchParams();
+          queryParams.append('coords', coords);
+          queryParams.append('parameter-name', parameterName);
+          datetime && queryParams.append('datetime', datetime);
+          url = "".concat(joinUrlParams([edrBaseUrlWithCollection, instanceId, 'area']), "?").concat(queryParams.toString());
+          return _context3.abrupt("return", fetch(url).then(handleResponse));
+        case 9:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return function fetchEDRArea(_x4, _x5) {
+    return _ref3.apply(this, arguments);
+  };
+}();
+var fetchEDRParameter = /*#__PURE__*/function () {
+  var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4(collection, edrBaseUrlWithCollection, parameterName) {
+    var _collection$data_quer, _collection$data_quer2;
+    var datetime,
+      instanceId,
+      _args4 = arguments;
+    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          datetime = _args4.length > 3 && _args4[3] !== undefined ? _args4[3] : '';
+          instanceId = _args4.length > 4 && _args4[4] !== undefined ? _args4[4] : '';
+          if (!(collection !== null && collection !== void 0 && (_collection$data_quer = collection.data_queries) !== null && _collection$data_quer !== void 0 && _collection$data_quer.cube)) {
+            _context4.next = 4;
+            break;
+          }
+          return _context4.abrupt("return", fetchEDRCube(edrBaseUrlWithCollection, parameterName, datetime, instanceId));
+        case 4:
+          if (!(collection !== null && collection !== void 0 && (_collection$data_quer2 = collection.data_queries) !== null && _collection$data_quer2 !== void 0 && _collection$data_quer2.area)) {
+            _context4.next = 6;
+            break;
+          }
+          return _context4.abrupt("return", fetchEDRArea(edrBaseUrlWithCollection, parameterName, datetime, instanceId));
+        case 6:
+          return _context4.abrupt("return", undefined);
+        case 7:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  }));
+  return function fetchEDRParameter(_x6, _x7, _x8) {
+    return _ref4.apply(this, arguments);
+  };
+}();
+
+/* *
+ * 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 coverageCollectionToFeatureCollection = function coverageCollectionToFeatureCollection(cov, parameterNames) {
+  if (cov === undefined) {
+    return {
+      features: [],
+      type: 'FeatureCollection'
+    };
+  }
+  // For coverage collection
+  if (cov && _typeof(cov) === 'object' && 'coverages' in cov) {
+    var _cov$coverages$reduce, _cov$coverages;
+    var latLonValues = (_cov$coverages$reduce = cov === null || cov === void 0 || (_cov$coverages = cov.coverages) === null || _cov$coverages === void 0 ? void 0 : _cov$coverages.reduce(function (coordinateObj, coverage) {
+      // Extract all parameter from coverage
+      var paramVals = {};
+      // Add parameters values to latlon position
+      var latlon = "".concat(coverage.domain.axes.x.values[0], ",").concat(coverage.domain.axes.y.values[0]);
+      if (coordinateObj[latlon] === undefined) {
+        parameterNames.split(',').forEach(function (parameterName) {
+          var _coverage$ranges$para;
+          paramVals[parameterName] = coverage.ranges[parameterName] ? (_coverage$ranges$para = coverage.ranges[parameterName]) === null || _coverage$ranges$para === void 0 ? void 0 : _coverage$ranges$para.values[0] : undefined;
+        });
+        return _objectSpread2(_objectSpread2({}, coordinateObj), {}, _defineProperty({}, latlon, paramVals));
+      }
+      // if it already exists, don't overwrite existing values unless they are undefined
+      var currentVals = coordinateObj[latlon];
+      parameterNames.split(',').forEach(function (parameterName) {
+        if (coverage.ranges[parameterName] && currentVals[parameterName] === undefined) {
+          var _coverage$ranges$para2;
+          paramVals[parameterName] = (_coverage$ranges$para2 = coverage.ranges[parameterName]) === null || _coverage$ranges$para2 === void 0 ? void 0 : _coverage$ranges$para2.values[0];
+        }
+      });
+      return _objectSpread2(_objectSpread2({}, coordinateObj), {}, _defineProperty({}, latlon, _objectSpread2(_objectSpread2({}, coordinateObj[latlon]), paramVals)));
+    }, {})) !== null && _cov$coverages$reduce !== void 0 ? _cov$coverages$reduce : {};
+    var features = Object.keys(latLonValues).map(function (latlon) {
+      var latlonvalues = latlon.split(',');
+      return {
+        type: 'Feature',
+        properties: {
+          values: _objectSpread2({}, latLonValues[latlon])
+        },
+        geometry: {
+          coordinates: [Number(latlonvalues[0]), Number(latlonvalues[1])],
+          type: 'Point'
+        }
+      };
+    });
+    var _featurePoint = {
+      type: 'FeatureCollection',
+      features: features
+    };
+    return _featurePoint;
+  }
+  // For Coverage
+  var paramVals = {};
+  parameterNames.split(',').forEach(function (parameterName) {
+    var _cov$ranges$parameter;
+    paramVals[parameterName] = cov !== null && cov !== void 0 && cov.ranges[parameterName] ? (_cov$ranges$parameter = cov.ranges[parameterName]) === null || _cov$ranges$parameter === void 0 ? void 0 : _cov$ranges$parameter.values[0] : undefined;
+  });
+  var featurePoint = {
+    type: 'FeatureCollection',
+    features: [{
+      type: 'Feature',
+      properties: {
+        values: _objectSpread2({}, paramVals)
+      },
+      geometry: {
+        coordinates: [Number(cov === null || cov === void 0 ? void 0 : cov.domain.axes.x.values[0]), Number(cov === null || cov === void 0 ? void 0 : cov.domain.axes.y.values[0])],
+        type: 'Point'
+      }
+    }]
+  };
+  return featurePoint;
+};
 
 var DEFAULT_STALE_TIME = 60000; // One minute
-var useEDRLayerCollection = function useEDRLayerCollection(edrBaseUrlWithCollection) {
+// Ensures every webmap-react query starts with the same query key
+var generateWebmapQueryKeys = function generateWebmapQueryKeys(queryKeys) {
+  return ['webmap-react'].concat(queryKeys);
+};
+var webmapEDRQueryOptions = {
+  getCollectionDetailsQuery: function getCollectionDetailsQuery(edrBaseUrlWithCollection, enabled) {
+    var instanceId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+    return queryOptions({
+      staleTime: DEFAULT_STALE_TIME,
+      queryKey: generateWebmapQueryKeys(['get-collection-details', edrBaseUrlWithCollection, instanceId]),
+      queryFn: function () {
+        var _queryFn = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                return _context.abrupt("return", fetchEDRCollectionDetails(edrBaseUrlWithCollection, instanceId));
+              case 1:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function queryFn() {
+          return _queryFn.apply(this, arguments);
+        }
+        return queryFn;
+      }(),
+      enabled: edrBaseUrlWithCollection.length > 0 && enabled
+    });
+  }
+};
+var useEDRGetCollectionDetails = function useEDRGetCollectionDetails(edrBaseUrlWithCollection) {
   var instanceId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   var enabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  return useQuery({
-    staleTime: DEFAULT_STALE_TIME,
-    queryKey: [edrBaseUrlWithCollection, instanceId, 'useEDRLayerCollection'],
-    queryFn: function () {
-      var _queryFn = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              return _context.abrupt("return", fetchEDRLayerCollection(edrBaseUrlWithCollection, instanceId));
-            case 1:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      function queryFn() {
-        return _queryFn.apply(this, arguments);
-      }
-      return queryFn;
-    }(),
-    enabled: edrBaseUrlWithCollection.length > 0 && enabled
-  });
+  return useQuery(webmapEDRQueryOptions.getCollectionDetailsQuery(edrBaseUrlWithCollection, enabled, instanceId));
 };
-var useEDRLayerCollectionCube = function useEDRLayerCollectionCube(edrBaseUrlWithCollection, parameterName) {
+var useEDRGetParameterData = function useEDRGetParameterData(edrBaseUrlWithCollection, parameterName) {
   var datetime = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   var instanceId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
-  var bbox = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '-180,-90,180,90';
-  var params = [edrBaseUrlWithCollection, instanceId, 'cube'];
-  var queryKey = [].concat(params, [bbox, parameterName, datetime]);
+  var _useEDRGetCollectionD = useEDRGetCollectionDetails(edrBaseUrlWithCollection, instanceId),
+    collection = _useEDRGetCollectionD.data;
   return useQuery({
     staleTime: DEFAULT_STALE_TIME,
-    queryKey: queryKey,
+    queryKey: generateWebmapQueryKeys(['get-parameter-data', edrBaseUrlWithCollection, instanceId, parameterName, datetime]),
     queryFn: function () {
       var _queryFn2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        var data;
         return _regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              return _context2.abrupt("return", fetchEDRLayerCollectionCube(edrBaseUrlWithCollection, parameterName, datetime, instanceId, bbox));
-            case 1:
+              _context2.next = 2;
+              return fetchEDRParameter(collection, edrBaseUrlWithCollection, parameterName, datetime, instanceId);
+            case 2:
+              data = _context2.sent;
+              return _context2.abrupt("return", coverageCollectionToFeatureCollection(data, parameterName));
+            case 4:
             case "end":
               return _context2.stop();
           }
@@ -1675,7 +1864,7 @@ var useEDRLayerCollectionCube = function useEDRLayerCollectionCube(edrBaseUrlWit
       }
       return queryFn;
     }(),
-    enabled: parameterName.length > 0
+    enabled: collection !== undefined && parameterName.length > 0 && datetime.length > 0
   });
 };
 
@@ -1969,7 +2158,7 @@ var makeFeatureStyleMultiParam = function makeFeatureStyleMultiParam(feature) {
   var paramValues = Object.values(values);
   // Determine offset between columns (long strings need more space)
   var maxLength = Math.max.apply(Math, _toConsumableArray(paramValues.map(function (el) {
-    return el !== undefined ? el.toString().length : 1;
+    return el ? el.toString().length : 1;
   })));
   var factor = maxLength > 5 ? 1.4 : 1;
   var offsetValues = getOffsetValues(factor);
@@ -2123,12 +2312,12 @@ var defaultEdrStyles = [{
  * @param {string} name
  * @returns {(WMLayer | null)}
  */
-var useGetEDRWMLayerInstance = function useGetEDRWMLayerInstance(serviceUrl, name, id, onLayerError) {
+var useCreateEDRWMLayer = function useCreateEDRWMLayer(serviceUrl, name, id, onLayerError) {
   var _React$useState = React__default.useState(null),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     layer = _React$useState2[0],
     setLayer = _React$useState2[1];
-  var refId = useRef(id || webmapUtils.generateLayerId());
+  var refId = useRef(id !== null && id !== void 0 ? id : webmapUtils.generateLayerId());
   React__default.useEffect(function () {
     var layerId = refId.current;
     // Check if the layer is already registered
@@ -2153,23 +2342,23 @@ var useGetEDRWMLayerInstance = function useGetEDRWMLayerInstance(serviceUrl, nam
   }, [name, onLayerError, serviceUrl]);
   return layer;
 };
-var useGetEDRLayerInstance = function useGetEDRLayerInstance(edrBaseUrl, parameter, layerId, onInitializeLayer) {
-  var wmLayer = useGetEDRWMLayerInstance(edrBaseUrl, parameter, layerId);
-  var collectionInfo = useEDRLayerCollection(edrBaseUrl);
+var useEDRWMLayer = function useEDRWMLayer(edrBaseUrl, parameter, layerId, onInitializeLayer) {
+  var wmLayer = useCreateEDRWMLayer(edrBaseUrl, parameter, layerId);
+  var collectionInfo = useEDRGetCollectionDetails(edrBaseUrl);
   var _React$useState3 = React__default.useState(undefined),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     timeRangeDuration = _React$useState4[0],
     setTimeRangeDuration = _React$useState4[1];
   React__default.useEffect(function () {
     if (wmLayer && collectionInfo.data && collectionInfo.isFetched) {
-      var _collectionInfo$data, _collectionInfo$data2;
-      // TODO: Extract PT10M from the EDR service: https://gitlab.com/opengeoweb/geoweb-assets/-/issues/4139
-      var timeRangeDurationFromEdrCollection = "".concat((_collectionInfo$data = collectionInfo.data) === null || _collectionInfo$data === void 0 || (_collectionInfo$data = _collectionInfo$data.extent) === null || _collectionInfo$data === void 0 || (_collectionInfo$data = _collectionInfo$data.temporal) === null || _collectionInfo$data === void 0 ? void 0 : _collectionInfo$data.interval[0][0], "/").concat((_collectionInfo$data2 = collectionInfo.data) === null || _collectionInfo$data2 === void 0 || (_collectionInfo$data2 = _collectionInfo$data2.extent) === null || _collectionInfo$data2 === void 0 || (_collectionInfo$data2 = _collectionInfo$data2.temporal) === null || _collectionInfo$data2 === void 0 ? void 0 : _collectionInfo$data2.interval[0][1], "/PT10M");
+      var _collectionInfo$data, _collectionInfo$data2, _collectionInfo$data3, _collectionInfo$data4;
+      // TODO: Extract timerange from the EDR service: https://gitlab.com/opengeoweb/geoweb-assets/-/issues/4139
+      var timeRangeDurationFromEdrCollection = edrBaseUrl.includes('10-minute') ? "".concat((_collectionInfo$data = collectionInfo.data) === null || _collectionInfo$data === void 0 || (_collectionInfo$data = _collectionInfo$data.extent) === null || _collectionInfo$data === void 0 || (_collectionInfo$data = _collectionInfo$data.temporal) === null || _collectionInfo$data === void 0 ? void 0 : _collectionInfo$data.interval[0][0], "/").concat((_collectionInfo$data2 = collectionInfo.data) === null || _collectionInfo$data2 === void 0 || (_collectionInfo$data2 = _collectionInfo$data2.extent) === null || _collectionInfo$data2 === void 0 || (_collectionInfo$data2 = _collectionInfo$data2.temporal) === null || _collectionInfo$data2 === void 0 ? void 0 : _collectionInfo$data2.interval[0][1], "/PT10M") : "".concat((_collectionInfo$data3 = collectionInfo.data) === null || _collectionInfo$data3 === void 0 || (_collectionInfo$data3 = _collectionInfo$data3.extent) === null || _collectionInfo$data3 === void 0 || (_collectionInfo$data3 = _collectionInfo$data3.temporal) === null || _collectionInfo$data3 === void 0 ? void 0 : _collectionInfo$data3.interval[0][0], "/").concat((_collectionInfo$data4 = collectionInfo.data) === null || _collectionInfo$data4 === void 0 || (_collectionInfo$data4 = _collectionInfo$data4.extent) === null || _collectionInfo$data4 === void 0 || (_collectionInfo$data4 = _collectionInfo$data4.temporal) === null || _collectionInfo$data4 === void 0 ? void 0 : _collectionInfo$data4.interval[0][1], "/PT1M");
       if (!wmLayer.getDimension('time')) {
-        var _collectionInfo$data3;
+        var _collectionInfo$data5;
         var dim = new WMJSDimension({
           name: 'time',
-          currentValue: (_collectionInfo$data3 = collectionInfo.data) === null || _collectionInfo$data3 === void 0 || (_collectionInfo$data3 = _collectionInfo$data3.extent) === null || _collectionInfo$data3 === void 0 || (_collectionInfo$data3 = _collectionInfo$data3.temporal) === null || _collectionInfo$data3 === void 0 ? void 0 : _collectionInfo$data3.interval[0][1],
+          currentValue: (_collectionInfo$data5 = collectionInfo.data) === null || _collectionInfo$data5 === void 0 || (_collectionInfo$data5 = _collectionInfo$data5.extent) === null || _collectionInfo$data5 === void 0 || (_collectionInfo$data5 = _collectionInfo$data5.temporal) === null || _collectionInfo$data5 === void 0 ? void 0 : _collectionInfo$data5.interval[0][1],
           units: 'ISO8601',
           values: timeRangeDurationFromEdrCollection
         });
@@ -2182,7 +2371,7 @@ var useGetEDRLayerInstance = function useGetEDRLayerInstance(edrBaseUrl, paramet
       setTimeRangeDuration(timeRangeDurationFromEdrCollection);
       wmLayer.isConfigured = true;
     }
-  }, [collectionInfo.data, collectionInfo.isFetched, wmLayer]);
+  }, [collectionInfo.data, collectionInfo.isFetched, wmLayer, edrBaseUrl]);
   React__default.useEffect(function () {
     var initializeLayer = /*#__PURE__*/function () {
       var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
@@ -2213,7 +2402,7 @@ var useGetEDRLayerInstance = function useGetEDRLayerInstance(edrBaseUrl, paramet
                   }),
                   style: ''
                 };
-                onInitializeLayer && onInitializeLayer(layerProps);
+                onInitializeLayer === null || onInitializeLayer === void 0 || onInitializeLayer(layerProps);
               }
             case 1:
             case "end":
@@ -11416,7 +11605,8 @@ var addFeatureProperties = function addFeatureProperties(geojson, featurePropert
     return null;
   }
   return produce(geojson, function (draft) {
-    if (draft.features && draft.features.length > 0 && draft.features[featureIndex] !== undefined && draft.features[featureIndex].properties) {
+    var _draft$features$featu;
+    if (draft.features && draft.features.length > 0 && (_draft$features$featu = draft.features[featureIndex]) !== null && _draft$features$featu !== void 0 && _draft$features$featu.properties) {
       Object.keys(featureProperties).forEach(function (key) {
         draft.features[featureIndex].properties[key] = featureProperties[key];
       });
@@ -11439,16 +11629,19 @@ var getGeoJSONPropertyValue = function getGeoJSONPropertyValue(property, propert
   var defaultProperties = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : defaultGeoJSONStyleProperties;
   // if a shape is set, extract the style from there
   if (properties[property] !== undefined) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return properties[property];
   }
   // if active polygon tool is preset, retreive style from there
   if (polygonDrawMode) {
     var polygonDrawModeProperty = polygonDrawMode.shape.type === 'Feature' && polygonDrawMode.shape.properties[property];
     if (polygonDrawModeProperty !== undefined) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
       return polygonDrawModeProperty;
     }
   }
   // otherwise get values from defaultStyle
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
   return defaultProperties[property];
 };
 /**
@@ -11479,7 +11672,8 @@ var moveFeature = function moveFeature(currentGeoJSON, newGeoJSON, featureLayerI
       return newGeoJSON.features.length - 1;
     }
     if (geometry.type === 'LineString' && geometry.coordinates.length > 2 && reason === NEW_LINESTRING_CREATED) {
-      var _lastCoordinate = geometry.coordinates.pop() || [0, 0];
+      var _geometry$coordinates;
+      var _lastCoordinate = (_geometry$coordinates = geometry.coordinates.pop()) !== null && _geometry$coordinates !== void 0 ? _geometry$coordinates : [0, 0];
       var _copyFeature = _objectSpread2(_objectSpread2({}, feature), {}, {
         geometry: _objectSpread2(_objectSpread2({}, geometry), {}, {
           coordinates: [_toConsumableArray(_lastCoordinate), _toConsumableArray(_lastCoordinate)]
@@ -11518,14 +11712,14 @@ var intersectPointGeoJSONS = function intersectPointGeoJSONS(intersectA, interse
     fill: '#0000FF',
     'fill-opacity': 1.0
   };
-  var featureA = turf.feature(intersectA.features[0].geometry);
-  var featureB = turf.feature(intersectB.features[0].geometry);
+  var featureA = feature(intersectA.features[0].geometry);
+  var featureB = feature(intersectB.features[0].geometry);
   var options = {
     tolerance: 0.001,
     highQuality: true
   };
-  var simplifiedB = turf.simplify(featureB, options);
-  var isInside = turf.booleanPointInPolygon(intersectA.features[0].geometry, simplifiedB);
+  var simplifiedB = simplify(featureB, options);
+  var isInside = booleanPointInPolygon(intersectA.features[0].geometry, simplifiedB);
   return addFeatureProperties({
     type: 'FeatureCollection',
     features: !isInside ? [{
@@ -11540,13 +11734,71 @@ var intersectPointGeoJSONS = function intersectPointGeoJSONS(intersectA, interse
     }] : [featureA]
   }, geoJSONProperties);
 };
+// Helper functions for projection matching
+function makeProjectorsFromCode(epsg) {
+  if (!epsg || epsg === 'EPSG:4326') {
+    var id = function id(ft) {
+      return ft;
+    };
+    return {
+      project: id,
+      unproject: id
+    };
+  }
+  // 3857-variants
+  if (['EPSG:3857', 'EPSG:3785', 'EPSG:900913', 'EPSG:102100'].includes(epsg)) {
+    return {
+      project: function project(feature) {
+        return toMercator(feature);
+      },
+      unproject: function unproject(feature) {
+        return toWgs84(feature);
+      }
+    };
+  }
+  var fwd = proj4('EPSG:4326', epsg); // WGS84 -> target SRS
+  var project = function project(feat) {
+    var out = cloneDeep(feat);
+    coordEach(out, function (coords) {
+      var _fwd$forward = fwd.forward([coords[0], coords[1]]),
+        _fwd$forward2 = _slicedToArray(_fwd$forward, 2),
+        x = _fwd$forward2[0],
+        y = _fwd$forward2[1];
+      // eslint-disable-next-line no-param-reassign
+      coords[0] = x;
+      // eslint-disable-next-line no-param-reassign
+      coords[1] = y;
+    });
+    return out;
+  };
+  var unproject = function unproject(feat) {
+    var out = cloneDeep(feat);
+    coordEach(out, function (coords) {
+      var _fwd$inverse = fwd.inverse([coords[0], coords[1]]),
+        _fwd$inverse2 = _slicedToArray(_fwd$inverse, 2),
+        lon = _fwd$inverse2[0],
+        lat = _fwd$inverse2[1];
+      // eslint-disable-next-line no-param-reassign
+      coords[0] = lon;
+      // eslint-disable-next-line no-param-reassign
+      coords[1] = lat;
+    });
+    return out;
+  };
+  return {
+    project: project,
+    unproject: unproject
+  };
+}
 /**
  * Returns the intersection of two (multi) polygon features. In case of a polygon, only the first feature is used.
  * @param intersectA Feature A
  * @param intersectB Feature B
  * @returns The intersection of the two features.
  */
-var intersectPolygonGeoJSONS = function intersectPolygonGeoJSONS(intersectA, intersectB) {
+function intersectPolygonGeoJSONS(intersectA,
+// drawn polygon (WGS84)
+intersectB) {
   var geoJSONProperties = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
     stroke: '#FF0000',
     'stroke-width': 10.0,
@@ -11554,29 +11806,45 @@ var intersectPolygonGeoJSONS = function intersectPolygonGeoJSONS(intersectA, int
     fill: '#0000FF',
     'fill-opacity': 1.0
   };
-  var featureA = turf.feature(intersectA.features[0].geometry);
-  var featureB = turf.feature(intersectB.features[0].geometry);
-  var options = {
-    tolerance: 0.001,
-    highQuality: true
+  var projectionCode = arguments.length > 3 ? arguments[3] : undefined;
+  // Pull geometry
+  var drawnPolygon = intersectA.features[0];
+  var firPolygon = intersectB.features[0];
+  // Projector based on active map projection
+  var _makeProjectorsFromCo = makeProjectorsFromCode(projectionCode),
+    project = _makeProjectorsFromCo.project,
+    unproject = _makeProjectorsFromCo.unproject;
+  var drawnInMap = project(drawnPolygon);
+  var firInMap = project(firPolygon);
+  // Intersect in map projection
+  var pair = {
+    type: 'FeatureCollection',
+    features: [drawnInMap, firInMap]
   };
-  var simplifiedA = turf.simplify(featureA, options);
-  var simplifiedB = turf.simplify(featureB, options);
-  var intersection = turf.intersect(turf.featureCollection([simplifiedA, simplifiedB]));
+  var intersectionInMapProj = intersect(pair);
+  if (!intersectionInMapProj) {
+    return addFeatureProperties({
+      type: 'FeatureCollection',
+      features: [{
+        type: 'Feature',
+        properties: {
+          selectionType: 'poly'
+        },
+        geometry: {
+          type: 'Polygon',
+          coordinates: [[]]
+        }
+      }]
+    }, geoJSONProperties);
+  }
+  // Back to WGS84 for rendering
+  var intersectionWgs84 = unproject(intersectionInMapProj);
+  var intersectionWgs84Cleaned = cleanCoords(intersectionWgs84);
   return addFeatureProperties({
     type: 'FeatureCollection',
-    features: intersection === null ? [{
-      type: 'Feature',
-      properties: {
-        selectionType: 'poly'
-      },
-      geometry: {
-        type: 'Polygon',
-        coordinates: [[]]
-      }
-    }] : [intersection]
+    features: [intersectionWgs84Cleaned]
   }, geoJSONProperties);
-};
+}
 var isPointFeatureCollection = function isPointFeatureCollection(geojson) {
   return geojson.features[0].geometry.type === 'Point';
 };
@@ -11593,12 +11861,13 @@ var createInterSections = function createInterSections(geojson, otherGeoJSON) {
     fill: '#f24a00',
     'fill-opacity': 0.5
   };
+  var proj = arguments.length > 3 ? arguments[3] : undefined;
   var intersections = produce(geojson, function () {
     try {
       if (isPointFeatureCollection(geojson)) {
         return addFeatureProperties(intersectPointGeoJSONS(geojson, otherGeoJSON), geoJSONproperties);
       }
-      return addFeatureProperties(intersectPolygonGeoJSONS(geojson, otherGeoJSON), geoJSONproperties);
+      return addFeatureProperties(intersectPolygonGeoJSONS(geojson, otherGeoJSON, defaultGeoJSONStyleProperties, proj), geoJSONproperties);
     } catch (_error) {
       return addFeatureProperties(geojson, geoJSONproperties);
     }
@@ -11704,7 +11973,7 @@ var addSelectionTypeToGeoJSON = function addSelectionTypeToGeoJSON(geoJSON, sele
   });
 };
 var getFeatureExtent = function getFeatureExtent(geoJSON) {
-  var turfBbox = turf.bbox(geoJSON);
+  var turfBbox = bbox(geoJSON);
   return {
     left: turfBbox[0],
     bottom: turfBbox[1],
@@ -11834,7 +12103,8 @@ var useMapDrawTool = function useMapDrawTool(_ref) {
     _ref$geoJSONIntersect = _ref.geoJSONIntersectionLayerId,
     geoJSONIntersectionLayerId = _ref$geoJSONIntersect === void 0 ? 'intersection-layer' : _ref$geoJSONIntersect,
     _ref$geoJSONIntersect2 = _ref.geoJSONIntersectionBoundsLayerId,
-    geoJSONIntersectionBoundsLayerId = _ref$geoJSONIntersect2 === void 0 ? 'static-layer' : _ref$geoJSONIntersect2;
+    geoJSONIntersectionBoundsLayerId = _ref$geoJSONIntersect2 === void 0 ? 'static-layer' : _ref$geoJSONIntersect2,
+    projection = _ref.projection;
   // geoJSON feature collections
   var _React$useState = React__default.useState(defaultGeoJSON),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -11922,7 +12192,7 @@ var useMapDrawTool = function useMapDrawTool(_ref) {
     }
     setGeoJSON(newGeoJSON);
     if (geoJSONIntersectionBounds) {
-      var newIntersection = createInterSections(newGeoJSON, geoJSONIntersectionBounds, defaultGeoJSONIntersectionProperties);
+      var newIntersection = createInterSections(newGeoJSON, geoJSONIntersectionBounds, defaultGeoJSONIntersectionProperties, projection);
       setGeoJSONIntersection(newIntersection);
       return [newGeoJSON, newIntersection];
     }
@@ -14052,6 +14322,8 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
     // Assign olSource in wmlayer for metronome
     wmLayer.olSource = olLayer === null || olLayer === void 0 ? void 0 : olLayer.getSource();
     return function () {
+      var _olLayer$getSource;
+      olLayer === null || olLayer === void 0 || (_olLayer$getSource = olLayer.getSource()) === null || _olLayer$getSource === void 0 || _olLayer$getSource.cancelPrefetch();
       wmLayer.olSource = null;
       map.removeLayer(olLayer);
       olLayer.dispose();
@@ -15467,50 +15739,8 @@ var OpenLayersFeatureLayer = function OpenLayersFeatureLayer(_ref) {
   });
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2025 - Finnish Meteorological Institute (FMI)
- * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var coverageCollectionToFeatureCollection = function coverageCollectionToFeatureCollection(cov, parameterNames) {
-  var _cov$coverages;
-  var latLonValues = (cov === null || cov === void 0 || (_cov$coverages = cov.coverages) === null || _cov$coverages === void 0 ? void 0 : _cov$coverages.map(function (coverage) {
-    var paramValues = parameterNames.split(',').reduce(function (obj, parameterName) {
-      var _coverage$ranges$para;
-      return _objectSpread2(_objectSpread2({}, obj), {}, _defineProperty({}, parameterName, (_coverage$ranges$para = coverage.ranges[parameterName]) === null || _coverage$ranges$para === void 0 ? void 0 : _coverage$ranges$para.values[0]));
-    }, {});
-    return {
-      type: 'Feature',
-      properties: {
-        values: _objectSpread2({}, paramValues)
-      },
-      geometry: {
-        coordinates: [coverage.domain.axes.x.values[0], coverage.domain.axes.y.values[0]],
-        type: 'Point'
-      }
-    };
-  })) || [];
-  var featurePoint = {
-    type: 'FeatureCollection',
-    features: latLonValues
-  };
-  return featurePoint;
-};
-
 var TimeAwareEDRLocationLayer = function TimeAwareEDRLocationLayer(_ref) {
-  var _wmLayer$getDimension;
+  var _wmLayer$getDimension, _wmLayer$getDimension2;
   var edrBaseUrl = _ref.edrBaseUrl,
     parameter = _ref.parameter,
     style = _ref.style,
@@ -15522,30 +15752,23 @@ var TimeAwareEDRLocationLayer = function TimeAwareEDRLocationLayer(_ref) {
     visible = _ref$visible === void 0 ? true : _ref$visible,
     onInitializeLayer = _ref.onInitializeLayer;
   // get a wmLayer instance
-  var wmLayer = useGetEDRLayerInstance(edrBaseUrl, parameter, layerId, onInitializeLayer);
+  var wmLayer = useEDRWMLayer(edrBaseUrl, parameter, layerId, onInitializeLayer);
   // dimensionsValues is a key/value dictionary with dimension names specifically for WMS GetMap requests. We re-use it here for EDR.
   var dimensionsValues = getDimensionParamsForWMS(dimensions, wmLayer);
-  var timeValue = dimensionsValues && dimensionsValues['TIME'];
-  var _React$useState = React__default.useState({
-      features: [],
-      type: 'FeatureCollection'
-    }),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    featurePoints = _React$useState2[0],
-    setFeaturePoints = _React$useState2[1];
-  var edrQueryDateTime = (wmLayer === null || wmLayer === void 0 || (_wmLayer$getDimension = wmLayer.getDimension('time')) === null || _wmLayer$getDimension === void 0 ? void 0 : _wmLayer$getDimension.getClosestValue(timeValue)) || timeValue;
-  var result = useEDRLayerCollectionCube(edrBaseUrl, parameter, edrQueryDateTime);
-  React__default.useEffect(function () {
-    var featurePoint = coverageCollectionToFeatureCollection(result.data, parameter);
-    if (!featurePoint) {
-      return;
-    }
-    setFeaturePoints(featurePoint);
-  }, [parameter, result.data]);
+  var timeValue = dimensionsValues === null || dimensionsValues === void 0 ? void 0 : dimensionsValues['TIME'];
+  var edrQueryDateTime = (_wmLayer$getDimension = wmLayer === null || wmLayer === void 0 || (_wmLayer$getDimension2 = wmLayer.getDimension('time')) === null || _wmLayer$getDimension2 === void 0 ? void 0 : _wmLayer$getDimension2.getClosestValue(timeValue)) !== null && _wmLayer$getDimension !== void 0 ? _wmLayer$getDimension : timeValue;
+  var _useEDRGetParameterDa = useEDRGetParameterData(edrBaseUrl, parameter, edrQueryDateTime),
+    featurePoints = _useEDRGetParameterDa.data,
+    isFetching = _useEDRGetParameterDa.isFetching;
   var loadingStyle = parameter !== null && parameter !== void 0 && parameter.includes(',') ? makeFeatureStyleMultiParamLoading : makeFeatureStyleLoading;
+  // Send empty collection if no API result yet
+  var featureCollection = featurePoints !== null && featurePoints !== void 0 ? featurePoints : {
+    features: [],
+    type: 'FeatureCollection'
+  };
   return jsx(OpenLayersFeatureLayer, {
-    featureCollection: featurePoints,
-    style: result.isFetching ? loadingStyle : style,
+    featureCollection: featureCollection,
+    style: isFetching ? loadingStyle : style,
     opacity: opacity,
     zIndex: zIndex,
     declutter: true,
@@ -16752,4 +16975,4 @@ var getLayerUpdateInfo = function getLayerUpdateInfo(wmLayer, mapId) {
   return updateObject;
 };
 
-export { BaseLayerType, ClickOnMapTool, DRAWMODE, DefaultBaseLayers, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EditModeButton as EditModeButtonField, FEATURE_FILL, FEATURE_FILL_SELECTED, FEATURE_STROKE, FEATURE_STROKE_EDIT, FEATURE_STROKE_SELECTED, FEATURE_VERTICES_EDIT_HANDLES, FEATURE_VERTICE_HANDLE_IMAGE, FEATURE_VERTICE_IMAGE, FeatureLayer, FeatureLayers, GeoJSONTextField, ICON_LOCATIONMARKER, ICON_LOCATIONMARKER_MODIFY, ICON_LOCATIONMARKER_SELECTED, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MapContext, MapControlButton, MapControls, MapDimensionSelect, MapFeatureClass, MapTime, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, OpenLayersFeatureLayer, OpenLayersGetFeatureInfo, OpenLayersLayer, OpenLayersMapDraw, OpenLayersMapView, OpenLayersZoomControl, Proj4js, SelectField, StoryLayoutGrid, TimeAwareEDRLocationLayer, TimeContext, TimeawareImageSource, TimeawareImageSourceWMSLayer, WEBMAP_REACT_NAMESPACE, WMSLayer, WMTSLayer, XYZLayer, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, basicExampleSmoothLineOptions, catmullRomSpline, clearImageCacheForAllMaps, colorMaps, createIconStyle, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultEdrStyles, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, dimensionConfig, drawPolyStoryStyles, drawStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, fakeEdrLayerApiHandlers, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, firSelectionType, formatTime, generateImageFromLegend, genericOpenLayersFeatureStyle, geowebColorToOpenLayersColor, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getFeatureCollection, getFeatureExtent, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getLegendClass, getProj4, getTimeDimension, getToolIcon, initializeOpenLayersProjections, inlineFeatureStyle, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, isGeoJSONGeometryEmpty, isPointFeatureCollection, lineString, lineStringCollection, makeFeatureStyleDisc, makeFeatureStyleLoading, makeFeatureStyleMultiParam, makeFeatureStyleMultiParamLoading, makeFeatureStyleWind, makeLegendFromColorMap, makeLegendFromStyleName, makeTimeList, makeView, marksByDimension, modifyStyles, moveFeature, multiLineStringLabelStyle, multiPolygonLabelStyle, opacityOptions, openLayersGetMapImageStore, precipitationMMLegendColorsWoW, projectorCache, publicLayers, publicServices, rewindGeometry, selectPreferredWMSProjection, setMapCenter, setViewFromExtent, setViewFromFeature, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleGeometryCollectionGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, styleNameToStyleLike, temperatureLegendColorsCWK, temperatureLegendColorsWoW, textLabelStyle, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useAnimationForLayer, useEDRLayerCollection, useEDRLayerCollectionCube, useGeoJSON, useGetEDRLayerInstance, useGetWMLayerInstance, useGetWMSLayerStyleList, useIconStyle, useMapDrawTool, useProjection, useQueryGetWMSGetCapabilities, useQueryGetWMSLayer, useQueryGetWMSLayers, useQueryGetWMSLayersTree, useQueryGetWMSServiceInfo, useQueryWMTSGetCapabilities, useSetIntervalWhenVisible, useViewFromLayer, viewUtils, webmapReactTranslations };
+export { BaseLayerType, ClickOnMapTool, DRAWMODE, DefaultBaseLayers, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EditModeButton as EditModeButtonField, FEATURE_FILL, FEATURE_FILL_SELECTED, FEATURE_STROKE, FEATURE_STROKE_EDIT, FEATURE_STROKE_SELECTED, FEATURE_VERTICES_EDIT_HANDLES, FEATURE_VERTICE_HANDLE_IMAGE, FEATURE_VERTICE_IMAGE, FeatureLayer, FeatureLayers, GeoJSONTextField, ICON_LOCATIONMARKER, ICON_LOCATIONMARKER_MODIFY, ICON_LOCATIONMARKER_SELECTED, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MapContext, MapControlButton, MapControls, MapDimensionSelect, MapFeatureClass, MapTime, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, OpenLayersFeatureLayer, OpenLayersGetFeatureInfo, OpenLayersLayer, OpenLayersMapDraw, OpenLayersMapView, OpenLayersZoomControl, Proj4js, SelectField, StoryLayoutGrid, TimeAwareEDRLocationLayer, TimeContext, TimeawareImageSource, TimeawareImageSourceWMSLayer, WEBMAP_REACT_NAMESPACE, WMSLayer, WMTSLayer, XYZLayer, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, basicExampleSmoothLineOptions, catmullRomSpline, clearImageCacheForAllMaps, colorMaps, createIconStyle, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultEdrStyles, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, dimensionConfig, drawPolyStoryStyles, drawStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, fakeEdrLayerApiHandlers, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, firSelectionType, formatTime, generateImageFromLegend, genericOpenLayersFeatureStyle, geowebColorToOpenLayersColor, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getFeatureCollection, getFeatureExtent, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getLegendClass, getProj4, getTimeDimension, getToolIcon, initializeOpenLayersProjections, inlineFeatureStyle, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, isGeoJSONGeometryEmpty, isPointFeatureCollection, lineString, lineStringCollection, makeFeatureStyleDisc, makeFeatureStyleLoading, makeFeatureStyleMultiParam, makeFeatureStyleMultiParamLoading, makeFeatureStyleWind, makeLegendFromColorMap, makeLegendFromStyleName, makeTimeList, makeView, marksByDimension, modifyStyles, moveFeature, multiLineStringLabelStyle, multiPolygonLabelStyle, opacityOptions, openLayersGetMapImageStore, precipitationMMLegendColorsWoW, projectorCache, publicLayers, publicServices, rewindGeometry, selectPreferredWMSProjection, setMapCenter, setViewFromExtent, setViewFromFeature, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleGeometryCollectionGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, styleNameToStyleLike, temperatureLegendColorsCWK, temperatureLegendColorsWoW, textLabelStyle, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useAnimationForLayer, useEDRGetCollectionDetails, useEDRGetParameterData, useEDRWMLayer, useGeoJSON, useGetWMLayerInstance, useGetWMSLayerStyleList, useIconStyle, useMapDrawTool, useProjection, useQueryGetWMSGetCapabilities, useQueryGetWMSLayer, useQueryGetWMSLayers, useQueryGetWMSLayersTree, useQueryGetWMSServiceInfo, useQueryWMTSGetCapabilities, useSetIntervalWhenVisible, useViewFromLayer, viewUtils, webmapEDRQueryOptions, webmapReactTranslations };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap-react",
-  "version": "14.0.0",
+  "version": "14.1.0",
   "description": "GeoWeb react wrapper for webmap",
   "license": "Apache-2.0",
   "repository": {
@@ -8,9 +8,9 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/webmap": "14.0.0",
-    "@opengeoweb/theme": "14.0.0",
-    "@opengeoweb/shared": "14.0.0",
+    "@opengeoweb/webmap": "14.1.0",
+    "@opengeoweb/theme": "14.1.0",
+    "@opengeoweb/shared": "14.1.0",
     "lodash": "^4.17.21",
     "ol": "^10.4.0",
     "proj4": "^2.9.2",

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

@@ -1,3 +1,4 @@
+import { Feature, Polygon, MultiPolygon } from 'geojson';
 import { DRAWMODE } from '../OpenLayers/draw/types';
 export type DrawModeValue = DRAWMODE | 'DELETE' | '';
 type DefaultSelectionTypes = 'poly' | 'point' | 'box' | 'linestring';
@@ -10,4 +11,6 @@ export interface DrawMode {
     isSelectable: boolean;
     selectionType: SelectionType;
 }
+export type ProjectFn = (feat: Feature<Polygon | MultiPolygon>) => Feature<Polygon | MultiPolygon>;
+export type UnprojectFn = (feat: Feature<Polygon | MultiPolygon>) => Feature<Polygon | MultiPolygon>;
 export {};

package/src/lib/components/MapDrawTool/useMapDrawTool.d.ts

@@ -40,6 +40,7 @@ export interface MapDrawToolOptions {
     geoJSONLayerId?: string;
     geoJSONIntersectionLayerId?: string;
     geoJSONIntersectionBoundsLayerId?: string;
+    projection?: string | undefined;
 }
 export declare const getIcon: (selectionType: SelectionType) => React.ReactElement | null;
 export declare const defaultPoint: DrawMode;
@@ -49,5 +50,5 @@ export declare const defaultLineString: DrawMode;
 export declare const defaultDelete: DrawMode;
 export declare const defaultModes: DrawMode[];
 export declare const currentlySupportedDrawModes: DrawMode[];
-export declare const useMapDrawTool: ({ defaultDrawModes, shouldAllowMultipleShapes, defaultGeoJSON, defaultGeoJSONIntersection, defaultGeoJSONIntersectionBounds, defaultGeoJSONIntersectionProperties, geoJSONLayerId, geoJSONIntersectionLayerId, geoJSONIntersectionBoundsLayerId, }: MapDrawToolOptions) => MapDrawToolProps;
+export declare const useMapDrawTool: ({ defaultDrawModes, shouldAllowMultipleShapes, defaultGeoJSON, defaultGeoJSONIntersection, defaultGeoJSONIntersectionBounds, defaultGeoJSONIntersectionProperties, geoJSONLayerId, geoJSONIntersectionLayerId, geoJSONIntersectionBoundsLayerId, projection, }: MapDrawToolOptions) => MapDrawToolProps;
 export {};

package/src/lib/components/MapDrawTool/utils.d.ts

@@ -1,6 +1,6 @@
-import { FeatureCollection, GeoJsonProperties, Point } from 'geojson';
-import { Bbox } from '@opengeoweb/webmap';
-import { DrawMode, SelectionType } from './types';
+import type { FeatureCollection, GeoJsonProperties, Point, Geometry } from 'geojson';
+import type { Bbox } from '@opengeoweb/webmap';
+import type { DrawMode, SelectionType } from './types';
 /**
  * Adds properties to the first geojson feature based on the given property object.
  * It only extends or changes the properties which are defined in styleConfig,
@@ -48,20 +48,16 @@ export declare const intersectPointGeoJSONS: (intersectA: GeoJSON.FeatureCollect
  * @param intersectB Feature B
  * @returns The intersection of the two features.
  */
-export declare const intersectPolygonGeoJSONS: (intersectA: GeoJSON.FeatureCollection, intersectB: GeoJSON.FeatureCollection, geoJSONProperties?: {
-    stroke: string;
-    'stroke-width': number;
-    'stroke-opacity': number;
-    fill: string;
-    'fill-opacity': number;
-}) => GeoJSON.FeatureCollection;
+export declare function intersectPolygonGeoJSONS(intersectA: FeatureCollection<Geometry, GeoJsonProperties>, // drawn polygon (WGS84)
+intersectB: FeatureCollection<Geometry, GeoJsonProperties>, // FIR polygon (WGS84)
+geoJSONProperties?: GeoJsonProperties, projectionCode?: string): FeatureCollection<Geometry, GeoJsonProperties>;
 export declare const isPointFeatureCollection: (geojson: GeoJSON.FeatureCollection) => geojson is GeoJSON.FeatureCollection<Point>;
 /**
  * Adds the intersectionStart and intersectionEnd properties to the GeoJSONS structure
  * @param geoJSONs
  * @returns GeoJSONS extend with intersections
  */
-export declare const createInterSections: (geojson: GeoJSON.FeatureCollection, otherGeoJSON: GeoJSON.FeatureCollection, geoJSONproperties?: GeoJSON.GeoJsonProperties) => GeoJSON.FeatureCollection;
+export declare const createInterSections: (geojson: GeoJSON.FeatureCollection, otherGeoJSON: GeoJSON.FeatureCollection, geoJSONproperties?: GeoJSON.GeoJsonProperties, proj?: string) => GeoJSON.FeatureCollection;
 export declare const getGeoJson: (geojson: GeoJSON.FeatureCollection, shouldAllowMultipleShapes: boolean) => GeoJSON.FeatureCollection;
 export declare const getLastEmptyFeatureIndex: (geoJSONFeatureCollection: GeoJSON.FeatureCollection) => number | undefined;
 export declare const getFeatureCollection: (geoJSONFeature: GeoJSON.Feature | GeoJSON.FeatureCollection, shouldAllowMultipleShapes: boolean, geoJSONFeatureCollection?: GeoJSON.FeatureCollection) => GeoJSON.FeatureCollection;

package/src/lib/components/OpenLayers/layers/TimeAwareEDRLocationLayer.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Dimension } from '@opengeoweb/webmap';
-import { OpenLayersFeatureLayerProps } from './OpenLayersFeatureLayer';
-import { OnInitializeLayerProps } from '../utils/types';
+import type { Dimension } from '@opengeoweb/webmap';
+import type { OpenLayersFeatureLayerProps } from './OpenLayersFeatureLayer';
+import type { OnInitializeLayerProps } from '../utils/types';
 interface TimeAwareEDRLocationLayerProps extends OpenLayersFeatureLayerProps {
     layerId?: string;
     edrBaseUrl: string;

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

@@ -43,6 +43,7 @@ export declare class TimeawareImageSource extends ImageSource {
     private _loadImagery;
     private prefetch;
     triggerPrefetch(): void;
+    cancelPrefetch(): void;
     getImage(extent: Extent, resolution: number, pixelRatio: number, projection: Projection): ImageWrapper;
     setDimProps(params: Record<string, string>): void;
     /**

package/src/lib/edr-layer-api/api.d.ts

@@ -1,4 +1,7 @@
-import { CoverageCollection, EDRInstance } from '@opengeoweb/shared';
+import { Coverage, CoverageCollection, EDRInstance, PointDomain, PointSeriesDomain } from '@opengeoweb/shared';
+export declare const handleResponse: (response: Response) => Promise<any>;
 export declare const joinUrlParams: (params: string[]) => string;
-export declare const fetchEDRLayerCollection: (edrBaseUrlWithCollection: string, instanceId?: string) => Promise<EDRInstance>;
-export declare const fetchEDRLayerCollectionCube: (edrBaseUrlWithCollection: string, parameterName: string, datetime?: string, instanceId?: string, bbox?: string) => Promise<CoverageCollection>;
+export declare const fetchEDRCollectionDetails: (edrBaseUrlWithCollection: string, instanceId?: string) => Promise<EDRInstance>;
+export declare const fetchEDRCube: (edrBaseUrlWithCollection: string, parameterName: string, datetime?: string, instanceId?: string, bbox?: string) => Promise<CoverageCollection<PointDomain | PointSeriesDomain> | Coverage<PointDomain | PointSeriesDomain>>;
+export declare const fetchEDRArea: (edrBaseUrlWithCollection: string, parameterName: string, datetime?: string, instanceId?: string, coords?: string) => Promise<CoverageCollection<PointDomain | PointSeriesDomain> | Coverage<PointDomain | PointSeriesDomain>>;
+export declare const fetchEDRParameter: (collection: EDRInstance | undefined, edrBaseUrlWithCollection: string, parameterName: string, datetime?: string, instanceId?: string) => Promise<CoverageCollection<PointDomain | PointSeriesDomain> | Coverage<PointDomain | PointSeriesDomain> | undefined>;

package/src/lib/edr-layer-api/hooks.d.ts

@@ -1,9 +1,14 @@
-import { EDRInstance, CoverageCollection, EdrParameters } from '@opengeoweb/shared';
 import { UseQueryResult } from '@tanstack/react-query';
-export interface EdrLayerInstance extends EDRInstance {
-    parameter_names?: EdrParameters;
-    title?: string;
-    description?: string;
-}
-export declare const useEDRLayerCollection: (edrBaseUrlWithCollection: string, instanceId?: string, enabled?: boolean) => UseQueryResult<EdrLayerInstance, Error>;
-export declare const useEDRLayerCollectionCube: (edrBaseUrlWithCollection: string, parameterName: string, datetime?: string, instanceId?: string, bbox?: string) => UseQueryResult<CoverageCollection, Error>;
+import { EDRInstance } from '@opengeoweb/shared';
+export declare const webmapEDRQueryOptions: {
+    readonly getCollectionDetailsQuery: (edrBaseUrlWithCollection: string, enabled: boolean, instanceId?: string) => import("@tanstack/react-query").OmitKeyof<import("@tanstack/react-query").UseQueryOptions<EDRInstance, Error, EDRInstance, string[]>, "queryFn"> & {
+        queryFn?: import("@tanstack/react-query").QueryFunction<EDRInstance, string[], never> | undefined;
+    } & {
+        queryKey: string[] & {
+            [dataTagSymbol]: EDRInstance;
+            [dataTagErrorSymbol]: Error;
+        };
+    };
+};
+export declare const useEDRGetCollectionDetails: (edrBaseUrlWithCollection: string, instanceId?: string, enabled?: boolean) => UseQueryResult<EDRInstance>;
+export declare const useEDRGetParameterData: (edrBaseUrlWithCollection: string, parameterName: string, datetime?: string, instanceId?: string) => UseQueryResult<GeoJSON.FeatureCollection | undefined>;

package/src/lib/edr-layer-api/index.d.ts

@@ -1,4 +1,4 @@
 export * from './hooks';
 export * from './colormaps';
-export { useGetEDRLayerInstance } from './utils/useGetEDRLayerInstance';
+export { useEDRWMLayer } from './utils/useEDRWMLayer';
 export { fakeEdrLayerApiHandlers } from './fakeApi';

package/src/lib/edr-layer-api/utils/coverageCollectionToFeatureCollection.d.ts

@@ -0,0 +1,2 @@
+import type { Coverage, CoverageCollection, PointDomain, PointSeriesDomain } from '@opengeoweb/shared';
+export declare const coverageCollectionToFeatureCollection: (cov: CoverageCollection<PointDomain | PointSeriesDomain> | Coverage<PointDomain | PointSeriesDomain> | undefined, parameterNames: string) => GeoJSON.FeatureCollection;

package/src/lib/edr-layer-api/utils/useEDRWMLayer.d.ts

@@ -0,0 +1,11 @@
+import { WMLayer } from '@opengeoweb/webmap';
+import type { OnInitializeLayerProps } from '../../components/OpenLayers/utils/types';
+/**
+ * Returns WMLayer instance in EDR mode. The layer will contains parsed dimensions and styles and keeps a state for these properties.
+ *
+ * @param {string} serviceUrl
+ * @param {string} name
+ * @returns {(WMLayer | null)}
+ */
+export declare const useCreateEDRWMLayer: (serviceUrl: string, name: string, id?: string, onLayerError?: (layerId: string, message: string) => void) => WMLayer | null;
+export declare const useEDRWMLayer: (edrBaseUrl: string, parameter: string, layerId?: string, onInitializeLayer?: (payload: OnInitializeLayerProps) => void) => WMLayer | null;

package/src/lib/edr-layer-api/utils/useEDRWMLayer.spec.d.ts

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

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

@@ -1,2 +0,0 @@
-import { CoverageCollection } from '@opengeoweb/shared';
-export declare const coverageCollectionToFeatureCollection: (cov: CoverageCollection | undefined, parameterNames: string) => GeoJSON.FeatureCollection;

package/src/lib/components/TanStackDemo/EDRLayerApi.stories.d.ts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const EdrLayerAPICollection: {
-    (): React.ReactElement;
-    storyName: string;
-};
-export declare const EdrLayerAPICubeOnObs: {
-    (): React.ReactElement;
-    storyName: string;
-};
-export declare const EdrLayerAPIGetParameters: {
-    (): React.ReactElement;
-    storyName: string;
-};

package/src/lib/edr-layer-api/utils/useGetEDRLayerInstance.d.ts

@@ -1,11 +0,0 @@
-import { WMLayer } from '@opengeoweb/webmap';
-import { OnInitializeLayerProps } from '../../components/OpenLayers/utils/types';
-/**
- * Returns WMLayer instance in EDR mode. The layer will contains parsed dimensions and styles and keeps a state for these properties.
- *
- * @param {string} serviceUrl
- * @param {string} name
- * @returns {(WMLayer | null)}
- */
-export declare const useGetEDRWMLayerInstance: (serviceUrl: string, name: string, id?: string, onLayerError?: (layerId: string, message: string) => void) => WMLayer | null;
-export declare const useGetEDRLayerInstance: (edrBaseUrl: string, parameter: string, layerId?: string, onInitializeLayer?: (payload: OnInitializeLayerProps) => void) => WMLayer | null;