@eeacms/volto-arcgis-block 0.1.432 → 0.1.433

package/CHANGELOG.md

@@ -4,6 +4,8 @@ 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.433](https://github.com/eea/volto-arcgis-block/compare/0.1.432...0.1.433) - 9 March 2026
+
 ### [0.1.432](https://github.com/eea/volto-arcgis-block/compare/0.1.431...0.1.432) - 4 March 2026
 
 #### :house: Internal changes
@@ -12,6 +14,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
+- Merge pull request #1110 from eea/develop [Unai Bolivar - [`30529ef`](https://github.com/eea/volto-arcgis-block/commit/30529ef893a6e0acbc62027b473c6844f057771d)]
 - (bug): WMTS layer visualize in 3D globe view mode. [Unai Bolivar - [`71b12ee`](https://github.com/eea/volto-arcgis-block/commit/71b12eea1c424820df05ddb38788fd936933fdfb)]
 - (feat): When using swipe or print in 3D globe view mode. Switch to 2D default view mode automatically, when closing swipe or print widget, automatically switch back to 3D if user was originally in 3D mode [Unai Bolivar - [`41cc34e`](https://github.com/eea/volto-arcgis-block/commit/41cc34e259a2f07102fe5b96fd908023d6a39411)]
 - (bug): swipe and print widgets engaged in 3D globe view load in 2D default view automatically [Unai Bolivar - [`57d522e`](https://github.com/eea/volto-arcgis-block/commit/57d522eecbb14a5de68fd6278c93e5e465fe7fe0)]

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -940,6 +940,7 @@ class AreaWidget extends React.Component {
     let origin = null;
     let originGraphic = null;
     let cursorGraphic = null;
+    let originTextSymbol = null;
     const drawGraphics = this.props.view.on('drag', (e) => {
       if (this.props.mapViewer.pan_enabled) return;
       e.stopPropagation();
@@ -953,10 +954,10 @@ class AreaWidget extends React.Component {
             originLon: origin.longitude.toFixed(3),
           },
         });
-        let originTextSymbol = new TextSymbol(
-          this.state.areaCoordinates.originLon +
-            ' , ' +
-            this.state.areaCoordinates.originLat,
+        originTextSymbol = new TextSymbol(
+          this.state.areaCoordinates.originLat +
+            ', ' +
+            this.state.areaCoordinates.originLon,
         );
         originTextSymbol.horizontalAlignment = 'right';
         originTextSymbol.verticalAlignment = 'bottom';
@@ -1003,6 +1004,7 @@ class AreaWidget extends React.Component {
       } else if (e.action === 'update') {
         if (extentGraphic) this.props.view.graphics.remove(extentGraphic);
         if (cursorGraphic) this.props.view.graphics.remove(cursorGraphic);
+        if (originGraphic) this.props.view.graphics.remove(originGraphic);
         let p = this.props.view.toMap(e);
         this.setState({
           areaCoordinates: {
@@ -1060,19 +1062,49 @@ class AreaWidget extends React.Component {
           end: { x: p.longitude, y: p.latitude },
         });
         this.props.view.graphics.add(extentGraphic);
+        originTextSymbol = new TextSymbol(
+          this.state.areaCoordinates.originLat +
+            ', ' +
+            this.state.areaCoordinates.originLon,
+        );
         let cursorTextSymbol = new TextSymbol(
-          this.state.areaCoordinates.cursorLon +
-            ' , ' +
-            this.state.areaCoordinates.cursorLat,
+          this.state.areaCoordinates.cursorLat +
+            ', ' +
+            this.state.areaCoordinates.cursorLon,
         );
-        cursorTextSymbol.horizontalAlignment = 'left';
-        cursorTextSymbol.verticalAlignment = 'top';
-        cursorTextSymbol.font.size = 8;
+        if (
+          parseFloat(this.state.areaCoordinates.originLat) >
+          parseFloat(this.state.areaCoordinates.cursorLat)
+        ) {
+          originTextSymbol.verticalAlignment = 'bottom';
+          cursorTextSymbol.verticalAlignment = 'top';
+        } else {
+          originTextSymbol.verticalAlignment = 'top';
+          cursorTextSymbol.verticalAlignment = 'bottom';
+        }
+        if (
+          parseFloat(this.state.areaCoordinates.originLon) >
+          parseFloat(this.state.areaCoordinates.cursorLon)
+        ) {
+          originTextSymbol.horizontalAlignment = 'left';
+          cursorTextSymbol.horizontalAlignment = 'right';
+        } else {
+          originTextSymbol.horizontalAlignment = 'right';
+          cursorTextSymbol.horizontalAlignment = 'left';
+        }
+        originTextSymbol.font.size = 8;
         var point2 = new Point(
+          this.state.areaCoordinates.originLon,
+          this.state.areaCoordinates.originLat,
+        );
+        originGraphic = new Graphic(point2, originTextSymbol);
+        this.props.view.graphics.add(originGraphic);
+        cursorTextSymbol.font.size = 8;
+        var point3 = new Point(
           this.state.areaCoordinates.cursorLon,
           this.state.areaCoordinates.cursorLat,
         );
-        cursorGraphic = new Graphic(point2, cursorTextSymbol);
+        cursorGraphic = new Graphic(point3, cursorTextSymbol);
         this.props.view.graphics.add(cursorGraphic);
       }
     });