@eeacms/volto-arcgis-block 0.1.452 → 0.1.453

package/CHANGELOG.md

@@ -4,6 +4,21 @@ 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.453](https://github.com/eea/volto-arcgis-block/compare/0.1.452...0.1.453) - 3 June 2026
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`7e20e98`](https://github.com/eea/volto-arcgis-block/commit/7e20e98f5f5e497b79557453c464dee98753ea6e)]
+- chore: upgrade Makefile to latest [valentinab25 - [`fb2e387`](https://github.com/eea/volto-arcgis-block/commit/fb2e387f9ec8cfac7be5894d775313dddaf80897)]
+
+#### :hammer_and_wrench: Others
+
+- (task): add stylelint dev dependency [Unai Bolivar - [`d11c354`](https://github.com/eea/volto-arcgis-block/commit/d11c3540d3eb4bfc064768cb70d9d1809c60ec3a)]
+- (bug): fix isuess found by jenkins [Unai Bolivar - [`74638f9`](https://github.com/eea/volto-arcgis-block/commit/74638f9047b7868a7a64a7b3ca3bbdfa1ff8a8cd)]
+- (bug): fix isuess found by jenkins [Unai Bolivar - [`98c1258`](https://github.com/eea/volto-arcgis-block/commit/98c125831bd9d0290087c244777c7b6764d406f0)]
+- (task): update volto version in jenkinsfile [Unai Bolivar - [`f0c13e8`](https://github.com/eea/volto-arcgis-block/commit/f0c13e84a71063f4181d5cc59406132db7b29793)]
+- (bug): Error handling when uploading external services [Unai Bolivar - [`f8f873d`](https://github.com/eea/volto-arcgis-block/commit/f8f873d53064def279101a711df99da09a4dd6b6)]
+- (bug): In the legend widget, retrieve the legends from CDSE services [Unai Bolivar - [`b909191`](https://github.com/eea/volto-arcgis-block/commit/b9091910c676568f2070b3b689972d169d8a2880)]
 ### [0.1.452](https://github.com/eea/volto-arcgis-block/compare/0.1.451...0.1.452) - 28 May 2026
 
 ### [0.1.451](https://github.com/eea/volto-arcgis-block/compare/0.1.450...0.1.451) - 21 May 2026

package/Jenkinsfile

@@ -10,7 +10,7 @@ pipeline {
         DEPENDENCIES = ""
         BACKEND_PROFILES = "eea.kitkat:testing"
         BACKEND_ADDONS = "clms.addon,clms.types,clms.downloadtool,clms.statstool"
-        VOLTO = "16.31.1"
+        VOLTO = "17"
         IMAGE_NAME = BUILD_TAG.toLowerCase().replaceAll('[^a-z0-9]', '-')
         NODEJS_VERSION = "22"
     }

package/Makefile

@@ -46,7 +46,7 @@ endif
 DIR=$(shell basename $$(pwd))
 NODE_MODULES?="../../../node_modules"
 PLONE_VERSION?=6
-VOLTO_VERSION?=16.31.1
+VOLTO_VERSION?=17
 ADDON_PATH="${DIR}"
 ADDON_NAME="@eeacms/${ADDON_PATH}"
 DOCKER_COMPOSE=PLONE_VERSION=${PLONE_VERSION} VOLTO_VERSION=${VOLTO_VERSION} ADDON_NAME=${ADDON_NAME} ADDON_PATH=${ADDON_PATH} docker compose
@@ -86,19 +86,19 @@ cypress-open:		## Open cypress integration tests
 
 .PHONY: cypress-run
 cypress-run:	## Run cypress integration tests
-	CYPRESS_API_PATH="${RAZZLE_DEV_PROXY_API_PATH}" NODE_ENV=development  $(NODE_MODULES)/cypress/bin/cypress run --browser chrome
+	CYPRESS_API_PATH="${RAZZLE_DEV_PROXY_API_PATH}" NODE_ENV=development  $(NODE_MODULES)/cypress/bin/cypress run
 
 .PHONY: test
 test:			## Run jest tests
-	${DOCKER_COMPOSE} run -e CI=1 frontend test
+	${DOCKER_COMPOSE} run --no-deps -e CI=1 frontend test
 
 .PHONY: test-update
 test-update:	## Update jest tests snapshots
-	${DOCKER_COMPOSE} run -e CI=1 frontend test -u
+	${DOCKER_COMPOSE} run --no-deps -e CI=1 frontend test -u
 
 .PHONY: stylelint
 stylelint:		## Stylelint
-	$(NODE_MODULES)/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'
+	$(NODE_MODULES)/.bin/stylelint --allow-empty-input 'src/**/*.{css,less}'
 
 .PHONY: stylelint-overrides
 stylelint-overrides:
@@ -106,7 +106,7 @@ stylelint-overrides:
 
 .PHONY: stylelint-fix
 stylelint-fix:	## Fix stylelint
-	$(NODE_MODULES)/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}' --fix
+	$(NODE_MODULES)/.bin/stylelint --allow-empty-input 'src/**/*.{css,less}' --fix
 	$(NODE_MODULES)/.bin/stylelint --custom-syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides' --fix
 
 .PHONY: prettier
@@ -119,11 +119,11 @@ prettier-fix:	## Fix prettier
 
 .PHONY: lint
 lint:			## ES Lint
-	$(NODE_MODULES)/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'
+	$(NODE_MODULES)/.bin/eslint --max-warnings=0 'src/**/*.{js,jsx}'
 
 .PHONY: lint-fix
 lint-fix:		## Fix ES Lint
-	$(NODE_MODULES)/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'
+	$(NODE_MODULES)/.bin/eslint --fix 'src/**/*.{js,jsx}'
 
 .PHONY: i18n
 i18n:			## i18n
@@ -155,7 +155,11 @@ start-ci:
 	cd ../..
 	yarn start
 
+.PHONY: check-ci
+check-ci:
+	$(NODE_MODULES)/.bin/wait-on -t 240000  http://localhost:3000
+
 .PHONY: cypress-ci
 cypress-ci:
 	$(NODE_MODULES)/.bin/wait-on -t 240000  http://localhost:3000
-	NODE_ENV=development make cypress-run
+	CYPRESS_API_PATH="${RAZZLE_DEV_PROXY_API_PATH}" NODE_ENV=development  $(NODE_MODULES)/cypress/bin/cypress run --browser chromium

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.452",
+  "version": "0.1.453",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",
@@ -75,6 +75,7 @@
     "dotenv": "^16.3.2",
     "husky": "^8.0.3",
     "lint-staged": "13.1.4",
-    "md5": "^2.3.0"
+    "md5": "^2.3.0",
+    "stylelint": "^13.12.0"
   }
 }

package/src/components/MapViewer/AreaWidget.jsx

@@ -924,8 +924,9 @@ class AreaWidget extends React.Component {
   }
 
   checkExtent(extent) {
-    const areaLimit = this.mapviewer_config.Components[0].Products[0]
-      .Datasets[0].DownloadLimitAreaExtent;
+    const areaLimit =
+      this.mapviewer_config.Components[0].Products[0].Datasets[0]
+        .DownloadLimitAreaExtent;
     if (
       extent.width * extent.height > areaLimit ||
       extent.width * extent.height === 0

package/src/components/MapViewer/BasemapWidget.jsx

@@ -169,21 +169,23 @@ class BasemapWidget extends React.Component {
           }
           url = this.parseCapabilities(layers[i], 'ResourceURL')[0].attributes
             .template.textContent;
-          let basemapCode = `
-            let basemap${i} = new Basemap({
-              title: this.parseCapabilities(layers[${i}], 'ows:title')[0].innerText,
-              thumbnailUrl: ${url}.replace('{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}', '/${proj}/0/0/0'),
-              baseLayers: [
-                new WebTileLayer({
-                  urlTemplate: ${url}.replace('{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}', '/${proj}/{z}/{x}/{y}'),
-                  copyright: '© OpenStreetMap (and) contributors, CC-BY-SA',
-                })
-              ]
-            });
-            this.layerArray.push(basemap${i});
-          `;
-
-          Function.apply(null, [basemapCode]).call(this);
+          const basemap = new Basemap({
+            title: this.parseCapabilities(layers[i], 'ows:title')[0].innerText,
+            thumbnailUrl: url.replace(
+              '{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}',
+              `/${proj}/0/0/0`,
+            ),
+            baseLayers: [
+              new WebTileLayer({
+                urlTemplate: url.replace(
+                  '{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}',
+                  `/${proj}/{z}/{x}/{y}`,
+                ),
+                copyright: '© OpenStreetMap (and) contributors, CC-BY-SA',
+              }),
+            ],
+          });
+          this.layerArray.push(basemap);
         }
         this.basemapGallery = new BasemapGallery({
           view: this.props.view,

package/src/components/MapViewer/BookmarkWidget.jsx

@@ -433,11 +433,10 @@ class BookmarkWidget extends React.Component {
             ) {
               Object.keys(this.props.hotspotData.filteredLayers).forEach(
                 (key) => {
-                  hotspotFilters.filteredLayers[
-                    key
-                  ] = this.props.hotspotData.filteredLayers[
-                    key
-                  ].customLayerParameters['CQL_FILTER'];
+                  hotspotFilters.filteredLayers[key] =
+                    this.props.hotspotData.filteredLayers[
+                      key
+                    ].customLayerParameters['CQL_FILTER'];
                 },
               );
             }
@@ -619,11 +618,10 @@ class BookmarkWidget extends React.Component {
           ) {
             Object.keys(this.props.hotspotData.filteredLayers).forEach(
               (key) => {
-                hotspotFilters.filteredLayers[
-                  key
-                ] = this.props.hotspotData.filteredLayers[
-                  key
-                ].customLayerParameters['CQL_FILTER'];
+                hotspotFilters.filteredLayers[key] =
+                  this.props.hotspotData.filteredLayers[
+                    key
+                  ].customLayerParameters['CQL_FILTER'];
               },
             );
           }

package/src/components/MapViewer/HotspotWidget.jsx

@@ -44,9 +44,8 @@ class HotspotWidget extends React.Component {
     this.layerModelInit = this.layerModelInit.bind(this);
     this.getBBoxData = this.getBBoxData.bind(this);
     this.handleApplyFilter = this.handleApplyFilter.bind(this);
-    this.filteredLayersToHotspotData = this.filteredLayersToHotspotData.bind(
-      this,
-    );
+    this.filteredLayersToHotspotData =
+      this.filteredLayersToHotspotData.bind(this);
     this.mapCfg = this.props.mapCfg;
     this.selectedArea = null;
     this.lcYear = null;
@@ -268,8 +267,8 @@ class HotspotWidget extends React.Component {
       let filterLayer;
 
       if (type === 'lcc') {
-        let selectLccBoxTime = document.getElementById('select-klc-lccTime')
-          .value;
+        let selectLccBoxTime =
+          document.getElementById('select-klc-lccTime').value;
         //this.lccYear = selectLccBoxTime;
         this.setState({ lccYear: selectLccBoxTime });
         if (document.getElementById('select-klc-lccTime').value.match(/\d+/g)) {
@@ -300,9 +299,8 @@ class HotspotWidget extends React.Component {
         filterLayer = this.esriLayer_lcc;
 
         filterLayer.sublayers.items[0].name = this.addLegendName(typeLegend);
-        filterLayer.sublayers.items[0].legendUrl = this.addLegendNameToUrl(
-          typeLegend,
-        );
+        filterLayer.sublayers.items[0].legendUrl =
+          this.addLegendNameToUrl(typeLegend);
         filterLayer.sublayers.items[0].title = title;
         if (
           bookmarkHotspotFilter !== null &&
@@ -334,8 +332,8 @@ class HotspotWidget extends React.Component {
           }
         }
 
-        let selectLcBoxTime = document.getElementById('select-klc-lcTime')
-          .value;
+        let selectLcBoxTime =
+          document.getElementById('select-klc-lcTime').value;
 
         this.addFilteredLayersData(
           filteredLayersData,
@@ -356,9 +354,8 @@ class HotspotWidget extends React.Component {
         filterLayer = this.esriLayer_lc;
 
         filterLayer.sublayers.items[0].name = this.addLegendName(typeLegend);
-        filterLayer.sublayers.items[0].legendUrl = this.addLegendNameToUrl(
-          typeLegend,
-        );
+        filterLayer.sublayers.items[0].legendUrl =
+          this.addLegendNameToUrl(typeLegend);
         filterLayer.sublayers.items[0].title = title;
         if (
           bookmarkHotspotFilter !== null &&

package/src/components/MapViewer/MapViewer.jsx

@@ -389,12 +389,10 @@ class MapViewer extends React.Component {
     this.viewUiOperationState = null;
     this.shouldClearSessionOnUnmount = true;
     this.uploadErrorTimeoutTask = null;
-    this.scheduleViewModeButtonLoad = this.scheduleViewModeButtonLoad.bind(
-      this,
-    );
-    this.processPendingWidgetActivation = this.processPendingWidgetActivation.bind(
-      this,
-    );
+    this.scheduleViewModeButtonLoad =
+      this.scheduleViewModeButtonLoad.bind(this);
+    this.processPendingWidgetActivation =
+      this.processPendingWidgetActivation.bind(this);
   }
 
   processPendingWidgetActivation() {
@@ -1051,9 +1049,8 @@ class MapViewer extends React.Component {
         this.isComponentMounted &&
         transitionTaskId === this.viewTransitionTaskId
       ) {
-        const fallbackViewState = this.buildFallbackViewState(
-          normalizedNextMode,
-        );
+        const fallbackViewState =
+          this.buildFallbackViewState(normalizedNextMode);
         isViewCreated = await this.createView(
           normalizedNextMode,
           fallbackViewState,
@@ -1158,10 +1155,8 @@ class MapViewer extends React.Component {
   // Method to handle session state updates when user authentication changes
   handleSessionStateUpdate(newUserState, previousUserState) {
     const { user_id: newUserId, isLoggedIn: newIsLoggedIn } = newUserState;
-    const {
-      user_id: prevUserId,
-      isLoggedIn: prevIsLoggedIn,
-    } = previousUserState;
+    const { user_id: prevUserId, isLoggedIn: prevIsLoggedIn } =
+      previousUserState;
 
     // Handle login/logout transitions
     if (prevIsLoggedIn !== newIsLoggedIn) {
@@ -1293,9 +1288,8 @@ class MapViewer extends React.Component {
 
   activeLayersHandler(newActiveLayers) {
     try {
-      const layersWithoutCircularReferences = this.removeCircularReferences(
-        newActiveLayers,
-      );
+      const layersWithoutCircularReferences =
+        this.removeCircularReferences(newActiveLayers);
       this.activeLayers = layersWithoutCircularReferences;
       mapStatus.activeLayers = layersWithoutCircularReferences;
       sessionStorage.setItem('mapStatus', JSON.stringify(mapStatus));
@@ -1523,10 +1517,8 @@ class MapViewer extends React.Component {
     }
 
     // Handle user state changes from context
-    const {
-      user_id: currentUserId,
-      isLoggedIn: currentIsLoggedIn,
-    } = this.context;
+    const { user_id: currentUserId, isLoggedIn: currentIsLoggedIn } =
+      this.context;
     const { currentUserState: prevUserState } = prevState;
 
     // Compare current context values with previous state

package/src/components/MapViewer/MenuWidget.jsx

@@ -186,9 +186,8 @@ export const AddCartItem = ({
             });
           }
           if ((check === 'area' || fileUpload) && isMapServer) {
-            const transformedLayerExtent = WebMercatorUtils.webMercatorToGeographic(
-              layerExtent,
-            );
+            const transformedLayerExtent =
+              WebMercatorUtils.webMercatorToGeographic(layerExtent);
             if (transformedLayerExtent.intersects(areaExtent)) {
               intersection = true;
             }
@@ -2017,6 +2016,14 @@ class MenuWidget extends React.Component {
     //For Legend request
     const legendRequest =
       'request=GetLegendGraphic&version=1.0.0&format=image/png&layer=';
+    const isCdseService =
+      !!viewService &&
+      ['/ogc/', '/cdse/'].some((segment) =>
+        viewService.toLowerCase().includes(segment),
+      );
+    const cdseLegendUrl = isCdseService
+      ? this.buildCdseLegendUrl(viewService, layer.Title || layer.LayerId)
+      : null;
     //For each layer
     let inheritedIndexLayer = inheritedIndex + '_' + layerIndex;
     let style = this.props.download ? { paddingLeft: '4rem' } : {};
@@ -2025,16 +2032,15 @@ class MenuWidget extends React.Component {
       !this.layers.hasOwnProperty(layer.LayerId + '_' + inheritedIndexLayer)
     ) {
       if (viewService?.toLowerCase().endsWith('mapserver')) {
-        this.layers[
-          layer.LayerId + '_' + inheritedIndexLayer
-        ] = new MapImageLayer({
-          url: viewService,
-          title: layer.Title,
-          DatasetId: DatasetId,
-          DatasetTitle: DatasetTitle,
-          ProductId: ProductId,
-          LayerTitle: layer.Title,
-        });
+        this.layers[layer.LayerId + '_' + inheritedIndexLayer] =
+          new MapImageLayer({
+            url: viewService,
+            title: layer.Title,
+            DatasetId: DatasetId,
+            DatasetTitle: DatasetTitle,
+            ProductId: ProductId,
+            LayerTitle: layer.Title,
+          });
         //iterate sublayers fetching all sublayer data
       } else if (viewService?.toLowerCase().includes('wms')) {
         viewService = viewService?.includes('?')
@@ -2056,6 +2062,8 @@ class MenuWidget extends React.Component {
               legendEnabled: true,
               legendUrl: layer.StaticImageLegend
                 ? layer.StaticImageLegend
+                : cdseLegendUrl
+                ? cdseLegendUrl
                 : viewService + legendRequest + layer.LayerId,
               featureInfoUrl: featureInfoUrl,
             },
@@ -2068,9 +2076,10 @@ 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 || '',
-        );
+        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 + '&'
@@ -2091,7 +2100,7 @@ class MenuWidget extends React.Component {
           DatasetTitle: DatasetTitle,
           ProductId: ProductId,
           ViewService: viewService,
-          StaticImageLegend: layer.StaticImageLegend,
+          StaticImageLegend: layer.StaticImageLegend || cdseLegendUrl,
           LayerTitle: layer.Title,
           DatasetDownloadInformation: dataset_download_information || {},
           customLayerParameters: {
@@ -2100,24 +2109,23 @@ class MenuWidget extends React.Component {
           },
         });
       } else {
-        this.layers[
-          layer.LayerId + '_' + inheritedIndexLayer
-        ] = new FeatureLayer({
-          url:
-            viewService +
-            (viewService?.endsWith('/') ? '' : '/') +
-            layer.LayerId,
-          id: layer.LayerId,
-          title: layer.Title,
-          featureInfoUrl: featureInfoUrl,
-          popupEnabled: true,
-          isTimeSeries: isTimeSeries,
-          fields: layer.Fields,
-          DatasetId: DatasetId,
-          DatasetTitle: DatasetTitle,
-          ProductId: ProductId,
-          ViewService: viewService,
-        });
+        this.layers[layer.LayerId + '_' + inheritedIndexLayer] =
+          new FeatureLayer({
+            url:
+              viewService +
+              (viewService?.endsWith('/') ? '' : '/') +
+              layer.LayerId,
+            id: layer.LayerId,
+            title: layer.Title,
+            featureInfoUrl: featureInfoUrl,
+            popupEnabled: true,
+            isTimeSeries: isTimeSeries,
+            fields: layer.Fields,
+            DatasetId: DatasetId,
+            DatasetTitle: DatasetTitle,
+            ProductId: ProductId,
+            ViewService: viewService,
+          });
       }
     }
     // const isCDSE = !!this.url && this.url.toLowerCase().includes('/ogc/');
@@ -2312,6 +2320,26 @@ class MenuWidget extends React.Component {
     return this.getProxyBase() + this.stripProtocol(url);
   }
 
+  buildCdseLegendUrl(serviceUrl, layerTitle) {
+    if (!serviceUrl || !layerTitle) return null;
+    const collectionMatch =
+      /\/cdse\/([^/?#]+)/i.exec(serviceUrl) ||
+      /\/ogc\/(?:wmts|wms)\/([^/?#]+)/i.exec(serviceUrl);
+    if (!collectionMatch || !collectionMatch[1]) return null;
+    const legendParams = new URLSearchParams({
+      service: 'WMS',
+      request: 'GetLegendGraphic',
+      version: '1.3.0',
+      format: 'image/png',
+      layer: layerTitle,
+      style: 'default',
+    });
+    return (
+      this.getProxyBase() +
+      `land.copernicus.eu/cdse/${collectionMatch[1]}?${legendParams.toString()}`
+    );
+  }
+
   parseWMSLayers(xml) {
     let doc = xml;
     try {
@@ -2708,13 +2736,14 @@ 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 resolveSentinelLayer =
+      /(?:sh\.dataspace\.copernicus\.eu|services\.sentinel-hub\.com)\/ogc\/wmts/i.test(
+        (
+          currentLayerData.ViewService ||
+          currentLayerData.url ||
+          ''
+        ).toLowerCase(),
+      );
     const nextCustomLayerParameters = {
       ...(currentLayerData.customLayerParameters || {}),
       SHOWLOGO: false,
@@ -3249,6 +3278,22 @@ class MenuWidget extends React.Component {
     try {
       const rawUrl = (proxiedUrl || '').trim();
       const baseUrl = rawUrl.split('?')[0];
+      const resolveCapabilitiesText = (xmlData) => {
+        if (!xmlData) {
+          return '';
+        }
+        if (typeof xmlData === 'string') {
+          return xmlData;
+        }
+        try {
+          return new XMLSerializer().serializeToString(xmlData);
+        } catch (e) {
+          return '';
+        }
+      };
+      const isInvalidCapabilitiesData = (xmlData) => {
+        return !xmlData || !xmlData.documentElement;
+      };
       const processBboxData = (xml) => {
         const buildExtentResult = (xmin, ymin, xmax, ymax) => {
           const numericValues = [xmin, ymin, xmax, ymax].map((value) =>
@@ -3407,10 +3452,21 @@ class MenuWidget extends React.Component {
       if (serviceType === 'WMTS') {
         this.xml = null;
         await this.getCapabilities(viewService, 'WMTS');
-        if (!this.xml) {
+        if (isInvalidCapabilitiesData(this.xml)) {
           throw new Error('Unable to load WMTS capabilities');
         }
+        const wmtsCapabilitiesText = resolveCapabilitiesText(this.xml);
+        if (this.hasExceptionResponse(wmtsCapabilitiesText)) {
+          const exceptionMessage =
+            this.resolveExceptionMessage(wmtsCapabilitiesText);
+          throw new Error(exceptionMessage || 'Unable to load WMTS service');
+        }
         const wmtsLayers = this.parseWMTSLayers(this.xml);
+        if (!Array.isArray(wmtsLayers) || wmtsLayers.length === 0) {
+          throw new Error(
+            'Selected service has no geometry data and cannot be displayed on map',
+          );
+        }
         const active = this.resolveWmtsLayerData(wmtsLayers, serviceSelection);
         const serviceTitle = this.parseWMTSServiceTitle(this.xml);
         const isSceneViewActive = this.view && this.view.type === '3d';
@@ -3453,8 +3509,22 @@ class MenuWidget extends React.Component {
         ];
       } else if (isWFS) {
         await this.getCapabilities(viewService, 'WFS');
+        if (isInvalidCapabilitiesData(this.xml)) {
+          throw new Error('Unable to load WFS capabilities');
+        }
+        const wfsCapabilitiesText = resolveCapabilitiesText(this.xml);
+        if (this.hasExceptionResponse(wfsCapabilitiesText)) {
+          const exceptionMessage =
+            this.resolveExceptionMessage(wfsCapabilitiesText);
+          throw new Error(exceptionMessage || 'Unable to load WFS service');
+        }
         const requestConfig = this.resolveRequestConfig(this.xml);
         const serviceEntries = Object.entries(serviceSelection || {});
+        if (!serviceEntries.length) {
+          throw new Error(
+            'Selected service has no geometry data and cannot be displayed on map',
+          );
+        }
         const layerResults = await Promise.all(
           serviceEntries.map(async ([name, title]) => {
             if (!name) return null;
@@ -3503,7 +3573,21 @@ class MenuWidget extends React.Component {
         resourceLayers = layerResults.filter(Boolean);
       } else {
         await this.getCapabilities(viewService, 'WMS');
+        if (isInvalidCapabilitiesData(this.xml)) {
+          throw new Error('Unable to load WMS capabilities');
+        }
+        const wmsCapabilitiesText = resolveCapabilitiesText(this.xml);
+        if (this.hasExceptionResponse(wmsCapabilitiesText)) {
+          const exceptionMessage =
+            this.resolveExceptionMessage(wmsCapabilitiesText);
+          throw new Error(exceptionMessage || 'Unable to load WMS service');
+        }
         const wmsLayers = this.parseWMSLayers(this.xml);
+        if (!Array.isArray(wmsLayers) || wmsLayers.length === 0) {
+          throw new Error(
+            'Selected service has no geometry data and cannot be displayed on map',
+          );
+        }
         const serviceTitle = this.parseWMSServiceTitle(this.xml);
         const legendRequest =
           'request=GetLegendGraphic&version=1.0.0&format=image/png&layer=';
@@ -4210,9 +4294,8 @@ class MenuWidget extends React.Component {
       for (let g = 1; g < dataSetContents.length; g++) {
         if (dataSetContents[g].checked) {
           currentDataSetLayer = dataSetContents[g];
-          currentDataSetLayerSpan = currentDataSetLayer.nextSibling?.querySelector(
-            'span',
-          );
+          currentDataSetLayerSpan =
+            currentDataSetLayer.nextSibling?.querySelector('span');
           currentElemContainerSpan = elemContainer.querySelector('span');
 
           if (
@@ -4459,11 +4542,12 @@ 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 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,
@@ -4488,8 +4572,8 @@ class MenuWidget extends React.Component {
                   ViewService: this.layers[elem.id].ViewService,
                   StaticImageLegend: this.layers[elem.id].StaticImageLegend,
                   LayerTitle: this.layers[elem.id].LayerTitle,
-                  DatasetDownloadInformation: this.layers[elem.id]
-                    .DatasetDownloadInformation,
+                  DatasetDownloadInformation:
+                    this.layers[elem.id].DatasetDownloadInformation,
                   customLayerParameters: nextCustomLayerParameters,
                 });
               }
@@ -7201,11 +7285,8 @@ class MenuWidget extends React.Component {
     if (this.props.download) return;
 
     if (prevProps.userServiceUrl !== this.props.userServiceUrl) {
-      const {
-        userServiceUrl,
-        userServiceType,
-        userServiceSelection,
-      } = this.props;
+      const { userServiceUrl, userServiceType, userServiceSelection } =
+        this.props;
       if (
         userServiceUrl &&
         typeof userServiceUrl === 'string' &&

package/src/components/MapViewer/SwipeWidget.jsx

@@ -186,7 +186,8 @@ class SwipeWidget extends React.Component {
     this._isMounted = true;
     await this.loader();
     if (!this.container.current) return;
-    this.container.current.__mapViewerContainerParentNode = this.container.current.parentNode;
+    this.container.current.__mapViewerContainerParentNode =
+      this.container.current.parentNode;
     this.props.view.when(() => {
       if (!this._isMounted || !this.props.view || !this.props.view.ui) {
         return;
@@ -422,10 +423,12 @@ class SwipeWidget extends React.Component {
     this.props.view.ui.remove(this.swipe);
     this.props.view.ui.add(this.swipe);
     this.hasSwipe = true;
-    let selectedLeadingLayer = document.getElementById('select-leading-layer')
-      .value;
-    let selectedTrailingLayer = document.getElementById('select-trailing-layer')
-      .value;
+    let selectedLeadingLayer = document.getElementById(
+      'select-leading-layer',
+    ).value;
+    let selectedTrailingLayer = document.getElementById(
+      'select-trailing-layer',
+    ).value;
     let selectedSwipeDirection = document.getElementById(
       'select-swipe-direction',
     ).value;

package/src/components/MapViewer/TimesliderWidget.jsx

@@ -196,8 +196,9 @@ class TimesliderWidget extends React.Component {
       } else {
         if (xml.querySelector('Dimension') !== null) {
           // There is a common time dimension to all layers
-          dimension = xml.querySelector('Dimension').querySelector('Extent')
-            .innerText;
+          dimension = xml
+            .querySelector('Dimension')
+            .querySelector('Extent').innerText;
         } else {
           dimension = false;
         }
@@ -275,7 +276,8 @@ class TimesliderWidget extends React.Component {
   }
 
   parserPeriod(iso8601Duration) {
-    var iso8601DurationRegex = /(-)?P(?:([.,\d]+)Y)?(?:([.,\d]+)M)?(?:([.,\d]+)W)?(?:([.,\d]+)D)?T?(?:([.,\d]+)H)?(?:([.,\d]+)M)?(?:([.,\d]+)S)?/;
+    var iso8601DurationRegex =
+      /(-)?P(?:([.,\d]+)Y)?(?:([.,\d]+)M)?(?:([.,\d]+)W)?(?:([.,\d]+)D)?T?(?:([.,\d]+)H)?(?:([.,\d]+)M)?(?:([.,\d]+)S)?/;
     var matches = iso8601Duration.match(iso8601DurationRegex);
     return {
       sign: matches[1] === undefined ? '+' : '-',
@@ -372,7 +374,8 @@ class TimesliderWidget extends React.Component {
         ? this.container.current.parentNode
         : null;
     if (this.container && this.container.current) {
-      this.container.current.__mapViewerContainerParentNode = this.containerParentNode;
+      this.container.current.__mapViewerContainerParentNode =
+        this.containerParentNode;
     }
     await this.loader();
     let playRateValue =
@@ -394,42 +397,40 @@ class TimesliderWidget extends React.Component {
           }
           if (value) {
             const normal = new Intl.DateTimeFormat('en-gb');
+            const timeSelectedValuesC = Array.isArray(
+              this.state.timeSelectedValuesC,
+            )
+              ? [...this.state.timeSelectedValuesC]
+              : [];
+            let timeSelectedValues = this.state.timeSelectedValues;
             switch (type) {
               case 'min':
-                if (this.state.timeSelectedValuesC == null)
+                if (timeSelectedValuesC[0] == null)
                   // In case of first iteration
-                  this.state.timeSelectedValuesC[0] = value;
+                  timeSelectedValuesC[0] = value;
                 element.innerText = normal.format(value).replaceAll('/', '.');
                 break;
               case 'max':
-                if (this.state.timeSelectedValuesC == null)
+                if (timeSelectedValuesC[1] == null)
                   // In case of first iteration
-                  this.state.timeSelectedValuesC[1] = value;
+                  timeSelectedValuesC[1] = value;
                 element.innerText = normal.format(value).replaceAll('/', '.');
                 break;
               case 'extent':
-                this.state.timeSelectedValues = value;
+                timeSelectedValues = value;
                 if (
-                  normal
-                    .format(this.state.timeSelectedValues[0])
-                    .replaceAll('/', '.') !==
-                  normal
-                    .format(this.state.timeSelectedValuesC[0])
-                    .replaceAll('/', '.')
+                  normal.format(timeSelectedValues[0]).replaceAll('/', '.') !==
+                  normal.format(timeSelectedValuesC[0]).replaceAll('/', '.')
                 ) {
-                  this.state.timeSelectedValuesC[0] = value[0];
+                  timeSelectedValuesC[0] = value[0];
                   element.innerText = normal
                     .format(value[0])
                     .replaceAll('/', '.');
                 } else if (
-                  normal
-                    .format(this.state.timeSelectedValues[1])
-                    .replaceAll('/', '.') !==
-                  normal
-                    .format(this.state.timeSelectedValuesC[1])
-                    .replaceAll('/', '.')
+                  normal.format(timeSelectedValues[1]).replaceAll('/', '.') !==
+                  normal.format(timeSelectedValuesC[1]).replaceAll('/', '.')
                 ) {
-                  this.state.timeSelectedValuesC[1] = value[1];
+                  timeSelectedValuesC[1] = value[1];
                   element.innerText = normal
                     .format(value[1])
                     .replaceAll('/', '.');
@@ -440,6 +441,8 @@ class TimesliderWidget extends React.Component {
                 break;
             }
             this.setState({
+              timeSelectedValues: timeSelectedValues,
+              timeSelectedValuesC: timeSelectedValuesC,
               lockDatePanel: false,
             });
           }
@@ -478,7 +481,8 @@ class TimesliderWidget extends React.Component {
           const isCDSE =
             urlNorm.includes('/ogc/') || urlNorm.includes('/cdse/');
           if (this.layer.type === 'feature') {
-            this.TimesliderWidget.fullTimeExtent = this.layer.timeInfo.fullTimeExtent;
+            this.TimesliderWidget.fullTimeExtent =
+              this.layer.timeInfo.fullTimeExtent;
             this.TimesliderWidget.stops = {
               interval: this.layer.timeInfo.interval,
             };

package/src/components/MapViewer/css/ArcgisMap.css

@@ -751,12 +751,12 @@ div.upload-container div.wfs-features-list label.field input[type='checkbox'] {
   box-sizing: border-box;
   flex: 0 0 18px !important;
   border: 1px solid #8a8a8a;
+  border-radius: 3px;
   margin: 0 6px 0 0;
   -webkit-appearance: none !important;
   -moz-appearance: none !important;
   appearance: none !important;
   background-color: #ffffff;
-  border-radius: 3px;
   vertical-align: middle;
 }
 
@@ -1759,9 +1759,9 @@ div.upload-container
 input[type='range'] {
   width: 100%;
   height: 4px;
+  border-radius: 5px;
   -webkit-appearance: none;
   background: #c5c5c5;
-  border-radius: 5px;
   cursor: pointer;
 }
 
@@ -1769,9 +1769,9 @@ input[type='range']::-webkit-slider-thumb {
   width: 16px;
   height: 16px;
   border: solid 3px black;
+  border-radius: 50%;
   -webkit-appearance: none;
   background: white;
-  border-radius: 50%;
   cursor: move;
   transition: all 0.3s ease-in-out;
 }
@@ -1780,9 +1780,9 @@ input[type='range']::-moz-range-thumb {
   width: 16px;
   height: 16px;
   border: solid 3px black;
+  border-radius: 50%;
   -webkit-appearance: none;
   background: white;
-  border-radius: 50%;
   cursor: grab;
   transition: all 0.3s ease-in-out;
 }
@@ -1791,9 +1791,9 @@ input[type='range']::-ms-thumb {
   width: 16px;
   height: 16px;
   border: solid 3px black;
+  border-radius: 50%;
   -webkit-appearance: none;
   background: white;
-  border-radius: 50%;
   cursor: grab;
   transition: all 0.3s ease-in-out;
 }
@@ -1844,9 +1844,9 @@ input[type='range']::-ms-track {
 .hotspot-filter-message {
   width: 247 !important;
   padding: 0.3rem 0.6rem 0.1rem 0.6rem;
+  border-radius: 10px;
   margin-top: 0.2rem;
   background: #a0b128;
-  border-radius: 10px;
   color: white;
   font-size: 0.875rem;
   text-align: center;
@@ -2023,9 +2023,9 @@ div.map-container.popup-block {
   height: 2rem;
   border-width: 1px;
   border-color: rgba(110, 110, 110, 0.3);
+  border-radius: 0;
   margin-left: 0.5rem;
   background-color: #a0b128;
-  border-radius: 0;
   color: white;
 }