@opengeoweb/webmap-react 20.2.0-nightly-20261022 → 20.2.0-nightly-20261024

package/dist/index.esm.js

@@ -7,7 +7,7 @@ import ImageState from 'ol/ImageState';
 import LayerProperty from 'ol/layer/Property';
 import { fromResolutionLike } from 'ol/resolution';
 import ImageSource, { getRequestExtent } from 'ol/source/Image';
-import ImageWrapper, { load } from 'ol/Image';
+import ImageWrapper from 'ol/Image';
 import { getImageSrc, getRequestParams, createLoader } from 'ol/source/wms';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { CustomTooltip, CanvasComponent, useWheelStopPropagation, calculateStartSize, ToolContainerDraggable, CustomIconButton, dateUtils, isDialogFocused, useMakeSureContainerStaysInsideWindow, Draggable, Resizable } from '@opengeoweb/shared';
@@ -1752,6 +1752,27 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
       this._layerName = layerName;
       this.changed();
     }
+    /**
+     * Sets the layer name, style and dimensions at once, so the source never requests a layer with the style or dimensions of another layer.
+     */
+  }, {
+    key: "setLayerProps",
+    value: function setLayerProps(_ref4) {
+      var layerName = _ref4.layerName,
+        styleName = _ref4.styleName,
+        dimProps = _ref4.dimProps;
+      var dimPropsChanged = !isEqual(this._dimProperties, dimProps);
+      if (this._layerName === layerName && this._styleName === styleName && !dimPropsChanged) {
+        return;
+      }
+      this._layerName = layerName;
+      this._styleName = styleName;
+      // Only replace when changed, prefetching compares dimProperties by reference
+      if (dimPropsChanged) {
+        this._dimProperties = _objectSpread2({}, dimProps);
+      }
+      this.changed();
+    }
   }, {
     key: "setTimeValuesValuesToPrefetch",
     value: function setTimeValuesValuesToPrefetch(timeStampsToPrefetch) {
@@ -7077,8 +7098,10 @@ var useGetWMSLayerStyleList = function useGetWMSLayerStyleList(serviceUrl, name)
 /**
  * Returns a WMLayer instance. If the layerType is LayerType.mapLayer or LayerType.wmtsMapLayer, the layer will detect the right type and will contain the parsed dimensions and styles.
  *
+ * When the name changes, the same WMLayer instance is returned, but it is re-parsed asynchronously. Until that is done, it still holds the styles and dimensions of the previous layer name. Use isParsedForName to know when the WMLayer is up to date.
+ *
  * @param layerFoundation
- * @returns object with wmLayer and if set an errorMessage
+ * @returns object with wmLayer, if set an errorMessage, and isParsedForName which is true when wmLayer has been parsed for the requested name
  */
 var useGetWMLayerInstance = function useGetWMLayerInstance(layerFoundation) {
   var hasLayerFoundation = layerFoundation !== undefined;
@@ -7094,6 +7117,11 @@ var useGetWMLayerInstance = function useGetWMLayerInstance(layerFoundation) {
     _React$useState10 = _slicedToArray(_React$useState1, 2),
     errorMessage = _React$useState10[0],
     setErrorMessage = _React$useState10[1];
+  // The layer name for which the WMLayer was last parsed
+  var _React$useState11 = React.useState(null),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    parsedName = _React$useState12[0],
+    setParsedName = _React$useState12[1];
   var refId = useRef(id || webmapUtils.generateLayerId());
   var layerId = refId.current;
   var _useContext = useContext(TimeContext),
@@ -7131,12 +7159,16 @@ var useGetWMLayerInstance = function useGetWMLayerInstance(layerFoundation) {
     wmLayer.setName(name)["catch"](function (e) {
       setErrorMessage(e);
     })["finally"](function () {
+      var _wmLayer$name;
       setLayer(wmLayer);
+      // Use the name of the wmLayer, as it can have been renamed again while parsing
+      setParsedName((_wmLayer$name = wmLayer.name) !== null && _wmLayer$name !== void 0 ? _wmLayer$name : null);
     });
   }, [hasLayerFoundation, layerId, layerType, name, serviceUrl]);
   return {
     wmLayer: layer,
-    errorMessage: errorMessage
+    errorMessage: errorMessage,
+    isParsedForName: !!layer && parsedName === name
   };
 };
 /**
@@ -7375,7 +7407,8 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
       layerType: LayerType.mapLayer
     }),
     wmLayer = _useGetWMLayerInstanc.wmLayer,
-    errorMessage = _useGetWMLayerInstanc.errorMessage;
+    errorMessage = _useGetWMLayerInstanc.errorMessage,
+    isParsedForName = _useGetWMLayerInstanc.isParsedForName;
   if (errorMessage && onLayerError) {
     onLayerError(layerId || '', errorMessage);
   }
@@ -7454,12 +7487,12 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
                 firstRefTime = refTimeDim === null || refTimeDim === void 0 ? void 0 : refTimeDim.getClosestValue(refTimeToFind, true);
                 firstRefTime && refTimeDim && (wmTimeDim === null || wmTimeDim === void 0 ? void 0 : wmTimeDim.setTimeValuesForReferenceTime(firstRefTime, refTimeDim));
               }
-              // Make sure style is set in wmLayer as well
-              styleName && wmLayer.setStyle(styleName);
               // Make sure we have the latest dimension values before initializing
               _context.n = 1;
               return wmLayer.parseLayer();
             case 1:
+              // Make sure style is set in wmLayer as well. Done after parsing, so the style is checked against the styles of this layer name.
+              styleName && wmLayer.setStyle(styleName);
               onInitializeLayer === null || onInitializeLayer === void 0 || onInitializeLayer({
                 layerId: wmLayer.id,
                 style: wmLayer.currentStyle,
@@ -7509,33 +7542,30 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
   useEffect(function () {
     layer === null || layer === void 0 || layer.setVisible(visible);
   }, [layer, visible]);
-  // Layer styleName properties useEffect
-  useEffect(function () {
-    if (wmLayer) {
-      var _styles$, _layer$getSource;
-      var styles = wmLayer.getStyles();
-      var style = styleName && styleName !== 'default' && styles.some(function (style) {
-        return style.name === styleName;
-      }) ? styleName : '';
-      wmLayer.setStyle(style || ((_styles$ = styles[0]) === null || _styles$ === void 0 ? void 0 : _styles$.name) || '');
-      layer === null || layer === void 0 || (_layer$getSource = layer.getSource()) === null || _layer$getSource === void 0 || _layer$getSource.setStyle(style);
-    }
-  }, [layer, styleName, wmLayer]);
-  // layerName  useEffect
-  useEffect(function () {
-    var _layer$getSource2;
-    layer === null || layer === void 0 || (_layer$getSource2 = layer.getSource()) === null || _layer$getSource2 === void 0 || _layer$getSource2.setLayerName(layerName);
-  }, [layer, layerName]);
-  // Layer dim values useEffect,
+  // Layer name, style and dim values useEffect.
+  // After a layer name change, this waits until the wmLayer is parsed for the new name. Until then the wmLayer still has the styles and dimensions of the previous layer.
+  // Name, style and dimensions are set in the source at once, so it never requests the new layer with the style or dimensions of the previous one.
   useEffect(function () {
-    var _layer$getSource3;
-    dimensionsValues && (layer === null || layer === void 0 || (_layer$getSource3 = layer.getSource()) === null || _layer$getSource3 === void 0 ? void 0 : _layer$getSource3.setDimProps(dimensionsValues));
+    var _styles$, _layer$getSource;
+    if (!wmLayer || !isParsedForName) {
+      return;
+    }
+    var styles = wmLayer.getStyles();
+    var style = styleName && styleName !== 'default' && styles.some(function (style) {
+      return style.name === styleName;
+    }) ? styleName : '';
+    wmLayer.setStyle(style || ((_styles$ = styles[0]) === null || _styles$ === void 0 ? void 0 : _styles$.name) || '');
+    dimensionsValues && (layer === null || layer === void 0 || (_layer$getSource = layer.getSource()) === null || _layer$getSource === void 0 ? void 0 : _layer$getSource.setLayerProps({
+      layerName: layerName,
+      styleName: style,
+      dimProps: dimensionsValues
+    }));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [layer, dimensionsValuesEffectCheck]);
+  }, [layer, wmLayer, isParsedForName, layerName, styleName, dimensionsValuesEffectCheck]);
   // Prefetch useEffect
   useEffect(function () {
     var _wmLayer$dimensions3;
-    if (!wmLayer) {
+    if (!wmLayer || !isParsedForName) {
       return;
     }
     var wmTimeDim = wmLayer === null || wmLayer === void 0 || (_wmLayer$dimensions3 = wmLayer.dimensions) === null || _wmLayer$dimensions3 === void 0 ? void 0 : _wmLayer$dimensions3.find(function (dimension) {
@@ -7545,9 +7575,9 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
       return;
     }
     try {
-      var _layer$getSource4;
+      var _layer$getSource2;
       var dimensionValuesToPrefetch = makeDimValuesToPrefetch(wmTimeDim, prefetchList, isAnimating);
-      layer === null || layer === void 0 || (_layer$getSource4 = layer.getSource()) === null || _layer$getSource4 === void 0 || _layer$getSource4.setTimeValuesValuesToPrefetch(dimensionValuesToPrefetch);
+      layer === null || layer === void 0 || (_layer$getSource2 = layer.getSource()) === null || _layer$getSource2 === void 0 || _layer$getSource2.setTimeValuesValuesToPrefetch(dimensionValuesToPrefetch);
     } catch (e) {
       window.console.warn(e);
     }
@@ -7557,8 +7587,9 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
     // - prefetchList
     // - styleName,
     // - dimensionsValuesEffectCheck,
+    // - isParsedForName
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [layer, wmLayer, prefetchListEffectCheck, layerName, styleName, dimensionsValuesEffectCheck]);
+  }, [layer, wmLayer, prefetchListEffectCheck, layerName, styleName, dimensionsValuesEffectCheck, isParsedForName]);
   // Only show debug info for data layers with time dimension
   var hasTimeDim = (_wmLayer$dimensions$f = wmLayer === null || wmLayer === void 0 || (_wmLayer$dimensions4 = wmLayer.dimensions) === null || _wmLayer$dimensions4 === void 0 ? void 0 : _wmLayer$dimensions4.findIndex(function (dimension) {
     return dimension.name === 'time';
@@ -7616,14 +7647,13 @@ var WMSLayer = function WMSLayer(_ref) {
       source: new ImageSource({
         loader: createLoader({
           url: url,
-          load: load,
-          projection: projection,
           params: {
             LAYERS: layerName,
             STYLES: styleName
-          }
-        }),
-        projection: projection
+          },
+          projection: projection,
+          crossOrigin: 'anonymous'
+        })
       })
     });
     map.addLayer(layer);
@@ -7723,9 +7753,11 @@ var WMTSLayer = function WMTSLayer(_ref) {
     if (!map || !wmtsLayer) {
       return function () {};
     }
-    var source = new WMTS(_objectSpread2(_objectSpread2({}, wmtsLayer), layerProps !== null && layerProps !== void 0 && layerProps.dimensions ? {
+    var source = new WMTS(_objectSpread2(_objectSpread2(_objectSpread2({}, wmtsLayer), layerProps !== null && layerProps !== void 0 && layerProps.dimensions ? {
       dimensions: WMTSDimensionsFromDimensions(layerProps.dimensions)
-    } : {}));
+    } : {}), {}, {
+      crossOrigin: 'anonymous'
+    }));
     var layer = new TileLayer({
       source: source
     });
@@ -7787,7 +7819,8 @@ var XYZLayer = function XYZLayer(_ref) {
         url: urlTemplate,
         projection: tileProjectionCode,
         minZoom: layerOptions === null || layerOptions === void 0 ? void 0 : layerOptions.minZoom,
-        maxZoom: layerOptions === null || layerOptions === void 0 ? void 0 : layerOptions.maxZoom
+        maxZoom: layerOptions === null || layerOptions === void 0 ? void 0 : layerOptions.maxZoom,
+        crossOrigin: 'anonymous'
       })
     });
     map.addLayer(layer);
@@ -8063,6 +8096,7 @@ var TiledWMSLayer = function TiledWMSLayer(_ref) {
       source: new TileWMS({
         url: url,
         projection: projection,
+        crossOrigin: 'anonymous',
         params: {
           LAYERS: layerName,
           STYLES: styleName
@@ -10836,9 +10870,11 @@ var TimeAwareWMTSLayer = function TimeAwareWMTSLayer(_ref) {
     if (!map || !wmtsOptions) {
       return function () {};
     }
-    var source = new WMTS(_objectSpread2(_objectSpread2({}, wmtsOptions), dimensions ? {
+    var source = new WMTS(_objectSpread2(_objectSpread2(_objectSpread2({}, wmtsOptions), dimensions ? {
       dimensions: WMTSDimensionsFromDimensions(dimensions)
-    } : {}));
+    } : {}), {}, {
+      crossOrigin: 'anonymous'
+    }));
     var layer = new TileLayer({
       source: source
     });
@@ -11589,8 +11625,16 @@ var OpenLayersLayer = function OpenLayersLayer(layerProps) {
         });
       }
     } else if (type === 'wmts' && _name && _service) {
+      var capabilitiesUrl = new URL(_service, window.location.href);
+      _toConsumableArray(capabilitiesUrl.searchParams.keys()).forEach(function (key) {
+        if (['service', 'request'].includes(key.toLowerCase())) {
+          capabilitiesUrl.searchParams["delete"](key);
+        }
+      });
+      capabilitiesUrl.searchParams.set('SERVICE', 'WMTS');
+      capabilitiesUrl.searchParams.set('REQUEST', 'GetCapabilities');
       return jsx(WMTSLayer, {
-        getCapsURL: "".concat(_service, "?SERVICE=WMTS&REQUEST=GetCapabilities"),
+        getCapsURL: capabilitiesUrl.toString(),
         layerName: _name,
         layerOptions: layerOptions,
         layerProps: layerProps

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

@@ -69,6 +69,14 @@ export declare class TimeawareImageSource extends ImageSource {
     setImageForTimeValue(timeStampsToPrefetch: string): void;
     setStyle(styleName: string): void;
     setLayerName(layerName: string): void;
+    /**
+     * Sets the layer name, style and dimensions at once, so the source never requests a layer with the style or dimensions of another layer.
+     */
+    setLayerProps({ layerName, styleName, dimProps, }: {
+        layerName: string;
+        styleName: string;
+        dimProps: Record<string, string>;
+    }): void;
     setTimeValuesValuesToPrefetch(timeStampsToPrefetch: string[]): void;
 }
 export {};

package/dist/src/lib/hooks/useHooksGetCapabilities.d.ts

@@ -48,12 +48,15 @@ export declare const useGetWMSLayerStyleList: (serviceUrl: string, name: string)
 /**
  * Returns a WMLayer instance. If the layerType is LayerType.mapLayer or LayerType.wmtsMapLayer, the layer will detect the right type and will contain the parsed dimensions and styles.
  *
+ * When the name changes, the same WMLayer instance is returned, but it is re-parsed asynchronously. Until that is done, it still holds the styles and dimensions of the previous layer name. Use isParsedForName to know when the WMLayer is up to date.
+ *
  * @param layerFoundation
- * @returns object with wmLayer and if set an errorMessage
+ * @returns object with wmLayer, if set an errorMessage, and isParsedForName which is true when wmLayer has been parsed for the requested name
  */
 export declare const useGetWMLayerInstance: (layerFoundation?: LayerFoundation) => {
     wmLayer: WMLayer | null;
     errorMessage: string | null;
+    isParsedForName: boolean;
 };
 /**
  * Used for querying WMTS GetCapabilities documents

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@opengeoweb/webmap-react",
-    "version": "20.2.0-nightly-20261022",
+    "version": "20.2.0-nightly-20261024",
     "description": "GeoWeb react wrapper for webmap",
     "license": "Apache-2.0",
     "repository": {
@@ -20,9 +20,9 @@
         }
     },
     "dependencies": {
-        "@opengeoweb/webmap": "20.2.0-nightly-20261022",
-        "@opengeoweb/theme": "20.2.0-nightly-20261022",
-        "@opengeoweb/shared": "20.2.0-nightly-20261022",
+        "@opengeoweb/webmap": "20.2.0-nightly-20261024",
+        "@opengeoweb/theme": "20.2.0-nightly-20261024",
+        "@opengeoweb/shared": "20.2.0-nightly-20261024",
         "lodash": "^4.18.1",
         "ol": "^10.4.0",
         "proj4": "^2.9.2",