@eeacms/volto-arcgis-block 0.1.126 → 0.1.128

package/CHANGELOG.md

@@ -4,6 +4,17 @@ 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.128](https://github.com/eea/volto-arcgis-block/compare/0.1.127...0.1.128) - 21 April 2023
+
+#### :hammer_and_wrench: Others
+
+- CLMS-1763 (fix):Applied internal filter in the map viewer to show only the relevant KLC borders and the PAs [Urkorue - [`3ef7ff2`](https://github.com/eea/volto-arcgis-block/commit/3ef7ff2eff491f40b584f84ff73150f7e8bd3c9e)]
+### [0.1.127](https://github.com/eea/volto-arcgis-block/compare/0.1.126...0.1.127) - 20 April 2023
+
+#### :hammer_and_wrench: Others
+
+- CLMS-1838 (fix): Area Widget runs improved NUTS service [ujbolivar - [`6cd1a91`](https://github.com/eea/volto-arcgis-block/commit/6cd1a91f2dbf176455827f271fff53ce629b6cd5)]
+- CLMS-1838 (feat): improved NUTS service prepared the script for later [ujbolivar - [`0b0a88b`](https://github.com/eea/volto-arcgis-block/commit/0b0a88bc5e37518870db616f6f43deb52e40e96d)]
 ### [0.1.126](https://github.com/eea/volto-arcgis-block/compare/0.1.125...0.1.126) - 19 April 2023
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -122,32 +122,37 @@ class AreaWidget extends React.Component {
     }
   }
   nuts0handler(e) {
-    this.loadNutsService(e.target.value, 0);
+    this.loadNutsService(e.target.value, [0]);
   }
   nuts1handler(e) {
-    this.loadNutsService(e.target.value, 1);
+    this.loadNutsService(e.target.value, [1, 2]);
   }
   nuts2handler(e) {
-    this.loadNutsService(e.target.value, 2);
+    this.loadNutsService(e.target.value, [3, 4, 5]);
   }
   nuts3handler(e) {
-    this.loadNutsService(e.target.value, 3);
+    this.loadNutsService(e.target.value, [6, 7, 8]);
   }
-  loadNutsService(id, level) {
+  loadNutsService(id, levels) {
     this.clearWidget();
 
-    var url =
-      'https://trial.discomap.eea.europa.eu/arcgis/rest/services/CLMS/NUTS_2021/MapServer/0';
-    var layer = new FeatureLayer({
-      url: url,
-      id: id,
-      outFields: ['*'],
-      popupEnabled: false,
-      definitionExpression: 'LEVL_CODE=' + level,
+    levels.forEach((level) => {
+      var url = `https://trial.discomap.eea.europa.eu/arcgis/rest/services/CLMS/NUTS_2021_Improved/MapServer/`;
+      var layer = new FeatureLayer({
+        id: id,
+        url: url,
+        layerId: level,
+        outFields: ['*'],
+        popupEnabled: false,
+        //definitionExpression: 'LEVL_CODE=' + level,
+      });
+
+      this.nutsGroupLayer.add(layer);
+
+      let index = this.getHighestIndex();
+
+      this.props.map.reorder(this.nutsGroupLayer, index + 1);
     });
-    this.nutsGroupLayer.add(layer);
-    let index = this.getHighestIndex();
-    this.props.map.reorder(this.nutsGroupLayer, index + 1);
   }
   getHighestIndex() {
     let index = 0;
@@ -234,7 +239,7 @@ class AreaWidget extends React.Component {
     await this.loader();
     this.nutsGroupLayer = new GroupLayer({
       title: 'nuts',
-      opacity: 0.5,
+      //opacity: 0.5,
     });
     this.props.map.add(this.nutsGroupLayer);
     this.props.view.on('click', (event) => {

package/src/components/MapViewer/HotspotWidget.jsx

@@ -25,6 +25,10 @@ class HotspotWidget extends React.Component {
     this.esriLayer_lcc2 = null;
     this.esriLayer_lc = null;
     this.esriLayer_lc2 = null;
+    this.esriLayer_klc = null;
+    this.esriLayer_klc2 = null;
+    this.esriLayer_pa = null;
+    this.esriLayer_pa2 = null;
     this.subscribedLayers = sessionStorage;
     this.checkedLayers = this.props.layers
       ? this.props.layers.checkedLayers
@@ -119,6 +123,28 @@ class HotspotWidget extends React.Component {
         },
       ],
     });
+    this.esriLayer_klc = new WMSLayer({
+      url: serviceUrl,
+      //featureInfoFormat: "application/json",
+      customLayerParameters: {},
+      sublayers: [
+        {
+          name: this.addLegendName('cop_klc'),
+          legendUrl: this.addLegendNameToUrl('cop_klc'),
+        },
+      ],
+    });
+    this.esriLayer_pa = new WMSLayer({
+      url: serviceUrl,
+      //featureInfoFormat: "application/json",
+      customLayerParameters: {},
+      sublayers: [
+        {
+          name: this.addLegendName('protected_areas'),
+          legendUrl: this.addLegendNameToUrl('protected_areas'),
+        },
+      ],
+    });
   }
 
   handleApplyFilter(typeFilter) {
@@ -134,12 +160,28 @@ class HotspotWidget extends React.Component {
       );
       if (currentLcLayer) delete this.props.selectedLayers[currentLcLayer];
 
+      var currentKlcLayer = Object.keys(this.props.selectedLayers).find((e) =>
+        e.includes('klc_filter'),
+      );
+      if (currentKlcLayer) delete this.props.selectedLayers[currentKlcLayer];
+
+      var currentPaLayer = Object.keys(this.props.selectedLayers).find((e) =>
+        e.includes('pa_filter'),
+      );
+      if (currentPaLayer) delete this.props.selectedLayers[currentPaLayer];
+
       var currentLcckey = Object.keys(this.props.selectedLayers).find((e) =>
         e.includes('all_lcc'),
       );
       var currentLckey = Object.keys(this.props.selectedLayers).find((e) =>
         e.includes('all_present_lc'),
       );
+      var currentKlckey = Object.keys(this.props.selectedLayers).find((e) =>
+        e.includes('cop_klc'),
+      );
+      var currentPakey = Object.keys(this.props.selectedLayers).find((e) =>
+        e.includes('protected_areas'),
+      );
       if (currentLcckey) {
         //this.props.map.remove(this.props.selectedLayers[currentLcckey]);
         this.props.selectedLayers[currentLcckey].visible = false;
@@ -148,6 +190,14 @@ class HotspotWidget extends React.Component {
         //this.props.map.remove(this.props.selectedLayers[currentLckey]);
         this.props.selectedLayers[currentLckey].visible = false;
       }
+      if (currentKlckey) {
+        //this.props.map.remove(this.props.selectedLayers[currentKlckey]);
+        this.props.selectedLayers[currentKlckey].visible = false;
+      }
+      if (currentPakey) {
+        //this.props.map.remove(this.props.selectedLayers[currentPakey]);
+        this.props.selectedLayers[currentPakey].visible = false;
+      }
     }
     typeFilter.forEach((type) => {
       if (type === 'lcc') {
@@ -161,7 +211,7 @@ class HotspotWidget extends React.Component {
             ? 'all_lcc_a_pol'
             : 'all_lcc_b_pol';
         if (this.esriLayer_lcc !== null) {
-          if (this.esriLayer_lcc2 != null) {
+          if (this.esriLayer_lcc2 !== null) {
             this.props.map.remove(this.esriLayer_lcc2);
           }
 
@@ -196,7 +246,7 @@ class HotspotWidget extends React.Component {
           .value.match(/\d+/g)
           .map(Number)[0];
         if (this.esriLayer_lc !== null) {
-          if (this.esriLayer_lc2 != null) {
+          if (this.esriLayer_lc2 !== null) {
             this.props.map.remove(this.esriLayer_lc2);
           }
           this.esriLayer_lc.sublayers.items[0].name = this.addLegendName(
@@ -219,6 +269,34 @@ class HotspotWidget extends React.Component {
           this.layerModelInit();
         }
       }
+      if (type === 'klc') {
+        if (this.esriLayer_klc !== null) {
+          if (this.esriLayer_klc2 !== null) {
+            this.props.map.remove(this.esriLayer_klc2);
+          }
+          this.esriLayer_klc.customLayerParameters['CQL_FILTER'] =
+            "klc_code LIKE '" + this.dataKlc_code + "'";
+          this.props.map.add(this.esriLayer_klc);
+          this.props.selectedLayers['klc_filter'] = this.esriLayer_klc;
+          this.props.selectedLayers['klc_filter'].visible = true;
+          this.esriLayer_klc2 = this.esriLayer_klc;
+          this.layerModelInit();
+        }
+      }
+      if (type === 'pa') {
+        if (this.esriLayer_pa !== null) {
+          if (this.esriLayer_pa2 !== null) {
+            this.props.map.remove(this.esriLayer_pa2);
+          }
+          this.esriLayer_pa.customLayerParameters['CQL_FILTER'] =
+            "klc_code LIKE '" + this.dataKlc_code + "'";
+          this.props.map.add(this.esriLayer_pa);
+          this.props.selectedLayers['pa_filter'] = this.esriLayer_pa;
+          this.props.selectedLayers['pa_filter'].visible = true;
+          this.esriLayer_pa2 = this.esriLayer_pa;
+          this.layerModelInit();
+        }
+      }
       this.setBBoxCoordinates(this.dataBBox);
     });
     //set sessionStorage value to keep the widget open
@@ -311,7 +389,15 @@ class HotspotWidget extends React.Component {
     ) {
       typeFilter.push('lcc');
     }
-
+    let checkedLayers = JSON.parse(sessionStorage.getItem('checkedLayers'));
+    checkedLayers.forEach((layer) => {
+      if (layer.match('cop_klc')) {
+        typeFilter.push('klc');
+      }
+      if (layer.match('protected_areas')) {
+        typeFilter.push('pa');
+      }
+    });
     return this.handleApplyFilter(typeFilter);
   }
 

package/src/components/MapViewer/MenuWidget.jsx

@@ -2387,6 +2387,12 @@ class MenuWidget extends React.Component {
     } else if (this.layers['lc_filter'] && layer.includes('all_present')) {
       this.layers['lc_filter'].opacity = value / 100;
       this.saveOpacity(this.layers['lc_filter'], value / 100);
+    } else if (this.layers['klc_filter'] && layer.includes('cop_klc')) {
+      this.layers['klc_filter'].opacity = value / 100;
+      this.saveOpacity(this.layers['klc_filter'], value / 100);
+    } else if (this.layers['pa_filter'] && layer.includes('protected_areas')) {
+      this.layers['pa_filter'].opacity = value / 100;
+      this.saveOpacity(this.layers['pa_filter'], value / 100);
     } else {
       this.layers[layer].opacity = value / 100;
       this.saveOpacity(this.layer, value / 100);
@@ -2464,6 +2470,15 @@ class MenuWidget extends React.Component {
       } else if (this.layers['lc_filter'] && elem.id.includes('all_present')) {
         this.map.remove(this.layers['lc_filter']);
         this.layers['lc_filter'].visible = false;
+      } else if (this.layers['klc_filter'] && elem.id.includes('cop_klc')) {
+        this.map.remove(this.layers['klc_filter']);
+        this.layers['klc_filter'].visible = false;
+      } else if (
+        this.layers['pa_filter'] &&
+        elem.id.includes('protected_areas')
+      ) {
+        this.map.remove(this.layers['pa_filter']);
+        this.layers['pa_filter'].visible = false;
       }
     } else {
       if (this.layers['lcc_filter'] && elem.id.includes('all_lcc')) {
@@ -2472,6 +2487,15 @@ class MenuWidget extends React.Component {
       } else if (this.layers['lc_filter'] && elem.id.includes('all_present')) {
         this.map.add(this.layers['lc_filter']);
         this.layers['lc_filter'].visible = true;
+      } else if (this.layers['klc_filter'] && elem.id.includes('cop_klc')) {
+        this.map.add(this.layers['klc_filter']);
+        this.layers['klc_filter'].visible = true;
+      } else if (
+        this.layers['pa_filter'] &&
+        elem.id.includes('protected_areas')
+      ) {
+        this.map.add(this.layers['pa_filter']);
+        this.layers['pa_filter'].visible = true;
       } else {
         this.map.add(this.layers[elem.id]);
         this.layers[elem.id].visible = true;
@@ -2628,6 +2652,12 @@ class MenuWidget extends React.Component {
     } else if (layers['lc_filter'] && layer.includes('all_present_lc')) {
       layers['lc_filter'].visible = false;
       delete layers['lc_filter'];
+    } else if (layers['klc_filter'] && layer.includes('cop_klc')) {
+      layers['klc_filter'].visible = false;
+      delete layers['klc_filter'];
+    } else if (layers['pa_filter'] && layer.includes('protected_areas')) {
+      layers['pa_filter'].visible = false;
+      delete layers['pa_filter'];
     }
   }