@eeacms/volto-arcgis-block 0.1.373 → 0.1.375

package/CHANGELOG.md

@@ -4,6 +4,10 @@ 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.375](https://github.com/eea/volto-arcgis-block/compare/0.1.374...0.1.375) - 14 July 2025
+
+### [0.1.374](https://github.com/eea/volto-arcgis-block/compare/0.1.373...0.1.374) - 9 July 2025
+
 ### [0.1.373](https://github.com/eea/volto-arcgis-block/compare/0.1.372...0.1.373) - 8 July 2025
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -870,7 +870,10 @@ class AreaWidget extends React.Component {
   checkExtent(extent) {
     const areaLimit = this.mapviewer_config.Components[0].Products[0]
       .Datasets[0].DownloadLimitAreaExtent;
-    if (extent.width * extent.height > areaLimit) {
+    if (
+      extent.width * extent.height > areaLimit ||
+      extent.width * extent.height === 0
+    ) {
       return true;
     } else {
       return false;
@@ -993,20 +996,32 @@ class AreaWidget extends React.Component {
   }
   addCoordinates() {
     this.clearWidget();
-    let pointNorth = !isNaN(document.getElementById('menu-north').value)
-      ? Number(document.getElementById('menu-north').value)
-      : 0;
-    let pointSouth = !isNaN(document.getElementById('menu-south').value)
-      ? Number(document.getElementById('menu-south').value)
-      : 0;
-    let pointEast = !isNaN(document.getElementById('menu-east').value)
-      ? Number(document.getElementById('menu-east').value)
-      : 0;
-    let pointWest = !isNaN(document.getElementById('menu-west').value)
-      ? Number(document.getElementById('menu-west').value)
-      : 0;
-    let pointNE = [pointNorth, pointEast];
-    let pointSW = [pointSouth, pointWest];
+    let pointNorth = document.getElementById('menu-north');
+    if (pointNorth.value > 90) {
+      pointNorth.value = 90;
+    } else if (pointNorth.value < -90) {
+      pointNorth.value = -90;
+    }
+    let pointSouth = document.getElementById('menu-south');
+    if (pointSouth.value > 90) {
+      pointSouth.value = 90;
+    } else if (pointSouth.value < -90) {
+      pointSouth.value = -90;
+    }
+    let pointEast = document.getElementById('menu-east');
+    if (pointEast.value > 180) {
+      pointEast.value = 180;
+    } else if (pointEast.value < -180) {
+      pointEast.value = -180;
+    }
+    let pointWest = document.getElementById('menu-west');
+    if (pointWest.value > 180) {
+      pointWest.value = 180;
+    } else if (pointWest.value < -180) {
+      pointWest.value = -180;
+    }
+    let pointNW = [pointNorth.value, pointWest.value];
+    let pointSE = [pointSouth.value, pointEast.value];
     var fillSymbol = {
       type: 'simple-fill',
       color: [255, 255, 255, 0.5],
@@ -1017,10 +1032,10 @@ class AreaWidget extends React.Component {
     };
     let extentGraphic = new Graphic({
       geometry: new Extent({
-        xmin: Math.min(pointNE[1], pointSW[1]),
-        xmax: Math.max(pointNE[1], pointSW[1]),
-        ymin: Math.min(pointNE[0], pointSW[0]),
-        ymax: Math.max(pointNE[0], pointSW[0]),
+        xmin: Math.min(pointNW[1], pointSE[1]),
+        xmax: Math.max(pointNW[1], pointSE[1]),
+        ymin: Math.min(pointNW[0], pointSE[0]),
+        ymax: Math.max(pointNW[0], pointSE[0]),
         spatialReference: { wkid: 4326 },
       }),
       symbol: fillSymbol,
@@ -1032,7 +1047,6 @@ class AreaWidget extends React.Component {
       extentGraphic.geometry,
       outSpatialReference,
     );
-
     if (extentGraphic && this.checkExtent(graphicProjection)) {
       this.setState({
         showInfoPopup: true,
@@ -1049,9 +1063,9 @@ class AreaWidget extends React.Component {
     this.props.updateArea({
       origin: {
         x: extentGraphic.geometry.xmin,
-        y: extentGraphic.geometry.ymin,
+        y: extentGraphic.geometry.ymax,
       },
-      end: { x: extentGraphic.geometry.xmax, y: extentGraphic.geometry.ymax },
+      end: { x: extentGraphic.geometry.xmax, y: extentGraphic.geometry.ymin },
     });
     this.props.view.graphics.add(extentGraphic);
   }
@@ -1751,13 +1765,14 @@ class AreaWidget extends React.Component {
           </div>
           <div className="coordinateContainer">
             <div className="coordinateSubContainer">
-              <div className="coordinateSubContainerTitle">NE</div>
+              <div className="coordinateSubContainerTitle">NW</div>
               <div>
                 Lat:
                 <input
-                  type="text"
+                  type="number"
                   id="menu-north"
-                  maxLength="9"
+                  min="-90"
+                  max="90"
                   placeholder="00.000000"
                   className="coordinateInput"
                 />
@@ -1765,22 +1780,24 @@ class AreaWidget extends React.Component {
               <div>
                 Lon:
                 <input
-                  type="text"
-                  id="menu-east"
-                  maxLength="9"
+                  type="number"
+                  id="menu-west"
+                  min="-180"
+                  max="180"
                   placeholder="00.000000"
                   className="coordinateInput"
                 />
               </div>
             </div>
             <div className="coordinateSubContainer">
-              <div className="coordinateSubContainerTitle">SW</div>
+              <div className="coordinateSubContainerTitle">SE</div>
               <div>
                 Lat:
                 <input
-                  type="text"
+                  type="number"
                   id="menu-south"
-                  maxLength="9"
+                  min="-90"
+                  max="90"
                   placeholder="00.000000"
                   className="coordinateInput"
                 />
@@ -1788,9 +1805,10 @@ class AreaWidget extends React.Component {
               <div>
                 Lon:
                 <input
-                  type="text"
-                  id="menu-west"
-                  maxLength="9"
+                  type="number"
+                  id="menu-east"
+                  min="-180"
+                  max="180"
                   placeholder="00.000000"
                   className="coordinateInput"
                 />

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

@@ -535,6 +535,7 @@ label.ccl-form-radio-label span.nuts-menu-icon {
   border-style: solid;
   border-color: #a0b128 !important;
   margin-left: 0.5rem;
+  outline: none;
 }
 
 /* WMS Upload */