@eeacms/volto-arcgis-block 0.1.6 → 0.1.10

package/CHANGELOG.md

@@ -4,8 +4,57 @@ 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.10](https://github.com/eea/volto-arcgis-block/compare/0.1.9...0.1.10)
+
+- Update use-cases default center and zoom [`#26`](https://github.com/eea/volto-arcgis-block/pull/26)
+- Popup bug fix [`#25`](https://github.com/eea/volto-arcgis-block/pull/25)
+
+#### [0.1.9](https://github.com/eea/volto-arcgis-block/compare/0.1.8...0.1.9)
+
+> 14 October 2021
+
+- New features for use-cases [`#24`](https://github.com/eea/volto-arcgis-block/pull/24)
+- Added new level when point has multiple use cases and minor improvements [`#23`](https://github.com/eea/volto-arcgis-block/pull/23)
+- Remove a debugger; [`1bda983`](https://github.com/eea/volto-arcgis-block/commit/1bda983bd6c5db9787c1f28b3e86a5b8e4114c5c)
+- Added new level when point has multiple use cases [`a994fb4`](https://github.com/eea/volto-arcgis-block/commit/a994fb41f9f80e3de3f2806de4e491dc0b503f80)
+- Use cases list height [`546cab7`](https://github.com/eea/volto-arcgis-block/commit/546cab76b790ac037b7e17858bbdea499eb1cb05)
+- Solved mapViewer back and cross buttons [`0591a2c`](https://github.com/eea/volto-arcgis-block/commit/0591a2c9887a5b117343fc407cdae9a0fb91b123)
+- Removed extra UK counter [`b4dc926`](https://github.com/eea/volto-arcgis-block/commit/b4dc926e909ad3b52d93a062d839e0066854460e)
+- Check if only one use case is on a region [`09cce4e`](https://github.com/eea/volto-arcgis-block/commit/09cce4ea6f9619cfb88ef0046818d8267d1aed6c)
+- Use case detail link [`365d5b3`](https://github.com/eea/volto-arcgis-block/commit/365d5b3c0e8aaefa0207b47181e4eed20c60bf24)
+
+#### [0.1.8](https://github.com/eea/volto-arcgis-block/compare/0.1.7...0.1.8)
+
+> 14 October 2021
+
+- Active by default v2 [`#22`](https://github.com/eea/volto-arcgis-block/pull/22)
+- version2 working [`#21`](https://github.com/eea/volto-arcgis-block/pull/21)
+
+#### [0.1.7](https://github.com/eea/volto-arcgis-block/compare/0.1.6...0.1.7)
+
+> 13 October 2021
+
+- Develop [`#18`](https://github.com/eea/volto-arcgis-block/pull/18)
+- Bugs n improvements [`#17`](https://github.com/eea/volto-arcgis-block/pull/17)
+- Merge pull request #20 from eea/bugs_n_improvements [`c59b800`](https://github.com/eea/volto-arcgis-block/commit/c59b800832a7d566585f9fd4b8a9208f566bd4da)
+- Merge pull request #19 from eea/active_by_default [`1737a36`](https://github.com/eea/volto-arcgis-block/commit/1737a3655ec94f0e6fd5e6900fdfb5ad0208e9c0)
+- eslint fixed [`df9dad5`](https://github.com/eea/volto-arcgis-block/commit/df9dad54d9dd658468deeaa5cf85945721d08ff1)
+- Print bug [`7644990`](https://github.com/eea/volto-arcgis-block/commit/7644990717c0192d4fb78f0cca411682af44833b)
+- version working [`fe5eb7c`](https://github.com/eea/volto-arcgis-block/commit/fe5eb7cdab05b85dabdd055c88133221e30208f5)
+- Print bug [`6ec6434`](https://github.com/eea/volto-arcgis-block/commit/6ec643442c6420841c97ca3b3db3338e7a825182)
+- toggleProduct [`948d750`](https://github.com/eea/volto-arcgis-block/commit/948d750e67ffff893254f855ac4671ff82ce2f86)
+- Print bug [`5590343`](https://github.com/eea/volto-arcgis-block/commit/5590343e061f28cbf4e7718d32a0e135c16e397f)
+- Print bug [`daafb78`](https://github.com/eea/volto-arcgis-block/commit/daafb787aa025a39dd940087f84d4255e603fc9c)
+- arrays for checkbox ok [`48b34cb`](https://github.com/eea/volto-arcgis-block/commit/48b34cba5ac6f1b1bb309386c7e6e1ea197b52d7)
+- fixed array dataset in products [`7c42783`](https://github.com/eea/volto-arcgis-block/commit/7c427835794c31530ea0f878319ee19d5b4dd5fc)
+- arrays to define check default [`88cbdbc`](https://github.com/eea/volto-arcgis-block/commit/88cbdbc23d524694a390d8646355795b1ad327b4)
+- Change config.js for test [`efb0c21`](https://github.com/eea/volto-arcgis-block/commit/efb0c21cdbc0028076348f5484e329a1fec59b4a)
+
 #### [0.1.6](https://github.com/eea/volto-arcgis-block/compare/0.1.5...0.1.6)
 
+> 8 October 2021
+
+- Use cases map [`#16`](https://github.com/eea/volto-arcgis-block/pull/16)
 - Configured zoom out label and added to config file and set color for point-markers [`#15`](https://github.com/eea/volto-arcgis-block/pull/15)
 - Remove unused variables [`f4833ee`](https://github.com/eea/volto-arcgis-block/commit/f4833ee95782fdf0252db333eb5c8a1eb1d3cbe6)
 - Configured zoom out label and added to config file [`34b1ec6`](https://github.com/eea/volto-arcgis-block/commit/34b1ec67d9eca169652f1709f018bf03edea7a97)

package/package.json

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

package/src/components/MapViewer/MenuWidget.jsx

@@ -1,6 +1,7 @@
 import React, { createRef } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { loadModules, loadCss } from 'esri-loader';
+// import { layer } from '@fortawesome/fontawesome-svg-core';
 var WMSLayer;
 
 class MenuWidget extends React.Component {
@@ -138,11 +139,19 @@ class MenuWidget extends React.Component {
    * @returns
    */
   metodProcessProduct(product, prodIndex, inheritedIndex) {
+    var dataset_def = [];
     var datasets = [];
     var index = 0;
     var inheritedIndexProduct = inheritedIndex + '_' + prodIndex;
     var checkProduct = 'map_product_' + inheritedIndexProduct;
+
+    //Add only default datasets
     for (var i in product.Datasets) {
+      if (product.Datasets[i].Default_active === true) {
+        var idDataset = 'map_dataset_' + inheritedIndexProduct + '_' + index;
+        dataset_def.push(idDataset);
+      }
+
       datasets.push(
         this.metodProcessDataset(
           product.Datasets[i],
@@ -154,6 +163,12 @@ class MenuWidget extends React.Component {
       index++;
     }
 
+    // Empty vector, add the first dataset
+    if (!dataset_def.length) {
+      var idDatasetB = 'map_dataset_' + inheritedIndexProduct + '_0';
+      dataset_def.push(idDatasetB);
+    }
+
     return (
       <div
         className="map-menu-product-dropdown"
@@ -182,8 +197,9 @@ class MenuWidget extends React.Component {
                   value="name"
                   className="ccl-checkbox ccl-required ccl-form-check-input"
                   key={'h' + prodIndex}
+                  defcheck={dataset_def}
                   onChange={(e) =>
-                    this.toggleProduct(e.target.checked, checkProduct)
+                    this.toggleProduct(e.target.checked, checkProduct, e)
                   }
                 ></input>
                 <label
@@ -219,7 +235,8 @@ class MenuWidget extends React.Component {
     );
     let productCheck = document.querySelector('#' + productid);
     let trueCheck = datasetChecks.filter((elem) => elem.checked).length;
-    productCheck.checked = datasetChecks.length === trueCheck;
+
+    productCheck.checked = trueCheck > 0;
   }
 
   /**
@@ -231,12 +248,17 @@ class MenuWidget extends React.Component {
    * @returns
    */
   metodProcessDataset(dataset, datIndex, inheritedIndex, checkProduct) {
+    var layer_default = [];
     var layers = [];
     var index = 0;
     var inheritedIndexDataset = inheritedIndex + '_' + datIndex;
     var checkIndex = 'map_dataset_' + inheritedIndexDataset;
 
     for (var i in dataset.Layer) {
+      if (dataset.Layer[i].Default_active === true) {
+        layer_default.push(dataset.Layer[i].LayerId);
+      }
+
       layers.push(
         this.metodProcessLayer(
           dataset.Layer[i],
@@ -244,11 +266,15 @@ class MenuWidget extends React.Component {
           inheritedIndexDataset,
           dataset.ViewService,
           checkIndex,
+          layer_default,
         ),
       );
       index++;
     }
 
+    if (!layer_default.length) {
+      layer_default.push(dataset.Layer[0].LayerId);
+    }
     // ./dataset-catalogue/dataset-info.html
     // ./dataset-catalogue/dataset-download.html
 
@@ -265,10 +291,11 @@ class MenuWidget extends React.Component {
             parentid={checkProduct}
             name=""
             value="name"
+            defcheck={layer_default}
             className="ccl-checkbox ccl-required ccl-form-check-input"
             key={'c' + datIndex}
             onChange={(e) => {
-              this.toggleDataset(e.target.checked, checkIndex);
+              this.toggleDataset(e.target.checked, checkIndex, e.target);
             }}
           ></input>
           <label
@@ -305,7 +332,7 @@ class MenuWidget extends React.Component {
 
   /**
    * Method to uncheck dataset checkbox if not all layers are checked
-   * @param {*} id
+   * @param {*} id parentId (id del dataset)
    */
 
   updateCheckDataset(id) {
@@ -313,8 +340,11 @@ class MenuWidget extends React.Component {
     let layerChecks = Array.from(
       document.querySelectorAll('[parentid=' + id + ']'),
     );
+
     let trueChecks = layerChecks.filter((elem) => elem.checked).length;
-    datasetCheck.checked = layerChecks.length === trueChecks;
+    //solo tiene que tener alguno length >0
+    datasetCheck.checked = trueChecks > 0;
+
     this.updateCheckProduct(datasetCheck.getAttribute('parentid'));
   }
 
@@ -432,9 +462,20 @@ class MenuWidget extends React.Component {
    * Method to show/hide all the layers of a dataset
    * @param {*} value
    * @param {*} id
+   * @param {*} element
    */
-  toggleDataset(value, id) {
-    var layerChecks = document.querySelectorAll('[parentid=' + id + ']');
+  toggleDataset(value, id, e) {
+    var layerdef = e.getAttribute('defcheck');
+    var splitdefCheck = layerdef.split(',');
+
+    var layerChecks = [];
+    var selector = [];
+
+    for (var i = 0; i < splitdefCheck.length; i++) {
+      selector = document.querySelector('[id="' + splitdefCheck[i] + '"]');
+      layerChecks.push(selector);
+    }
+
     layerChecks.forEach((element) => {
       element.checked = value;
       this.toggleLayer(element);
@@ -443,14 +484,24 @@ class MenuWidget extends React.Component {
 
   /**
    * Method to show/hide all the datasets of a product
-   * @param {*} value
+   * @param {*} value (e.target.checked)
    * @param {*} id
+   * @param {*} element (checkbox)
    */
-  toggleProduct(value, id) {
-    var datasetChecks = document.querySelectorAll('[parentid=' + id + ']');
+  toggleProduct(value, id, element) {
+    var productDefCheck = element.target.getAttribute('defcheck');
+    var splitdefCheck = productDefCheck.split(',');
+
+    var datasetChecks = [];
+    var selector = [];
+
+    for (var i = 0; i < splitdefCheck.length; i++) {
+      selector = document.querySelector('[id=' + splitdefCheck[i] + ']');
+      datasetChecks.push(selector);
+    }
     datasetChecks.forEach((element) => {
       element.checked = value;
-      this.toggleDataset(value, element.id);
+      this.toggleDataset(value, element.id, element);
     });
   }
 

package/src/components/MapViewer/PrintWidget.jsx

@@ -21,7 +21,7 @@ class PrintWidget extends React.Component {
     this.titleMaxLength = 50;
     this.authorMaxLength = 60;
     this.textMaxLength = 180;
-    this.sizeMax = 6000;
+    this.sizeMax = 15000;
     this.dpiMax = 1200;
     this.scaleMax = 600000000;
   }
@@ -90,6 +90,10 @@ class PrintWidget extends React.Component {
             this.setTextFilters();
             let optSVGZ = document.querySelector("[value='svgz']");
             optSVGZ && optSVGZ.parentElement.removeChild(optSVGZ);
+            let advanceOptions = document.querySelector(
+              '.esri-print__advanced-options-button',
+            );
+            observer2.observe(advanceOptions, { attributes: true });
           } else {
             this.setLayoutConstraints();
           }
@@ -97,6 +101,19 @@ class PrintWidget extends React.Component {
       });
     });
     observer.observe(mapOnly, { attributes: true });
+
+    var observer2 = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.attributeName === 'aria-expanded') {
+          let currentExpand = mutation.target.getAttribute('aria-expanded');
+          if (currentExpand === 'true') {
+            this.setTextFilters();
+          } else {
+            this.setLayoutConstraints();
+          }
+        }
+      });
+    });
   }
 
   setLayoutConstraints() {
@@ -135,14 +152,23 @@ class PrintWidget extends React.Component {
     elem.setSelectionRange(c, c);
   }
 
-  imposeMax(el) {
-    if (el.value !== '') {
-      if (parseInt(el.value) < parseInt(el.min)) {
-        el.value = el.min;
+  imposeMax(elem) {
+    if (elem.value !== '') {
+      if (parseInt(elem.value) < parseInt(elem.min)) {
+        elem.value = elem.min;
       }
-      if (parseInt(el.value) > parseInt(el.max)) {
-        el.value = el.max;
+      if (parseInt(elem.value) > parseInt(elem.max)) {
+        elem.value = elem.max;
       }
+    } else {
+      elem.value = elem.value.replace(/[^e+-,.]/gi, '');
+    }
+  }
+
+  noSpecialNumbs(e) {
+    var invalidChars = ['-', '+', 'e', ',', '.'];
+    if (invalidChars.includes(e.key)) {
+      e.preventDefault();
     }
   }
 
@@ -177,6 +203,9 @@ class PrintWidget extends React.Component {
         input.oninput = () => {
           this.imposeMax(input);
         };
+        input.onkeydown = (e) => {
+          this.noSpecialNumbs(e);
+        };
       }
     });
   }

package/src/components/MapViewer/config.js

@@ -22,14 +22,17 @@ const config = {
                 'The Coastal Zones (CZ) LC/LU product for 2012 is providing a detailed Land Cover / Land Use (LC/ LU) dataset for areas along the coastline of the EEA38 countries and the United Kingdom, with reference year 2012 for the classification. This product monitors landscape dynamics in European coastal territory to an inland depth of 10 km with a total area of approximately 730,000 km², with all the relevant areas (estuaries, coastal lowlands, nature reserves). The production of the coastal zone layers was coordinated by the European Environment Agency (EEA) in the frame of the EU Copernicus programme, as part of the Copernicus Land Monitoring Service (CLMS) Local Component.The Coastal Zones product covers a buffer zone of coastline derived from EU-Hydro v1.1. Land Cover/Land Use (LC/LU) layer is extracted from Very High Resolution (VHR) satellite data and other available data. The class definitions follow the pre-defined nomenclature on the basis of Mapping and Assessment of Ecosystems and their Services (MAES) typology of ecosystems (Level 1 to Level 4) and CORINE Land Cover adapted to the specific characteristics of coastal zones. The classification provides 71 distinct thematic classes with a Minimum Mapping Unit (MMU) of 0.5 ha and a Minimum Mapping Width (MMW) of 10 m. The product is available for the 2012 and 2018 reference year including change mapping.This CZ dataset is distributed in vector format, in a single OGC GeoPackage SQLite file covering the area of interest.',
               ViewService:
                 'https://image.discomap.eea.europa.eu/arcgis/services/CoastalZones/CZ_CoastalZones_2012/MapServer/WmsServer?',
+              Default_active: true,
               Layer: [
                 {
                   LayerId: 'Coastal_Zones_2012_vector53031',
                   Title: 'Coastal Zones 2012 vector',
+                  Default_active: false,
                 },
                 {
                   LayerId: 'Coastal_Zones_2012_raster55645',
                   Title: 'Coastal Zones 2012 raster',
+                  Default_active: false,
                 },
               ],
               DownloadService: 'EEA',
@@ -44,14 +47,17 @@ const config = {
                 'The Coastal Zones (CZ) LC/LU product for 2018 is providing a detailed Land Cover / Land Use (LC/ LU) dataset for areas along the coastline of the EEA38 countries and the United Kingdom, with reference year 2018 for the classification. This product monitors landscape dynamics in European coastal territory to an inland depth of 10 km with a total area of approximately 730,000 km², with all the relevant areas (estuaries, coastal lowlands, nature reserves). The production of the coastal zone layers was coordinated by the European Environment Agency (EEA) in the frame of the EU Copernicus programme, as part of the Copernicus Land Monitoring Service (CLMS) Local Component. The Coastal Zones product covers a buffer zone of coastline derived from EU-Hydro v1.1. Land Cover/Land Use (LC/LU) layer is extracted from Very High Resolution (VHR) satellite data and other available data. The class definitions follow the pre-defined nomenclature on the basis of Mapping and Assessment of Ecosystems and their Services (MAES) typology of ecosystems (Level 1 to Level 4) and CORINE Land Cover adapted to the specific characteristics of coastal zones. The classification provides 71 distinct thematic classes with a Minimum Mapping Unit (MMU) of 0.5 ha and a Minimum Mapping Width (MMW) of 10 m. The product is available for the 2012 and 2018 reference year including change mapping. This CZ dataset is distributed in vector format, in a single OGC GeoPackage SQLite file covering the area of interest.',
               ViewService:
                 'https://image.discomap.eea.europa.eu/arcgis/services/CoastalZones/CZ_CoastalZones_2018/MapServer/WmsServer?',
+              Default_active: true,
               Layer: [
                 {
                   LayerId: 'Coastal_Zones_2018_vector57533',
                   Title: 'Coastal Zones 2018 vector',
+                  Default_active: false,
                 },
                 {
                   LayerId: 'Coastal_Zones_2018_raster65095',
                   Title: 'Coastal Zones 2018 raster',
+                  Default_active: true,
                 },
               ],
               DownloadService: 'EEA',
@@ -67,14 +73,17 @@ const config = {
                 'The Coastal Zones LC/LU Change (CZC) 2012-2018 is providing the Land Cover / Land Use (LC/ LU) change for areas along the coastline of the EEA38 countries and the United Kingdom, between the reference years 2012 and 2018. The Coastal Zones product monitors landscape dynamics in European coastal territory to an inland depth of 10 km with a total area of approximately 730,000 km², with all the relevant areas (estuaries, coastal lowlands, nature reserves). The production of the coastal zone layers was coordinated by the European Environment Agency (EEA) in the frame of the EU Copernicus programme, as part of the Copernicus Land Monitoring Service (CLMS) Local Component. The Coastal Zones Change product covers a buffer zone of coastline derived from EU-Hydro v1.1. The Land Cover/Land Use (LC/LU) Change layer is extracted from Very High Resolution (VHR) satellite data and other available data. The reference years for the change are 2012 and 2018. The class definitions follow the pre-defined nomenclature on the basis of Mapping and Assessment of Ecosystems and their Services (MAES) typology of ecosystems (Level 1 to Level 4) and CORINE Land Cover adapted to the specific characteristics of coastal zones. The classification provides 71 distinct thematic classes with a Minimum Mapping Unit (MMU) of 0.5 ha and a Minimum Mapping Width (MMW) of 10 m. The status product is available for the 2012 and 2018 reference years. This CZC dataset is distributed in vector format, in a single OGC GeoPackage file covering the area of interest.',
               ViewService:
                 'https://image.discomap.eea.europa.eu/arcgis/services/CoastalZones/CZ_CoastalZonesChange_2012_2018/MapServer/WmsServer?',
+              Default_active: false,
               Layer: [
                 {
                   LayerId: 'Coastal_Zones_Change_2012-2018_vector17215',
                   Title: 'Coastal Zones Change 2012-2018 vector',
+                  Default_active: false,
                 },
                 {
                   LayerId: 'Coastal_Zones_Change_2012-2018_raster20357',
                   Title: 'Coastal Zones Change 2012-2018 raster',
+                  Default_active: false,
                 },
               ],
               DownloadService: 'EEA',
@@ -100,34 +109,42 @@ const config = {
               DatasetDescription:
                 'The Copernicus Fractional Snow Cover (FSC) product is generated in near real-time for the entire EEA38 and the United Kingdom, based on optical satellite data from the Sentinel-2 constellation (revisit time: 5 days with Sentinel-2A and Sentinel-2B). The product provides the fraction of the surface covered by snow at the top of canopy (FSC-TOC) and on ground (FSC-OG) per pixel as a percentage (0% – 100%) with a spatial resolution of 20 m x 20 m. The FSC is one of the products of the pan-European High-Resolution Snow & Ice service (HR-S&I), which are provided at high spatial resolution (20 m x 20 m), and are derived from the Sentinel-2 constellation data. They are generated over the entire EEA38 (32 member countries and 6 cooperating countries) and the United Kingdom, from September 1, 2016 onwards. Four types of HR-S&I products are proposed to users: the Fractional Snow Cover (FSC) product, the Persistent Snow Area (PSA) product, the River and Lake Ice Extent (RLIE) product and the Aggregated River and Lake Ice Extent (ARLIE) product. The FSC product is distributed in raster files covering an area of 110 km by 110 km with a pixel size of 20 m by 20 m in UTM/WGS84 projection, which corresponds to the Sentinel-2 input L1C product tile. Each product is composed of seven separate files corresponding to the different layers of the product, and another metadata file.',
               ViewService: 'https://cryo.land.copernicus.eu/wms/FSC/?',
+              Default_active: true,
               Layer: [
                 {
                   LayerId: '1_FSC_TOC',
                   Title: 'FSC_TOC',
+                  Default_active: true,
                 },
                 {
                   LayerId: '2_FSC_QC_TOC',
                   Title: 'FSC_QC_TOC',
+                  Default_active: true,
                 },
                 {
                   LayerId: '3_FSC_OG',
                   Title: 'FSC_OG',
+                  Default_active: false,
                 },
                 {
                   LayerId: '4_FSC_QC_OG',
                   Title: 'FSC_QC_OG',
+                  Default_active: false,
                 },
                 {
                   LayerId: '5_FSC_NDSI',
                   Title: 'FSC_NDSI',
+                  Default_active: false,
                 },
                 {
                   LayerId: '6_FSC_CLD',
                   Title: 'FSC_CLD',
+                  Default_active: false,
                 },
                 {
                   LayerId: '7_FSC_QC_FLAGS',
                   Title: 'FSC_QC_FLAGS',
+                  Default_active: false,
                 },
               ],
               DownloadService: 'WEKEO',
@@ -143,18 +160,22 @@ const config = {
               DatasetDescription:
                 'The Copernicus River and Lake Ice Extent (RLIE) product is generated in near real-time for the entire EEA38 and the United Kingdom based on optical satellite data from the Sentinel-2 constellation (revisit time: 5 days with Sentinel-2A and Sentinel-2B). The product provides the river and lake area covered by snow-covered or snow-free ice with a spatial resolution of 20 m x 20 m. The RLIE is one of the products of the pan-European High-Resolution Snow & Ice service (HR-S&I), which are provided at high spatial resolution (20 m x 20 m), and are derived from the Sentinel-2 constellation data. They are generated over the entire EEA38 (32 member countries and 6 cooperating countries) and the United Kingdom, from September 1, 2016 onwards. Four types of HR-S&I products are proposed to users: the Fractional Snow Cover (FSC) product, the Persistent Snow Area (PSA) product, the River and Lake Ice Extent (RLIE) product and the Aggregated River and Lake Ice Extent (ARLIE) product. Each RLIE product covers an area of 110 km x 110 km with a pixel size of 20 m x 20 m in UTM/WGS84, aligned with the Sentinel-2 input L1C product, over the entire EEA38 and the United Kingdom area and within the EU-Hydro polygon features. Each RLIE product is composed of three separate files corresponding to the different layers of the product, and a metadata file.',
               ViewService: 'https://cryo.land.copernicus.eu/wms/RLIE/?',
+              Default_active: false,
               Layer: [
                 {
                   LayerId: '1_RLIE',
                   Title: 'RLIE',
+                  Default_active: true,
                 },
                 {
                   LayerId: '2_RLIE_QC',
                   Title: 'RLIE_QC',
+                  Default_active: false,
                 },
                 {
                   LayerId: '3_RLIE_QC_FLAGS',
                   Title: 'RLIE_QC_FLAGS',
+                  Default_active: false,
                 },
               ],
               DownloadService: 'WEKEO',

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

@@ -17,7 +17,7 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  color: #273b4b;
+  color: #212529;
   font-size: 2rem;
   touch-action: auto;
 }
@@ -33,6 +33,10 @@
   outline: none;
 }
 
+.esri-view-height-less-than-medium .esri-popup__main-container {
+  max-height: 250px !important;
+}
+
 .esri-component.esri-zoom.esri-widget {
   margin-bottom: 0;
   background: none;
@@ -169,6 +173,17 @@
   vertical-align: middle;
 }
 
+.print-container .esri-print .esri-print__swap-button,
+.print-container .esri-print .esri-print__refresh-button {
+  color: #dadada;
+}
+
+.print-container .esri-print .esri-print__swap-button:hover,
+.print-container .esri-print .esri-print__refresh-button:hover {
+  background: none;
+  color: #212529;
+}
+
 /* Area */
 .area-container {
   display: flex;

package/src/components/UseCasesMapViewer/InfoWidget.jsx

@@ -3,18 +3,14 @@ import React, { createRef } from 'react';
 let layerControl,
   navigationControl,
   view,
+  mapViewer,
   layerSpatial,
   processedData = [];
 class InfoWidget extends React.Component {
   constructor(props) {
     super(props);
     view = props.view;
-    this.state = {
-      useCaseLevel: 1,
-      region: '',
-      selectedUseCase: '',
-      previousState: 1,
-    };
+    mapViewer = props.mapViewer;
     navigationControl = props.navigationControl;
     layerControl = props.layerControl;
     layerSpatial = props.layerSpatial;
@@ -37,7 +33,7 @@ class InfoWidget extends React.Component {
               aria-label="Close"
               aria-hidden="true"
               role="button"
-              onClick={() => navigationControl.returnToPrevious(this)}
+              onClick={() => navigationControl.returnToPrevious()}
             ></span>
           </div>
           <div className="use-case-detail-image">
@@ -62,10 +58,12 @@ class InfoWidget extends React.Component {
             </div>
             <div className="use-case-detail-description">
               <p>{UseCase.Use_case_summary}</p>
-              <p>
-                For further information{' '}
-                <a href={UseCase.Links_to_web_sites}>here</a>.
-              </p>
+              {UseCase.Links_to_web_sites && (
+                <p>
+                  For further information{' '}
+                  <a href={UseCase.Links_to_web_sites}>here</a>.
+                </p>
+              )}
             </div>
           </div>
         </div>
@@ -87,8 +85,8 @@ class InfoWidget extends React.Component {
             className="use-case-element"
             aria-hidden="true"
             onClick={() =>
-              this.setState((prevState) => ({
-                useCaseLevel: 3,
+              mapViewer.setState((prevState) => ({
+                useCaseLevel: 4,
                 selectedUseCase: val,
                 previousState: prevState.useCaseLevel,
               }))
@@ -116,35 +114,67 @@ class InfoWidget extends React.Component {
    */
   showBrief(selectedRegion) {
     const regionFeatures = [];
-
-    for (let feature in this.features) {
-      if (this.features[feature].attributes.Region === selectedRegion) {
-        regionFeatures.push(this.features[feature].attributes);
+    if (mapViewer.state.useCaseLevel === 2) {
+      for (let feature in this.features) {
+        if (this.features[feature].attributes.Region === selectedRegion) {
+          regionFeatures.push(this.features[feature].attributes);
+        }
       }
-    }
-    return (
-      <>
-        <div className="use-cases-products-title">
-          <span>{regionFeatures.length} </span>
-          use cases
-        </div>
-        <div className="use-cases-products-list">
-          <div key={selectedRegion} className="use-cases-dropdown">
-            <button
-              className="use-case-button-back"
-              tabIndex="0"
-              onClick={() => {
-                navigationControl.showWorld(this);
-              }}
-            >
-              <span className="esri-icon-left-arrow"></span>
-              Back
-            </button>
-            {this.getDataBrief(regionFeatures)}
+      layerSpatial.definitionExpression = '';
+      return (
+        <div>
+          <div className="use-cases-products-title">
+            <span>{regionFeatures.length} </span>
+            use cases
+          </div>
+          <div className="use-cases-products-list">
+            <div key={selectedRegion} className="use-cases-dropdown">
+              <button
+                className="use-case-button-back"
+                tabIndex="0"
+                onClick={() => {
+                  navigationControl.showWorld();
+                }}
+              >
+                <span className="esri-icon-left-arrow"></span>
+                Back
+              </button>
+              {this.getDataBrief(regionFeatures)}
+            </div>
           </div>
         </div>
-      </>
-    );
+      );
+    } else if (mapViewer.state.useCaseLevel === 3) {
+      layerSpatial.definitionExpression = `Latitude = ${mapViewer.state.selectedUseCases[0].attributes.Latitude} AND Longitude = ${mapViewer.state.selectedUseCases[0].attributes.Longitude}`;
+      for (let feature in mapViewer.state.selectedUseCases) {
+        regionFeatures.push(
+          mapViewer.state.selectedUseCases[feature].attributes,
+        );
+      }
+      return (
+        <>
+          <div className="use-cases-products-title">
+            <span>{regionFeatures.length} </span>
+            use cases
+          </div>
+          <div className="use-cases-products-list">
+            <div key={selectedRegion} className="use-cases-dropdown">
+              <button
+                className="use-case-button-back"
+                tabIndex="0"
+                onClick={() => {
+                  navigationControl.returnToPrevious();
+                }}
+              >
+                <span className="esri-icon-left-arrow"></span>
+                Back
+              </button>
+              {this.getDataBrief(regionFeatures)}
+            </div>
+          </div>
+        </>
+      );
+    }
   }
 
   /**
@@ -261,7 +291,7 @@ class InfoWidget extends React.Component {
 
         this.features = features;
 
-        this.setState((prevState) => ({
+        mapViewer.setState((prevState) => ({
           useCaseLevel: 1,
           region: '',
           selectedUseCase: '',
@@ -269,15 +299,26 @@ class InfoWidget extends React.Component {
         }));
       })();
     } else if (this.features !== undefined) {
-      return (
-        <>
-          <div className="use-cases-products-title">
-            <span>{this.features.length} </span>
-            use cases
-          </div>
-          <div className="use-cases-products-list">{this.setDOMSummary()}</div>
-        </>
-      );
+      if (mapViewer.state.useCaseLevel !== 1) {
+        mapViewer.setState((prevState) => ({
+          useCaseLevel: 1,
+          region: '',
+          selectedUseCase: '',
+          previousState: prevState.useCaseLevel,
+        }));
+      } else {
+        return (
+          <>
+            <div className="use-cases-products-title">
+              <span>{this.features.length} </span>
+              use cases
+            </div>
+            <div className="use-cases-products-list">
+              {this.setDOMSummary()}
+            </div>
+          </>
+        );
+      }
     } else {
       return <></>;
     }
@@ -294,34 +335,23 @@ class InfoWidget extends React.Component {
    */
   highligtPoint(coords) {}
 
-  /**
-   * This methos will update the component.
-   * @param {Object} nextProps
-   */
-  componentWillReceiveProps(nextProps) {
-    this.setState((prevState) => ({
-      useCaseLevel: nextProps.mapViewer.state.useCaseLevel,
-      region: nextProps.mapViewer.state.region,
-      selectedUseCase: nextProps.mapViewer.state.selectedUseCase,
-      previousState: prevState.useCaseLevel,
-    }));
-  }
-
   /**
    * This method will return the corresponding lateral menu depending on layers.
    * @returns HTML
    */
   useCasesInformationPanel() {
-    switch (this.state.useCaseLevel) {
+    switch (mapViewer.state.useCaseLevel) {
       case 1:
         return this.showSummary();
       case 2:
-        return this.showBrief(this.state.region);
+        return this.showBrief(mapViewer.state.region);
       case 3:
-        const title = this.state.selectedUseCase.Use_case_title;
-        const bbox = this.state.selectedUseCase.BBOX;
-        const region = this.state.selectedUseCase.Region;
-        const country = this.state.selectedUseCase.Spatial_coverage;
+        return this.showBrief(mapViewer.state.selectedUseCases);
+      case 4:
+        const title = mapViewer.state.selectedUseCase.Use_case_title;
+        const bbox = mapViewer.state.selectedUseCase.BBOX;
+        const region = mapViewer.state.selectedUseCase.Region;
+        const country = mapViewer.state.selectedUseCase.Spatial_coverage;
         navigationControl.navigateToLocation(
           bbox,
           title,
@@ -329,7 +359,10 @@ class InfoWidget extends React.Component {
           country,
           layerSpatial,
         );
-        return this.showUseCase(this.state.selectedUseCase);
+        document
+          .querySelector('.use-cases-products-list')
+          .scrollTo({ top: 0, behavior: 'smooth' });
+        return this.showUseCase(mapViewer.state.selectedUseCase);
       default:
         return 0;
     }

package/src/components/UseCasesMapViewer/LayerControl.jsx

@@ -1,8 +1,9 @@
-let FeatureLayer, Extent;
+let FeatureLayer, Extent, mapViewer;
 class LayerControl {
   constructor(props) {
     this.map = props.map;
     this.view = props.view;
+    mapViewer = props.mapViewer;
     FeatureLayer = props.FeatureLayer;
     Extent = props.Extent;
   }
@@ -96,6 +97,32 @@ class LayerControl {
     return pointInformation;
   }
 
+  getRegionInfo(region, callback) {
+    const xmlhttp = new XMLHttpRequest();
+    const url = `${mapViewer.spatialConfig.url}/query?where=Region+%3D+%27${region}%27&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&returnTrueCurves=false&maxAllowableOffset=&geometryPrecision=&outSR=&having=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&historicMoment=&returnDistinctValues=false&resultOffset=&resultRecordCount=&queryByDistance=&returnExtentOnly=false&datumTransformation=&parameterValues=&rangeValues=&quantizationParameters=&featureEncoding=esriDefault&f=pjson`;
+    xmlhttp.onreadystatechange = () => {
+      if (xmlhttp.readyState === 4 && xmlhttp.status === 200)
+        callback(this.returnData(xmlhttp), mapViewer);
+    };
+    xmlhttp.open('GET', url, true);
+    xmlhttp.send();
+  }
+
+  checkIfMorePoints(latLon, callback) {
+    const xmlhttp = new XMLHttpRequest();
+    const url = `${mapViewer.spatialConfig.url}/query?where=Latitude%3D+${latLon.latitude}+AND+Longitude%3D+${latLon.longitude}&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&returnTrueCurves=false&maxAllowableOffset=&geometryPrecision=&outSR=&having=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&historicMoment=&returnDistinctValues=false&resultOffset=&resultRecordCount=&queryByDistance=&returnExtentOnly=false&datumTransformation=&parameterValues=&rangeValues=&quantizationParameters=&featureEncoding=esriDefault&f=pjson`;
+    xmlhttp.onreadystatechange = () => {
+      if (xmlhttp.readyState === 4 && xmlhttp.status === 200)
+        callback(this.returnData(xmlhttp), mapViewer);
+    };
+    xmlhttp.open('GET', url, true);
+    xmlhttp.send();
+  }
+
+  returnData(xmlhttp) {
+    return JSON.parse(xmlhttp.responseText);
+  }
+
   /**
    * Order retreived features by Service product name
    * @param {Object} features

package/src/components/UseCasesMapViewer/NavigationControl.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-let layerRegion, layerSpatial;
+let layerRegion, layerSpatial, mapViewer;
 class NavigationControl extends React.Component {
   constructor(props) {
     super(props);
@@ -8,28 +8,21 @@ class NavigationControl extends React.Component {
     this.view = props.view;
     this.center = props.center;
     this.layerControl = props.layerControl;
+    mapViewer = props.mapViewer;
     layerRegion = props.layerRegion;
     layerSpatial = props.layerSpatial;
   }
 
   /**
    *  Establish the initial behavior
-   * @param {InfoWidget} infoWidget
    */
-  showWorld(infoWidget) {
+  showWorld() {
     this.layerControl.hideLayer(layerSpatial.id);
     this.layerControl.showLayer(layerRegion.id);
-    if (this.view.center) {
-      this.view.center.latitude = this.center[1];
-      this.view.center.longitude = this.center[0];
-    } else {
-      this.view.center = {
-        latitude: this.center[1],
-        longitude: this.center[0],
-      };
-    }
-    this.view.zoom = 1;
-    infoWidget.setState(() => ({
+    this.view.center = this.center;
+    this.view.zoom = 0;
+
+    mapViewer.setState(() => ({
       useCaseLevel: 1,
     }));
   }
@@ -85,32 +78,36 @@ class NavigationControl extends React.Component {
 
   /**
    * Returns to the previous status.
-   * @param {InfoWidget} infoWidget
+
    */
-  returnToPrevious(infoWidget) {
+  returnToPrevious() {
     switch (
-      infoWidget.state.previousState === infoWidget.state.useCaseLevel
-        ? infoWidget.state.useCaseLevel - 1
-        : infoWidget.state.previousState
+      mapViewer.state.previousState === mapViewer.state.useCaseLevel
+        ? mapViewer.state.useCaseLevel - 1
+        : mapViewer.state.previousState
     ) {
       case 1:
-        this.showWorld(infoWidget);
+        this.showWorld();
         break;
 
       case 2:
         this.navigateToRegion(
-          infoWidget.state.selectedUseCase.BBOX,
-          infoWidget.state.selectedUseCase.Region,
+          mapViewer.state.selectedUseCase.BBOX,
+          mapViewer.state.selectedUseCase.Region,
           layerSpatial,
         );
-        infoWidget.setState(() => ({
+        mapViewer.setState(() => ({
           useCaseLevel: 2,
-          region: infoWidget.state.selectedUseCase.Region,
+          region: mapViewer.state.selectedUseCase.Region,
+        }));
+        break;
+      case 3:
+        mapViewer.setState(() => ({
+          useCaseLevel: 3,
         }));
         break;
-
       default:
-        this.showWorld(infoWidget);
+        this.showWorld();
         break;
     }
   }

package/src/components/UseCasesMapViewer/UseCasesMapViewer.jsx

@@ -42,6 +42,13 @@ class UseCasesMapViewer extends React.Component {
       render: props.cfg.RegionMarkerRenderer,
       label: props.cfg.RegionLabel,
     };
+    this.state = {
+      useCaseLevel: 1,
+      region: '',
+      selectedUseCase: '',
+      selectedUseCases: [],
+      previousState: 1,
+    };
   }
 
   loader() {
@@ -115,6 +122,7 @@ class UseCasesMapViewer extends React.Component {
     layerControl = new LayerControl({
       map: this.map,
       view: this.view,
+      mapViewer: this,
       FeatureLayer: FeatureLayer,
       Extent: Extent,
     });
@@ -143,6 +151,7 @@ class UseCasesMapViewer extends React.Component {
       view: this.view,
       center: this.mapCfg.center,
       layerControl: layerControl,
+      mapViewer: this,
       layerRegion: layerRegion,
       layerSpatial: layerSpatial,
     });
@@ -162,20 +171,6 @@ class UseCasesMapViewer extends React.Component {
     this.setState(() => ({ useCaseLevel: 1 }));
   }
 
-  getRegionInfo(region, callback) {
-    let xmlhttp;
-    const url = `${this.spatialConfig.url}/query?where=Region+%3D+%27${region}%27&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&returnTrueCurves=false&maxAllowableOffset=&geometryPrecision=&outSR=&having=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&historicMoment=&returnDistinctValues=false&resultOffset=&resultRecordCount=&queryByDistance=&returnExtentOnly=false&datumTransformation=&parameterValues=&rangeValues=&quantizationParameters=&featureEncoding=esriDefault&f=pjson`;
-    xmlhttp = new XMLHttpRequest();
-    xmlhttp.onreadystatechange = function () {
-      if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
-        let data = JSON.parse(this.responseText);
-        callback(data);
-      }
-    };
-    xmlhttp.open('GET', url, true);
-    xmlhttp.send();
-  }
-
   /**
    * This method will disable all the functionalities on the map
    * @param {MapView} view
@@ -184,6 +179,8 @@ class UseCasesMapViewer extends React.Component {
    * @param {FeatureLayer} layerSpatial
    */
   setMapFunctions(view, layerControl, navigationControl, layerSpatial) {
+    const prohibitedKeys = ['+', '-', 'Shift', '_', '='];
+
     view.on('mouse-wheel', function (event) {
       event.stopPropagation();
     });
@@ -203,12 +200,9 @@ class UseCasesMapViewer extends React.Component {
     view.on('drag', ['Shift'], function (event) {
       event.stopPropagation();
     });
-
     view.on('drag', ['Shift', 'Control'], function (event) {
       event.stopPropagation();
     });
-
-    const prohibitedKeys = ['+', '-', 'Shift', '_', '='];
     view.on('key-down', function (event) {
       const keyPressed = event.key;
       if (prohibitedKeys.indexOf(keyPressed) !== -1) {
@@ -225,13 +219,13 @@ class UseCasesMapViewer extends React.Component {
       const screenPoint = { x: e.x, y: e.y };
 
       (async () => {
-        const selectedPoint = await layerControl.getPointInfo(screenPoint);
+        let selectedPoint = await layerControl.getPointInfo(screenPoint);
         if (selectedPoint.BBOX) {
           const selectedRegion = selectedPoint.Region;
           const boundingBox = selectedPoint.BBOX;
           const selectedTitle = selectedPoint.Use_case_title;
           const selectedSpatial = selectedPoint.Spatial_coverage;
-          if (this.state.useCaseLevel === 1) {
+          if (this.state.useCaseLevel === 1 && selectedPoint.COUNT > 1) {
             navigationControl.navigateToRegion(
               boundingBox,
               selectedRegion,
@@ -244,25 +238,67 @@ class UseCasesMapViewer extends React.Component {
                 previousState: prevState.useCaseLevel,
               };
             });
-            view.popup.close();
-            this.popupOnce = true;
-            document.querySelector('.map').style.cursor = '';
-          } else if (this.state.useCaseLevel === 2) {
-            navigationControl.navigateToLocation(
-              boundingBox,
-              selectedTitle,
-              selectedRegion,
-              selectedSpatial,
-              layerSpatial,
-            );
-            this.setState((prevState) => {
-              return {
-                useCaseLevel: 3,
-                selectedUseCase: selectedPoint,
-                previousState: prevState.useCaseLevel,
+          } else if (
+            this.state.useCaseLevel === 2 ||
+            selectedPoint.COUNT === 1
+          ) {
+            if (!layerSpatial.visible && selectedPoint.COUNT === 1) {
+              layerControl.getRegionInfo(
+                selectedRegion,
+                (data, MapViewerThis) => {
+                  data = data.features[0].attributes;
+                  navigationControl.navigateToRegion(
+                    data.BBOX,
+                    data.Region,
+                    layerSpatial,
+                  );
+
+                  MapViewerThis.setState((prevState) => {
+                    return {
+                      useCaseLevel: 4,
+                      selectedUseCase: data,
+                      region: data.Region,
+                      previousState: prevState.useCaseLevel,
+                    };
+                  });
+                },
+              );
+            } else {
+              const latLon = {
+                latitude: selectedPoint.Latitude,
+                longitude: selectedPoint.Longitude,
               };
-            });
+              layerControl.checkIfMorePoints(latLon, (data, MapViewerThis) => {
+                if (data.features.length !== 1) {
+                  MapViewerThis.setState((prevState) => {
+                    return {
+                      useCaseLevel: 3,
+                      selectedUseCases: data.features,
+                      previousState: prevState.useCaseLevel,
+                    };
+                  });
+                } else {
+                  navigationControl.navigateToLocation(
+                    boundingBox,
+                    selectedTitle,
+                    selectedRegion,
+                    selectedSpatial,
+                    layerSpatial,
+                  );
+                  MapViewerThis.setState((prevState) => {
+                    return {
+                      useCaseLevel: 4,
+                      selectedUseCase: selectedPoint,
+                      previousState: prevState.useCaseLevel,
+                    };
+                  });
+                }
+              });
+            }
           }
+          view.popup.close();
+          this.popupOnce = true;
+          document.querySelector('.map').style.cursor = '';
         }
       })();
     });
@@ -273,13 +309,7 @@ class UseCasesMapViewer extends React.Component {
         y: e.y,
       };
 
-      let useCaseLevel = document.querySelector('.use-case-button-back')
-        ? 2
-        : document.querySelector('.use-cases-products-list')
-        ? 1
-        : 3;
-
-      if (useCaseLevel === 1) {
+      if (this.state.useCaseLevel === 1) {
         view.hitTest(screenPoint).then((response) => {
           if (response.results.length > 1) {
             if (
@@ -290,11 +320,9 @@ class UseCasesMapViewer extends React.Component {
               document.querySelector('.map').style.cursor = 'pointer';
               let region = response.results[0].graphic.attributes.Region;
 
-              this.getRegionInfo(region, (data) => {
+              layerControl.getRegionInfo(region, (data) => {
                 let data_eu = data.features.filter(
-                  (a) =>
-                    a.attributes.Spatial_coverage === 'EU' ||
-                    a.attributes.Spatial_coverage === 'UK',
+                  (a) => a.attributes.Spatial_coverage === 'EU',
                 ).length;
                 let data_eea = data.features.filter(
                   (a) => a.attributes.Spatial_coverage === 'EEA',
@@ -305,7 +333,6 @@ class UseCasesMapViewer extends React.Component {
                 let data_country = data.features.filter(
                   (a) =>
                     a.attributes.Spatial_coverage !== 'EU' &&
-                    a.attributes.Spatial_coverage !== 'UK' &&
                     a.attributes.Spatial_coverage !== 'EEA' &&
                     a.attributes.Spatial_coverage !== 'GLOBAL',
                 ).length;
@@ -339,7 +366,7 @@ class UseCasesMapViewer extends React.Component {
             document.querySelector('.map').style.cursor = '';
           }
         });
-      } else if (useCaseLevel === 2) {
+      } else if (this.state.useCaseLevel === 2) {
         view.hitTest(screenPoint).then((response) => {
           if (response.results.length > 1) {
             if (

package/src/components/UseCasesMapViewer/config.js

@@ -15,8 +15,8 @@ const greenRegion = '#acba47';
 const config = {
   Map: {
     div: 'mapDiv',
-    center: [15, 50],
-    zoom: 1,
+    center: [10.78, 30],
+    zoom: 0,
   },
   Services: {
     RegionLayer:

package/src/components/UseCasesMapViewer/css/ArcgisMap.css

@@ -53,7 +53,7 @@
 }
 
 .use-cases-products-list {
-  max-height: 25rem;
+  height: 25rem;
   overflow-y: auto;
 }