@eeacms/volto-arcgis-block 0.1.467 → 0.1.469

package/CHANGELOG.md

@@ -4,6 +4,33 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [0.1.469](https://github.com/eea/volto-arcgis-block/compare/0.1.468...0.1.469) - 12 August 2026
+
+#### :hammer_and_wrench: Others
+
+- (chore): fix linting [Unai Bolivar - [`df6b223`](https://github.com/eea/volto-arcgis-block/commit/df6b223aa3b8b2e0bf098e191e210ec4022f059f)]
+- (bug): dynamically pull time range from catalog for hi/lo res tile requests [Unai Bolivar - [`810b22d`](https://github.com/eea/volto-arcgis-block/commit/810b22d9b555fb18d9f8d5a810a5099f6ae29ab6)]
+### [0.1.468](https://github.com/eea/volto-arcgis-block/compare/0.1.467...0.1.468) - 12 August 2026
+
+#### :rocket: New Features
+
+- feat: bind processapi endpoint to mapviewer [ana-oprea - [`066c9ea`](https://github.com/eea/volto-arcgis-block/commit/066c9ea8d33a1a1091fbec5e40effd9025d199df)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`c670ae0`](https://github.com/eea/volto-arcgis-block/commit/c670ae0acf614ead0662eee6b9c1d747cef97d33)]
+- style: Automated code fix [eea-jenkins - [`8ad01ad`](https://github.com/eea/volto-arcgis-block/commit/8ad01ad521477bb5f7cc2235531a65a37703ce92)]
+
+#### :hammer_and_wrench: Others
+
+- Merge pull request #1190 from eea/develop [Unai Bolivar - [`5d9e33f`](https://github.com/eea/volto-arcgis-block/commit/5d9e33f1470e6776920657aac835360aff91e47c)]
+- Merge pull request #1189 from eea/CLMS-304632-REFACTOR [Unai Bolivar - [`ffba286`](https://github.com/eea/volto-arcgis-block/commit/ffba286c6368fae6167ffedf3c89a18d74a31edd)]
+- (task): refactor dual layers support [Unai Bolivar - [`c13aaa0`](https://github.com/eea/volto-arcgis-block/commit/c13aaa089d91f476f1fa02e94673dc4d847704c9)]
+- (task): refactor dual layer support [Unai Bolivar - [`7c3a1cf`](https://github.com/eea/volto-arcgis-block/commit/7c3a1cfe18ed8be53b80fb2205b54cce90f0ad68)]
+- CLMS-303649 (bug): Swipe widget solved [Urkorue - [`9f0aea8`](https://github.com/eea/volto-arcgis-block/commit/9f0aea8855a437b63f57e88cb4bd1446bd8f33df)]
+- (feat): implemented a complete refactor to process hi/lo res dataset based on values from internal api [Unai Bolivar - [`f34e881`](https://github.com/eea/volto-arcgis-block/commit/f34e88157a77f90e4fc3ace6b20ffa287efafc5a)]
+- (chore): port refactor [Unai Bolivar - [`fb98e70`](https://github.com/eea/volto-arcgis-block/commit/fb98e70d1750c3d06b961db887509f542412e080)]
+- CLMS-304632 (feat): 10 metre resolution [Urkorue - [`ce9517c`](https://github.com/eea/volto-arcgis-block/commit/ce9517c47eeea1f5d5e752bde7fe19217f2efcac)]
 ### [0.1.467](https://github.com/eea/volto-arcgis-block/compare/0.1.466...0.1.467) - 12 August 2026
 
 ### [0.1.466](https://github.com/eea/volto-arcgis-block/compare/0.1.465...0.1.466) - 7 August 2026

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.467",
+  "version": "0.1.469",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",

package/src/components/MapViewer/MenuWidget.jsx

@@ -22,7 +22,8 @@ var WMSLayer,
   MapImageLayer,
   projection,
   SpatialReference,
-  WebMercatorUtils;
+  WebMercatorUtils,
+  GroupLayer;
 
 const popupSettings = {
   basic: true,
@@ -583,6 +584,7 @@ class MenuWidget extends React.Component {
       'esri/geometry/projection',
       'esri/geometry/SpatialReference',
       'esri/geometry/support/webMercatorUtils',
+      'esri/layers/GroupLayer',
     ]).then(
       ([
         _WMSLayer,
@@ -598,6 +600,7 @@ class MenuWidget extends React.Component {
         _projection,
         _SpatialReference,
         _WebMercatorUtils,
+        _GroupLayer,
       ]) => {
         [
           WMSLayer,
@@ -613,6 +616,7 @@ class MenuWidget extends React.Component {
           projection,
           SpatialReference,
           WebMercatorUtils,
+          GroupLayer,
         ] = [
           _WMSLayer,
           _WMTSLayer,
@@ -627,6 +631,7 @@ class MenuWidget extends React.Component {
           _projection,
           _SpatialReference,
           _WebMercatorUtils,
+          _GroupLayer,
         ];
       },
     );
@@ -843,7 +848,7 @@ class MenuWidget extends React.Component {
 
         this.props.restorePanelScroll();
       }
-
+      //this.pruebasLayer()
       this.setState({ showMapMenu: true });
     }
     // if (this.loadFirst && this.container.current) {
@@ -947,6 +952,294 @@ class MenuWidget extends React.Component {
     }
   }
 
+  supportDualLayers(layer, inheritedIndexLayer, datasetCollectionId) {
+    const resolutionData = layer.resolution_data || {};
+    const thresholdScale = Number(resolutionData.thresholdScale);
+    const normalizeScaleValue = (scaleValue, fallbackValue = 0) => {
+      const normalizedValue = Number(scaleValue);
+      return Number.isFinite(normalizedValue) ? normalizedValue : fallbackValue;
+    };
+    const lowResSourceData = resolutionData.lowRes || layer.lowRes || {};
+    const highResSourceData = resolutionData.highRes || layer.highRes || {};
+    const baseLayerTitle = layer.Title || layer.LayerId || '';
+    const lowResLayerTitle = lowResSourceData.title || baseLayerTitle;
+    const highResLayerTitle = highResSourceData.title || baseLayerTitle;
+    const lowResLayerData = {
+      collectionId: lowResSourceData.collectionId,
+      evalscript: lowResSourceData.evalscript,
+      minScale: normalizeScaleValue(lowResSourceData.minScale, 0),
+      maxScale: normalizeScaleValue(
+        lowResSourceData.maxScale,
+        Number.isFinite(thresholdScale) ? thresholdScale : 0,
+      ),
+    };
+    const highResLayerData = {
+      collectionId: highResSourceData.collectionId,
+      evalscript: highResSourceData.evalscript,
+      minScale: normalizeScaleValue(
+        highResSourceData.minScale,
+        Number.isFinite(thresholdScale) ? thresholdScale + 1 : 0,
+      ),
+      maxScale: normalizeScaleValue(highResSourceData.maxScale, 0),
+    };
+    if (!lowResLayerData.collectionId && !highResLayerData.collectionId) {
+      return;
+    }
+    const CDSEProcessTileLayer = BaseTileLayer.createSubclass({
+      properties: {
+        collectionId: null,
+        catalogByoc: null,
+        evalscript: null,
+        processUrl: '/++api++/@proxyrunprocessapi',
+      },
+
+      _resolveCatalogDateRange: function (options) {
+        const rawCollectionId = this.catalogByoc || '';
+        const normalizedCollectionId = String(rawCollectionId).replace(
+          /^byoc-/i,
+          '',
+        );
+        if (!normalizedCollectionId) {
+          return Promise.resolve(null);
+        }
+
+        const cacheByCollection =
+          this.constructor._catalogDateRangeCache ||
+          (this.constructor._catalogDateRangeCache = {});
+        const pendingByCollection =
+          this.constructor._catalogDateRangePending ||
+          (this.constructor._catalogDateRangePending = {});
+
+        if (cacheByCollection[normalizedCollectionId]) {
+          return Promise.resolve(cacheByCollection[normalizedCollectionId]);
+        }
+        if (pendingByCollection[normalizedCollectionId]) {
+          return pendingByCollection[normalizedCollectionId];
+        }
+
+        const requestUrl =
+          '/++api++/@get_catalogapi_dates?byoc=' +
+          encodeURIComponent(normalizedCollectionId) +
+          '&force_refresh=false';
+
+        pendingByCollection[normalizedCollectionId] = fetch(requestUrl, {
+          headers: {
+            Accept: 'application/json',
+          },
+          signal: options && options.signal,
+        })
+          .then((response) => {
+            if (!response.ok) {
+              return null;
+            }
+            return response.json();
+          })
+          .then((payload) => {
+            const dates = Array.isArray(payload?.dates) ? payload.dates : [];
+            const resolvedDateRange =
+              dates.length > 0
+                ? {
+                    from: dates[0],
+                    to: dates[dates.length - 1],
+                  }
+                : null;
+            cacheByCollection[normalizedCollectionId] = resolvedDateRange;
+            delete pendingByCollection[normalizedCollectionId];
+            return resolvedDateRange;
+          })
+          .catch(() => {
+            delete pendingByCollection[normalizedCollectionId];
+            return null;
+          });
+
+        return pendingByCollection[normalizedCollectionId];
+      },
+
+      // Computes the tile bounding box in EPSG:3857 (without projections)
+      _tileToBBox3857: function (level, row, col) {
+        const tileInfo = this.tileInfo;
+        const origin = tileInfo.origin;
+        const res = tileInfo.lods[level].resolution;
+        const size = tileInfo.size[0];
+
+        const xmin = origin.x + col * size * res;
+        const ymax = origin.y - row * size * res;
+        const xmax = xmin + size * res;
+        const ymin = ymax - size * res;
+
+        return {
+          west: xmin,
+          south: ymin,
+          east: xmax,
+          north: ymax,
+        };
+      },
+
+      // Main method that renders each tile
+      fetchTile: function (level, row, col, options) {
+        // Invert row if it is TMS (south origin)
+        if (this.tms) {
+          var rowmax = 1 << level;
+          row = rowmax - row - 1;
+        }
+
+        const bbox3857 = this._tileToBBox3857(level, row, col);
+        const width = this.tileInfo.size[0];
+        const height = this.tileInfo.size[1];
+
+        return this._resolveCatalogDateRange(options).then(
+          (catalogDateRange) => {
+            const resolvedTimeRangeFrom = catalogDateRange?.from || null;
+            const resolvedTimeRangeTo = catalogDateRange?.to || null;
+            const timeRange = {};
+            if (resolvedTimeRangeFrom) {
+              timeRange.from = resolvedTimeRangeFrom;
+            }
+            if (resolvedTimeRangeTo) {
+              timeRange.to = resolvedTimeRangeTo;
+            }
+            const dataFilter = {};
+            if (Object.keys(timeRange).length) {
+              dataFilter.timeRange = timeRange;
+            }
+
+            const payload = {
+              input: {
+                bounds: {
+                  bbox: [
+                    bbox3857.west,
+                    bbox3857.south,
+                    bbox3857.east,
+                    bbox3857.north,
+                  ],
+                  properties: {
+                    crs: 'http://www.opengis.net/def/crs/EPSG/0/3857',
+                  },
+                },
+                data: [
+                  {
+                    type: this.collectionId,
+                    ...(Object.keys(dataFilter).length ? { dataFilter } : {}),
+                  },
+                ],
+              },
+              output: {
+                width: width,
+                height: height,
+                responses: [
+                  {
+                    identifier: 'default',
+                    format: { type: 'image/png' },
+                  },
+                ],
+              },
+              evalscript: this.evalscript,
+            };
+
+            return fetch(this.processUrl, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+                Accept: 'image/png',
+              },
+              body: JSON.stringify(payload),
+              signal: options && options.signal,
+            })
+              .then((response) => {
+                if (!response.ok) {
+                  throw new Error(
+                    `Process API error ${response.status}: ${response.statusText}`,
+                  );
+                }
+                return response.blob();
+              })
+              .then((blob) => {
+                return new Promise((resolve, reject) => {
+                  const url = URL.createObjectURL(blob);
+                  const img = new Image();
+                  img.onload = () => {
+                    const canvas = document.createElement('canvas');
+                    canvas.width = width;
+                    canvas.height = height;
+                    const ctx = canvas.getContext('2d');
+                    ctx.drawImage(img, 0, 0, width, height);
+                    URL.revokeObjectURL(url);
+                    resolve(canvas);
+                  };
+                  img.onerror = (err) => {
+                    URL.revokeObjectURL(url);
+                    reject(err);
+                  };
+                  img.src = url;
+                });
+              });
+          },
+        );
+      },
+    });
+    const tileInfo = {
+      size: [512, 512],
+      origin: { x: -20037508.342787, y: 20037508.342787 },
+      spatialReference: { wkid: 3857 },
+      lods: Array.from({ length: 21 }, (_, i) => ({
+        level: i,
+        resolution: 156543.033928 / Math.pow(2, i),
+        scale: 591657527.591555 / Math.pow(2, i),
+      })),
+    };
+    const fullExtent = new Extent({
+      xmin: -20037508.342787,
+      ymin: -20037508.342787,
+      xmax: 20037508.342787,
+      ymax: 20037508.342787,
+      spatialReference: { wkid: 3857 },
+    });
+    const sharedLayerProps = {
+      tms: false,
+      tileInfo: tileInfo,
+      fullExtent: fullExtent,
+    };
+
+    //const lowResolutionScaleLimit = layer.thresholdScale;
+
+    const dualResolutionLayers = [];
+    if (lowResLayerData.collectionId && lowResLayerData.evalscript) {
+      dualResolutionLayers.push(
+        new CDSEProcessTileLayer({
+          ...sharedLayerProps,
+          collectionId: lowResLayerData.collectionId,
+          catalogByoc: datasetCollectionId || null,
+          evalscript: lowResLayerData.evalscript,
+          minScale: lowResLayerData.minScale,
+          maxScale: lowResLayerData.maxScale,
+          title: lowResLayerTitle,
+        }),
+      );
+    }
+    if (highResLayerData.collectionId && highResLayerData.evalscript) {
+      dualResolutionLayers.push(
+        new CDSEProcessTileLayer({
+          ...sharedLayerProps,
+          collectionId: highResLayerData.collectionId,
+          catalogByoc: datasetCollectionId || null,
+          evalscript: highResLayerData.evalscript,
+          minScale: highResLayerData.minScale,
+          maxScale: highResLayerData.maxScale,
+          title: highResLayerTitle,
+        }),
+      );
+    }
+    if (!dualResolutionLayers.length) {
+      return;
+    }
+
+    this.layers[layer.LayerId + '_' + inheritedIndexLayer] = new GroupLayer({
+      title: baseLayerTitle,
+      visibilityMode: 'independent',
+      layers: dualResolutionLayers,
+    });
+  }
+
   /**
    * This method is executed after the render method is executed
    */
@@ -2060,6 +2353,13 @@ class MenuWidget extends React.Component {
             LayerTitle: layer.Title,
           });
         //iterate sublayers fetching all sublayer data
+      } else if (
+        layer.hasLowRes === true ||
+        (layer.resolution_data?.lowRes && layer.resolution_data?.highRes)
+      ) {
+        const datasetCollectionId =
+          dataset_download_information?.items?.[0]?.byoc_collection || null;
+        this.supportDualLayers(layer, inheritedIndexLayer, datasetCollectionId);
       } else if (viewService?.toLowerCase().includes('wms')) {
         viewService = viewService?.includes('?')
           ? viewService + '&'
@@ -6950,7 +7250,7 @@ class MenuWidget extends React.Component {
 
   getLayerTitle(layer) {
     let title;
-    if (layer.url.toLowerCase().includes('wmts')) {
+    if (layer.url?.toLowerCase().includes('wmts')) {
       // CLMS-1105
       title = layer._wmtsTitle;
     } else {