@eeacms/volto-arcgis-block - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9

CHANGELOG.md

@@ -7,4 +7,18 @@ ### Changelog
 
+#### [0.1.9](https://github.com/eea/volto-arcgis-block/compare/0.1.8...0.1.9)
+
+- 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)
@@ -11,0 +25,0 @@

package.json

 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "volto-arcgis-block: Volto add-on",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/components/UseCasesMapViewer/InfoWidget.jsx

@@ -6,2 +6,3 @@ import React, { createRef } from 'react';
   view,
+  mapViewer,
   layerSpatial,
@@ -13,8 +14,3 @@ processedData = [];
     view = props.view;
-    this.state = {
-      useCaseLevel: 1,
-      region: '',
-      selectedUseCase: '',
-      previousState: 1,
-    };
+    mapViewer = props.mapViewer;
     navigationControl = props.navigationControl;
@@ -42,3 +38,3 @@ layerControl = props.layerControl;
               role="button"
-              onClick={() => navigationControl.returnToPrevious(this)}
+              onClick={() => navigationControl.returnToPrevious()}
             ></span>
@@ -68,6 +64,8 @@ </div>
               <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>
@@ -94,4 +92,4 @@ </div>
             onClick={() =>
-              this.setState((prevState) => ({
-                useCaseLevel: 3,
+              mapViewer.setState((prevState) => ({
+                useCaseLevel: 4,
                 selectedUseCase: val,
@@ -124,31 +122,63 @@ previousState: prevState.useCaseLevel,
     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
+      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>
-        <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)}
+      );
+    } 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>
-      </>
-    );
+          <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>
+        </>
+      );
+    }
   }
@@ -270,3 +300,3 @@
 
-        this.setState((prevState) => ({
+        mapViewer.setState((prevState) => ({
           useCaseLevel: 1,
@@ -279,11 +309,22 @@ region: '',
     } 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 {
@@ -306,15 +347,2 @@ return <></>;
   /**
-   * 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.
@@ -324,12 +352,14 @@ * @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(
@@ -342,3 +372,6 @@ bbox,
         );
-        return this.showUseCase(this.state.selectedUseCase);
+        document
+          .querySelector('.use-cases-products-list')
+          .scrollTo({ top: 0, behavior: 'smooth' });
+        return this.showUseCase(mapViewer.state.selectedUseCase);
       default:
@@ -345,0 +378,0 @@ return 0;

src/components/UseCasesMapViewer/LayerControl.jsx

@@ -1,2 +0,2 @@
-let FeatureLayer, Extent;
+let FeatureLayer, Extent, mapViewer;
 class LayerControl {
@@ -6,2 +6,3 @@ constructor(props) {
     this.view = props.view;
+    mapViewer = props.mapViewer;
     FeatureLayer = props.FeatureLayer;
@@ -100,2 +101,28 @@ Extent = props.Extent;
 
+  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);
+  }
+
   /**
@@ -102,0 +129,0 @@ * Order retreived features by Service product name

src/components/UseCasesMapViewer/NavigationControl.jsx

 import React from 'react';
 
-let layerRegion, layerSpatial;
+let layerRegion, layerSpatial, mapViewer;
 class NavigationControl extends React.Component {
@@ -11,2 +11,3 @@ constructor(props) {
     this.layerControl = props.layerControl;
+    mapViewer = props.mapViewer;
     layerRegion = props.layerRegion;
@@ -18,5 +19,4 @@ layerSpatial = props.layerSpatial;
    *  Establish the initial behavior
-   * @param {InfoWidget} infoWidget
    */
-  showWorld(infoWidget) {
+  showWorld() {
     this.layerControl.hideLayer(layerSpatial.id);
@@ -34,3 +34,3 @@ this.layerControl.showLayer(layerRegion.id);
     this.view.zoom = 1;
-    infoWidget.setState(() => ({
+    mapViewer.setState(() => ({
       useCaseLevel: 1,
@@ -91,12 +91,12 @@ }));
    * 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;
@@ -106,14 +106,18 @@
         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;
@@ -120,0 +124,0 @@ }

src/components/UseCasesMapViewer/UseCasesMapViewer.jsx

@@ -45,2 +45,9 @@ import React, { createRef } from 'react';
     };
+    this.state = {
+      useCaseLevel: 1,
+      region: '',
+      selectedUseCase: '',
+      selectedUseCases: [],
+      previousState: 1,
+    };
   }
@@ -119,2 +126,3 @@
       view: this.view,
+      mapViewer: this,
       FeatureLayer: FeatureLayer,
@@ -148,2 +156,3 @@ Extent: Extent,
       layerControl: layerControl,
+      mapViewer: this,
       layerRegion: layerRegion,
@@ -168,16 +177,2 @@ layerSpatial: layerSpatial,
 
-  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();
-  }
-
   /**
@@ -232,3 +227,3 @@ * This method will disable all the functionalities on the map
       (async () => {
-        const selectedPoint = await layerControl.getPointInfo(screenPoint);
+        let selectedPoint = await layerControl.getPointInfo(screenPoint);
         if (selectedPoint.BBOX) {
@@ -239,3 +234,3 @@ const selectedRegion = selectedPoint.Region;
           const selectedSpatial = selectedPoint.Spatial_coverage;
-          if (this.state.useCaseLevel === 1) {
+          if (this.state.useCaseLevel === 1 && selectedPoint.COUNT > 1) {
             navigationControl.navigateToRegion(
@@ -253,21 +248,63 @@ boundingBox,
             });
-            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 = '';
         }
@@ -283,9 +320,3 @@ })();
 
-      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) => {
@@ -301,7 +332,5 @@ if (response.results.length > 1) {
 
-              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;
@@ -317,3 +346,2 @@ let data_eea = data.features.filter(
                     a.attributes.Spatial_coverage !== 'EU' &&
-                    a.attributes.Spatial_coverage !== 'UK' &&
                     a.attributes.Spatial_coverage !== 'EEA' &&
@@ -352,3 +380,3 @@ a.attributes.Spatial_coverage !== 'GLOBAL',
         });
-      } else if (useCaseLevel === 2) {
+      } else if (this.state.useCaseLevel === 2) {
         view.hitTest(screenPoint).then((response) => {
@@ -355,0 +383,0 @@ if (response.results.length > 1) {

No alert changes

Improved metrics

Total package byte prevSize

10498734

0.05%

Lines of code

4795

2%

No dependency changes