@eeacms/volto-arcgis-block 0.1.13 → 0.1.14

package/CHANGELOG.md

@@ -4,8 +4,20 @@ 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.14](https://github.com/eea/volto-arcgis-block/compare/0.1.13...0.1.14)
+
+- Bugfix on popup [`#34`](https://github.com/eea/volto-arcgis-block/pull/34)
+- Removed setTimeout [`8de18d1`](https://github.com/eea/volto-arcgis-block/commit/8de18d1991294bb7a5ff56afd320160fb038bad2)
+- Update 'const' & 'let', extracted variables to a config file [`f11b76c`](https://github.com/eea/volto-arcgis-block/commit/f11b76c8443353287850437f1c5299ae41fee187)
+- Fixed popup data when changing continent [`3329795`](https://github.com/eea/volto-arcgis-block/commit/33297951141425738cd40a588ae861226a743e25)
+- Code refactorization [`1e144a8`](https://github.com/eea/volto-arcgis-block/commit/1e144a802dd40cba572d6711e166d31c82b164ef)
+- Added selectedPoint to be able to go back [`4c61116`](https://github.com/eea/volto-arcgis-block/commit/4c611163a9b23afb57a52cb39e345614e2824d92)
+
 #### [0.1.13](https://github.com/eea/volto-arcgis-block/compare/0.1.12...0.1.13)
 
+> 21 October 2021
+
+- Develop [`#33`](https://github.com/eea/volto-arcgis-block/pull/33)
 - Bugfix and improvements on use-cases [`#32`](https://github.com/eea/volto-arcgis-block/pull/32)
 - Map bottom margin [`0790f2c`](https://github.com/eea/volto-arcgis-block/commit/0790f2c870fb87073aa2b15d57edf66a9548b41e)
 - Calculate corresponding zoom with given bbox [`a766e7c`](https://github.com/eea/volto-arcgis-block/commit/a766e7cb04e957eb1d8d08e403dfd4995690bc7c)

package/package.json

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

package/src/components/UseCasesMapViewer/InfoWidget.jsx

@@ -77,7 +77,7 @@ class InfoWidget extends React.Component {
    * @returns useCasesRegion
    */
   getDataBrief(data) {
-    const children = data.map((val) => {
+    let children = data.map((val) => {
       return (
         <>
           <div
@@ -113,7 +113,7 @@ class InfoWidget extends React.Component {
    * @returns useCasesDOM
    */
   showBrief(selectedRegion) {
-    const regionFeatures = [];
+    let regionFeatures = [];
     if (mapViewer.state.useCaseLevel === 2) {
       for (let feature in this.features) {
         if (this.features[feature].attributes.Region === selectedRegion) {
@@ -183,8 +183,8 @@ class InfoWidget extends React.Component {
    * Transfrom raw data to ordered data by Service products
    */
   proccessDataSummary() {
-    const serviceProducts = this.getDifferentproductUsed(this.features);
-    const elements = [];
+    let serviceProducts = this.getDifferentproductUsed(this.features);
+    let elements = [];
 
     for (let serviceProduct in serviceProducts) {
       processedData[serviceProducts[serviceProduct]] = [];
@@ -208,7 +208,7 @@ class InfoWidget extends React.Component {
    * @returns lateralMenuDOM
    */
   getDataSummary(data, Copernicus_Land_Monitoring_Service_products_used) {
-    const children = this.getDataBrief(data);
+    let children = this.getDataBrief(data);
 
     return (
       <>
@@ -247,7 +247,7 @@ class InfoWidget extends React.Component {
    */
   setDOMSummary() {
     this.proccessDataSummary();
-    const DOMElements = [];
+    let DOMElements = [];
     for (let product_use_name in processedData)
       DOMElements.push(
         this.getDataSummary(processedData[product_use_name], product_use_name),
@@ -326,17 +326,6 @@ class InfoWidget extends React.Component {
     }
   }
 
-  /**
-   * It highlights the information displayed for a use case on the infoWidget.
-   * */
-  highligtInfo() {}
-
-  /**
-   * Highlights the point on the map corresponding to the use case
-   * @param {*} coords
-   */
-  highligtPoint(coords) {}
-
   /**
    * This method will return the corresponding lateral menu depending on layers.
    * @returns HTML
@@ -350,10 +339,10 @@ class InfoWidget extends React.Component {
       case 3:
         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;
+        let title = mapViewer.state.selectedUseCase.Use_case_title;
+        let bbox = mapViewer.state.selectedUseCase.BBOX;
+        let region = mapViewer.state.selectedUseCase.Region;
+        let country = mapViewer.state.selectedUseCase.Spatial_coverage;
         navigationControl.navigateToLocation(
           bbox,
           title,

package/src/components/UseCasesMapViewer/LayerControl.jsx

@@ -3,6 +3,8 @@ class LayerControl {
   constructor(props) {
     this.map = props.map;
     this.view = props.view;
+    this.worldDimensions = props.worldDimensions;
+    this.maxZoom = props.maxZoom;
     mapViewer = props.mapViewer;
     FeatureLayer = props.FeatureLayer;
     Extent = props.Extent;
@@ -14,7 +16,7 @@ class LayerControl {
    * @returns FeatureLayer
    */
   createLayer(layerInfo) {
-    const newLayer = new FeatureLayer({
+    let newLayer = new FeatureLayer({
       url: layerInfo.url,
       id: layerInfo.id,
       outFields: ['*'],
@@ -37,7 +39,7 @@ class LayerControl {
    * @param {String} id
    */
   showLayer(id) {
-    const items = this.map.layers.items;
+    let items = this.map.layers.items;
     for (let layer in items)
       items[layer].id === id && (items[layer].visible = true);
   }
@@ -47,7 +49,7 @@ class LayerControl {
    * @param {String} id
    */
   hideLayer(id) {
-    const items = this.map.layers.items;
+    let items = this.map.layers.items;
     for (let layer in items) {
       items[layer].id === id && (items[layer].visible = false);
     }
@@ -58,7 +60,7 @@ class LayerControl {
    * @param {String} id
    */
   removeLayer(id) {
-    const items = this.map.layers.items;
+    let items = this.map.layers.items;
     for (let layer in items)
       items[layer].id === id && this.map.remove(items[layer]);
   }
@@ -68,39 +70,45 @@ class LayerControl {
    * @param {Array} boundingBox
    */
   zoomToExtent(boundingBox) {
-    const newExtent = new Extent(
+    let newExtent = new Extent(
       boundingBox[0],
       boundingBox[1],
       boundingBox[2],
       boundingBox[3],
     );
-    const zoomOnBounding = this.getBoundsZoomLevel(boundingBox);
+    let zoomOnBounding = this.getBoundsZoomLevel(boundingBox);
     this.view.zoom = zoomOnBounding;
     this.view.extent = newExtent;
   }
 
   getBoundsZoomLevel(bounds) {
-    const mapDim = { height: this.view.height, width: this.view.width };
-    const WORLD_DIM = { height: 256, width: 256 };
-    const ZOOM_MAX = 5;
+    let mapDim = { height: this.view.height, width: this.view.width };
 
-    const ne = [bounds[2], bounds[3]];
-    const sw = [bounds[0], bounds[1]];
+    let ne = [bounds[2], bounds[3]];
+    let sw = [bounds[0], bounds[1]];
 
-    const latFraction = (this.latRad(ne[1]) - this.latRad(sw[1])) / Math.PI;
+    let latFraction = (this.latRad(ne[1]) - this.latRad(sw[1])) / Math.PI;
 
-    const lngDiff = ne[0] - sw[0];
-    const lngFraction = (lngDiff < 0 ? lngDiff + 360 : lngDiff) / 360;
+    let lngDiff = ne[0] - sw[0];
+    let lngFraction = (lngDiff < 0 ? lngDiff + 360 : lngDiff) / 360;
 
-    const latZoom = this.zoom(mapDim.height, WORLD_DIM.height, latFraction);
-    const lngZoom = this.zoom(mapDim.width, WORLD_DIM.width, lngFraction);
+    let latZoom = this.zoom(
+      mapDim.height,
+      this.worldDimensions.height,
+      latFraction,
+    );
+    let lngZoom = this.zoom(
+      mapDim.width,
+      this.worldDimensions.width,
+      lngFraction,
+    );
 
-    return Math.min(latZoom, lngZoom, ZOOM_MAX);
+    return Math.min(latZoom, lngZoom, this.zoomMax);
     //TODO calculate the corresponding level of zoom automatically
   }
   latRad(lat) {
-    const sin = Math.sin((lat * Math.PI) / 180);
-    const radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
+    let sin = Math.sin((lat * Math.PI) / 180);
+    let radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
     return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
   }
 
@@ -115,11 +123,11 @@ class LayerControl {
    * @returns
    */
   async getPointInfo(screenPoint, options) {
-    const pointInformation = await this.view
+    let pointInformation = await this.view
       .hitTest(screenPoint, options && options)
       .then(function (response) {
         if (response.results.length) {
-          const graphic = response.results.filter(function (result) {
+          let graphic = response.results.filter(function (result) {
             return result.graphic;
           });
           return graphic[0].graphic.attributes;
@@ -129,7 +137,7 @@ class LayerControl {
   }
 
   getRegionInfo(region, callback) {
-    const xmlhttp = new XMLHttpRequest();
+    let 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)
@@ -140,7 +148,7 @@ class LayerControl {
   }
 
   checkIfMorePoints(latLon, callback) {
-    const xmlhttp = new XMLHttpRequest();
+    let 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)
@@ -154,6 +162,33 @@ class LayerControl {
     return JSON.parse(xmlhttp.responseText);
   }
 
+  /**
+   * It highlights the information displayed for a use case on the infoWidget.
+   * */
+  highlightInfo(response) {
+    if (response.results.length > 1) {
+      if (
+        response.results[0].graphic.geometry !== null &&
+        mapViewer.popupOnce
+      ) {
+        mapViewer.popupOnce = false;
+        document.querySelector('.map').style.cursor = 'pointer';
+        document
+          .querySelector(
+            '#use_case_' + response.results[0].graphic.attributes.OBJECTID,
+          )
+          .classList.add('selected');
+      }
+    } else {
+      mapViewer.popupOnce = true;
+      document.querySelector('.map').style.cursor = '';
+      if (document.querySelector('.use-case-element.selected'))
+        document
+          .querySelector('.use-case-element.selected')
+          .classList.remove('selected');
+    }
+  }
+
   /**
    * Order retreived features by Service product name
    * @param {Object} features

package/src/components/UseCasesMapViewer/NavigationControl.jsx

@@ -36,7 +36,7 @@ class NavigationControl extends React.Component {
    * @param {FeatureLayer} layer
    */
   navigateToRegion(bBox, region, layer) {
-    const boundingBox = this.clearBBOX(bBox);
+    let boundingBox = this.clearBBOX(bBox);
     this.layerControl.zoomToExtent(boundingBox);
     this.layerControl.hideLayer(layerRegion.id);
     this.layerControl.showLayer(layerSpatial.id);
@@ -64,7 +64,7 @@ class NavigationControl extends React.Component {
    * @returns Array BBox
    */
   clearBBOX(stringBbox) {
-    const floatBbox = [];
+    let floatBbox = [];
     // typeof stringBbox !== 'string' && (stringBbox = stringBbox.toString());
     stringBbox = stringBbox.replace('[', '');
     stringBbox = stringBbox.replace(']', '');

package/src/components/UseCasesMapViewer/UseCasesMapViewer.jsx

@@ -28,6 +28,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,
     });
@@ -123,6 +124,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 +137,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 +182,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 +207,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 +237,7 @@ class UseCasesMapViewer extends React.Component {
             this.setState((prevState) => {
               return {
                 useCaseLevel: 2,
+                selectedUseCase: selectedPoint,
                 region: selectedRegion,
                 previousState: prevState.useCaseLevel,
               };
@@ -274,7 +268,7 @@ class UseCasesMapViewer extends React.Component {
                 },
               );
             } else {
-              const latLon = {
+              let latLon = {
                 latitude: selectedPoint.Latitude,
                 longitude: selectedPoint.Longitude,
               };
@@ -283,6 +277,7 @@ class UseCasesMapViewer extends React.Component {
                   MapViewerThis.setState((prevState) => {
                     return {
                       useCaseLevel: 3,
+                      selectedUseCase: selectedPoint,
                       selectedUseCases: data.features,
                       previousState: prevState.useCaseLevel,
                     };
@@ -318,13 +313,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';
@@ -369,37 +364,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);
         });
       }
     });

package/src/components/UseCasesMapViewer/config.js

@@ -17,6 +17,19 @@ const config = {
     div: 'mapDiv',
     center: [10.78, 30],
     zoom: 0,
+    maxZoom: 5,
+    worldDimensions: { height: 256, width: 256 },
+    prohibitedKeys: [
+      '+',
+      '-',
+      'Shift',
+      '_',
+      '=',
+      'ArrowUp',
+      'ArrowDown',
+      'ArrowLeft',
+      'ArrowRight',
+    ],
   },
   Services: {
     RegionLayer: