@eeacms/volto-arcgis-block 0.1.13 → 0.1.17

package/src/components/UseCasesMapViewer/UseCasesMapViewer.jsx

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import { loadModules, loadCss } from 'esri-loader';
 import LayerControl from './LayerControl';
 import InfoWidget from './InfoWidget';
+import LegendWidget from './LegendWidget';
 import NavigationControl from './NavigationControl';
 
 let Map,
@@ -28,6 +29,7 @@ class UseCasesMapViewer extends React.Component {
     this.map = null;
     this.id = props.id;
     this.popupOnce = false;
+    this.popupRegion = '';
     this.mapClass = classNames('map-container', {
       [`${props.customClass}`]: props.customClass || null,
     });
@@ -48,6 +50,7 @@ class UseCasesMapViewer extends React.Component {
       selectedUseCase: '',
       selectedUseCases: [],
       previousState: 1,
+      showMapMenu: false,
     };
   }
 
@@ -123,6 +126,8 @@ class UseCasesMapViewer extends React.Component {
       map: this.map,
       view: this.view,
       mapViewer: this,
+      worldDimensions: this.mapCfg.worldDimensions,
+      maxZoom: this.mapCfg.maxZoom,
       FeatureLayer: FeatureLayer,
       Extent: Extent,
     });
