@eeacms/volto-arcgis-block 0.1.21 → 0.1.25

package/src/components/MapViewer/TimesliderWidget.jsx

@@ -19,10 +19,7 @@ class TimesliderWidget extends React.Component {
   }
 
   loader() {
-    return loadModules([
-      'esri/widgets/TimeSlider',
-      'esri/layers/WMSLayer',
-    ]).then(([_TimeSlider]) => {
+    return loadModules(['esri/widgets/TimeSlider']).then(([_TimeSlider]) => {
       [TimeSlider] = [_TimeSlider];
     });
   }
@@ -60,6 +57,9 @@ class TimesliderWidget extends React.Component {
     });
 
     this.TimesliderWidget.watch('timeExtent', (timeExtent) => {
+      if (!this.container.current ? true : false) {
+        this.TimesliderWidget.stop();
+      }
       let start = new Date(timeExtent.start).getTime();
       let end = new Date(timeExtent.end).getTime();
       this.props.time.elem.setAttribute('time-start', start);

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

@@ -37,6 +37,11 @@
   max-height: 250px !important;
 }
 
+.esri-ui-top-right,
+.esri-ui-top-left {
+  z-index: 1;
+}
+
 .esri-component.esri-zoom.esri-widget {
   background: none;
   box-shadow: none;
@@ -76,6 +81,10 @@
   order: 5;
 }
 
+.info-container {
+  order: 6;
+}
+
 /* Basemap */
 .basemap-container {
   display: flex;
@@ -586,6 +595,26 @@
   overflow: auto;
 }
 
+/* Pixel info */
+.info-container {
+  display: flex;
+  box-shadow: none !important;
+}
+
+.info-panel {
+  display: none;
+  overflow: auto;
+  width: 300px;
+  max-height: 240px;
+  padding: 1rem;
+  background-color: white;
+  font-size: 1rem;
+}
+
+.info-panel select {
+  margin-bottom: 1rem;
+}
+
 /* Modal */
 .map-download-modal.ui.modal {
   margin: 0 !important;

package/src/components/UseCasesMapViewer/InfoWidget.jsx

@@ -5,7 +5,6 @@ let layerControl,
   view,
   mapViewer,
   layerSpatial,
-  layerNUTS,
   processedData = [];
 class InfoWidget extends React.Component {
   constructor(props) {
@@ -15,7 +14,6 @@ class InfoWidget extends React.Component {
     navigationControl = props.navigationControl;
     layerControl = props.layerControl;
     layerSpatial = props.layerSpatial;
-    layerNUTS = props.layerNUTS;
     this.container = createRef();
   }
 
@@ -25,13 +23,11 @@ class InfoWidget extends React.Component {
    * @returns lateralMenu DOM
    */
   showUseCase(UseCase) {
-    layerControl.getGeometry(UseCase.Spatial_coverage, layerNUTS);
     let responsibleOrganizationOrPerson = UseCase.Responsible_organisation
       ? UseCase.Responsible_organisation
       : UseCase.Contact_person_name_
       ? UseCase.Contact_person_name_
       : '';
-    layerControl.showLayer(layerNUTS.id);
     return (
       <>
         <div className="use-cases-products-title">Use case detail</div>
@@ -46,7 +42,14 @@ class InfoWidget extends React.Component {
             ></span>
           </div>
           <div className="use-case-detail-image">
-            <img src={UseCase.Link_to_image} alt="Use Case" />
+            <img
+              src={
+                UseCase.Link_to_image
+                  ? UseCase.Link_to_image
+                  : this.props.thumbnail
+              }
+              alt="Use Case"
+            />
           </div>
           <div className="use-case-detail-content">
             <div className="use-case-detail-product">

package/src/components/UseCasesMapViewer/LayerControl.jsx

@@ -28,11 +28,11 @@ class LayerControl {
   }
 
   getGeometry(country, layer) {
-    layer.definitionExpression = `LEVL_CODE = 0 AND (`;
+    layer.definitionExpression = `(`;
     if (country === 'EU' || country === 'EEA') {
       let states = mapViewer.props.cfg.Codes[country];
       for (let i = 0; i < states.length; i++) {
-        layer.definitionExpression += `CNTR_CODE = '${states[i]}'`;
+        layer.definitionExpression += `CNTR_ID = '${states[i]}'`;
         if (i < states.length - 1) {
           layer.definitionExpression += ' OR ';
         } else {
@@ -40,7 +40,7 @@ class LayerControl {
         }
       }
     } else {
-      layer.definitionExpression += `CNTR_CODE = 'none')`;
+      layer.definitionExpression += `CNTR_ID = '${country}')`;
     }
   }
 

package/src/components/UseCasesMapViewer/LegendWidget.jsx

@@ -48,7 +48,7 @@ class LegendWidget extends React.Component {
 
       this.container.current.children[1].querySelector(
         '.esri-legend__service-label',
-      ).textContent = 'Use Cases Coverage Legend';
+      ).textContent = 'Legend';
 
       try {
         this.container.current.children[1]
@@ -63,18 +63,24 @@ class LegendWidget extends React.Component {
         let currentValue = legendCells[i].textContent;
         switch (currentValue.toLowerCase()) {
           case 'eu':
-            legendCells[i].textContent = 'EU27+UK';
+            legendCells[i].textContent = 'EU27+UK coverage';
             break;
           case 'eea':
-            legendCells[i].textContent = 'EEA 38';
+            legendCells[i].textContent = 'EEA38+UK coverage';
             break;
           case 'others':
-            legendCells[i].textContent = 'Country';
+            legendCells[i].textContent = 'Country coverage';
             break;
           default:
             break;
         }
       }
+
+      let legendRow = document.querySelectorAll('.esri-legend__layer-row');
+      for (let i = 0; i < legendRow.length; i++) {
+        legendRow[i].textContent.toLowerCase() === 'global' &&
+          legendRow[i].remove();
+      }
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.mapViewer.setState({ showMapMenu: true });

package/src/components/UseCasesMapViewer/NavigationControl.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-let layerRegion, layerSpatial, layerNUTS, mapViewer;
+let layerRegion, layerSpatial, layerHighlight, mapViewer;
 class NavigationControl extends React.Component {
   constructor(props) {
     super(props);
@@ -11,7 +11,7 @@ class NavigationControl extends React.Component {
     mapViewer = props.mapViewer;
     layerRegion = props.layerRegion;
     layerSpatial = props.layerSpatial;
-    layerNUTS = props.layerNUTS;
+    layerHighlight = props.layerHighlight;
   }
 
   /**
@@ -82,8 +82,7 @@ class NavigationControl extends React.Component {
 
    */
   returnToPrevious() {
-    // this.layerControl.hideLayer(layerNUTS.id);
-    this.layerControl.getGeometry('none', layerNUTS);
+    // this.layerControl.hideLayer(layerHighlight.id);
 
     switch (
       mapViewer.state.previousState === mapViewer.state.useCaseLevel
@@ -91,10 +90,12 @@ class NavigationControl extends React.Component {
         : mapViewer.state.previousState
     ) {
       case 1:
+        this.layerControl.getGeometry('none', layerHighlight);
         this.showWorld();
         break;
 
       case 2:
+        this.layerControl.getGeometry('none', layerHighlight);
         this.navigateToRegion(
           mapViewer.state.selectedUseCase.BBOX,
           mapViewer.state.selectedUseCase.Region,

package/src/components/UseCasesMapViewer/UseCasesMapViewer.jsx

@@ -17,7 +17,7 @@ let Map,
   layerControl,
   navigationControl,
   layerSpatial,
-  layerNUTS;
+  layerHighlight;
 
 class UseCasesMapViewer extends React.Component {
   constructor(props) {
@@ -27,6 +27,7 @@ class UseCasesMapViewer extends React.Component {
     this.serviceCfg = props.cfg.Services;
     this.compCfg = this.props.cfg.Components;
     this.url = this.props.cfg.url;
+    this.thumbnail = this.props.cfg.Thumbnail;
     this.map = null;
     this.id = props.id;
     this.popupOnce = false;
@@ -47,10 +48,10 @@ class UseCasesMapViewer extends React.Component {
       label: props.cfg.RegionLabel,
       showLegend: false,
     };
-    this.NUTSConfig = {
-      id: 'NUTSLayer',
-      url: props.cfg.Services.NUTS_service,
-      render: props.cfg.NUTSRenderer,
+    this.HighlightConfig = {
+      id: 'HightlightLayer',
+      url: props.cfg.Services.Highlight_service,
+      render: props.cfg.HightlightRenderer,
       showLegend: false,
     };
     this.state = {
@@ -155,21 +156,21 @@ class UseCasesMapViewer extends React.Component {
       legend: this.regionConfig.showLegend,
     });
 
-    layerNUTS = layerControl.createLayer({
-      id: this.NUTSConfig.id,
-      url: this.NUTSConfig.url,
-      legend: this.NUTSConfig.showLegend,
+    layerHighlight = layerControl.createLayer({
+      id: this.HighlightConfig.id,
+      url: this.HighlightConfig.url,
+      legend: this.HighlightConfig.showLegend,
     });
 
     layerRegion.renderer = this.regionConfig.render;
     layerRegion.labelingInfo = [this.regionConfig.label];
-    layerNUTS.renderer = this.NUTSConfig.render;
+    layerHighlight.renderer = this.HighlightConfig.render;
 
-    layerControl.addLayer(layerNUTS);
+    layerControl.addLayer(layerHighlight);
     layerControl.addLayer(layerRegion);
     layerControl.addLayer(layerSpatial);
 
-    layerControl.hideLayer(layerNUTS.id);
+    layerControl.hideLayer(layerHighlight.id);
     layerControl.hideLayer(layerSpatial.id);
 
     navigationControl = new NavigationControl({
@@ -180,7 +181,7 @@ class UseCasesMapViewer extends React.Component {
       mapViewer: this,
       layerRegion: layerRegion,
       layerSpatial: layerSpatial,
-      layerNUTS: layerNUTS,
+      layerHighlight: layerHighlight,
     });
 
     this.setMapFunctions(
@@ -297,6 +298,8 @@ class UseCasesMapViewer extends React.Component {
                 longitude: selectedPoint.Longitude,
               };
               layerControl.checkIfMorePoints(latLon, (data, MapViewerThis) => {
+                layerControl.getGeometry(selectedSpatial, layerHighlight);
+                layerControl.showLayer(layerHighlight.id);
                 if (data.features.length !== 1) {
                   MapViewerThis.setState((prevState) => {
                     return {
@@ -422,7 +425,8 @@ class UseCasesMapViewer extends React.Component {
           layerControl={layerControl}
           navigationControl={navigationControl}
           layerSpatial={layerSpatial}
-          layerNUTS={layerNUTS}
+          thumbnail={this.thumbnail}
+          layerHighlight={layerHighlight}
         />
       );
     }

package/src/components/UseCasesMapViewer/config.js

@@ -33,13 +33,16 @@ const config = {
     ],
   },
   Services: {
-    NUTS_service:
-      'https://bm-eugis.tk/arcgis/rest/services/CLMS/NUTS_2021/MapServer/0',
+    Highlight_service:
+      'https://trial.discomap.eea.europa.eu/arcgis/rest/services/CLMS/UseCasesWorldCountries/MapServer/1',
     RegionLayer:
-      'https://bm-eugis.tk/arcgis/rest/services/CLMS/UseCasesRegion_count/MapServer/0',
+      'https://trial.discomap.eea.europa.eu/arcgis/rest/services/CLMS/UseCasesRegion_count/MapServer/0',
     SpatialCoverageLayer:
-      'https://bm-eugis.tk/arcgis/rest/services/CLMS/UseCasesSpatialCoverage/MapServer/0',
+      'https://trial.discomap.eea.europa.eu/arcgis/rest/services/CLMS/UseCasesSpatialCoverage/MapServer/0',
   },
+  Thumbnail:
+    'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
+
   Codes: {
     EU: [
       'BE',
@@ -116,7 +119,7 @@ const config = {
     ],
   },
 
-  NUTSRenderer: {
+  HightlightRenderer: {
     type: 'unique-value',
     field: 'LEVL_CODE',
     defaultSymbol: {