@eeacms/volto-arcgis-block 0.1.263 → 0.1.265

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.265](https://github.com/eea/volto-arcgis-block/compare/0.1.264...0.1.265) - 13 March 2024
+
+### [0.1.264](https://github.com/eea/volto-arcgis-block/compare/0.1.263...0.1.264) - 11 March 2024
+
 ### [0.1.263](https://github.com/eea/volto-arcgis-block/compare/0.1.262...0.1.263) - 29 February 2024
 
 ### [0.1.262](https://github.com/eea/volto-arcgis-block/compare/0.1.261...0.1.262) - 27 February 2024

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -402,13 +402,7 @@ class AreaWidget extends React.Component {
             if (graphic) {
               let geometry = graphic.geometry;
               if (geometry.type === 'polygon') {
-                let nuts;
-                if ('countries'.includes(graphic.layer.id)) {
-                  nuts = graphic.attributes.ISO_2DIGIT;
-                } else {
-                  nuts = graphic.attributes.NUTS_ID;
-                }
-                this.props.updateArea(nuts);
+                this.props.updateArea(graphic);
                 let symbol = new SimpleFillSymbol(
                   'solid',
                   new SimpleLineSymbol('solid', new Color([232, 104, 80]), 2),
@@ -449,7 +443,9 @@ class AreaWidget extends React.Component {
 
   async initFMI() {
     let fetchUrl =
-      window.location.href.replace(window.location.pathname.substring(0), '') +
+      window.location.href
+        .replace(window.location.pathname.substring(0), '')
+        .replace(window.location.search.substring(0), '') +
       '/++api++/@anon-registry';
     try {
       let nutsResponse = await fetch(

package/src/components/MapViewer/MenuWidget.jsx

@@ -26,6 +26,7 @@ export const AddCartItem = ({
   download,
   areaData,
   dataset,
+  handleOpenPopup,
 }) => {
   const { addCartItem, isLoggedIn } = useCartState();
 
@@ -48,7 +49,13 @@ export const AddCartItem = ({
     } else {
       if (areaData) {
         area.type = 'nuts';
-        area.value = areaData;
+        if (areaData.geometry.type === 'polygon') {
+          if ('countries'.includes(areaData.layer.id)) {
+            area.value = areaData.attributes.ISO_2DIGIT;
+          } else {
+            area.value = areaData.attributes.NUTS_ID;
+          }
+        }
       } else {
         area = '';
       }
@@ -67,6 +74,65 @@ export const AddCartItem = ({
       }
     });
   };
+  const checkExtent = (e) => {
+    let intersection = false;
+    let areaExtent = null;
+    let check = document.querySelector('.area-panel input:checked').value;
+    if (check === 'area') {
+      areaExtent = new Extent({
+        xmin: Math.min(areaData.end.x, areaData.origin.x),
+        xmax: Math.max(areaData.end.x, areaData.origin.x),
+        ymin: Math.min(areaData.end.y, areaData.origin.y),
+        ymax: Math.max(areaData.end.y, areaData.origin.y),
+      });
+    } else {
+      areaExtent = areaData.geometry;
+    }
+    if (dataset?.DatasetTitle) {
+      Object.keys(props.layers).forEach((id) => {
+        if (
+          props.layers[id]?.DatasetTitle &&
+          dataset.DatasetTitle === props.layers[id].DatasetTitle
+        ) {
+          let layerExtent = null;
+          if (props.layers[id].fullExtent) {
+            layerExtent = new Extent({
+              xmin: props.layers[id].fullExtent.xmin,
+              ymin: props.layers[id].fullExtent.ymin,
+              xmax: props.layers[id].fullExtent.xmax,
+              ymax: props.layers[id].fullExtent.ymax,
+            });
+          } else if (
+            props.layers[id].fullExtents &&
+            props.layers[id].fullExtents[0]
+          ) {
+            layerExtent = new Extent({
+              xmin: props.layers[id].fullExtents[0].xmin,
+              ymin: props.layers[id].fullExtents[0].ymin,
+              xmax: props.layers[id].fullExtents[0].xmax,
+              ymax: props.layers[id].fullExtents[0].ymax,
+            });
+          } else {
+            layerExtent = new Extent({
+              xmin: -20037508.342789,
+              ymin: -20037508.342789,
+              xmax: 20037508.342789,
+              ymax: 20037508.342789,
+            });
+          }
+          if (layerExtent.intersects(areaExtent)) {
+            intersection = true;
+          }
+        }
+      });
+      if (intersection) {
+        checkArea();
+      } else {
+        e.currentTarget.appendChild(document.querySelector('.popup-container'));
+        handleOpenPopup();
+      }
+    }
+  };
 
   const checkCartData = (cartData, area, dataset) => {
     if (!dataset) {
@@ -112,7 +178,7 @@ export const AddCartItem = ({
                   document.querySelector('.drawRectanglePopup-block').style
                     .display === 'none'
                 ) {
-                  checkArea(e);
+                  checkExtent(e);
                 }
               }
             }}
@@ -144,7 +210,7 @@ export const AddCartItem = ({
                       document.querySelector('#map_area_button').click();
                     }
                   } else {
-                    checkArea(e);
+                    checkExtent(e);
                   }
                 }
               }}
@@ -254,6 +320,7 @@ class MenuWidget extends React.Component {
       setNoServiceModal: true,
       TMSLayerObj: null,
       draggedElements: [],
+      popup: false,
     };
     this.menuClass =
       'esri-icon-drag-horizontal esri-widget--button esri-widget esri-interactive';
@@ -269,6 +336,7 @@ class MenuWidget extends React.Component {
     this.prepareHotspotLayers = this.prepareHotspotLayers.bind(this);
     this.activeLayersToHotspotData = this.activeLayersToHotspotData.bind(this);
     this.getLimitScale = this.getLimitScale.bind(this);
+    this.handleOpenPopup = this.handleOpenPopup.bind(this);
     // add zoomend listener to map to show/hide zoom in message
     this.view.watch('stationary', (isStationary) => {
       let snowAndIceInSessionStorage = sessionStorage.getItem('snowAndIce');
@@ -1403,6 +1471,7 @@ class MenuWidget extends React.Component {
                       download={this.props.download}
                       areaData={this.props.area}
                       dataset={dataset}
+                      handleOpenPopup={this.handleOpenPopup}
                     />
                   ) : (
                     <span
@@ -3758,6 +3827,23 @@ class MenuWidget extends React.Component {
       }, 100);
     }
   }
+  handleOpenPopup = () => {
+    clearTimeout(this.timeout);
+    this.setState({
+      popup: true,
+    });
+
+    this.timeout = setTimeout(() => {
+      this.handleClosePopup();
+    }, 2000);
+  };
+
+  handleClosePopup = () => {
+    this.setState({
+      popup: false,
+    });
+    clearTimeout(this.timeout);
+  };
 
   /**
    * This method renders the component
@@ -3768,6 +3854,15 @@ class MenuWidget extends React.Component {
       <>
         <div ref={this.container} className="map-left-menu-container">
           <div className="map-menu tab-container" id="tabcontainer">
+            <Popup
+              type={'info'}
+              open={this.state.popup}
+              position="right center"
+              trigger={<div className="popup-container"></div>}
+              offset={[0, 20]}
+            >
+              {'No data available on the selected area'}
+            </Popup>
             <div className="tabs" role="tablist">
               <span
                 className={!this.props.download ? 'tab tab-selected' : 'tab'}
@@ -3874,6 +3969,7 @@ class MenuWidget extends React.Component {
                     mapViewer={this.props.mapViewer}
                     download={this.props.download}
                     areaData={this.props.area}
+                    handleOpenPopup={this.handleOpenPopup}
                   />
                 </div>
               )}