@@ -134,7 +139,7 @@ class UseCasesMapViewer extends React.Component {
 
     layerSpatial.renderer = this.spatialConfig.render;
 
-    const layerRegion = layerControl.createLayer({
+    let layerRegion = layerControl.createLayer({
       id: this.regionConfig.id,
       url: this.regionConfig.url,
     });
@@ -179,17 +184,7 @@ class UseCasesMapViewer extends React.Component {
    * @param {FeatureLayer} layerSpatial
    */
   setMapFunctions(view, layerControl, navigationControl, layerSpatial) {
-    const prohibitedKeys = [
-      '+',
-      '-',
-      'Shift',
-      '_',
-      '=',
-      'ArrowUp',
-      'ArrowDown',
-      'ArrowLeft',
-      'ArrowRight',
-    ];
+    const prohibitedKeys = this.mapCfg.prohibitedKeys;
 
     view.on('mouse-wheel', function (event) {
       event.stopPropagation();
@@ -214,27 +209,27 @@ class UseCasesMapViewer extends React.Component {
       event.stopPropagation();
     });
     view.on('key-down', function (event) {
-      const keyPressed = event.key;
+      let keyPressed = event.key;
       if (prohibitedKeys.indexOf(keyPressed) !== -1) {
         event.stopPropagation();
       }
     });
     view.on('key-down', ['Shift'], function (event) {
-      const keyPressed = event.key;
+      let keyPressed = event.key;
       if (prohibitedKeys.indexOf(keyPressed) !== -1) {
         event.stopPropagation();
       }
     });
     view.on('click', (e) => {
-      const screenPoint = { x: e.x, y: e.y };
+      let screenPoint = { x: e.x, y: e.y };
 
       (async () => {
         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;
+          let selectedRegion = selectedPoint.Region;
+          let boundingBox = selectedPoint.BBOX;
+          let selectedTitle = selectedPoint.Use_case_title;
+          let selectedSpatial = selectedPoint.Spatial_coverage;
           if (this.state.useCaseLevel === 1 && selectedPoint.COUNT > 1) {
             navigationControl.navigateToRegion(
               boundingBox,
@@ -244,6 +239,7 @@ class UseCasesMapViewer extends React.Component {
             this.setState((prevState) => {
               return {
                 useCaseLevel: 2,
+                selectedUseCase: selectedPoint,
                 region: selectedRegion,
                 previousState: prevState.useCaseLevel,
               };
@@ -274,7 +270,7 @@ class UseCasesMapViewer extends React.Component {
                 },
               );
             } else {
-              const latLon = {
+              let latLon = {
                 latitude: selectedPoint.Latitude,
                 longitude: selectedPoint.Longitude,
               };
@@ -283,6 +279,7 @@ class UseCasesMapViewer extends React.Component {
                   MapViewerThis.setState((prevState) => {
                     return {
                       useCaseLevel: 3,
+                      selectedUseCase: selectedPoint,
                       selectedUseCases: data.features,
                       previousState: prevState.useCaseLevel,
                     };
@@ -318,13 +315,13 @@ class UseCasesMapViewer extends React.Component {
         x: e.x,
         y: e.y,
       };
-
       if (this.state.useCaseLevel === 1) {
         view.hitTest(screenPoint).then((response) => {
           if (response.results.length > 1) {
             if (
               response.results[0].graphic.geometry !== null &&
-              this.popupOnce
+              this.popupOnce &&
+              this.popupRegion === response.results[0].graphic.attributes.Region
             ) {
               this.popupOnce = false;
               document.querySelector('.map').style.cursor = 'pointer';
@@ -349,16 +346,16 @@ class UseCasesMapViewer extends React.Component {
 
                 let string = '';
                 if (data_eu > 0) {
-                  string += `<div>EU-27 + UK use cases: ${data_eu}</div>`;
+                  string += `<div>${data_eu} Use cases with EU27+UK coverage</div>`;
                 }
                 if (data_eea > 0) {
-                  string += `<div>EEA use cases: ${data_eea}</div>`;
+                  string += `<div>${data_eea} Use cases with EEA38+UK coverage</div>`;
                 }
                 if (data_global > 0) {
                   string += `<div>Global use cases: ${data_global}</div>`;
                 }
                 if (data_country > 0) {
-                  string += `<div>Other countries use cases: ${data_country}</div>`;
+                  string += `<div>${data_country} Use cases with one or multi-country coverage</div>`;
                 }
 
                 view.popup.open({
@@ -369,37 +366,23 @@ class UseCasesMapViewer extends React.Component {
                   content: string,
                 });
               });
+            } else {
+              this.popupRegion = response.results[0].graphic.attributes.Region;
+              this.popupOnce = true;
+              if (response.results[0].graphic.attributes.Region === undefined) {
+                view.popup.close();
+                document.querySelector('.map').style.cursor = '';
+              }
             }
           } else {
-            view.popup.close();
             this.popupOnce = true;
             document.querySelector('.map').style.cursor = '';
+            view.popup.close();
           }
         });
       } else if (this.state.useCaseLevel === 2) {
         view.hitTest(screenPoint).then((response) => {
-          if (response.results.length > 1) {
-            if (
-              response.results[0].graphic.geometry !== null &&
-              this.popupOnce
-            ) {
-              this.popupOnce = false;
-              document.querySelector('.map').style.cursor = 'pointer';
-              document
-                .querySelector(
-                  '#use_case_' +
-                    response.results[0].graphic.attributes.OBJECTID,
-                )
-                .classList.add('selected');
-            }
-          } else {
-            this.popupOnce = true;
-            document.querySelector('.map').style.cursor = '';
-            if (document.querySelector('.use-case-element.selected'))
-              document
-                .querySelector('.use-case-element.selected')
-                .classList.remove('selected');
-          }
+          layerControl.highlightInfo(response);
         });
       }
     });
@@ -419,6 +402,12 @@ class UseCasesMapViewer extends React.Component {
     }
   }
 
+  renderLegend() {
+    if (this.view) {
+      return <LegendWidget view={this.view} mapViewer={this} />;
+    }
+  }
+
   /**
    * This method renders the map viewer, invoking if necessary the methods
    * to render the other widgets to display
@@ -436,10 +425,9 @@ class UseCasesMapViewer extends React.Component {
         </div>
         <div className="ccl-container ccl-container-flex">
           {this.renderInfo()}
+          {this.renderLegend()}
           <div className="use-cases-products-map cont-w-50">
-            <div className="use-cases-products-title">
-              Organisation locations
-            </div>
+            <div className="use-cases-products-title">{this.mapCfg.title}</div>
             <div className={this.mapClass}>
               <div ref={this.mapdiv} className="map"></div>
             </div>

package/src/components/UseCasesMapViewer/config.js

@@ -7,7 +7,7 @@ const greenSpatial = '#a2b32e';
 const black = '#000000';
 
 const regionMarkerSize = '40px';
-const regionOutlineSize = '8px';
+const regionOutlineSize = '6px';
 const regionLabelTextPosition = 'center-center';
 const grey = '#656565';
 const greenRegion = '#acba47';
@@ -15,8 +15,22 @@ const greenRegion = '#acba47';
 const config = {
   Map: {
     div: 'mapDiv',
+    title: 'Geographical coverage of use cases',
     center: [10.78, 30],
     zoom: 0,
+    maxZoom: 5,
+    worldDimensions: { height: 256, width: 256 },
+    prohibitedKeys: [
+      '+',
+      '-',
+      'Shift',
+      '_',
+      '=',
+      'ArrowUp',
+      'ArrowDown',
+      'ArrowLeft',
+      'ArrowRight',
+    ],
   },
   Services: {
     RegionLayer:

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

@@ -40,10 +40,31 @@
   height: 25rem;
 }
 
+.use-cases-products-map .esri-widget--button {
+  border: none !important;
+  background-color: #a0b128cc;
+  box-shadow: none !important;
+  color: white;
+  line-height: 1rem;
+  outline: none;
+}
+
+.use-cases-products-map .esri-widget--button:hover {
+  background-color: #7c8921;
+  color: white;
+}
+
 .use-cases-products-map .esri-attribution {
   display: none;
 }
 
+.use-cases-products-map
+  .esri-popup--aligned-top-center
+  .esri-popup__main-container.esri-widget {
+  width: auto;
+  max-width: 360px;
+}
+
 .use-cases-products-map .esri-widget .esri-popup__header {
   display: none;
 }
@@ -57,6 +78,7 @@
 }
 
 .use-cases-products-list {
+  width: 100%;
   max-height: 25rem;
   overflow-y: auto;
 }
@@ -170,6 +192,10 @@
   flex-direction: column;
 }
 
+.use-cases-container .ccl-container-flex {
+  justify-content: flex-end;
+}
+
 .use-cases-map-container {
   position: relative;
   width: 100%;

package/src/components/UseCasesMapViewer/map.css

@@ -1,6 +0,0 @@
-.land.map-mini .map {
-  width: 100%;
-  height: 320px !important;
-  padding: 0;
-  margin: 0;
-}