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

Comparing version 0.1.12 to 0.1.13

CHANGELOG.md

@@ -7,4 +7,16 @@ ### Changelog
 
+#### [0.1.13](https://github.com/eea/volto-arcgis-block/compare/0.1.12...0.1.13)
+
+- 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)
+- Fix map margin-bottom with bottom container [`b000937`](https://github.com/eea/volto-arcgis-block/commit/b0009377e2eff0864fe6c1414841b79ee30242bf)
+- Limitate movement on the map through arrows [`c60555d`](https://github.com/eea/volto-arcgis-block/commit/c60555d365635b8d8d9f6be99720cea4f93d7b04)
+- Update for africa and south america [`980c66e`](https://github.com/eea/volto-arcgis-block/commit/980c66ea3fd4003f42634f207609f53ea28c0a13)
+
 #### [0.1.12](https://github.com/eea/volto-arcgis-block/compare/0.1.11...0.1.12)
 
+> 19 October 2021
+
+- Changes coming from configuration service [`#31`](https://github.com/eea/volto-arcgis-block/pull/31)
 - fixing linter errors [`792453a`](https://github.com/eea/volto-arcgis-block/commit/792453a7da5fec397a733b6bcfd1f22a2c0ae562)
@@ -11,0 +23,0 @@ - Fixing linter error [`bd89f34`](https://github.com/eea/volto-arcgis-block/commit/bd89f34bac95770bf742abd94a9b8212b608fcc2)

package.json

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

src/components/UseCasesMapViewer/InfoWidget.jsx

@@ -123,3 +123,2 @@ import React, { createRef } from 'react';
       }
-      layerSpatial.definitionExpression = '';
       return (
@@ -149,3 +148,6 @@ <div>
     } else if (mapViewer.state.useCaseLevel === 3) {
-      layerSpatial.definitionExpression = `Latitude = ${mapViewer.state.selectedUseCases[0].attributes.Latitude} AND Longitude = ${mapViewer.state.selectedUseCases[0].attributes.Longitude}`;
+      layerSpatial.definitionExpression !== null
+        ? (layerSpatial.definitionExpression += ` AND Latitude = ${mapViewer.state.selectedUseCases[0].attributes.Latitude} AND Longitude = ${mapViewer.state.selectedUseCases[0].attributes.Longitude}`)
+        : (layerSpatial.definitionExpression = `Latitude = ${mapViewer.state.selectedUseCases[0].attributes.Latitude} AND Longitude = ${mapViewer.state.selectedUseCases[0].attributes.Longitude}`);
+
       for (let feature in mapViewer.state.selectedUseCases) {
@@ -152,0 +154,0 @@ regionFeatures.push(

src/components/UseCasesMapViewer/LayerControl.jsx

@@ -77,5 +77,36 @@ let FeatureLayer, Extent, mapViewer;
     );
+    const 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;
+
+    const ne = [bounds[2], bounds[3]];
+    const sw = [bounds[0], bounds[1]];
+
+    const 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;
+
+    const latZoom = this.zoom(mapDim.height, WORLD_DIM.height, latFraction);
+    const lngZoom = this.zoom(mapDim.width, WORLD_DIM.width, lngFraction);
+
+    return Math.min(latZoom, lngZoom, ZOOM_MAX);
+    //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;
+    return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
+  }
+
+  zoom(mapPx, worldPx, fraction) {
+    return Math.floor(Math.log(mapPx / worldPx / fraction) / Math.LN2);
+  }
+
   /**
@@ -82,0 +113,0 @@ * This method retrieves the information of a certain point, allowing filters or queries.

src/components/UseCasesMapViewer/NavigationControl.jsx

@@ -24,3 +24,3 @@ import React from 'react';
     this.view.zoom = 0;
-
+    layerSpatial.definitionExpression = null;
     mapViewer.setState(() => ({
@@ -56,6 +56,6 @@ useCaseLevel: 1,
   navigateToLocation(bBox, useCaseTitle, region, country, layer) {
-    // layerSpatial.setDefinitionExpression(point);
     this.navigateToRegion(bBox, region, layer);
-    const expression = `Use_case_title = '${useCaseTitle}' AND Spatial_coverage = '${country}'`;
-    layer.definitionExpression = expression;
+    layerSpatial.definitionExpression !== null
+      ? (layer.definitionExpression += ` AND Use_case_title = '${useCaseTitle}' AND Spatial_coverage = '${country}'`)
+      : (layer.definitionExpression = `Use_case_title = '${useCaseTitle}' AND Spatial_coverage = '${country}'`);
   }
@@ -62,0 +62,0 @@

src/components/UseCasesMapViewer/UseCasesMapViewer.jsx

@@ -182,3 +182,13 @@ import React, { createRef } from 'react';
   setMapFunctions(view, layerControl, navigationControl, layerSpatial) {
-    const prohibitedKeys = ['+', '-', 'Shift', '_', '='];
+    const prohibitedKeys = [
+      '+',
+      '-',
+      'Shift',
+      '_',
+      '=',
+      'ArrowUp',
+      'ArrowDown',
+      'ArrowLeft',
+      'ArrowRight',
+    ];
 
@@ -422,3 +432,3 @@ view.on('mouse-wheel', function (event) {
     return (
-      <div>
+      <div className="use-cases-container">
         <div className="ccl-container">
@@ -425,0 +435,0 @@ <div className="use-cases-block">

No alert changes

Improved metrics

Total package byte prevSize

10509675

increased by0.03%

Lines of code

5020

increased by0.78%

No dependency changes