@eeacms/volto-arcgis-block 0.1.273 → 0.1.275

package/CHANGELOG.md

@@ -4,10 +4,19 @@ 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.273](https://github.com/eea/volto-arcgis-block/compare/0.1.272...0.1.273) - 10 April 2024
+### [0.1.275](https://github.com/eea/volto-arcgis-block/compare/0.1.274...0.1.275) - 19 April 2024
 
 #### :hammer_and_wrench: Others
 
+- CLMS-3157 (feat): improve graphic color and transparency [Unai Bolivar - [`4f02a02`](https://github.com/eea/volto-arcgis-block/commit/4f02a02eda72f9b663e1694b79d003234bc71895)]
+- CLMS-3157 (bug): committing current work on graphics. Incomplete ticket. [Unai Bolivar - [`45e7d04`](https://github.com/eea/volto-arcgis-block/commit/45e7d041aed301c28ed1f3ab23de6db61a1e17a8)]
+### [0.1.274](https://github.com/eea/volto-arcgis-block/compare/0.1.273...0.1.274) - 12 April 2024
+
+### [0.1.273](https://github.com/eea/volto-arcgis-block/compare/0.1.272...0.1.273) - 11 April 2024
+
+#### :hammer_and_wrench: Others
+
+- Merge pull request #748 from eea/develop [Unai Bolivar - [`d3f8aeb`](https://github.com/eea/volto-arcgis-block/commit/d3f8aebc3d225cc0e9bd62e7e1f816da38e866b9)]
 - CLMS-3172 (bug): re-projected file upload area extent to spatial reference wkid 4326 lat/long [Unai Bolivar - [`164cbca`](https://github.com/eea/volto-arcgis-block/commit/164cbcad7a035c85e77b2c545a331629a0cb8fbd)]
 ### [0.1.272](https://github.com/eea/volto-arcgis-block/compare/0.1.271...0.1.272) - 10 April 2024
 

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -120,6 +120,9 @@ class AreaWidget extends React.Component {
       this.props.mapViewer.setActiveWidget();
       this.container.current.querySelector('.right-panel').style.display =
         'none';
+      this.container.current.querySelector(
+        '.right-panel-content',
+      ).style.overflowY = 'auto';
       this.container.current
         .querySelector('.esri-widget--button')
         .classList.remove('active-widget');
@@ -142,6 +145,9 @@ class AreaWidget extends React.Component {
       this.props.mapViewer.setActiveWidget(this);
       this.container.current.querySelector('.right-panel').style.display =
         'flex';
+      this.container.current.querySelector(
+        '.right-panel-content',
+      ).style.overflowY = 'hidden';
       this.container.current
         .querySelector('.esri-widget--button')
         .classList.add('active-widget');
@@ -361,19 +367,19 @@ class AreaWidget extends React.Component {
       .then((response) => {
         if (response.data && response.data.featureCollection) {
           //Check for more than a single feature
-          if (this.checkFeatureCount(response.data.featureCollection) === false)
-            return;
+          let featureCollection = response.data.featureCollection;
+          if (this.checkFeatureCount(featureCollection) === false) return;
 
           //Check that attributes and geometry are not null or undefined
           if (
-            response.data.featureCollection.layers[0].featureSet.features[0]
-              .attributes === null ||
-            response.data.featureCollection.layers[0].featureSet.features[0]
-              .attributes === undefined ||
-            response.data.featureCollection.layers[0].featureSet.features[0]
-              .geometry === null ||
-            response.data.featureCollection.layers[0].featureSet.features[0]
-              .geometry === undefined
+            featureCollection.layers[0].featureSet.features[0].attributes ===
+              null ||
+            featureCollection.layers[0].featureSet.features[0].attributes ===
+              undefined ||
+            featureCollection.layers[0].featureSet.features[0].geometry ===
+              null ||
+            featureCollection.layers[0].featureSet.features[0].geometry ===
+              undefined
           ) {
             this.setState({
               showInfoPopup: true,
@@ -383,7 +389,7 @@ class AreaWidget extends React.Component {
           }
 
           //Create a feature layer from the feature collection
-          this.addFeatureCollectionToMap(response.data.featureCollection);
+          this.addFeatureCollectionToMap(featureCollection);
         } else {
           //console.error('Unexpected response structure:', response);
         }
@@ -411,28 +417,29 @@ class AreaWidget extends React.Component {
   // see the 'Feature Collection in Local Storage' sample for an example of how to work with local storage
   addFeatureCollectionToMap(featureCollection) {
     let sourceGraphics = [];
-    //const symbol = new SimpleFillSymbol({
-    //  //type: 'simple-fill',
-    //  color: [255, 255, 255, 0.5],
-    //  outline: {
-    //    color: [0, 0, 0],
-    //    width: 1,
-    //  },
-    //});
 
     //Create a graphic for each feature in the feature collection
 
     const layers = featureCollection.layers.map((layer) => {
       const graphics = layer.featureSet.features.map((feature) => {
-        //feature.symbol = symbol;
-        return Graphic.fromJSON(feature);
+        const polygonSymbol = {
+          type: 'simple-fill', // autocasts as new SimpleFillSymbol()
+          color: [234, 168, 72, 0.8],
+          outline: {
+            // autocasts as new SimpleLineSymbol()
+            color: '#000000',
+            width: 0.1,
+          },
+        };
+        let graphic = Graphic.fromJSON(feature);
+        graphic.symbol = polygonSymbol;
+        return graphic;
       });
       sourceGraphics = sourceGraphics.concat(graphics);
 
       // Create a feature layer from the feature collection fields and gaphics
 
       const featureLayer = new FeatureLayer({
-        //        id: 9,
         objectIdField: 'FID',
         source: graphics,
         legendEnabled: false,
@@ -1100,7 +1107,7 @@ class AreaWidget extends React.Component {
                   >
                     <div className="field">
                       <label className="file-upload">
-                        <span>File formats supported: shp(zip)</span>
+                        <span>File formats supported: shp(zip), geojson</span>
                         <input
                           type="file"
                           name="file"
@@ -1238,7 +1245,7 @@ class AreaWidget extends React.Component {
                         <FontAwesomeIcon icon={['fas', 'info-circle']} />
                       </span>
                       <div className="drawRectanglePopup-text">
-                        Invalid Shapefile: missing or incomplete shp file.
+                        Invalid file format, or incomplete shapefile.
                       </div>
                     </>
                   )}

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

@@ -317,13 +317,12 @@ div.esri-popover
   margin: 0;
 }
 
-.area-container .area-header {
-  margin-bottom: 1rem;
-}
+/* .area-container .area-header { */
+/* margin-bottom: 1rem; */
+/* } */
 
 .area-header {
   padding: 1rem;
-  background-color: rgba(160, 177, 40, 0.5);
   font-weight: bold;
 }
 
@@ -344,6 +343,10 @@ div.esri-popover
   margin-left: 1rem !important;
 }
 
+.area-panel .ccl-form:last-child {
+  border-bottom: none;
+}
+
 .nuts-form {
   margin-top: 0.5rem;
   margin-left: 2rem;
@@ -351,7 +354,7 @@ div.esri-popover
 
 div.area-container .ccl-form .ccl-form-check-input + .ccl-form-radio-label {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   padding-left: 1.75rem;
 }
 
@@ -360,8 +363,11 @@ label.ccl-form-radio-label span.nuts-menu-icon {
 }
 
 .area-container .esri-button {
+  max-width: fit-content;
+  padding: 6px;
   border-color: #a0b128;
-  margin-left: 0.25rem;
+  margin-left: auto;
+  /* margin-left: 0.25rem; */
   background-color: #a0b128;
   color: white !important;
   transition: all 0.3s ease-out;