@eeacms/volto-arcgis-block 0.1.483 → 0.1.485

package/CHANGELOG.md

@@ -4,6 +4,18 @@ 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.485](https://github.com/eea/volto-arcgis-block/compare/0.1.484...0.1.485) - 24 September 2026
+
+#### :hammer_and_wrench: Others
+
+- (lint): lint and prettified [Unai Bolivar - [`6caacff`](https://github.com/eea/volto-arcgis-block/commit/6caacffcda92259d4ecd9e5ba0aedea28c0999e1)]
+- (bug): removed additional zoom on extent behavior [Unai Bolivar - [`b609753`](https://github.com/eea/volto-arcgis-block/commit/b6097536b13e94cd1772c0528a6ea984fb497fcb)]
+- (bug): parse CDSE WMTS capabilities identifiers correctly [Unai Bolivar - [`a3c9f4b`](https://github.com/eea/volto-arcgis-block/commit/a3c9f4b285c916a0adf45168cab85950a4415890)]
+### [0.1.484](https://github.com/eea/volto-arcgis-block/compare/0.1.483...0.1.484) - 15 September 2026
+
+#### :hammer_and_wrench: Others
+
+- (lint): lint and prettified [Unai Bolivar - [`13294af`](https://github.com/eea/volto-arcgis-block/commit/13294aff5e09463006cbc6421800c8f71bd4ac49)]
 ### [0.1.483](https://github.com/eea/volto-arcgis-block/compare/0.1.482...0.1.483) - 15 September 2026
 
 ### [0.1.482](https://github.com/eea/volto-arcgis-block/compare/0.1.481...0.1.482) - 15 September 2026

package/package.json

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

package/src/components/MapViewer/InfoWidget.jsx

@@ -577,10 +577,29 @@ class InfoWidget extends React.Component {
   }
 
   identifyWMTS(layer, event) {
-    let layerId = layer.activeLayer.id;
     let url = layer.featureInfoUrl ? layer.featureInfoUrl : layer.url;
     let featureInfoUrl = url.replace('/cdse/', '/cdse/wms/');
     return this.wmsCapabilities(url).then((xml) => {
+      let serviceData = layer.ViewService ? layer.ViewService : url;
+      let isCdseWmts = ['/ogc/', '/cdse/'].some((segment) =>
+        serviceData.toLowerCase().includes(segment),
+      );
+      let layerId;
+      if (isCdseWmts) {
+        let wmtsLayers = Array.from(xml.querySelectorAll('Layer'));
+        let layerTitle = this.getLayerTitle(layer);
+        let selectedLayer = wmtsLayers.find((item) => {
+          let titleNode =
+            item.querySelector('ows\\:Title') || item.querySelector('Title');
+          return titleNode && titleNode.textContent === layerTitle;
+        });
+        layerId = (
+          selectedLayer.querySelector('ows\\:Identifier') ||
+          selectedLayer.querySelector('Identifier')
+        ).textContent;
+      } else {
+        layerId = layer.activeLayer.id;
+      }
       let version = layer.version;
       let format = this.parseFormat(xml, layerId);
       let times = '';

package/src/components/MapViewer/MenuWidget.jsx

@@ -7,6 +7,7 @@ import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
 import { Modal, Popup } from 'semantic-ui-react';
 import AreaWidget from './AreaWidget';
 import TimesliderWidget from './TimesliderWidget';
+import { resolveServiceUrl } from './serviceUrlResolver';
 
 export const USER_SERVICES_KEY = 'user_services_session';
 
@@ -479,24 +480,12 @@ class MenuWidget extends React.Component {
     // add zoomend listener to map to show/hide zoom in message
     this.view.watch('stationary', (isStationary) => {
       let snowAndIceInSessionStorage = sessionStorage.getItem('snowAndIce');
-      let node;
       if (this.view && this.view.center) {
         this.extentCenter = { x: this.view.center.x, y: this.view.center.y };
       }
       if (isStationary) {
         this.extentInitiated = false;
-        let zoom = this.view.get('zoom');
-        if (this.props.download) {
-          node = document.querySelector('.zoom-in-message-dataset');
-          if (node && node !== null) {
-            node.style.display = zoom > 6 ? 'none' : 'block';
-          }
-        }
         if (!this.props.download && snowAndIceInSessionStorage === 'true') {
-          node = document.getElementById('snow-and-ice-zoom-message');
-          if (node && node !== null) {
-            node.style.display = zoom > 6 ? 'none' : 'block';
-          }
           let innerDropdown = document.getElementsByClassName(
             'map-product-checkbox',
           );
@@ -521,41 +510,7 @@ class MenuWidget extends React.Component {
             snowAndIce.offsetParent.nextSibling === null
           )
             return;
-          let checks = snowAndIce.offsetParent.nextSibling.children;
-          let checksList = [...checks];
-          if (checksList && checksList !== null) {
-            checksList.forEach((check) => {
-              if (check && check !== null) {
-                if (check.querySelector('[type="checkbox"]').checked) {
-                  let node = [
-                    ...check.getElementsByClassName('zoom-in-message-dataset'),
-                  ][0];
-                  if (node && node !== null) {
-                    node.style.display = zoom > 6 ? 'none' : 'block';
-                  }
-                }
-              }
-            });
-          }
         }
-        let zoomInMessageContainers = document.getElementsByClassName(
-          'zoom-in-message-container',
-        );
-        let zoomInMessageContainersList = [...zoomInMessageContainers];
-        zoomInMessageContainersList.forEach((container) => {
-          if (container && container !== null) {
-            let nodes = [
-              ...document.getElementsByClassName('zoom-in-message-dataset'),
-            ];
-            nodes.forEach((node) => {
-              if (node && node !== null) {
-                if (node.innerText === 'Zoom in') {
-                  node.style.display = zoom > 6 ? 'none' : 'block';
-                }
-              }
-            });
-          }
-        });
         if (!this.visibleLayers) this.visibleLayers = {};
         this.handleRasterVectorLegend();
         this.setState({});
@@ -2661,28 +2616,6 @@ class MenuWidget extends React.Component {
     );
   }
 
-  stripProtocol(url) {
-    return (url || '').replace(/^https?:\/\//i, '');
-  }
-
-  getProxyBase = () => {
-    const origin = window?.location?.origin || '';
-    return origin ? `${origin}/ogcproxy/` : '/ogcproxy/';
-    // return 'https://clmsdemo.devel6cph.eea.europa.eu/ogcproxy/';
-    // return 'https://land.copernicus.eu/ogcproxy/';
-  };
-
-  buildProxiedUrl(url) {
-    if (!url) return url;
-    const hasProxy = /\/ogcproxy\//i.test(url);
-    if (hasProxy) {
-      const strippedUrl = this.stripProtocol(url);
-      const proxyPath = strippedUrl.split(/\/ogcproxy\//i)[1] || '';
-      return this.getProxyBase() + proxyPath.replace(/^\/+/, '');
-    }
-    return this.getProxyBase() + this.stripProtocol(url);
-  }
-
   buildCdseLegendUrl(serviceUrl, layerTitle) {
     if (!serviceUrl || !layerTitle) return null;
     const collectionMatch =
@@ -3657,9 +3590,11 @@ class MenuWidget extends React.Component {
 
   async handleNewMapServiceLayer(viewService, serviceType, serviceSelection) {
     let resourceLayers = [];
-    const proxiedUrl = this.buildProxiedUrl(viewService);
+    const resolvedServiceUrl = resolveServiceUrl(viewService, {
+      fromUploadWidget: true,
+    });
     try {
-      const rawUrl = (proxiedUrl || '').trim();
+      const rawUrl = (resolvedServiceUrl || '').trim();
       const baseUrl = rawUrl.split('?')[0];
       const resolveCapabilitiesText = (xmlData) => {
         if (!xmlData) {
@@ -4034,7 +3969,7 @@ class MenuWidget extends React.Component {
           }
         }
         if (serviceType === 'WMS' || serviceType === 'WMTS') {
-          const forced = (proxiedUrl || '').trim();
+          const forced = (resolvedServiceUrl || '').trim();
           if (forced) {
             if (typeof resourceLayer.url === 'string') {
               resourceLayer.url = forced;
@@ -6195,7 +6130,9 @@ class MenuWidget extends React.Component {
 
   getCapabilities = async (url, serviceType, options = {}) => {
     const useProxy = !!options?.useProxy;
-    const targetUrl = useProxy ? this.buildProxiedUrl(url) : url;
+    const targetUrl = useProxy
+      ? resolveServiceUrl(url, { fromUploadWidget: true })
+      : url;
     const evaluateXmlResponse = (responseData) => {
       const parser = new DOMParser();
       const xmlDoc = parser.parseFromString(responseData, 'text/xml');
@@ -6438,35 +6375,7 @@ class MenuWidget extends React.Component {
         ymax: BBoxes['dataset'].ymax,
       });
     }
-    if (
-      this.extentInitiated === false &&
-      (this.layers[elem.id].DatasetId === '65f8eded11d94a1ba5540ceecaddd4e6' ||
-        this.layers[elem.id].DatasetId === '40e056d02eed4c1fb2040cf0f06823df')
-    ) {
-      let myExtent = new Extent({
-        xmin: -13478905.5678019,
-        ymin: 23797904.386302948,
-        xmax: 20538395.093334593,
-        ymax: 11175665.272476234,
-        spatialReference: 3857,
-      });
-      const targetCenter = myExtent.center;
-      if (this.extentCenter) {
-        const epsilon = 1e-3;
-        const sameStoredCenter =
-          Math.abs(this.extentCenter.x - targetCenter.x) < epsilon &&
-          Math.abs(this.extentCenter.y - targetCenter.y) < epsilon;
-        if (sameStoredCenter) {
-          this.extentInitiated = true;
-          return;
-        }
-      }
-      this.view.goTo({ center: targetCenter, zoom: 3 });
-      this.extentCenter = { x: targetCenter.x, y: targetCenter.y };
-      this.extentInitiated = true;
-    } else {
-      this.view.goTo(myExtent);
-    }
+    this.view.goTo(myExtent);
   }
 
   async fullExtent(elem) {
@@ -6819,42 +6728,7 @@ class MenuWidget extends React.Component {
         xmax: firstLayer.xmax,
         ymax: firstLayer.ymax,
       });
-      if (
-        this.extentInitiated === false &&
-        (this.layers[elem.id].DatasetId ===
-          '65f8eded11d94a1ba5540ceecaddd4e6' ||
-          this.layers[elem.id].DatasetId === '40e056d02eed4c1fb2040cf0f06823df')
-      ) {
-        let myExtent = new Extent({
-          xmin: -13478905.5678019,
-          ymin: 23797904.386302948,
-          xmax: 20538395.093334593,
-          ymax: 11175665.272476234,
-          spatialReference: 3857,
-        });
-        const targetCenter = myExtent.center;
-        if (this.extentCenter) {
-          const epsilon = 1e-3;
-          const sameStoredCenter =
-            Math.abs(this.extentCenter.x - targetCenter.x) < epsilon &&
-            Math.abs(this.extentCenter.y - targetCenter.y) < epsilon;
-          if (sameStoredCenter) {
-            if (this.toggleHotspotWidget.view.zoom !== 3) {
-              this.view.zoom = 3;
-              this.setState({}); // Force re-render
-              return;
-            } else {
-              this.extentInitiated = true;
-              return;
-            }
-          }
-        }
-        this.view.goTo({ center: targetCenter, zoom: 3 });
-        this.extentCenter = { x: targetCenter.x, y: targetCenter.y };
-        this.extentInitiated = true;
-      } else {
-        this.view.goTo(myExtent);
-      }
+      this.view.goTo(myExtent);
     }
     this.url = null;
   }

package/src/components/MapViewer/UploadWidget.jsx

@@ -2,6 +2,7 @@ import React, { createRef } from 'react';
 import { loadModules } from 'esri-loader';
 // import { FontAwesomeIcon } from '@eeacms/volto-clms-utils/components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { resolveServiceUrl } from './serviceUrlResolver';
 
 var WMSLayer, WMTSLayer, WFSLayer, esriRequest;
 const SHAPEFILE_MAX_SIZE_BYTES = 2097152;
@@ -334,28 +335,6 @@ class UploadWidget extends React.Component {
     this.clearUploadForm(true);
   };
 
-  stripProtocol = (url) => {
-    return (url || '').replace(/^https?:\/\//i, '');
-  };
-
-  getProxyBase = () => {
-    const origin = window?.location?.origin || '';
-    return origin ? `${origin}/ogcproxy/` : '/ogcproxy/';
-    // return 'https://clmsdemo.devel6cph.eea.europa.eu/ogcproxy/';
-    // return 'https://land.copernicus.eu/ogcproxy/';
-  };
-
-  buildProxiedUrl = (url) => {
-    if (!url) return url;
-    const hasProxy = /\/ogcproxy\//i.test(url);
-    if (hasProxy) {
-      const strippedUrl = this.stripProtocol(url);
-      const proxyPath = strippedUrl.split(/\/ogcproxy\//i)[1] || '';
-      return this.getProxyBase() + proxyPath.replace(/^\/+/, '');
-    }
-    return this.getProxyBase() + this.stripProtocol(url);
-  };
-
   resolveNodeValue = (nodeValue) => {
     if (nodeValue === null || nodeValue === undefined) {
       return null;
@@ -510,8 +489,10 @@ class UploadWidget extends React.Component {
 
   getCapabilities = (url, serviceType) => {
     // Get the coordinates of the click on the view
-    const proxiedUrl = this.buildProxiedUrl(url);
-    return esriRequest(proxiedUrl, {
+    const resolvedServiceUrl = resolveServiceUrl(url, {
+      fromUploadWidget: true,
+    });
+    return esriRequest(resolvedServiceUrl, {
       responseType: 'text',
       query: {
         request: 'GetCapabilities',
@@ -617,15 +598,21 @@ class UploadWidget extends React.Component {
         trimmedServiceUrl,
         selectedServiceType,
       );
-      const proxiedUrl = this.buildProxiedUrl(normalizedUrl);
+      const resolvedServiceUrl = resolveServiceUrl(normalizedUrl, {
+        fromUploadWidget: true,
+      });
       if (selectedServiceType === 'WMS') {
-        this.uploadUrlServiceHandler(proxiedUrl, 'WMS');
+        this.uploadUrlServiceHandler(resolvedServiceUrl, 'WMS');
         this.setState({ serviceUrl: '' });
       } else if (selectedServiceType === 'WMTS') {
-        this.uploadUrlServiceHandler(proxiedUrl, 'WMTS');
+        this.uploadUrlServiceHandler(resolvedServiceUrl, 'WMTS');
         this.setState({ serviceUrl: '' });
       } else if (selectedServiceType === 'WFS') {
-        this.uploadUrlServiceHandler(proxiedUrl, 'WFS', selectedFeatures);
+        this.uploadUrlServiceHandler(
+          resolvedServiceUrl,
+          'WFS',
+          selectedFeatures,
+        );
         this.setState({ wfsFeatures: {}, serviceUrl: '' });
         this.setState({ selectedFeatures: {} });
       } else {

package/src/components/MapViewer/serviceUrlResolver.js

@@ -0,0 +1,131 @@
+const PROXY_PATH_PATTERN = /\/ogcproxy\//i;
+const INTERNAL_HOST_PATTERNS = [
+  /^localhost$/i,
+  /^127\.0\.0\.1$/i,
+  /^0\.0\.0\.0$/i,
+  /(^|\.)land\.copernicus\.eu$/i,
+  /(^|\.)clms-staging\.eea\.europa\.eu$/i,
+];
+
+const stripProtocol = (url) => {
+  return (url || '').replace(/^https?:\/\//i, '');
+};
+
+const getProxyBase = () => {
+  const origin = window?.location?.origin || '';
+  return origin ? `${origin}/ogcproxy/` : '/ogcproxy/';
+};
+
+const resolveAbsoluteUrl = (url) => {
+  if (!url || typeof url !== 'string') {
+    return null;
+  }
+  try {
+    return new URL(url, window?.location?.origin || undefined);
+  } catch (e) {
+    return null;
+  }
+};
+
+const isRelativeUrl = (url) => {
+  if (!url || typeof url !== 'string') {
+    return false;
+  }
+  return !/^[a-zA-Z][a-zA-Z\d+.-]*:/.test(url);
+};
+
+const isInternalHost = (hostname, currentHostname) => {
+  const hostValue = String(hostname || '').toLowerCase();
+  const currentHostValue = String(currentHostname || '').toLowerCase();
+  if (!hostValue) {
+    return false;
+  }
+  if (
+    INTERNAL_HOST_PATTERNS.some((hostPattern) => hostPattern.test(hostValue))
+  ) {
+    return true;
+  }
+  if (currentHostValue && hostValue === currentHostValue) {
+    return true;
+  }
+  if (currentHostValue && hostValue.endsWith(`.${currentHostValue}`)) {
+    return true;
+  }
+  if (currentHostValue && currentHostValue.endsWith(`.${hostValue}`)) {
+    return true;
+  }
+  return false;
+};
+
+const isInternalAbsoluteUrl = (absoluteUrl) => {
+  if (!absoluteUrl) {
+    return false;
+  }
+  const currentOrigin = window?.location?.origin || '';
+  const currentHostname = window?.location?.hostname || '';
+  if (currentOrigin && absoluteUrl.origin === currentOrigin) {
+    return true;
+  }
+  return isInternalHost(absoluteUrl.hostname, currentHostname);
+};
+
+const resolveUnproxiedUrl = (inputUrl) => {
+  if (!inputUrl || !PROXY_PATH_PATTERN.test(inputUrl)) {
+    return inputUrl;
+  }
+  const strippedUrl = stripProtocol(inputUrl);
+  const proxyPathData = strippedUrl.split(PROXY_PATH_PATTERN)[1] || '';
+  const normalizedPathData = proxyPathData.replace(/^\/+/, '');
+  if (!normalizedPathData) {
+    return inputUrl;
+  }
+  if (/^https?:\/\//i.test(normalizedPathData)) {
+    return normalizedPathData;
+  }
+  const secureProtocol =
+    window?.location?.protocol === 'http:' ? 'http://' : 'https://';
+  return secureProtocol + normalizedPathData;
+};
+
+export const resolveServiceUrl = (url, options = {}) => {
+  if (!url || typeof url !== 'string') {
+    return url;
+  }
+
+  if (!options.fromUploadWidget) {
+    return url;
+  }
+
+  const trimmedUrl = url.trim();
+  if (!trimmedUrl) {
+    return trimmedUrl;
+  }
+
+  if (/^(blob:|data:|about:)/i.test(trimmedUrl)) {
+    return trimmedUrl;
+  }
+
+  if (isRelativeUrl(trimmedUrl) && !PROXY_PATH_PATTERN.test(trimmedUrl)) {
+    return trimmedUrl;
+  }
+
+  const alreadyProxied = PROXY_PATH_PATTERN.test(trimmedUrl);
+  const unproxiedUrl = resolveUnproxiedUrl(trimmedUrl);
+  const absoluteUrl = resolveAbsoluteUrl(unproxiedUrl);
+
+  if (!absoluteUrl) {
+    return trimmedUrl;
+  }
+
+  if (isInternalAbsoluteUrl(absoluteUrl)) {
+    return absoluteUrl.toString();
+  }
+
+  const normalizedExternalUrl = stripProtocol(absoluteUrl.toString());
+  if (alreadyProxied) {
+    const proxyPathData = normalizedExternalUrl.replace(/^\/+/, '');
+    return getProxyBase() + proxyPathData;
+  }
+
+  return getProxyBase() + normalizedExternalUrl;
+};