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

Comparing version 0.1.13 to 0.1.14

CHANGELOG.md

@@ -7,4 +7,16 @@ ### 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)
@@ -11,0 +23,0 @@ - Map bottom margin [`0790f2c`](https://github.com/eea/volto-arcgis-block/commit/0790f2c870fb87073aa2b15d57edf66a9548b41e)

package.json

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

src/components/UseCasesMapViewer/config.js

@@ -20,2 +20,15 @@ const markerType = 'simple-marker';
     zoom: 0,
+    maxZoom: 5,
+    worldDimensions: { height: 256, width: 256 },
+    prohibitedKeys: [
+      '+',
+      '-',
+      'Shift',
+      '_',
+      '=',
+      'ArrowUp',
+      'ArrowDown',
+      'ArrowLeft',
+      'ArrowRight',
+    ],
   },
@@ -22,0 +35,0 @@ Services: {

src/components/UseCasesMapViewer/InfoWidget.jsx

@@ -80,3 +80,3 @@ import React, { createRef } from 'react';
   getDataBrief(data) {
-    const children = data.map((val) => {
+    let children = data.map((val) => {
       return (
@@ -117,3 +117,3 @@ <>
   showBrief(selectedRegion) {
-    const regionFeatures = [];
+    let regionFeatures = [];
     if (mapViewer.state.useCaseLevel === 2) {
@@ -188,4 +188,4 @@ for (let feature in this.features) {
   proccessDataSummary() {
-    const serviceProducts = this.getDifferentproductUsed(this.features);
-    const elements = [];
+    let serviceProducts = this.getDifferentproductUsed(this.features);
+    let elements = [];
 
@@ -214,3 +214,3 @@ for (let serviceProduct in serviceProducts) {
   getDataSummary(data, Copernicus_Land_Monitoring_Service_products_used) {
-    const children = this.getDataBrief(data);
+    let children = this.getDataBrief(data);
 
@@ -254,3 +254,3 @@ return (
     this.proccessDataSummary();
-    const DOMElements = [];
+    let DOMElements = [];
     for (let product_use_name in processedData)
@@ -335,13 +335,2 @@ DOMElements.push(
   /**
-   * 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.
@@ -359,6 +348,6 @@ * @returns HTML
       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(
@@ -365,0 +354,0 @@ bbox,

src/components/UseCasesMapViewer/LayerControl.jsx

@@ -6,2 +6,4 @@ let FeatureLayer, Extent, mapViewer;
     this.view = props.view;
+    this.worldDimensions = props.worldDimensions;
+    this.maxZoom = props.maxZoom;
     mapViewer = props.mapViewer;
@@ -18,3 +20,3 @@ FeatureLayer = props.FeatureLayer;
   createLayer(layerInfo) {
-    const newLayer = new FeatureLayer({
+    let newLayer = new FeatureLayer({
       url: layerInfo.url,
@@ -42,3 +44,3 @@ id: layerInfo.id,
   showLayer(id) {
-    const items = this.map.layers.items;
+    let items = this.map.layers.items;
     for (let layer in items)
@@ -53,3 +55,3 @@ items[layer].id === id && (items[layer].visible = true);
   hideLayer(id) {
-    const items = this.map.layers.items;
+    let items = this.map.layers.items;
     for (let layer in items) {
@@ -65,3 +67,3 @@ items[layer].id === id && (items[layer].visible = false);
   removeLayer(id) {
-    const items = this.map.layers.items;
+    let items = this.map.layers.items;
     for (let layer in items)
@@ -76,3 +78,3 @@ items[layer].id === id && this.map.remove(items[layer]);
   zoomToExtent(boundingBox) {
-    const newExtent = new Extent(
+    let newExtent = new Extent(
       boundingBox[0],
@@ -83,3 +85,3 @@ boundingBox[1],
     );
-    const zoomOnBounding = this.getBoundsZoomLevel(boundingBox);
+    let zoomOnBounding = this.getBoundsZoomLevel(boundingBox);
     this.view.zoom = zoomOnBounding;
@@ -90,23 +92,29 @@ 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;
@@ -126,7 +134,7 @@ }
   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;
@@ -141,3 +149,3 @@ });
   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`;
@@ -153,3 +161,3 @@ xmlhttp.onreadystatechange = () => {
   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`;
@@ -169,2 +177,29 @@ xmlhttp.onreadystatechange = () => {
   /**
+   * 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
@@ -171,0 +206,0 @@ * @param {Object} features

src/components/UseCasesMapViewer/NavigationControl.jsx

@@ -39,3 +39,3 @@ import React from 'react';
   navigateToRegion(bBox, region, layer) {
-    const boundingBox = this.clearBBOX(bBox);
+    let boundingBox = this.clearBBOX(bBox);
     this.layerControl.zoomToExtent(boundingBox);
@@ -68,3 +68,3 @@ this.layerControl.hideLayer(layerRegion.id);
   clearBBOX(stringBbox) {
-    const floatBbox = [];
+    let floatBbox = [];
     // typeof stringBbox !== 'string' && (stringBbox = stringBbox.toString());
@@ -71,0 +71,0 @@ stringBbox = stringBbox.replace('[', '');

src/components/UseCasesMapViewer/UseCasesMapViewer.jsx

@@ -31,2 +31,3 @@ import React, { createRef } from 'react';
     this.popupOnce = false;
+    this.popupRegion = '';
     this.mapClass = classNames('map-container', {
@@ -127,2 +128,4 @@ [`${props.customClass}`]: props.customClass || null,
       mapViewer: this,
+      worldDimensions: this.mapCfg.worldDimensions,
+      maxZoom: this.mapCfg.maxZoom,
       FeatureLayer: FeatureLayer,
@@ -139,3 +142,3 @@ Extent: Extent,
 
-    const layerRegion = layerControl.createLayer({
+    let layerRegion = layerControl.createLayer({
       id: this.regionConfig.id,
@@ -185,13 +188,3 @@ url: this.regionConfig.url,
   setMapFunctions(view, layerControl, navigationControl, layerSpatial) {
-    const prohibitedKeys = [
-      '+',
-      '-',
-      'Shift',
-      '_',
-      '=',
-      'ArrowUp',
-      'ArrowDown',
-      'ArrowLeft',
-      'ArrowRight',
-    ];
+    const prohibitedKeys = this.mapCfg.prohibitedKeys;
 
@@ -221,3 +214,3 @@ view.on('mouse-wheel', function (event) {
     view.on('key-down', function (event) {
-      const keyPressed = event.key;
+      let keyPressed = event.key;
       if (prohibitedKeys.indexOf(keyPressed) !== -1) {
@@ -228,3 +221,3 @@ event.stopPropagation();
     view.on('key-down', ['Shift'], function (event) {
-      const keyPressed = event.key;
+      let keyPressed = event.key;
       if (prohibitedKeys.indexOf(keyPressed) !== -1) {
@@ -235,3 +228,3 @@ event.stopPropagation();
     view.on('click', (e) => {
-      const screenPoint = { x: e.x, y: e.y };
+      let screenPoint = { x: e.x, y: e.y };
 
@@ -241,6 +234,6 @@ (async () => {
         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) {
@@ -255,2 +248,3 @@ navigationControl.navigateToRegion(
                 useCaseLevel: 2,
+                selectedUseCase: selectedPoint,
                 region: selectedRegion,
@@ -286,3 +280,3 @@ previousState: prevState.useCaseLevel,
             } else {
-              const latLon = {
+              let latLon = {
                 latitude: selectedPoint.Latitude,
@@ -296,2 +290,3 @@ longitude: selectedPoint.Longitude,
                       useCaseLevel: 3,
+                      selectedUseCase: selectedPoint,
                       selectedUseCases: data.features,
@@ -332,3 +327,2 @@ previousState: prevState.useCaseLevel,
       };
-
       if (this.state.useCaseLevel === 1) {
@@ -339,3 +333,4 @@ view.hitTest(screenPoint).then((response) => {
               response.results[0].graphic.geometry !== null &&
-              this.popupOnce
+              this.popupOnce &&
+              this.popupRegion === response.results[0].graphic.attributes.Region
             ) {
@@ -385,7 +380,14 @@ this.popupOnce = false;
               });
+            } 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();
           }
@@ -395,24 +397,3 @@ });
         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,0 +400,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

10511185

increased by0.01%

Lines of code

5040

increased by0.4%

No dependency changes