@eeacms/volto-arcgis-block 0.1.427 → 0.1.429

package/CHANGELOG.md

@@ -4,6 +4,19 @@ 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.429](https://github.com/eea/volto-arcgis-block/compare/0.1.428...0.1.429) - 17 February 2026
+
+#### :hammer_and_wrench: Others
+
+- (bug): styles for buttons in upload widget and error popup message for file size limit on hspae files [Unai Bolivar - [`d9ca59e`](https://github.com/eea/volto-arcgis-block/commit/d9ca59ec245fdc94a2d1bf678b6e3d610d5a792d)]
+- (bug): reset upload widget to allow users to start from zero without finishing a process first [Unai Bolivar - [`1539a3a`](https://github.com/eea/volto-arcgis-block/commit/1539a3ada8fef0fbda5203b61ec2aed60ab014b5)]
+- (bug): truncate title to 33 max char and add ellipsis for user created services and move trashcan icon to the right edge of the menu item div [Unai Bolivar - [`a31612d`](https://github.com/eea/volto-arcgis-block/commit/a31612df1ee629937e115b1fec1c50092b659626)]
+- (bug): fix xml to json conversion for unsupported features and error report for features with no geometry data [Unai Bolivar - [`51774c1`](https://github.com/eea/volto-arcgis-block/commit/51774c155b59c8a0624d725ffb12cf130b1f65f1)]
+- (bug): Check for match between selected service and provided service url [Unai Bolivar - [`d7247dc`](https://github.com/eea/volto-arcgis-block/commit/d7247dc29755df4e70c6b4ad3b175f0e1e29f24b)]
+- (bug): Extent button in active layers bug fixed for user created services [Unai Bolivar - [`dfee085`](https://github.com/eea/volto-arcgis-block/commit/dfee085a821b9a85e21dd48ab3c7a0988d135b77)]
+- (bug): fix trash can icon styles for user created services [Unai Bolivar - [`0588462`](https://github.com/eea/volto-arcgis-block/commit/05884627281671b9186608c65570e7fd95cfe999)]
+### [0.1.428](https://github.com/eea/volto-arcgis-block/compare/0.1.427...0.1.428) - 13 February 2026
+
 ### [0.1.427](https://github.com/eea/volto-arcgis-block/compare/0.1.426...0.1.427) - 11 February 2026
 
 ### [0.1.426](https://github.com/eea/volto-arcgis-block/compare/0.1.425...0.1.426) - 9 February 2026

package/package.json

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

package/src/components/MapViewer/MapViewer.jsx

@@ -344,6 +344,7 @@ class MapViewer extends React.Component {
       userServiceType: '',
       userServiceFile: null,
       uploadError: false,
+      uploadErrorType: 'uploadError',
       // Track current user state for comparison in componentDidUpdate
       currentUserState: props.initialUserState || {
         user_id: null,
@@ -613,10 +614,10 @@ class MapViewer extends React.Component {
     this.setState({ uploadedFile: message });
   }
 
-  uploadFileErrorHandler = () => {
-    this.setState({ uploadError: true });
+  uploadFileErrorHandler = (errorType = 'uploadError') => {
+    this.setState({ uploadError: true, uploadErrorType: errorType });
     setTimeout(() => {
-      this.setState({ uploadError: false });
+      this.setState({ uploadError: false, uploadErrorType: 'uploadError' });
     }, 3000);
   };
 
@@ -1036,6 +1037,7 @@ class MapViewer extends React.Component {
           mapViewer={this}
           wmsServiceUrl={this.state.wmsServiceUrl}
           showErrorPopup={this.state.uploadError}
+          showErrorPopupType={this.state.uploadErrorType}
           uploadUrlServiceHandler={this.uploadUrlServiceHandler}
           uploadFileErrorHandler={this.uploadFileErrorHandler}
         />

package/src/components/MapViewer/MenuWidget.jsx

@@ -2421,12 +2421,547 @@ class MenuWidget extends React.Component {
     }
   }
 
+  resolveRequestConfig(xml) {
+    let doc = xml;
+    try {
+      if (typeof xml === 'string') {
+        const parser = new DOMParser();
+        doc = parser.parseFromString(xml, 'text/xml');
+      }
+      const versionSet = new Set();
+      const formatSet = new Set();
+      const rootVersion = doc?.documentElement?.getAttribute?.('version');
+      if (rootVersion) {
+        versionSet.add(rootVersion.trim());
+      }
+      const serviceTypeVersionNodes = doc.querySelectorAll(
+        'ServiceTypeVersion, ows\\:ServiceTypeVersion',
+      );
+      serviceTypeVersionNodes.forEach((node) => {
+        const nodeValue = (node.textContent || '').trim();
+        if (nodeValue) {
+          versionSet.add(nodeValue);
+        }
+      });
+      const acceptVersionNodes = doc.querySelectorAll(
+        'Parameter[name="AcceptVersions"] Value, ows\\:Parameter[name="AcceptVersions"] ows\\:Value',
+      );
+      acceptVersionNodes.forEach((node) => {
+        const nodeValue = (node.textContent || '').trim();
+        if (nodeValue) {
+          versionSet.add(nodeValue);
+        }
+      });
+      const outputNodes = doc.querySelectorAll(
+        'OutputFormats > Format, OutputFormat, Parameter[name="outputFormat"] Value, ows\\:Parameter[name="outputFormat"] ows\\:Value',
+      );
+      outputNodes.forEach((node) => {
+        const nodeValue = (node.textContent || '').trim();
+        if (nodeValue) {
+          formatSet.add(nodeValue);
+        }
+      });
+      const srsSet = new Set();
+      const srsNodes = doc.querySelectorAll(
+        'DefaultSRS, DefaultCRS, OtherSRS, OtherCRS, Parameter[name="srsName"] Value, ows\\:Parameter[name="srsName"] ows\\:Value',
+      );
+      srsNodes.forEach((node) => {
+        const nodeValue = (node.textContent || '').trim();
+        if (nodeValue) {
+          srsSet.add(nodeValue);
+        }
+      });
+      const versionList = Array.from(versionSet);
+      const formatList = Array.from(formatSet);
+      const srsList = Array.from(srsSet);
+      const requestVersion = versionList.includes('2.0.0')
+        ? '2.0.0'
+        : versionList.includes('1.1.0')
+        ? '1.1.0'
+        : versionList.includes('1.0.0')
+        ? '1.0.0'
+        : rootVersion || '2.0.0';
+      const preferredJsonFormat = formatList.find((item) =>
+        /application\/json|geojson|json/i.test(item),
+      );
+      const preferredXmlFormat = formatList.find((item) =>
+        /text\/xml|xml|gml/i.test(item),
+      );
+      const requestSrsName = srsList.includes('EPSG:4326')
+        ? 'EPSG:4326'
+        : srsList[0] || 'EPSG:4326';
+      return {
+        requestVersion,
+        requestFormat: preferredJsonFormat || preferredXmlFormat || null,
+        hasJsonFormat: Boolean(preferredJsonFormat),
+        requestSrsName,
+      };
+    } catch (e) {
+      return {
+        requestVersion: '2.0.0',
+        requestFormat: 'application/json',
+        hasJsonFormat: true,
+        requestSrsName: 'EPSG:4326',
+      };
+    }
+  }
+
+  resolveExceptionMessage(responseText) {
+    const textValue = typeof responseText === 'string' ? responseText : '';
+    if (!textValue) {
+      return '';
+    }
+    const exceptionMatch = textValue.match(
+      /<(?:\w+:)?ExceptionText>\s*([\s\S]*?)\s*<\/(?:\w+:)?ExceptionText>/i,
+    );
+    if (exceptionMatch && exceptionMatch[1]) {
+      return exceptionMatch[1].trim();
+    }
+    return '';
+  }
+
+  isNoGeometryError(error) {
+    const message = ((error && error.message) || '').toLowerCase();
+    return (
+      message.includes('no geometry') ||
+      message.includes('cannot be displayed on map')
+    );
+  }
+
+  resolveUploadErrorType(error) {
+    const detailsFromRoot =
+      error && error.details && Array.isArray(error.details)
+        ? error.details
+        : [];
+    const detailsFromNested =
+      error &&
+      error.details &&
+      error.details.details &&
+      Array.isArray(error.details.details)
+        ? error.details.details
+        : [];
+    const detailsFromResponse =
+      error &&
+      error.response &&
+      error.response.data &&
+      error.response.data.error &&
+      Array.isArray(error.response.data.error.details)
+        ? error.response.data.error.details
+        : [];
+    const errorDetails = [
+      ...detailsFromRoot,
+      ...detailsFromNested,
+      ...detailsFromResponse,
+    ];
+    const normalizedDetails = errorDetails.map((detailValue) =>
+      String(detailValue || '').toLowerCase(),
+    );
+    const hasShapefileLimit = normalizedDetails.some((detailValue) =>
+      detailValue.includes('shape file exceeds the max size allowed of 2mb'),
+    );
+    if (hasShapefileLimit) {
+      return 'shapefileLimit';
+    }
+    const hasFileLimit = normalizedDetails.some((detailValue) =>
+      detailValue.includes('file exceeds the max size allowed of 10mb'),
+    );
+    if (hasFileLimit) {
+      return 'fileLimit';
+    }
+    return 'uploadError';
+  }
+
+  hasExceptionResponse(responseText) {
+    const textValue = typeof responseText === 'string' ? responseText : '';
+    if (!textValue) {
+      return false;
+    }
+    return /<\s*(?:\w+:)?ExceptionReport\b|<\s*(?:\w+:)?Exception\b/i.test(
+      textValue,
+    );
+  }
+
+  processXmlData(xmlInput) {
+    let doc = xmlInput;
+    if (typeof xmlInput === 'string') {
+      const parser = new DOMParser();
+      doc = parser.parseFromString(xmlInput, 'text/xml');
+    }
+    if (!doc || !doc.documentElement) {
+      return null;
+    }
+    const processNodeData = (node) => {
+      const nodeData = {
+        name: node.localName || node.nodeName,
+        value: null,
+        attributes: {},
+        children: [],
+      };
+      if (node.attributes && node.attributes.length) {
+        Array.from(node.attributes).forEach((attributeNode) => {
+          nodeData.attributes[attributeNode.name] = attributeNode.value;
+        });
+      }
+      if (node.childNodes && node.childNodes.length) {
+        Array.from(node.childNodes).forEach((childNode) => {
+          if (childNode.nodeType === 1) {
+            nodeData.children.push(processNodeData(childNode));
+          } else if (childNode.nodeType === 3) {
+            const value = (childNode.nodeValue || '').trim();
+            if (value) {
+              nodeData.value = value;
+            }
+          }
+        });
+      }
+      return nodeData;
+    };
+    return processNodeData(doc.documentElement);
+  }
+
+  resolveNodeList(nodeData, nodeName) {
+    const resultList = [];
+    const processNodeData = (currentNode) => {
+      if (!currentNode) {
+        return;
+      }
+      if ((currentNode.name || '').toLowerCase() === nodeName.toLowerCase()) {
+        resultList.push(currentNode);
+      }
+      (currentNode.children || []).forEach((childNode) => {
+        processNodeData(childNode);
+      });
+    };
+    processNodeData(nodeData);
+    return resultList;
+  }
+
+  resolveCoordinateResult(valueText) {
+    const textValue = (valueText || '').trim();
+    if (!textValue) {
+      return [];
+    }
+    if (textValue.includes(',')) {
+      return textValue
+        .trim()
+        .split(/\s+/)
+        .map((item) => item.split(',').map(Number))
+        .filter((item) => item.length >= 2 && !item.some(Number.isNaN))
+        .map((item) => [item[0], item[1]]);
+    }
+    const valueList = textValue
+      .split(/\s+/)
+      .map(Number)
+      .filter((item) => !Number.isNaN(item));
+    const resultList = [];
+    for (let i = 0; i + 1 < valueList.length; i += 2) {
+      resultList.push([valueList[i], valueList[i + 1]]);
+    }
+    return resultList;
+  }
+
+  resolveGeometryResult(featureData) {
+    const geometryTypeList = [
+      'Point',
+      'LineString',
+      'Polygon',
+      'MultiPoint',
+      'MultiLineString',
+      'MultiPolygon',
+    ];
+    const geometryNode = geometryTypeList
+      .map((typeValue) => this.resolveNodeList(featureData, typeValue)[0])
+      .find(Boolean);
+    if (!geometryNode) {
+      return null;
+    }
+    const nodeName = geometryNode.name;
+    if (nodeName === 'Point') {
+      const posNode =
+        this.resolveNodeList(geometryNode, 'pos')[0] ||
+        this.resolveNodeList(geometryNode, 'coordinates')[0];
+      const points = this.resolveCoordinateResult(posNode?.value || '');
+      if (!points.length) {
+        return null;
+      }
+      return { type: 'Point', coordinates: points[0] };
+    }
+    if (nodeName === 'LineString') {
+      const posListNode =
+        this.resolveNodeList(geometryNode, 'posList')[0] ||
+        this.resolveNodeList(geometryNode, 'coordinates')[0];
+      const points = this.resolveCoordinateResult(posListNode?.value || '');
+      if (!points.length) {
+        return null;
+      }
+      return { type: 'LineString', coordinates: points };
+    }
+    if (nodeName === 'Polygon') {
+      const ringNodes = this.resolveNodeList(geometryNode, 'LinearRing');
+      const ringList = ringNodes
+        .map((ringNode) => {
+          const posListNode =
+            this.resolveNodeList(ringNode, 'posList')[0] ||
+            this.resolveNodeList(ringNode, 'coordinates')[0];
+          return this.resolveCoordinateResult(posListNode?.value || '');
+        })
+        .filter((ringValue) => ringValue.length > 0);
+      if (!ringList.length) {
+        return null;
+      }
+      return { type: 'Polygon', coordinates: ringList };
+    }
+    return null;
+  }
+
+  resolveFeatureResult(featureData) {
+    const geometryResult = this.resolveGeometryResult(featureData);
+    if (!geometryResult) {
+      return null;
+    }
+    const processPropertyData = (nodeData, propertyData) => {
+      if (!nodeData) {
+        return;
+      }
+      const geometryNames = new Set([
+        'Point',
+        'LineString',
+        'Polygon',
+        'MultiPoint',
+        'MultiLineString',
+        'MultiPolygon',
+        'pos',
+        'posList',
+        'coordinates',
+        'LinearRing',
+        'exterior',
+        'interior',
+        'boundedBy',
+      ]);
+      if (geometryNames.has(nodeData.name)) {
+        return;
+      }
+      if ((nodeData.children || []).length === 0 && nodeData.value) {
+        if (!propertyData[nodeData.name]) {
+          propertyData[nodeData.name] = nodeData.value;
+        }
+        return;
+      }
+      (nodeData.children || []).forEach((childNode) => {
+        processPropertyData(childNode, propertyData);
+      });
+    };
+    const properties = {};
+    processPropertyData(featureData, properties);
+    const featureId =
+      featureData.attributes['gml:id'] ||
+      featureData.attributes.id ||
+      featureData.attributes.fid ||
+      null;
+    return {
+      type: 'Feature',
+      id: featureId,
+      geometry: geometryResult,
+      properties,
+    };
+  }
+
+  resolveFeatureCollection(xmlData) {
+    const memberList = [
+      ...this.resolveNodeList(xmlData, 'featureMember'),
+      ...this.resolveNodeList(xmlData, 'member'),
+    ];
+    const featureList = memberList
+      .map((memberData) => {
+        const featureData = (memberData.children || []).find(
+          (childData) => childData.name !== 'boundedBy',
+        );
+        if (!featureData) {
+          return null;
+        }
+        return this.resolveFeatureResult(featureData);
+      })
+      .filter(Boolean);
+    return {
+      type: 'FeatureCollection',
+      features: featureList,
+      memberCount: memberList.length,
+    };
+  }
+
+  buildRequestParams(featureName, requestConfig) {
+    const typeParam =
+      requestConfig.requestVersion === '2.0.0' ? 'typeNames' : 'typeName';
+    const params = {
+      service: 'WFS',
+      request: 'GetFeature',
+      version: requestConfig.requestVersion,
+      [typeParam]: featureName,
+      srsName: requestConfig.requestSrsName,
+    };
+    if (requestConfig.requestVersion === '2.0.0') {
+      params.count = '1000';
+    } else {
+      params.maxFeatures = '1000';
+    }
+    return params;
+  }
+
   async handleNewMapServiceLayer(viewService, serviceType, serviceSelection) {
     let resourceLayers = [];
     const proxiedUrl = this.buildProxiedUrl(viewService);
     try {
       const rawUrl = (proxiedUrl || '').trim();
       const baseUrl = rawUrl.split('?')[0];
+      const processBboxData = (xml) => {
+        const buildExtentResult = (xmin, ymin, xmax, ymax) => {
+          const numericValues = [xmin, ymin, xmax, ymax].map((value) =>
+            Number(value),
+          );
+          if (numericValues.some((value) => Number.isNaN(value))) {
+            return null;
+          }
+          return {
+            xmin: numericValues[0],
+            ymin: numericValues[1],
+            xmax: numericValues[2],
+            ymax: numericValues[3],
+            spatialReference: { wkid: 4326 },
+          };
+        };
+        const parseCornerValues = (value) => {
+          if (!value || typeof value !== 'string') {
+            return [];
+          }
+          return value
+            .trim()
+            .split(/\s+/)
+            .map((item) => Number(item));
+        };
+        try {
+          let doc = xml;
+          if (typeof xml === 'string') {
+            const parser = new DOMParser();
+            doc = parser.parseFromString(xml, 'text/xml');
+          }
+          if (doc && typeof doc.querySelector === 'function') {
+            const wgs84Node =
+              doc.querySelector('ows\\:WGS84BoundingBox') ||
+              doc.querySelector('WGS84BoundingBox') ||
+              doc.querySelector('wgs84boundingbox');
+            if (wgs84Node) {
+              const lowerCornerNode =
+                wgs84Node.querySelector('ows\\:LowerCorner') ||
+                wgs84Node.querySelector('LowerCorner') ||
+                wgs84Node.querySelector('lowercorner');
+              const upperCornerNode =
+                wgs84Node.querySelector('ows\\:UpperCorner') ||
+                wgs84Node.querySelector('UpperCorner') ||
+                wgs84Node.querySelector('uppercorner');
+              const lowerCorner = parseCornerValues(
+                lowerCornerNode ? lowerCornerNode.textContent : '',
+              );
+              const upperCorner = parseCornerValues(
+                upperCornerNode ? upperCornerNode.textContent : '',
+              );
+              if (lowerCorner.length >= 2 && upperCorner.length >= 2) {
+                const extentResult = buildExtentResult(
+                  lowerCorner[0],
+                  lowerCorner[1],
+                  upperCorner[0],
+                  upperCorner[1],
+                );
+                if (extentResult) {
+                  return extentResult;
+                }
+              }
+            }
+
+            const exGeoNode =
+              doc.querySelector('EX_GeographicBoundingBox') ||
+              doc.querySelector('ex_geographicboundingbox');
+            if (exGeoNode) {
+              const westNode =
+                exGeoNode.querySelector('westBoundLongitude') ||
+                exGeoNode.querySelector('ows\\:westBoundLongitude') ||
+                exGeoNode.querySelector('westboundlongitude');
+              const eastNode =
+                exGeoNode.querySelector('eastBoundLongitude') ||
+                exGeoNode.querySelector('ows\\:eastBoundLongitude') ||
+                exGeoNode.querySelector('eastboundlongitude');
+              const southNode =
+                exGeoNode.querySelector('southBoundLatitude') ||
+                exGeoNode.querySelector('ows\\:southBoundLatitude') ||
+                exGeoNode.querySelector('southboundlatitude');
+              const northNode =
+                exGeoNode.querySelector('northBoundLatitude') ||
+                exGeoNode.querySelector('ows\\:northBoundLatitude') ||
+                exGeoNode.querySelector('northboundlatitude');
+              const extentResult = buildExtentResult(
+                westNode ? westNode.textContent : NaN,
+                southNode ? southNode.textContent : NaN,
+                eastNode ? eastNode.textContent : NaN,
+                northNode ? northNode.textContent : NaN,
+              );
+              if (extentResult) {
+                return extentResult;
+              }
+            }
+          }
+        } catch (e) {}
+
+        let xmlText = '';
+        if (typeof xml === 'string') {
+          xmlText = xml;
+        } else if (xml && typeof xml.xml === 'string') {
+          xmlText = xml.xml;
+        }
+        if (xmlText) {
+          const lowerMatch = xmlText.match(
+            /<(?:ows:)?LowerCorner>\s*([^<]+?)\s*<\/(?:ows:)?LowerCorner>/i,
+          );
+          const upperMatch = xmlText.match(
+            /<(?:ows:)?UpperCorner>\s*([^<]+?)\s*<\/(?:ows:)?UpperCorner>/i,
+          );
+          if (lowerMatch && upperMatch) {
+            const lowerCorner = parseCornerValues(lowerMatch[1]);
+            const upperCorner = parseCornerValues(upperMatch[1]);
+            if (lowerCorner.length >= 2 && upperCorner.length >= 2) {
+              const extentResult = buildExtentResult(
+                lowerCorner[0],
+                lowerCorner[1],
+                upperCorner[0],
+                upperCorner[1],
+              );
+              if (extentResult) {
+                return extentResult;
+              }
+            }
+          }
+
+          const westMatch = xmlText.match(
+            /<(?:ows:)?westBoundLongitude>\s*([^<]+?)\s*<\/(?:ows:)?westBoundLongitude>/i,
+          );
+          const eastMatch = xmlText.match(
+            /<(?:ows:)?eastBoundLongitude>\s*([^<]+?)\s*<\/(?:ows:)?eastBoundLongitude>/i,
+          );
+          const southMatch = xmlText.match(
+            /<(?:ows:)?southBoundLatitude>\s*([^<]+?)\s*<\/(?:ows:)?southBoundLatitude>/i,
+          );
+          const northMatch = xmlText.match(
+            /<(?:ows:)?northBoundLatitude>\s*([^<]+?)\s*<\/(?:ows:)?northBoundLatitude>/i,
+          );
+          if (westMatch && eastMatch && southMatch && northMatch) {
+            return buildExtentResult(
+              westMatch[1],
+              southMatch[1],
+              eastMatch[1],
+              northMatch[1],
+            );
+          }
+        }
+        return null;
+      };
       const isWFS =
         serviceType === 'WFS' ||
         /service=WFS/i.test(rawUrl) ||
@@ -2449,31 +2984,73 @@ class MenuWidget extends React.Component {
           }),
         ];
       } else if (isWFS) {
-        resourceLayers = Object.entries(serviceSelection || {})
-          .map(([name, title]) => {
+        await this.getCapabilities(viewService, 'WFS');
+        const requestConfig = this.resolveRequestConfig(this.xml);
+        const serviceEntries = Object.entries(serviceSelection || {});
+        const layerResults = await Promise.all(
+          serviceEntries.map(async ([name, title]) => {
             if (!name) return null;
-            const params = new URLSearchParams({
-              service: 'WFS',
-              request: 'GetFeature',
-              version: '2.0.0',
-              typeName: name,
-              outputFormat: 'application/json',
-              srsName: 'EPSG:4326',
-            }).toString();
-            const wfsUrl = baseUrl + '?' + params;
+            const requestParams = this.buildRequestParams(name, requestConfig);
+            if (requestConfig.hasJsonFormat && requestConfig.requestFormat) {
+              requestParams.outputFormat = requestConfig.requestFormat;
+            }
+            const requestQuery = new URLSearchParams(requestParams).toString();
+            const requestUrl = baseUrl + '?' + requestQuery;
 
             const id = (name || baseUrl).toUpperCase().replace(/[: ]/g, '_');
+            if (requestConfig.hasJsonFormat) {
+              const layer = new GeoJSONLayer({
+                url: requestUrl,
+                id: id,
+                title: title || name,
+              });
+              layer.LayerId = id;
+              layer.ViewService = baseUrl;
+              layer.name = name;
+              return layer;
+            }
+
+            const xmlResponse = await esriRequest(requestUrl, {
+              responseType: 'text',
+            });
+            if (this.hasExceptionResponse(xmlResponse.data)) {
+              const exceptionMessage = this.resolveExceptionMessage(
+                xmlResponse.data,
+              );
+              throw new Error(exceptionMessage || 'WFS request failed');
+            }
+            const xmlData = this.processXmlData(xmlResponse.data);
+            const featureCollection = this.resolveFeatureCollection(xmlData);
+            if (
+              featureCollection &&
+              featureCollection.memberCount > 0 &&
+              (!featureCollection.features ||
+                featureCollection.features.length === 0)
+            ) {
+              throw new Error(
+                'Selected WFS feature type has no geometry and cannot be displayed on map',
+              );
+            }
+            if (!featureCollection || !featureCollection.features?.length) {
+              throw new Error('No WFS features were returned for this layer');
+            }
+            const blobData = new Blob([JSON.stringify(featureCollection)], {
+              type: 'application/json',
+            });
+            const blobUrl = URL.createObjectURL(blobData);
             const layer = new GeoJSONLayer({
-              url: wfsUrl,
+              url: blobUrl,
               id: id,
               title: title || name,
             });
             layer.LayerId = id;
             layer.ViewService = baseUrl;
             layer.name = name;
+            layer.ServiceDataUrl = blobUrl;
             return layer;
-          })
-          .filter(Boolean);
+          }),
+        );
+        resourceLayers = layerResults.filter(Boolean);
       } else {
         await this.getCapabilities(viewService, 'WMS');
         const wmsLayers = this.parseWMSLayers(this.xml);
@@ -2503,8 +3080,16 @@ class MenuWidget extends React.Component {
           }),
         ];
       }
+      const bboxData = processBboxData(this.xml);
+      if (bboxData && resourceLayers[0]) {
+        resourceLayers[0].fullExtent = bboxData;
+      }
     } catch (error) {
-      this.props.uploadFileErrorHandler();
+      if (this.isNoGeometryError(error)) {
+        this.props.uploadFileErrorHandler('noGeometryError');
+      } else {
+        this.props.uploadFileErrorHandler();
+      }
       return;
     }
 
@@ -2522,7 +3107,9 @@ class MenuWidget extends React.Component {
         if (typeof resourceLayer.load === 'function' && serviceType === 'WFS') {
           try {
             await resourceLayer.load();
-          } catch (e) {}
+          } catch (e) {
+            throw e;
+          }
         }
         if (serviceType === 'WMS' || serviceType === 'WMTS') {
           const forced = (proxiedUrl || '').trim();
@@ -2565,7 +3152,11 @@ class MenuWidget extends React.Component {
 
         this.props.onServiceChange();
       } catch (error) {
-        this.props.uploadFileErrorHandler();
+        if (this.isNoGeometryError(error)) {
+          this.props.uploadFileErrorHandler('noGeometryError');
+        } else {
+          this.props.uploadFileErrorHandler();
+        }
         return;
       }
     }
@@ -2612,7 +3203,7 @@ class MenuWidget extends React.Component {
       this.addUploadedFeatureCollectionToMap(featureCollection, displayTitle);
       this.props.onServiceChange && this.props.onServiceChange();
     } catch (error) {
-      this.props.uploadFileErrorHandler();
+      this.props.uploadFileErrorHandler(this.resolveUploadErrorType(error));
     }
   }
 
@@ -2699,12 +3290,18 @@ class MenuWidget extends React.Component {
   createUserServices(serviceLayers) {
     const fieldset = document.getElementById('map-menu-services');
     if (!fieldset) return;
+    const processTitleData = (titleText) => {
+      if (!titleText) return titleText;
+      if (titleText.length <= 33) return titleText;
+      return titleText.slice(0, 33) + '...';
+    };
 
     // Create an array of all layer elements
     const layerElements = serviceLayers.map((layer, index) => {
       const { LayerId, title, description } = layer;
       const parentIndex = this.layers[layer.id];
       const checkboxId = LayerId;
+      const displayTitle = processTitleData(title || `Layer ${index + 1}`);
 
       return (
         <div
@@ -2740,14 +3337,14 @@ class MenuWidget extends React.Component {
                       <legend className="ccl-form-legend">
                         {description ? (
                           <Popup
-                            trigger={<span>{title}</span>}
+                            trigger={<span>{displayTitle}</span>}
                             content={description}
                             basic
                             className="custom"
                             style={{ transform: 'translateX(-4rem)' }}
                           />
                         ) : (
-                          <span>{title || `Layer ${index + 1}`}</span>
+                          <span>{displayTitle}</span>
                         )}
                       </legend>
                     </label>
@@ -2782,7 +3379,14 @@ class MenuWidget extends React.Component {
     }
 
     // Delete from layers object
-    if (this.layers[elemId]) delete this.layers[elemId];
+    if (this.layers[elemId]) {
+      if (this.layers[elemId].ServiceDataUrl) {
+        try {
+          URL.revokeObjectURL(this.layers[elemId].ServiceDataUrl);
+        } catch (e) {}
+      }
+      delete this.layers[elemId];
+    }
 
     // Remove from ArcGIS map
     let removeLayer = this.props.map.findLayerById(elemId) || null;
@@ -4305,7 +4909,7 @@ class MenuWidget extends React.Component {
     // Get the coordinates of the click on the view
     const proxiedUrl = this.buildProxiedUrl(url);
     return esriRequest(proxiedUrl, {
-      responseType: 'html',
+      responseType: 'text',
       sync: 'true',
       query: {
         request: 'GetCapabilities',
@@ -4315,7 +4919,7 @@ class MenuWidget extends React.Component {
       .then((response) => {
         const xmlDoc = response.data;
         const parser = new DOMParser();
-        this.xml = parser.parseFromString(xmlDoc, 'text/html');
+        this.xml = parser.parseFromString(xmlDoc, 'text/xml');
       })
       .catch(() => {});
   };
@@ -4654,9 +5258,36 @@ class MenuWidget extends React.Component {
         });
         this.view.goTo(myExtent);
       }
+    } else if (serviceLayer) {
+      const storedServiceExtent =
+        this.layers[elem.id]?.fullExtent ||
+        serviceLayer.fullExtent ||
+        (this.layers[elem.id]?.fullExtents &&
+        this.layers[elem.id]?.fullExtents[0]
+          ? this.layers[elem.id]?.fullExtents[0]
+          : null) ||
+        (serviceLayer.fullExtents && serviceLayer.fullExtents[0]
+          ? serviceLayer.fullExtents[0]
+          : null);
+      if (
+        storedServiceExtent &&
+        storedServiceExtent.xmin !== undefined &&
+        storedServiceExtent.ymin !== undefined &&
+        storedServiceExtent.xmax !== undefined &&
+        storedServiceExtent.ymax !== undefined
+      ) {
+        BBoxes = {
+          dataset: {
+            xmin: Number(storedServiceExtent.xmin),
+            ymin: Number(storedServiceExtent.ymin),
+            xmax: Number(storedServiceExtent.xmax),
+            ymax: Number(storedServiceExtent.ymax),
+          },
+        };
+      }
     } else if (this.url?.toLowerCase().endsWith('mapserver')) {
       BBoxes = await this.parseBBOXMAPSERVER(this.layers[elem.id]);
-    } else if (this.url?.toLowerCase().includes('wms') || serviceLayer) {
+    } else if (this.url?.toLowerCase().includes('wms')) {
       await this.getCapabilities(this.url, 'wms');
       BBoxes = this.parseBBOXWMS(this.xml);
     } else if (this.url?.toLowerCase().includes('wmts')) {

package/src/components/MapViewer/UploadWidget.jsx

@@ -150,8 +150,32 @@ class UploadWidget extends React.Component {
     this.setState({ serviceUrl: event.target.value });
   };
 
+  buildUploadResetState = () => {
+    return {
+      serviceUrl: '',
+      wfsFeatures: {},
+      selectedFeatures: {},
+      selectedFile: null,
+      showInfoPopup: false,
+      infoPopupType: '',
+      globalDragActive: false,
+    };
+  };
+
   handleServiceTypeChange = (event) => {
-    this.setState({ selectedServiceType: event.target.value });
+    const nextServiceType = event.target.value;
+    this.setState((prevState) => {
+      if (prevState.selectedServiceType === nextServiceType) {
+        return null;
+      }
+      return {
+        selectedServiceType: nextServiceType,
+        ...this.buildUploadResetState(),
+      };
+    });
+    if (this.fileInput && this.fileInput.current) {
+      this.fileInput.current.value = null;
+    }
   };
 
   setActiveTab(tab) {
@@ -222,6 +246,42 @@ class UploadWidget extends React.Component {
     }
   };
 
+  getServiceTypeFromUrl = (serviceUrl) => {
+    try {
+      const parsedUrl = new URL(serviceUrl);
+      const queryService = (parsedUrl.searchParams.get('service') || '')
+        .trim()
+        .toUpperCase();
+      if (
+        queryService === 'WMS' ||
+        queryService === 'WMTS' ||
+        queryService === 'WFS'
+      ) {
+        return queryService;
+      }
+      const encodedUrl = (
+        (parsedUrl.hostname || '') + (parsedUrl.pathname || '')
+      ).toLowerCase();
+      const serviceMatch = encodedUrl.match(
+        /(^|[^a-z])(wmts|wms|wfs)([^a-z]|$)/i,
+      );
+      if (serviceMatch && serviceMatch[2]) {
+        return serviceMatch[2].toUpperCase();
+      }
+      return null;
+    } catch (e) {
+      return null;
+    }
+  };
+
+  isServiceTypeMatchingUrl = (serviceUrl, selectedServiceType) => {
+    const encodedServiceType = this.getServiceTypeFromUrl(serviceUrl);
+    if (!encodedServiceType) {
+      return true;
+    }
+    return encodedServiceType === selectedServiceType;
+  };
+
   stripProtocol = (url) => {
     return (url || '').replace(/^https?:\/\//i, '');
   };
@@ -236,11 +296,163 @@ class UploadWidget extends React.Component {
     return this.getProxyBase() + this.stripProtocol(url);
   };
 
+  resolveNodeValue = (nodeValue) => {
+    if (nodeValue === null || nodeValue === undefined) {
+      return null;
+    }
+    if (typeof nodeValue === 'string' || typeof nodeValue === 'number') {
+      const textValue = String(nodeValue).trim();
+      return textValue === '' ? null : textValue;
+    }
+    if (Array.isArray(nodeValue)) {
+      for (let i = 0; i < nodeValue.length; i += 1) {
+        const resolvedValue = this.resolveNodeValue(nodeValue[i]);
+        if (resolvedValue) {
+          return resolvedValue;
+        }
+      }
+      return null;
+    }
+    if (typeof nodeValue === 'object') {
+      if (Object.prototype.hasOwnProperty.call(nodeValue, '#text')) {
+        return this.resolveNodeValue(nodeValue['#text']);
+      }
+      if (Object.prototype.hasOwnProperty.call(nodeValue, '_')) {
+        return this.resolveNodeValue(nodeValue._);
+      }
+      if (Object.prototype.hasOwnProperty.call(nodeValue, '$t')) {
+        return this.resolveNodeValue(nodeValue.$t);
+      }
+      if (Object.prototype.hasOwnProperty.call(nodeValue, 'value')) {
+        return this.resolveNodeValue(nodeValue.value);
+      }
+    }
+    return null;
+  };
+
+  processXmlCapabilitiesData = (xmlInput) => {
+    let xmlDoc = xmlInput;
+    if (typeof xmlInput === 'string') {
+      const parser = new DOMParser();
+      xmlDoc = parser.parseFromString(xmlInput, 'text/xml');
+    }
+    if (!xmlDoc || typeof xmlDoc.querySelectorAll !== 'function') {
+      return null;
+    }
+    const featureTypeList = [];
+    const featureTypes = xmlDoc.querySelectorAll('FeatureType, featuretype');
+    featureTypes.forEach((featureTypeNode) => {
+      const titleNode =
+        featureTypeNode.querySelector('Title') ||
+        featureTypeNode.querySelector('title') ||
+        featureTypeNode.querySelector('ows\\:Title');
+      const nameNode =
+        featureTypeNode.querySelector('Name') ||
+        featureTypeNode.querySelector('name') ||
+        featureTypeNode.querySelector('wfs\\:Name') ||
+        featureTypeNode.querySelector('ows\\:Identifier');
+      const nameValue = this.resolveNodeValue(nameNode && nameNode.textContent);
+      const titleValue = this.resolveNodeValue(
+        titleNode && titleNode.textContent,
+      );
+      if (nameValue) {
+        featureTypeList.push({
+          Name: nameValue,
+          Title: titleValue,
+        });
+      }
+    });
+    return {
+      FeatureTypeList: {
+        FeatureType: featureTypeList,
+      },
+    };
+  };
+
+  resolveCapabilitiesData = (capabilitiesResponse) => {
+    if (
+      capabilitiesResponse &&
+      typeof capabilitiesResponse === 'object' &&
+      !Array.isArray(capabilitiesResponse) &&
+      typeof capabilitiesResponse.querySelectorAll !== 'function'
+    ) {
+      return capabilitiesResponse;
+    }
+    if (typeof capabilitiesResponse === 'string') {
+      const trimmedResponse = capabilitiesResponse.trim();
+      if (trimmedResponse === '') {
+        return null;
+      }
+      try {
+        return JSON.parse(trimmedResponse);
+      } catch (e) {
+        return this.processXmlCapabilitiesData(trimmedResponse);
+      }
+    }
+    if (
+      capabilitiesResponse &&
+      typeof capabilitiesResponse === 'object' &&
+      typeof capabilitiesResponse.querySelectorAll === 'function'
+    ) {
+      return this.processXmlCapabilitiesData(capabilitiesResponse);
+    }
+    return null;
+  };
+
+  resolveFeatureTypeList = (capabilitiesData) => {
+    const featureTypeList = [];
+    const processNode = (nodeValue) => {
+      if (nodeValue === null || nodeValue === undefined) {
+        return;
+      }
+      if (Array.isArray(nodeValue)) {
+        nodeValue.forEach((itemValue) => {
+          processNode(itemValue);
+        });
+        return;
+      }
+      if (typeof nodeValue !== 'object') {
+        return;
+      }
+      const nameValue = this.resolveNodeValue(
+        nodeValue.Name ||
+          nodeValue.name ||
+          nodeValue['wfs:Name'] ||
+          nodeValue['ows:Identifier'],
+      );
+      const titleValue = this.resolveNodeValue(
+        nodeValue.Title || nodeValue.title || nodeValue['ows:Title'],
+      );
+      if (nameValue) {
+        featureTypeList.push({
+          Name: nameValue,
+          Title: titleValue,
+        });
+      }
+      const nestedFeatureType =
+        nodeValue.FeatureType || nodeValue.featureType || nodeValue.featuretype;
+      if (nestedFeatureType) {
+        processNode(nestedFeatureType);
+      }
+      Object.keys(nodeValue).forEach((keyValue) => {
+        if (
+          keyValue !== 'FeatureType' &&
+          keyValue !== 'featureType' &&
+          keyValue !== 'featuretype'
+        ) {
+          processNode(nodeValue[keyValue]);
+        }
+      });
+    };
+    processNode(capabilitiesData);
+    return featureTypeList;
+  };
+
   getCapabilities = (url, serviceType) => {
     // Get the coordinates of the click on the view
     const proxiedUrl = this.buildProxiedUrl(url);
     return esriRequest(proxiedUrl, {
-      responseType: 'html',
+      responseType: 'text',
       query: {
         request: 'GetCapabilities',
         service: serviceType,
@@ -248,34 +460,19 @@ class UploadWidget extends React.Component {
       },
     })
       .then((response) => {
-        const xmlDoc = response.data;
-        const parser = new DOMParser();
-        this.xml = parser.parseFromString(xmlDoc, 'text/html');
+        const capabilitiesData = this.resolveCapabilitiesData(response.data);
+        this.capabilitiesData = capabilitiesData;
       })
       .catch(() => {});
   };
 
-  parseWFSFeatures = (xml) => {
-    let doc = xml;
+  parseWFSFeatures = (capabilitiesData) => {
     try {
-      if (typeof xml === 'string') {
-        const parser = new DOMParser();
-        doc = parser.parseFromString(xml, 'text/xml');
-      }
       const features = {};
-      const featureTypes = doc.querySelectorAll('FeatureType, featuretype');
-      featureTypes.forEach((ft) => {
-        const titleEl =
-          ft.querySelector('Title') ||
-          ft.querySelector('title') ||
-          ft.querySelector('ows\\:Title');
-        const nameEl =
-          ft.querySelector('Name') ||
-          ft.querySelector('name') ||
-          ft.querySelector('wfs\\:Name') ||
-          ft.querySelector('ows\\:Identifier');
-        const key = nameEl ? (nameEl.textContent || '').trim() : null;
-        const title = titleEl ? (titleEl.textContent || '').trim() : null;
+      const featureTypeList = this.resolveFeatureTypeList(capabilitiesData);
+      featureTypeList.forEach((featureTypeValue) => {
+        const key = this.resolveNodeValue(featureTypeValue.Name);
+        const title = this.resolveNodeValue(featureTypeValue.Title);
         if (key) {
           features[key] = title ?? null;
         }
@@ -310,14 +507,15 @@ class UploadWidget extends React.Component {
       selectedServiceType === 'WFS' &&
       serviceUrl &&
       serviceUrl.trim() !== '' &&
-      this.isValidUrl(serviceUrl)
+      this.isValidUrl(serviceUrl) &&
+      this.isServiceTypeMatchingUrl(serviceUrl, selectedServiceType)
     ) {
       const normalizedUrl = this.getNormalizedUrlForType(
         serviceUrl,
         selectedServiceType,
       );
       await this.getCapabilities(normalizedUrl, selectedServiceType);
-      const result = this.parseWFSFeatures(this.xml);
+      const result = this.parseWFSFeatures(this.capabilitiesData);
       this.setState(() => ({
         wfsFeatures: result,
       }));
@@ -334,7 +532,8 @@ class UploadWidget extends React.Component {
       selectedServiceType &&
       serviceUrl &&
       serviceUrl.trim() !== '' &&
-      this.isValidUrl(serviceUrl)
+      this.isValidUrl(serviceUrl) &&
+      this.isServiceTypeMatchingUrl(serviceUrl, selectedServiceType)
     ) {
       const normalizedUrl = this.getNormalizedUrlForType(
         serviceUrl,
@@ -375,10 +574,10 @@ class UploadWidget extends React.Component {
     this.setState({ wfsFeatures: {}, serviceUrl: '', selectedFeatures: {} });
   };
 
-  errorPopup = () => {
+  errorPopup = (popupType = 'uploadError') => {
     this.setState({
       showInfoPopup: true,
-      infoPopupType: 'uploadError',
+      infoPopupType: popupType,
     });
     setTimeout(() => {
       this.setState({
@@ -456,7 +655,7 @@ class UploadWidget extends React.Component {
 
   componentDidUpdate(prevProps, prevState) {
     if (!prevProps.showErrorPopup && this.props.showErrorPopup) {
-      this.errorPopup();
+      this.errorPopup(this.props.showErrorPopupType || 'uploadError');
     }
   }
 
@@ -723,6 +922,38 @@ class UploadWidget extends React.Component {
                       </div>
                     </>
                   )}
+                  {this.state.infoPopupType === 'fileLimit' && (
+                    <>
+                      <span className="drawRectanglePopup-icon">
+                        <FontAwesomeIcon icon={['fas', 'info-circle']} />
+                      </span>
+                      <div className="drawRectanglePopup-text">
+                        File exceeds the max size allowed of 10MB.
+                      </div>
+                    </>
+                  )}
+                  {this.state.infoPopupType === 'shapefileLimit' && (
+                    <>
+                      <span className="drawRectanglePopup-icon">
+                        <FontAwesomeIcon icon={['fas', 'info-circle']} />
+                      </span>
+                      <div className="drawRectanglePopup-text">
+                        Uploading shapefiles files larger than 2MB is not
+                        allowed.
+                      </div>
+                    </>
+                  )}
+                  {this.state.infoPopupType === 'noGeometryError' && (
+                    <>
+                      <span className="drawRectanglePopup-icon">
+                        <FontAwesomeIcon icon={['fas', 'info-circle']} />
+                      </span>
+                      <div className="drawRectanglePopup-text">
+                        Selected service has no geometry data and cannot be
+                        displayed on the map.
+                      </div>
+                    </>
+                  )}
                 </div>
               </div>
             </div>
@@ -833,9 +1064,6 @@ class UploadWidget extends React.Component {
               disabled={!selectedFile}
               style={{
                 width: '100%',
-                border: '2px solid #c0d36b',
-                background: '#ffffff',
-                color: '#8ea92a',
               }}
               onClick={this.handleAddClick}
             >
@@ -847,9 +1075,6 @@ class UploadWidget extends React.Component {
               disabled={false}
               style={{
                 width: '100%',
-                border: '2px solid #c0d36b',
-                background: '#ffffff',
-                color: '#8ea92a',
               }}
               onClick={this.handleBrowseClick}
             >

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

@@ -685,6 +685,19 @@ div.upload-container
   cursor: default;
 }
 
+.upload-container .esri-button {
+  border: 1px solid #a0b128;
+  background-color: #a0b128;
+  color: white;
+}
+
+.upload-container .esri-button:enabled:hover,
+.upload-container .esri-button[enabled]:hover {
+  border: 1px solid #a0b128;
+  background-color: white;
+  color: #a0b128;
+}
+
 .upload-panel {
   display: unset !important;
 }
@@ -999,6 +1012,35 @@ div.upload-container
   margin-left: 1.75rem;
 }
 
+.land #map-menu-services .map-menu-service {
+  width: 100%;
+  align-items: center;
+}
+
+.land #map-menu-services .ccl-expandable__button .dropdown-icon {
+  display: flex;
+  width: 100%;
+  height: auto;
+  margin-right: 0;
+}
+
+.land #map-menu-services .map-menu-service .ccl-form-check-label {
+  min-width: 0;
+  flex: 1;
+}
+
+.land #map-menu-services .map-menu-service .ccl-form-legend {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#map-menu-services .map-menu-icon.map-menu-service-icon {
+  margin-right: 0;
+  margin-left: auto;
+}
+
 .map-menu-dropdown i:hover {
   color: black;
 }
@@ -1941,16 +1983,13 @@ div.map-container.popup-block {
 }
 
 .esri-popup__icon {
-  color: white;
+  color: auto;
 }
 
 .esri-widget__anchor {
   color: #7c8921 !important;
   outline: 0px !important;
 }
-/* .esri-widget__anchor:focus {
-  background-color: #a0b128 !important;
-} */
 
 .esri-popup__header-container {
   background-color: #a0b128 !important;
@@ -1963,5 +2002,16 @@ div.map-container.popup-block {
 
 .esri-popup__button {
   background-color: #a0b128 !important;
+  color: white !important;
   outline: 0px !important;
 }
+
+.esri-popup__button:hover {
+  background-color: #7c8921 !important;
+}
+
+.esri-popup__action:hover {
+  background-color: white !important;
+  color: #a0b128 !important;
+  outline: solid 2px #a0b128 !important;
+}