@eeacms/volto-arcgis-block 0.1.449 → 0.1.451

package/CHANGELOG.md

@@ -4,6 +4,14 @@ 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.451](https://github.com/eea/volto-arcgis-block/compare/0.1.450...0.1.451) - 21 May 2026
+
+### [0.1.450](https://github.com/eea/volto-arcgis-block/compare/0.1.449...0.1.450) - 13 May 2026
+
+#### :hammer_and_wrench: Others
+
+- (bug): fix swipe, hotspot filter, TOC CDSE [Unai Bolivar - [`0065fef`](https://github.com/eea/volto-arcgis-block/commit/0065fef63b0690aac79472d2b97b06243ccfa123)]
+- (bug): swipe fix [Unai Bolivar - [`685648f`](https://github.com/eea/volto-arcgis-block/commit/685648f17cfa38ddc8bad66aaba9ee0165f7410e)]
 ### [0.1.449](https://github.com/eea/volto-arcgis-block/compare/0.1.448...0.1.449) - 12 May 2026
 
 ### [0.1.448](https://github.com/eea/volto-arcgis-block/compare/0.1.447...0.1.448) - 11 May 2026

package/package.json

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

package/src/components/MapViewer/HotspotWidget.jsx

@@ -596,9 +596,9 @@ class HotspotWidget extends React.Component {
     if (lcContainer === null || lccContainer === null) return;
     if (
       (lcContainer.style.display === 'block' &&
-        lcTimeSelect.value === 'default') ||
+        (lcTimeSelect.value === 'default' || lcTimeSelect.value === '')) ||
       (lccContainer.style.display === 'block' &&
-        lccTimeSelect.value === 'default') ||
+        (lccTimeSelect.value === 'default' || lccTimeSelect.value === '')) ||
       klcSelect.value === 'default'
     ) {
       document.querySelector('#applyFilterButton').disabled = true;
@@ -759,10 +759,20 @@ class HotspotWidget extends React.Component {
             } else {
               selectBox.value = this.state.selectedArea;
               if (this.state.lcYear !== null) {
-                selectBoxLcTime.value = this.state.lcYear;
+                const hasLcYearOption = Array.from(
+                  selectBoxLcTime.options,
+                ).some((option) => option.value === this.state.lcYear);
+                selectBoxLcTime.value = hasLcYearOption
+                  ? this.state.lcYear
+                  : 'default';
               }
               if (this.state.lccYear !== null) {
-                selectBoxLccTime.value = this.state.lccYear;
+                const hasLccYearOption = Array.from(
+                  selectBoxLccTime.options,
+                ).some((option) => option.value === this.state.lccYear);
+                selectBoxLccTime.value = hasLccYearOption
+                  ? this.state.lccYear
+                  : 'default';
               }
               break; // move break statement inside the if block
             }
@@ -783,10 +793,20 @@ class HotspotWidget extends React.Component {
             } else {
               selectBox.value = this.state.selectedArea;
               if (this.state.lcYear !== null) {
-                selectBoxLcTime.value = this.state.lcYear;
+                const hasLcYearOption = Array.from(
+                  selectBoxLcTime.options,
+                ).some((option) => option.value === this.state.lcYear);
+                selectBoxLcTime.value = hasLcYearOption
+                  ? this.state.lcYear
+                  : 'default';
               }
               if (this.state.lccYear !== null) {
-                selectBoxLccTime.value = this.state.lccYear;
+                const hasLccYearOption = Array.from(
+                  selectBoxLccTime.options,
+                ).some((option) => option.value === this.state.lccYear);
+                selectBoxLccTime.value = hasLccYearOption
+                  ? this.state.lccYear
+                  : 'default';
               }
               break;
             }

package/src/components/MapViewer/InfoWidget.jsx

@@ -155,9 +155,10 @@ class InfoWidget extends React.Component {
                 fields: layer.fields,
               });
               promises.push(
-                this.cdseCapabilities(layer.ViewService, layer).then((xml) =>
-                  this.identifyCDSE(xml, layer),
-                ),
+                // this.cdseCapabilities(layer.ViewService, layer).then((xml) =>
+                //   this.identifyCDSE(xml, layer),
+                // ),
+                this.identifyWMTS(layer, e),
               );
             } else if (layer.url.toLowerCase().includes('wms')) {
               layerTypes.push({
@@ -540,7 +541,73 @@ class InfoWidget extends React.Component {
           QUERY_LAYERS: layerId,
           LAYERS: layerId,
           INFO_FORMAT: format,
-          TIME: times ? times[0] + '/' + times[nTimes - 1] : '',
+          TIME:
+            layer.customLayerParameters && layer.customLayerParameters['TIME']
+              ? layer.customLayerParameters['TIME']
+              : times
+              ? times[nTimes - 1] + '/' + times[nTimes - 1]
+              : '',
+          FEATURE_COUNT: '' + nTimes,
+        },
+      })
+        .then((response) => {
+          let format = response.requestOptions.query.INFO_FORMAT;
+          let data;
+          if (format.includes('text')) {
+            data = new window.DOMParser().parseFromString(
+              response.data,
+              'text/html',
+            );
+          } else if (format.includes('json')) {
+            data = JSON.parse(response.data);
+          }
+          return data; // Added return statement
+        })
+        .then((data) => {
+          return data;
+        });
+    });
+  }
+
+  identifyWMTS(layer, event) {
+    let layerId = this.getLayerName(layer);
+    let url = layer.featureInfoUrl ? layer.featureInfoUrl : layer.url;
+    return this.wmsCapabilities(url).then((xml) => {
+      let version = layer.version;
+      let format = this.parseFormat(xml, layerId);
+      let times = '';
+      let nTimes = 1;
+      return esriRequest(url, {
+        responseType: 'html',
+        sync: 'true',
+        query: {
+          request: 'GetFeatureInfo',
+          service: 'WMS',
+          version: version,
+          SRS: 'EPSG:' + this.props.view.spatialReference.latestWkid,
+          CRS: 'EPSG:' + this.props.view.spatialReference.latestWkid,
+          BBOX:
+            '' +
+            this.props.view.extent.xmin +
+            ', ' +
+            this.props.view.extent.ymin +
+            ', ' +
+            this.props.view.extent.xmax +
+            ', ' +
+            this.props.view.extent.ymax,
+          HEIGHT: this.props.view.height,
+          WIDTH: this.props.view.width,
+          X: Math.round(event.screenPoint.x),
+          Y: Math.round(event.screenPoint.y),
+          QUERY_LAYERS: layerId,
+          LAYERS: layerId,
+          INFO_FORMAT: format,
+          TIME:
+            layer.customLayerParameters && layer.customLayerParameters['TIME']
+              ? layer.customLayerParameters['TIME']
+              : times
+              ? times[nTimes - 1] + '/' + times[nTimes - 1]
+              : '',
           FEATURE_COUNT: '' + nTimes,
         },
       })

package/src/components/MapViewer/MenuWidget.jsx

@@ -2068,10 +2068,14 @@ class MenuWidget extends React.Component {
           ViewService: viewService,
         });
       } else if (viewService?.toLowerCase().includes('wmts')) {
+        const resolveSentinelLayer = /(?:sh\.dataspace\.copernicus\.eu|services\.sentinel-hub\.com)\/ogc\/wmts/i.test(
+          viewService || '',
+        );
         this.layers[layer.LayerId + '_' + inheritedIndexLayer] = new WMTSLayer({
           url: viewService?.includes('?')
             ? viewService + '&'
             : viewService + '?',
+          serviceMode: 'KVP',
           spatialReference: this.view?.spatialReference,
           //id: layer.LayerId,
           title: '',
@@ -2092,6 +2096,7 @@ class MenuWidget extends React.Component {
           DatasetDownloadInformation: dataset_download_information || {},
           customLayerParameters: {
             SHOWLOGO: false,
+            ...(resolveSentinelLayer ? { PREVIEW: 2 } : {}),
           },
         });
       } else {
@@ -2703,6 +2708,18 @@ class MenuWidget extends React.Component {
     if (!activeLayerData) {
       return false;
     }
+    const resolveSentinelLayer = /(?:sh\.dataspace\.copernicus\.eu|services\.sentinel-hub\.com)\/ogc\/wmts/i.test(
+      (
+        currentLayerData.ViewService ||
+        currentLayerData.url ||
+        ''
+      ).toLowerCase(),
+    );
+    const nextCustomLayerParameters = {
+      ...(currentLayerData.customLayerParameters || {}),
+      SHOWLOGO: false,
+      ...(resolveSentinelLayer ? { PREVIEW: 2 } : {}),
+    };
 
     const nextLayerData = new WMTSLayer({
       id: currentLayerData.id || layerId,
@@ -2714,9 +2731,7 @@ class MenuWidget extends React.Component {
         this.view?.spatialReference || currentLayerData.spatialReference,
       activeLayer: activeLayerData,
       ViewService: currentLayerData.ViewService || currentLayerData.url,
-      customLayerParameters: currentLayerData.customLayerParameters || {
-        SHOWLOGO: false,
-      },
+      customLayerParameters: nextCustomLayerParameters,
     });
 
     const customKeys = [
@@ -4444,8 +4459,23 @@ class MenuWidget extends React.Component {
               if (
                 this.layers[elem.id].ViewService.toLowerCase().includes('wmts')
               ) {
+                const resolveSentinelLayer = /(?:sh\.dataspace\.copernicus\.eu|services\.sentinel-hub\.com)\/ogc\/wmts/i.test(
+                  this.layers[elem.id].ViewService ||
+                    this.layers[elem.id].url ||
+                    '',
+                );
+                const nextCustomLayerParameters = {
+                  ...(this.layers[elem.id].customLayerParameters || {}),
+                  SHOWLOGO: false,
+                  ...(resolveSentinelLayer ? { PREVIEW: 2 } : {}),
+                  TIME:
+                    payload.dates[payload.dates.length - 1] +
+                      '/' +
+                      payload.dates[payload.dates.length - 1] || '',
+                };
                 this.layers[elem.id] = new WMTSLayer({
                   url: this.layers[elem.id].url,
+                  serviceMode: this.layers[elem.id].serviceMode || 'KVP',
                   spatialReference: this.layers[elem.id].spatialReference,
                   title: this.layers[elem.id].title,
                   _wmtsTitle: this.layers[elem.id]._wmtsTitle,
@@ -4460,13 +4490,7 @@ class MenuWidget extends React.Component {
                   LayerTitle: this.layers[elem.id].LayerTitle,
                   DatasetDownloadInformation: this.layers[elem.id]
                     .DatasetDownloadInformation,
-                  customLayerParameters: {
-                    SHOWLOGO: false,
-                    TIME:
-                      payload.dates[payload.dates.length - 1] +
-                        '/' +
-                        payload.dates[payload.dates.length - 1] || '',
-                  },
+                  customLayerParameters: nextCustomLayerParameters,
                 });
               }
             }
@@ -4632,26 +4656,97 @@ class MenuWidget extends React.Component {
       sessionStorage.removeItem('downloadButtonClicked');
       sessionStorage.removeItem('timeSliderTag');
       this.deleteCheckedLayer(elem.id);
-      this.layers[elem.id].opacity = 1;
-      this.layers[elem.id].visible = false;
+      const currentLayerData = this.layers[elem.id];
+      currentLayerData.opacity = 1;
+      currentLayerData.visible = false;
       if (!userService) this.deleteFilteredLayer(elem.id);
-      let mapLayer = this.map.findLayerById(elem.id);
+      const mapLayersToRemove = [];
+      const mapLayer = this.map.findLayerById(elem.id);
       if (mapLayer) {
+        mapLayersToRemove.push(mapLayer);
+      }
+      if (
+        currentLayerData &&
+        this.map &&
+        this.map.layers &&
+        typeof this.map.layers.includes === 'function' &&
+        this.map.layers.includes(currentLayerData)
+      ) {
+        mapLayersToRemove.push(currentLayerData);
+      }
+      const currentLayerService = String(
+        currentLayerData?.ViewService || currentLayerData?.url || '',
+      ).toLowerCase();
+      const currentLayerActive = currentLayerData?.activeLayer?.id || null;
+      const currentLayerDataset = currentLayerData?.DatasetId || null;
+      const mapLayerItems = this.map?.layers?.items || [];
+      mapLayerItems.forEach((candidateLayer) => {
+        if (!candidateLayer) {
+          return;
+        }
+        if (candidateLayer === currentLayerData) {
+          mapLayersToRemove.push(candidateLayer);
+          return;
+        }
+        if (
+          candidateLayer.LayerId === elem.id ||
+          candidateLayer.id === elem.id
+        ) {
+          mapLayersToRemove.push(candidateLayer);
+          return;
+        }
+        const candidateService = String(
+          candidateLayer.ViewService || candidateLayer.url || '',
+        ).toLowerCase();
+        if (!currentLayerService || currentLayerService !== candidateService) {
+          return;
+        }
+        if (
+          currentLayerActive &&
+          candidateLayer.activeLayer &&
+          candidateLayer.activeLayer.id === currentLayerActive
+        ) {
+          mapLayersToRemove.push(candidateLayer);
+          return;
+        }
+        if (
+          currentLayerDataset &&
+          candidateLayer.DatasetId &&
+          candidateLayer.DatasetId === currentLayerDataset
+        ) {
+          mapLayersToRemove.push(candidateLayer);
+        }
+      });
+      const removedLayerIds = new Set();
+      mapLayersToRemove.forEach((layerToRemove) => {
+        if (!layerToRemove) {
+          return;
+        }
+        const layerIdentity = layerToRemove.uid || layerToRemove.id;
+        if (layerIdentity && removedLayerIds.has(layerIdentity)) {
+          return;
+        }
         if (!userService) {
           if (
-            mapLayer.type &&
-            mapLayer.type !== 'base-tile' &&
-            mapLayer.type !== 'wmts'
-          )
-            mapLayer.clear();
-          if (mapLayer.type !== 'wmts') {
-            mapLayer.destroy();
+            layerToRemove.type &&
+            layerToRemove.type !== 'base-tile' &&
+            layerToRemove.type !== 'wmts' &&
+            typeof layerToRemove.clear === 'function'
+          ) {
+            layerToRemove.clear();
+          }
+          if (
+            layerToRemove.type !== 'wmts' &&
+            typeof layerToRemove.destroy === 'function'
+          ) {
+            layerToRemove.destroy();
           }
-          this.map.remove(this.layers[elem.id]);
-        } else {
-          this.map.remove(mapLayer);
         }
-      }
+        this.map.remove(layerToRemove);
+        if (layerIdentity) {
+          removedLayerIds.add(layerIdentity);
+        }
+      });
       if (this.uploadedGraphics && this.uploadedGraphics[elem.id]) {
         try {
           this.view.graphics.removeMany(this.uploadedGraphics[elem.id]);

package/src/components/MapViewer/SwipeWidget.jsx

@@ -152,8 +152,9 @@ class SwipeWidget extends React.Component {
       // CLOSE
       this.props.mapViewer.setActiveWidget();
       this.cleanupSwipeState();
-      this.loadVisibleLayers();
+      this.removeLayerChangeListener();
       this.cleanupSwipeResource();
+      this.loadVisibleLayers();
       this.setState({ showMapMenu: false });
       if (shouldReturnToThreeDimensionalView) {
         this.props.mapViewer.switchViewMode('3d');
@@ -434,11 +435,15 @@ class SwipeWidget extends React.Component {
     let cl = JSON.parse(sessionStorage.getItem('checkedLayers'));
     if (cl) {
       cl.forEach((layer) => {
-        if (layers[layer].id === selectedLeadingLayer) {
-          this.swipe.leadingLayers.add(layers[layer]);
+        const selectedLayer = layers[layer];
+        if (!selectedLayer) {
+          return;
+        }
+        if (selectedLayer.id === selectedLeadingLayer) {
+          this.swipe.leadingLayers.add(selectedLayer);
         }
-        if (layers[layer].id === selectedTrailingLayer) {
-          this.swipe.trailingLayers.add(layers[layer]);
+        if (selectedLayer.id === selectedTrailingLayer) {
+          this.swipe.trailingLayers.add(selectedLayer);
         }
       });
     }
@@ -488,7 +493,9 @@ class SwipeWidget extends React.Component {
     let cl = JSON.parse(sessionStorage.getItem('checkedLayers'));
     if (cl) {
       cl.forEach((layer) => {
-        this.map.layers.add(layers[layer]);
+        if (layers[layer]) {
+          this.map.layers.add(layers[layer]);
+        }
       });
     }
     if (layers['lcc_filter']) {