@eeacms/volto-arcgis-block 0.1.266 → 0.1.268

package/CHANGELOG.md

@@ -4,10 +4,23 @@ 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.268](https://github.com/eea/volto-arcgis-block/compare/0.1.267...0.1.268) - 21 March 2024
+
+#### :hammer_and_wrench: Others
+
+- CLMS-2383-3050 (bug): allowed file size limit alert corrected. alerts text centered [Unai Bolivar - [`0666ab3`](https://github.com/eea/volto-arcgis-block/commit/0666ab320382db18367bf1076db91e6fe2f6145e)]
+- CLMS-2383-3050 (chore): commented logs [Unai Bolivar - [`f68b1a9`](https://github.com/eea/volto-arcgis-block/commit/f68b1a90d4b77b73446cfd7b45ee310a6eb3dee1)]
+- CLMS-2383-3050 (bug): corrected graphic overlay. corrected add to cart bug. CSV fileu upload disabled [Unai Bolivar - [`4f43430`](https://github.com/eea/volto-arcgis-block/commit/4f434304f4013725b86d302991d826cf861c9c57)]
+### [0.1.267](https://github.com/eea/volto-arcgis-block/compare/0.1.266...0.1.267) - 20 March 2024
+
+#### :hammer_and_wrench: Others
+
+- CLMS-BOOKMARK-MARKER (bug): marker is erased and widget closed if layers in menu widget are un checked [Unai Bolivar - [`0fb3ac9`](https://github.com/eea/volto-arcgis-block/commit/0fb3ac9e7c553b59b2af7fb5b2b0b213c8fa0885)]
 ### [0.1.266](https://github.com/eea/volto-arcgis-block/compare/0.1.265...0.1.266) - 19 March 2024
 
 #### :hammer_and_wrench: Others
 
+- Merge pull request #732 from eea/develop [Unai Bolivar - [`5619658`](https://github.com/eea/volto-arcgis-block/commit/5619658a6e61305994ec50c7ead5bedf2d494d43)]
 - 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)]

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -212,7 +212,7 @@ class AreaWidget extends React.Component {
         //definitionExpression: 'LEVL_CODE=' + level,
       });
 
-      this.removeFileUploadedLayer();
+      //this.removeFileUploadedLayer();
 
       this.nutsGroupLayer.add(layer);
 
@@ -223,6 +223,7 @@ class AreaWidget extends React.Component {
   }
 
   loadCountriesService(id) {
+    //debugger;
     document.querySelector('.esri-attribution__powered-by').style.display =
       'flex';
     var layer = new FeatureLayer({
@@ -235,7 +236,7 @@ class AreaWidget extends React.Component {
       popupEnabled: false,
     });
 
-    this.removeFileUploadedLayer();
+    //this.removeFileUploadedLayer();
 
     this.nutsGroupLayer.add(layer);
 
@@ -253,24 +254,23 @@ class AreaWidget extends React.Component {
   };
 
   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 size
+    const fileSize = e.target.files[0].size;
     //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'];
+    let fileExtensions = ['zip', 'geojson'];
 
     // 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({
@@ -280,12 +280,9 @@ class AreaWidget extends React.Component {
       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')
-    ) {
+    // Check if the file is a geojson or CSV and the file size is over the 10mb file size limit
+    // or file is a shape file and the file size is over the 2mb file size limit
+    if (fileSize > 10485760 && fileExtension === 'geojson') {
       this.setState({
         showInfoPopup: true,
         infoPopupType: 'fileLimit',
@@ -293,31 +290,13 @@ class AreaWidget extends React.Component {
       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;
-      }
-    };
+    if (fileSize > 2097152 && fileExtension === 'zip') {
+      this.setState({
+        showInfoPopup: true,
+        infoPopupType: 'shapefileLimit',
+      });
+      return;
+    }
 
     switch (fileExtension) {
       case 'zip':
@@ -328,14 +307,14 @@ class AreaWidget extends React.Component {
         this.generateFeatureCollection(fileName, file, 'geojson');
         //reader.readAsText(file);
         break;
-      case 'csv':
-        //this.generateFeatureCollection(
-        //  fileName,
-        //  file,
-        //  'csv',
-        //);
-        reader.readAsText(fileBlob);
-        break;
+      //case 'csv':
+      //this.generateFeatureCollection(
+      //  fileName,
+      //  file,
+      //  'csv',
+      //);
+      //  reader.readAsText(fileBlob);
+      //  break;
       default:
         break;
     }
@@ -383,27 +362,70 @@ class AreaWidget extends React.Component {
             return;
           //Create a feature layer from the feature collection
           this.addFeatureCollectionToMap(response.data.featureCollection);
+          //console.log(data);
+          //this.loadFileUploadService(response.data.featureCollection);
         } else {
           //console.error('Unexpected response structure:', response);
         }
       })
       .catch((error) => {
-        //console.error('From generateFeatureCollection function', error);
+        //console.error('Failed to generate feature collection:', error);
       });
   }
 
+  loadFileUploadService(data) {
+    //debugger;
+    document.querySelector('.esri-attribution__powered-by').style.display =
+      'flex';
+    const blob = new Blob([data], {
+      type: 'json',
+    });
+    const url = URL.createObjectURL(blob);
+
+    var layer = new FeatureLayer({
+      id: 9,
+      //url: this.props.urls.outsideEu,
+      url: url,
+      layerId: 9,
+      outFields: ['*'],
+      popupEnabled: false,
+      title: 'upload',
+    });
+
+    //this.removeFileUploadedLayer();
+
+    this.removeNutsLayers();
+
+    this.nutsGroupLayer.add(layer);
+
+    let index = this.getHighestIndex();
+
+    this.props.map.reorder(this.nutsGroupLayer, index + 1);
+  }
+
   // 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) {
+    //console.log('feature collection: ', featureCollection);
     let sourceGraphics = [];
+    const symbol = new SimpleFillSymbol({
+      //type: 'simple-fill',
+      color: [255, 255, 255, 0.5],
+      outline: {
+        color: [0, 0, 0],
+        width: 1,
+      },
+    });
     const layers = featureCollection.layers.map((layer) => {
       const graphics = layer.featureSet.features.map((feature) => {
+        feature.symbol = symbol;
         return Graphic.fromJSON(feature);
       });
       sourceGraphics = sourceGraphics.concat(graphics);
       const featureLayer = new FeatureLayer({
+        //        id: 9,
         objectIdField: 'FID',
         source: graphics,
         legendEnabled: false,
@@ -411,12 +433,46 @@ class AreaWidget extends React.Component {
         fields: layer.layerDefinition.fields.map((field) => {
           return Field.fromJSON(field);
         }),
+        //        layerId: 9,
+        //        outFields: ['*'],
+        //        popupEnabled: false,
       });
+      //featureLayer.renderer = {
+      //  type: 'simple-fill',
+      //  color: [255, 255, 255, 0.5],
+      //  outline: {
+      //    color: [0, 0, 0],
+      //    width: 1,
+      //  },
+      //}
+      //featureLayer.renderer = {
+      //  type: "simple",  // autocasts as new SimpleRenderer()
+      //  symbol: {
+      //    type: "simple-fill",  // autocasts as new SimpleMarkerSymbol()
+      //    //size: 20,
+      //    color: [255, 255, 255, 0.5],
+      //    outline: {  // autocasts as new SimpleLineSymbol()
+      //      width: 1,
+      //      color: [0, 0, 0]
+      //    }
+      //  }
+      //};
+      //featureLayer.renderer = {
+      //  type: "simple",  // autocasts as new SimpleRenderer()
+      //  symbol: {
+      //    type: "simple-fill",  // autocasts as new SimpleMarkerSymbol()
+      //    size: 20,
+      //    color: "green",
+      //    outline: {  // autocasts as new SimpleLineSymbol()
+      //      width: 4.5,
+      //      color: "blue"
+      //    }
+      //  }
+      //};
       return featureLayer;
     });
-
     //Check for the correct spatial reference
-    //console.log("layer: ", layers);
+    //console.log('layer: ', layers);
     if (this.checkWkid(layers[0]?.spatialReference) === false) return;
 
     let geometry = new Extent(
@@ -437,15 +493,14 @@ class AreaWidget extends React.Component {
       this.removeNutsLayers();
 
       //Add uploaded layer to the map and zoom to the extent
-      this.props.map.addMany(layers);
+      //this.props.map.addMany(layers);
+      this.props.view.graphics.addMany(sourceGraphics);
       this.props.view.goTo(sourceGraphics).catch((error) => {
         //console.error('From addFeatureCollectionToMap function', error);
       });
+      //console.log('source graphics: ', sourceGraphics);
       //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 },
-      });
+      this.props.updateArea(sourceGraphics[0]);
       //Order the layer in the map
       let index = this.getHighestIndex();
       this.props.map.reorder(this.fileUploadLayer, index + 1);
@@ -566,16 +621,22 @@ class AreaWidget extends React.Component {
   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,
+    let rectangleRadioButton = document.querySelector(
+      '#download_area_select_rectangle',
     );
+    // Isolate the the checked radio button
+    let selectedRadioButton = Array.from(radioButtons).find((radioButton) => {
+      let input = radioButton.querySelector('input');
+      return input && input.type === 'radio' && input.checked;
+    });
 
     //Uncheck the selected radio button
     if (selectedRadioButton) {
       selectedRadioButton.querySelector('input').checked = false;
     }
+    if (rectangleRadioButton.checked) {
+      rectangleRadioButton.checked = false;
+    }
 
     //Remove the layers in this.nutsGroupLayer from the map
     //this.nutsGroupLayer.removeAll();
@@ -586,9 +647,10 @@ class AreaWidget extends React.Component {
 
   removeFileUploadedLayer() {
     if (this.fileUploadLayer !== null) {
-      this.props.map.removeMany(this.fileUploadLayer.layers);
-      //this.props.view.graphics.removeMany(this.fileUploadLayer.sourceGraphics);
-      this.fileUploadLayer = null;
+      //  this.props.map.removeMany(this.fileUploadLayer.layers);
+      //  //this.props.view.graphics.removeMany(this.fileUploadLayer.sourceGraphics);
+      //  this.fileUploadLayer = null;
+      this.clearWidget();
     }
   }
 
@@ -772,7 +834,7 @@ class AreaWidget extends React.Component {
             let graphic = response.results.filter((result) => {
               let layer;
               if (
-                'nuts0 nuts1 nuts2 nuts3 countries'.includes(
+                'nuts0 nuts1 nuts2 nuts3 countries upload'.includes(
                   result.graphic.layer.id,
                 )
               ) {
@@ -1051,9 +1113,7 @@ class AreaWidget extends React.Component {
                   >
                     <div className="field">
                       <label className="file-upload">
-                        <span>
-                          File formats supported: shp(zip), geojson, csv
-                        </span>
+                        <span>File formats supported: shp(zip), geojson</span>
                         <input
                           type="file"
                           name="file"
@@ -1138,7 +1198,19 @@ class AreaWidget extends React.Component {
                         <FontAwesomeIcon icon={['fas', 'info-circle']} />
                       </span>
                       <div className="drawRectanglePopup-text">
-                        Uploading files larger than 10MB is not allowed.
+                        Uploading geojson or csv files larger than 10MB is not
+                        allowed.
+                      </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>
                     </>
                   )}

package/src/components/MapViewer/MenuWidget.jsx

@@ -31,7 +31,7 @@ export const AddCartItem = ({
   const { addCartItem, isLoggedIn } = useCartState();
 
   const checkArea = (e) => {
-    let check = document.querySelector('.area-panel input:checked').value;
+    let check = document.querySelector('.area-panel input:checked')?.value;
     let area = {};
     if (check === 'area') {
       let graphics = mapViewer.view.graphics;
@@ -77,7 +77,7 @@ export const AddCartItem = ({
   const checkExtent = (e) => {
     let intersection = false;
     let areaExtent = null;
-    let check = document.querySelector('.area-panel input:checked').value;
+    let check = document.querySelector('.area-panel input:checked')?.value;
     if (check === 'area') {
       areaExtent = new Extent({
         xmin: Math.min(areaData.end.x, areaData.origin.x),
@@ -3131,6 +3131,16 @@ 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'

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

@@ -1396,7 +1396,8 @@ input[type='range']::-ms-track {
 }
 
 .drawRectanglePopup-text {
-  flex: auto;
+  align-content: center;
+  /* flex: auto; */
   font-family: 'Lato', sans-serif;
   font-size: 0.875rem;
 }