@eeacms/volto-arcgis-block 0.1.264 → 0.1.266

package/CHANGELOG.md

@@ -4,6 +4,31 @@ 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.266](https://github.com/eea/volto-arcgis-block/compare/0.1.265...0.1.266) - 19 March 2024
+
+#### :hammer_and_wrench: Others
+
+- CLMS-2383-3050 (chore): added FAQ hyperlink [Unai Bolivar - [`445af32`](https://github.com/eea/volto-arcgis-block/commit/445af32d2a7c4326f3369657378bbe97b1cb4c2f)]
+- CLMS-2383-3050 (chore): fixed lint error 2 [Unai Bolivar - [`93114ff`](https://github.com/eea/volto-arcgis-block/commit/93114ff28cc2ad1414a079e09489a0c732e8d8ff)]
+- CLMS-2383-3050 (chore): fixed lint error [Unai Bolivar - [`0b53f2e`](https://github.com/eea/volto-arcgis-block/commit/0b53f2e4237aa111e667978c2f97459e1ba7c468)]
+- CLMS-2383-3050 (bug): ready for push [Unai Bolivar - [`c452b23`](https://github.com/eea/volto-arcgis-block/commit/c452b234d7be3dff7dfd35cc14d18b8c0df2a215)]
+- CLMS-2383-3050 (feat): implemented new functions for feature generation [Unai Bolivar - [`d31c2b9`](https://github.com/eea/volto-arcgis-block/commit/d31c2b94bb5232fd15631851549eedd6fa7e80be)]
+- CLMS-2383-3050 (feat): implemented cleared rectangle handler when file is uploaded [Unai Bolivar - [`a90a1ff`](https://github.com/eea/volto-arcgis-block/commit/a90a1ff4121c0f4e12740865c1def8e1a8455a8c)]
+- CLMS-2383-3050 (feat): Disabled legends for file uploads [Unai Bolivar - [`c5c3e16`](https://github.com/eea/volto-arcgis-block/commit/c5c3e163230952b1bf1b732b12c51256c07d5a14)]
+- CLMS-2383-3050 (feat): Implemented nuts and countries layer removal when file uploaded and uploaded layer removal when countries or nuts is selected or a new file is uploaded and successfully processed [Unai Bolivar - [`3f47039`](https://github.com/eea/volto-arcgis-block/commit/3f47039d2deb4a0c9a7dc5016b415946d3bd6fb8)]
+- CLMS-2383-3050 (feat): Implemented single polygon and geometry type checks for shp and geojson files [Unai Bolivar - [`06e43b2`](https://github.com/eea/volto-arcgis-block/commit/06e43b2a819124034d94407b2117a1ad6f6cd1fa)]
+- CLMS-2383-3050 (feat): implemented extent bounding box limit, wkid checker, needs more testing. [Unai Bolivar - [`901d893`](https://github.com/eea/volto-arcgis-block/commit/901d8939226a25624e7708081c59283f5cd27bfa)]
+- CLMS-2383-3050 (chore): implemented max file size limit and info button for file upload FAQ page [Unai Bolivar - [`a05d736`](https://github.com/eea/volto-arcgis-block/commit/a05d73609f84813e275351eee952c4dd318614d2)]
+- CLMS-2383-3050 (chore): implemented simple error messages for file upload max size and incorrect format [Unai Bolivar - [`cbed86e`](https://github.com/eea/volto-arcgis-block/commit/cbed86e68dfe1e2fa61c75da743e1cf9a5332e8f)]
+- CLMS-2383-3050 (chore): corrected button styles in upload form [Unai Bolivar - [`5ca6fb1`](https://github.com/eea/volto-arcgis-block/commit/5ca6fb1d946facf2543d034c23fa9806ac6bfa4c)]
+- CLMS-2749 (feat): csv file upload and render on map is working [Unai Bolivar - [`b670eca`](https://github.com/eea/volto-arcgis-block/commit/b670eca70fc8569929d17b9dda9e585a768de1bd)]
+- CLMS-2749 (feat): shape file upload and render on map is working [Unai Bolivar - [`b8a4731`](https://github.com/eea/volto-arcgis-block/commit/b8a473139f4eb5dceb9ec411c3c446570c630881)]
+- CLMS-2749 (feat): geoJSON file upload and render on map is working [Unai Bolivar - [`a87f7f1`](https://github.com/eea/volto-arcgis-block/commit/a87f7f1c0028e9251ffb4e4e196739b48335c87f)]
+- CLMS-2749 (feat): continuation [Unai Bolivar - [`a16254e`](https://github.com/eea/volto-arcgis-block/commit/a16254e661576630a97aed17df27ad346593a1af)]
+- CLMS-2749 (feat): added new library for shp processing and most file operations have been built [Unai Bolivar - [`114902f`](https://github.com/eea/volto-arcgis-block/commit/114902f5636c18784979db8c6dc8fbf11ba86023)]
+- CLMS-2749 (feat): Implementation of file upload in area selection for data viewer [Unai Bolivar - [`bce2e45`](https://github.com/eea/volto-arcgis-block/commit/bce2e458d5cf1cc9d6c39b4824f054343a2d9781)]
+### [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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.264",
+  "version": "0.1.266",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",
@@ -70,9 +70,9 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "dotenv": "^16.3.2",
     "husky": "^8.0.3",
     "lint-staged": "13.1.4",
-    "md5": "^2.3.0",
-    "dotenv": "^16.3.2"
+    "md5": "^2.3.0"
   }
 }

package/src/components/MapViewer/AreaWidget.jsx

@@ -4,9 +4,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 var Graphic,
   Extent,
+  CSVLayer,
   FeatureLayer,
+  Field,
   GroupLayer,
   Color,
+  //Query,
+  request,
   SimpleLineSymbol,
   SimpleFillSymbol;
 
@@ -35,41 +39,65 @@ class AreaWidget extends React.Component {
     this.nutsUrl = '';
     this.initFMI = this.initFMI.bind(this);
     this.mapviewer_config = this.props.mapviewer_config;
+    this.fileInput = createRef();
+    this.handleCsv = this.handleCsv.bind(this);
+    this.fileUploadLayer = null;
+    this.removeFileUploadedLayer = this.removeFileUploadedLayer.bind(this);
+    this.uploadPortal = this.props.urls.uploadPortal;
+    this.generateFeatureCollection = this.generateFeatureCollection.bind(this);
+    this.addFeatureCollectionToMap = this.addFeatureCollectionToMap.bind(this);
+    this.checkFeatureCount = this.checkFeatureCount.bind(this);
   }
 
   loader() {
     return loadModules([
       'esri/Graphic',
       'esri/geometry/Extent',
+      'esri/layers/CSVLayer',
       'esri/layers/FeatureLayer',
+      'esri/layers/support/Field',
       'esri/layers/GroupLayer',
       'esri/Color',
+      //'esri/rest/support/Query',
+      'esri/request',
       'esri/symbols/SimpleLineSymbol',
       'esri/symbols/SimpleFillSymbol',
     ]).then(
       ([
         _Graphic,
         _Extent,
+        _CSVLayer,
         _FeatureLayer,
+        _Field,
         _GroupLayer,
         _Color,
+        //_Query,
+        _request,
         _SimpleLineSymbol,
         _SimpleFillSymbol,
       ]) => {
         [
           Graphic,
           Extent,
+          CSVLayer,
           FeatureLayer,
+          Field,
           GroupLayer,
           Color,
+          //Query,
+          request,
           SimpleLineSymbol,
           SimpleFillSymbol,
         ] = [
           _Graphic,
           _Extent,
+          _CSVLayer,
           _FeatureLayer,
+          _Field,
           _GroupLayer,
           _Color,
+          //_Query,
+          _request,
           _SimpleLineSymbol,
           _SimpleFillSymbol,
         ];
@@ -101,6 +129,7 @@ class AreaWidget extends React.Component {
         infoPopupType: 'area',
       });
       this.clearWidget();
+      this.removeFileUploadedLayer();
       this.container.current.querySelector(
         '#download_area_select_nuts0',
       ).checked = true;
@@ -183,6 +212,8 @@ class AreaWidget extends React.Component {
         //definitionExpression: 'LEVL_CODE=' + level,
       });
 
+      this.removeFileUploadedLayer();
+
       this.nutsGroupLayer.add(layer);
 
       let index = this.getHighestIndex();
@@ -204,6 +235,8 @@ class AreaWidget extends React.Component {
       popupEnabled: false,
     });
 
+    this.removeFileUploadedLayer();
+
     this.nutsGroupLayer.add(layer);
 
     let index = this.getHighestIndex();
@@ -211,6 +244,354 @@ class AreaWidget extends React.Component {
     this.props.map.reorder(this.nutsGroupLayer, index + 1);
   }
 
+  // FILE UPLOAD HANDLERS
+
+  // Trigger the file input click
+  handleUploadClick = (event) => {
+    event.preventDefault();
+    this.fileInput.current.click();
+  };
+
+  handleFileUpload = (e) => {
+    //Store the file as Blob
+    let fileBlob = e.target.files[0];
+    //Get the file name
+    const fileName = e.target.value.toLowerCase();
+    //console.log('file name: ', fileName);
+
+    //Get the file from the form
+    const file = document.getElementById('uploadForm');
+    //console.log('uploaded file from form: ', file);
+
+    //List allowed file extensions
+    let fileExtensions = ['zip', 'geojson', 'csv'];
+
+    // Get the file extension
+    let fileExtension = fileName.split('.').pop();
+
+    //console.log('file extension: ', fileExtension);
+
+    //Check if the file format is not supported
+    if (fileExtensions.indexOf(fileExtension) === -1) {
+      this.setState({
+        showInfoPopup: true,
+        infoPopupType: 'fileFormat',
+      });
+      return;
+    }
+
+    //Check if the file size is over the 10mb file size limit
+    if (
+      (file.size > 2000000 && fileExtension === 'zip') ||
+      (file.size > 1000000 && fileExtension === 'geojson') ||
+      (file.size > 1000000 && fileExtension === 'csv')
+    ) {
+      this.setState({
+        showInfoPopup: true,
+        infoPopupType: 'fileLimit',
+      });
+      return;
+    }
+
+    //Read the file
+    let reader = new FileReader();
+
+    reader.onload = (event) => {
+      switch (fileExtension) {
+        //    case 'zip':
+        //        this.handleShp(event.target.result);
+        //      break;
+        //    case 'geojson':
+        //      let parsedData;
+        //      try {
+        //        parsedData = JSON.parse(event.target.result);
+        //      } catch (e) {
+        //                   console.error('Failed to parse JSON', e);
+        //        return;
+        //      }
+        //      this.handleGeoJson(parsedData);
+        //      break;
+        case 'csv':
+          this.handleCsv(event.target.result);
+          break;
+        default:
+          break;
+      }
+    };
+
+    switch (fileExtension) {
+      case 'zip':
+        this.generateFeatureCollection(fileName, file, 'shapefile');
+        //reader.readAsArrayBuffer(file);
+        break;
+      case 'geojson':
+        this.generateFeatureCollection(fileName, file, 'geojson');
+        //reader.readAsText(file);
+        break;
+      case 'csv':
+        //this.generateFeatureCollection(
+        //  fileName,
+        //  file,
+        //  'csv',
+        //);
+        reader.readAsText(fileBlob);
+        break;
+      default:
+        break;
+    }
+  };
+
+  generateFeatureCollection(fileName, file, inputFormat) {
+    let name = fileName.split('.');
+
+    // Chrome adds c:\fakepath to the value - we need to remove it
+    name = name[0].replace('c:\\fakepath\\', '');
+
+    //console.log('from generateFeatureCollection() name: ', name);
+
+    // define the input params for generate see the rest doc for details
+    // https://developers.arcgis.com/rest/users-groups-and-items/generate.htm
+    const params = {
+      name: name,
+      targetSR: this.props.view.spatialReference,
+      maxRecordCount: 1000,
+      enforceInputFileSizeLimit: true,
+      enforceOutputJsonSizeLimit: true,
+    };
+    // generalize features to 10 meters for better performance
+    params.generalize = true;
+    params.maxAllowableOffset = 10;
+    params.reducePrecision = true;
+    params.numberOfDigitsAfterDecimal = 0;
+
+    const myContent = {
+      filetype: inputFormat,
+      publishParameters: JSON.stringify(params),
+      f: 'json',
+    };
+    // use the REST generate operation to generate a feature collection from the zipped shapefile
+    request(this.uploadPortal + '/sharing/rest/content/features/generate', {
+      query: myContent,
+      body: file,
+      responseType: 'json',
+    })
+      .then((response) => {
+        if (response.data && response.data.featureCollection) {
+          //console.log('response data: ', response.data);
+          //Check for more than a single feature
+          if (this.checkFeatureCount(response.data.featureCollection) === false)
+            return;
+          //Create a feature layer from the feature collection
+          this.addFeatureCollectionToMap(response.data.featureCollection);
+        } else {
+          //console.error('Unexpected response structure:', response);
+        }
+      })
+      .catch((error) => {
+        //console.error('From generateFeatureCollection function', error);
+      });
+  }
+
+  // add the feature collection to the map and zoom to the feature collection extent
+  // if you want to persist the feature collection when you reload browser, you could store the
+  // collection in local storage by serializing the layer using featureLayer.toJson()
+  // see the 'Feature Collection in Local Storage' sample for an example of how to work with local storage
+  addFeatureCollectionToMap(featureCollection) {
+    let sourceGraphics = [];
+    const layers = featureCollection.layers.map((layer) => {
+      const graphics = layer.featureSet.features.map((feature) => {
+        return Graphic.fromJSON(feature);
+      });
+      sourceGraphics = sourceGraphics.concat(graphics);
+      const featureLayer = new FeatureLayer({
+        objectIdField: 'FID',
+        source: graphics,
+        legendEnabled: false,
+        title: 'uploadLayer',
+        fields: layer.layerDefinition.fields.map((field) => {
+          return Field.fromJSON(field);
+        }),
+      });
+      return featureLayer;
+    });
+
+    //Check for the correct spatial reference
+    //console.log("layer: ", layers);
+    if (this.checkWkid(layers[0]?.spatialReference) === false) return;
+
+    let geometry = new Extent(
+      featureCollection.layers[0].layerDefinition.extent,
+    );
+
+    //If checkExtent returns false, add the layer to the map
+    if (this.checkExtent(geometry.extent)) {
+      this.setState({
+        showInfoPopup: true,
+        infoPopupType: 'fullDataset',
+      });
+    } else {
+      //Remove old uploaded file and save new one to component props for reference
+      this.removeFileUploadedLayer();
+      this.fileUploadLayer = { layers: layers, sourceGraphics: sourceGraphics };
+      //remove NUTS and COUNTRIES layers from map
+      this.removeNutsLayers();
+
+      //Add uploaded layer to the map and zoom to the extent
+      this.props.map.addMany(layers);
+      this.props.view.goTo(sourceGraphics).catch((error) => {
+        //console.error('From addFeatureCollectionToMap function', error);
+      });
+      //Send the area to the parent component
+      this.props.updateArea({
+        origin: { x: geometry.extent.xmin, y: geometry.extent.ymin },
+        end: { x: geometry.extent.xmax, y: geometry.extent.ymax },
+      });
+      //Order the layer in the map
+      let index = this.getHighestIndex();
+      this.props.map.reorder(this.fileUploadLayer, index + 1);
+      this.setState({
+        showInfoPopup: true,
+        infoPopupType: 'download',
+      });
+    }
+  }
+
+  //check if the featurecollection has more than one feature
+
+  checkFeatureCount(layers) {
+    //debugger;
+    if (layers.layers[0].featureSet.features.length > 1) {
+      this.setState({
+        showInfoPopup: true,
+        infoPopupType: 'singleFeature',
+      });
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  //Check if the file has a polygon geometry type
+
+  /* uncomment the code below before pushing to DEMO */
+
+  //if (data?.features?.geometry?.type !== 'polygon') {
+  //  this.setState({
+  //    showInfoPopup: true,
+  //    infoPopupType: 'singlePolygon',
+  //  });
+  //  return;
+  //}
+
+  //Display CSV on the map
+
+  handleCsv(data) {
+    //Create a CSV layer
+    const blob = new Blob([data], {
+      type: 'plain/text',
+    });
+
+    let url = URL.createObjectURL(blob);
+
+    const csvLayer = new CSVLayer({
+      url,
+      legendEnabled: false,
+      title: 'uploadLayer',
+    });
+
+    //debugger;
+    //Query all features insisde the CSV layer
+
+    //csvLayer.load().then(function(){
+    //  let query = new Query({
+    //    where: "mag > 5",
+    //    returnGeometry: true
+    //  });
+    //
+    //  return csvLayer.queryFeatures(query);
+    //})
+    //.then(function(results){
+    //  console.log(results);
+    //})
+    //.catch(function (error) {
+    //  console.error("From CSV query: ", error);
+    //});
+    //Check if the file has the correct spatial reference
+    if (this.checkWkid(csvLayer?.spatialReference) === false) return;
+
+    //Check if the file extent is larger than the limit
+    //let geometry = new Extent({
+    //  xmin: data?.features[0]?.geometry.bbox[0],
+    //  xmax: data?.features[0]?.geometry.bbox[1],
+    //  ymin: data?.features[0]?.geometry.bbox[2],
+    //  ymax: data?.features[0]?.geometry.bbox[3],
+    //  spatialReference: { wkid: 4326 },
+    //});
+
+    //If checkExtent returns false, add the layer to the map
+    //if (this.checkExtent(geometry)) {
+    //  this.setState({
+    //    showInfoPopup: true,
+    //    infoPopupType: 'fullDataset',
+    //  });
+    //} else {
+    this.removeFileUploadedLayer();
+    this.fileUploadLayer = csvLayer;
+    this.removeNutsLayers();
+    this.props.map.add(this.fileUploadLayer);
+    this.setState({
+      showInfoPopup: true,
+      infoPopupType: 'download',
+    });
+    //}
+  }
+
+  checkWkid(spatialReference) {
+    if (
+      spatialReference &&
+      spatialReference?.isWGS84 &&
+      spatialReference?.wkid === 4326
+    ) {
+      return true;
+    } else {
+      this.setState({
+        showInfoPopup: true,
+        infoPopupType: 'incorrectWkid',
+      });
+    }
+  }
+
+  //Remove the NUTS layers from the map
+
+  removeNutsLayers() {
+    //find all the radio buttons
+    let radioButtons = document.querySelectorAll('fieldset.ccl-fieldset');
+
+    // Isolate the the checked radio button
+    let selectedRadioButton = Array.from(radioButtons).find(
+      (radioButton) => radioButton.querySelector('input').checked,
+    );
+
+    //Uncheck the selected radio button
+    if (selectedRadioButton) {
+      selectedRadioButton.querySelector('input').checked = false;
+    }
+
+    //Remove the layers in this.nutsGroupLayer from the map
+    //this.nutsGroupLayer.removeAll();
+    this.clearWidget();
+  }
+
+  //Remove the uploaded layer from the map
+
+  removeFileUploadedLayer() {
+    if (this.fileUploadLayer !== null) {
+      this.props.map.removeMany(this.fileUploadLayer.layers);
+      //this.props.view.graphics.removeMany(this.fileUploadLayer.sourceGraphics);
+      this.fileUploadLayer = null;
+    }
+  }
+
   getHighestIndex() {
     let index = 0;
     document.querySelectorAll('.active-layer').forEach((layer) => {
@@ -396,19 +777,15 @@ class AreaWidget extends React.Component {
                 )
               ) {
                 layer = result.graphic;
+                return layer;
+              } else {
+                return false;
               }
-              return layer;
             })[0].graphic;
             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),
@@ -432,6 +809,9 @@ class AreaWidget extends React.Component {
         });
       }
     });
+    //this.props.view.watch('updating', () => {
+    //  console.log('graphics: ', this.props.view.graphics);
+    //});
 
     this.props.download
       ? this.container !== null && this.props.view.ui.add(this.container)
@@ -648,6 +1028,51 @@ class AreaWidget extends React.Component {
                     </div>
                   </fieldset>
                 </div>
+                <br />
+                <div className="area-header">
+                  Upload a file with your area of interest
+                  <a
+                    href="https://land.copernicus.eu/en/faq/map-viewer/how-can-i-upload-a-file-with-my-area-of-interest"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onClick={(e) => e.stopPropagation()}
+                    onKeyDown={(e) => e.stopPropagation()}
+                  >
+                    <span className="map-menu-icon nuts-menu-icon">
+                      <FontAwesomeIcon icon={['fa', 'info-circle']} />
+                    </span>
+                  </a>
+                </div>
+                <div className="ccl-form">
+                  <form
+                    enctype="multipart/form-data"
+                    method="post"
+                    id="uploadForm"
+                  >
+                    <div className="field">
+                      <label className="file-upload">
+                        <span>
+                          File formats supported: shp(zip), geojson, csv
+                        </span>
+                        <input
+                          type="file"
+                          name="file"
+                          id="inFile"
+                          ref={this.fileInput}
+                          style={{ display: 'none' }}
+                          onChange={this.handleFileUpload}
+                        />
+                      </label>
+                    </div>
+                  </form>
+                  <button
+                    className="esri-button"
+                    onClick={this.handleUploadClick}
+                    type="submit"
+                  >
+                    Upload File
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -697,6 +1122,57 @@ class AreaWidget extends React.Component {
                       </div>
                     </>
                   )}
+                  {this.state.infoPopupType === 'fileFormat' && (
+                    <>
+                      <span className="drawRectanglePopup-icon">
+                        <FontAwesomeIcon icon={['fas', 'info-circle']} />
+                      </span>
+                      <div className="drawRectanglePopup-text">
+                        The file format is not correct.
+                      </div>
+                    </>
+                  )}
+                  {this.state.infoPopupType === 'fileLimit' && (
+                    <>
+                      <span className="drawRectanglePopup-icon">
+                        <FontAwesomeIcon icon={['fas', 'info-circle']} />
+                      </span>
+                      <div className="drawRectanglePopup-text">
+                        Uploading files larger than 10MB is not allowed.
+                      </div>
+                    </>
+                  )}
+                  {this.state.infoPopupType === 'incorrectWkid' && (
+                    <>
+                      <span className="drawRectanglePopup-icon">
+                        <FontAwesomeIcon icon={['fas', 'info-circle']} />
+                      </span>
+                      <div className="drawRectanglePopup-text">
+                        The spatial reference is not correct.
+                      </div>
+                    </>
+                  )}
+                  {this.state.infoPopupType === 'singleFeature' && (
+                    <>
+                      <span className="drawRectanglePopup-icon">
+                        <FontAwesomeIcon icon={['fas', 'info-circle']} />
+                      </span>
+                      <div className="drawRectanglePopup-text">
+                        Uploading files with more than a single feature is not
+                        allowed.
+                      </div>
+                    </>
+                  )}
+                  {this.state.infoPopupType === 'singlePolygon' && (
+                    <>
+                      <span className="drawRectanglePopup-icon">
+                        <FontAwesomeIcon icon={['fas', 'info-circle']} />
+                      </span>
+                      <div className="drawRectanglePopup-text">
+                        Uploaded file is not a polygon geometry type.
+                      </div>
+                    </>
+                  )}
                 </div>
               </div>
             </div>

package/src/components/MapViewer/MapViewer.jsx

@@ -346,7 +346,7 @@ class MapViewer extends React.Component {
   renderArea() {
     if (this.props.mapviewer_config.Download) return;
     if (this.view) {
-      return <CheckLogin reference={this} />;
+      return <CheckLogin reference={this} urls={this.cfgUrls} />;
     }
   }
 

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
@@ -3062,16 +3131,6 @@ class MenuWidget extends React.Component {
       }
     });
     if (layers.length === 0 && document.querySelector('.info-container')) {
-      if (
-        this.props.view.graphics.items.find((a) => {
-          return a.attributes ? a.attributes.id === 'pixel-info' : false;
-        })
-      ) {
-        let marker = this.props.view.graphics.items.find((a) => {
-          return a.attributes && a.attributes.id === 'pixel-info';
-        });
-        this.props.view.graphics.remove(marker);
-      }
       if (
         this.props.mapViewer.activeWidget?.container.current.className ===
         'info-container esri-component'
@@ -3758,6 +3817,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 +3844,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 +3959,7 @@ class MenuWidget extends React.Component {
                     mapViewer={this.props.mapViewer}
                     download={this.props.download}
                     areaData={this.props.area}
+                    handleOpenPopup={this.handleOpenPopup}
                   />
                 </div>
               )}

package/src/components/MapViewer/config.js

@@ -246,6 +246,7 @@ const config = {
       'https://gisco-services.ec.europa.eu/maps/wmts/CountriesWorld/EPSG3857/0/0/0.png',
     countriesWorldTemplate:
       'https://gisco-services.ec.europa.eu/maps/tiles/CountriesWorld/EPSG3857/{z}/{x}/{y}.png',
+    uploadPortal: 'https://www.arcgis.com',
   },
 };
 export default config;

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

@@ -352,6 +352,21 @@ div.esri-popover
 label.ccl-form-radio-label span.nuts-menu-icon {
   margin-left: 9rem;
 }
+
+.area-container .esri-button {
+  border-color: #a0b128;
+  margin-left: 0.25rem;
+  background-color: #a0b128;
+  color: white !important;
+  transition: all 0.3s ease-out;
+}
+
+.area-container .esri-button:hover {
+  border-color: #a0b128;
+  background-color: white;
+  color: #a0b128 !important;
+}
+
 /* Left menu */
 .map-menu {
   position: relative;
@@ -1367,7 +1382,7 @@ input[type='range']::-ms-track {
   display: flex;
   width: 19rem;
   height: 60px;
-  justify-content: space-between;
+  justify-content: space-around;
   padding: 0.6rem 0.8rem 0.8rem 0.8rem;
   background-color: white;
 }
@@ -1381,6 +1396,7 @@ input[type='range']::-ms-track {
 }
 
 .drawRectanglePopup-text {
+  flex: auto;
   font-family: 'Lato', sans-serif;
   font-size: 0.875rem;
 }