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

Comparing version 0.1.5 to 0.1.6

CHANGELOG.md

@@ -7,4 +7,14 @@ ### Changelog
 
+#### [0.1.6](https://github.com/eea/volto-arcgis-block/compare/0.1.5...0.1.6)
+
+- Configured zoom out label and added to config file and set color for point-markers [`#15`](https://github.com/eea/volto-arcgis-block/pull/15)
+- Remove unused variables [`f4833ee`](https://github.com/eea/volto-arcgis-block/commit/f4833ee95782fdf0252db333eb5c8a1eb1d3cbe6)
+- Configured zoom out label and added to config file [`34b1ec6`](https://github.com/eea/volto-arcgis-block/commit/34b1ec67d9eca169652f1709f018bf03edea7a97)
+- Add color for point-markers on spatial layer [`905efc7`](https://github.com/eea/volto-arcgis-block/commit/905efc74941da4899f44fc48afc51d695b2cdd44)
+
 #### [0.1.5](https://github.com/eea/volto-arcgis-block/compare/0.1.4...0.1.5)
 
+> 6 October 2021
+
+- UseCaseMap Changes [`#14`](https://github.com/eea/volto-arcgis-block/pull/14)
 - Update config file and parametrized service urls [`#13`](https://github.com/eea/volto-arcgis-block/pull/13)
@@ -11,0 +21,0 @@ - Get data from config file [`6c44e9d`](https://github.com/eea/volto-arcgis-block/commit/6c44e9d9a917e74a38fcf6e83e434c4a0750b465)

package.json

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

src/components/UseCasesMapViewer/config.js

@@ -0,1 +1,15 @@
+const markerType = 'simple-marker';
+
+const spatialMarkerSize = '8px';
+const yellow = '#fcec00';
+const blue = '#243f9c';
+const greenSpatial = '#a2b32e';
+const black = '#000000';
+
+const regionMarkerSize = '40px';
+const regionOutlineSize = '8px';
+const regionLabelTextPosition = 'center-center';
+const grey = '#656565';
+const greenRegion = '#acba47';
+
 const config = {
@@ -9,7 +23,74 @@ Map: {
     RegionLayer:
-      'https://bm-eugis.ml/arcgis/rest/services/CLMS/UseCasesRegion_count/MapServer/0',
+      'https://bm-eugis.tk/arcgis/rest/services/CLMS/UseCasesRegion_count/MapServer/0',
     SpatialCoverageLayer:
-      'https://bm-eugis.ml/arcgis/rest/services/CLMS/UseCasesSpatialCoverage/MapServer/0',
+      'https://bm-eugis.tk/arcgis/rest/services/CLMS/UseCasesSpatialCoverage/MapServer/0',
   },
+
+  SpatialRenderer: {
+    type: 'unique-value',
+    field: 'Spatial_coverage',
+    defaultSymbol: {
+      type: markerType,
+      size: spatialMarkerSize,
+      outline: null,
+      color: yellow,
+    },
+    uniqueValueInfos: [
+      {
+        value: 'EU',
+        symbol: {
+          type: markerType,
+          size: spatialMarkerSize,
+          outline: null,
+          color: blue,
+        },
+      },
+      {
+        value: 'EEA',
+        symbol: {
+          type: markerType,
+          size: spatialMarkerSize,
+          outline: null,
+          color: greenSpatial,
+        },
+      },
+      {
+        value: 'Global',
+        symbol: {
+          type: markerType,
+          size: spatialMarkerSize,
+          outline: null,
+          color: black,
+        },
+      },
+    ],
+  },
+  RegionMarkerRenderer: {
+    type: 'unique-value',
+    field: 'COUNT',
+    defaultSymbol: {
+      type: markerType,
+      size: regionMarkerSize,
+      color: grey,
+      outline: {
+        width: regionOutlineSize,
+        color: greenRegion,
+      },
+    },
+  },
+  RegionLabel: {
+    symbol: {
+      type: 'text',
+      color: 'white',
+      font: {
+        weight: 'bold',
+      },
+    },
+    labelPlacement: regionLabelTextPosition,
+    labelExpressionInfo: {
+      expression: '$feature.COUNT',
+    },
+  },
 };
+
 export default config;

src/components/UseCasesMapViewer/InfoWidget.jsx

@@ -90,9 +90,7 @@ import React, { createRef } from 'react';
             onClick={() =>
-              this.setState((prevState) => {
-                return {
-                  useCaseLevel: 3,
-                  selectedUseCase: val,
-                  previousState: prevState.useCaseLevel,
-                };
-              })
+              this.setState((prevState) => ({
+                useCaseLevel: 3,
+                selectedUseCase: val,
+                previousState: prevState.useCaseLevel,
+              }))
             }
@@ -267,10 +265,8 @@ id={`use_case_${val.OBJECTID}`}
 
-        this.setState((prevState) => {
-          return {
-            useCaseLevel: 1,
-            region: '',
-            selectedUseCase: '',
-            previousState: prevState.useCaseLevel,
-          };
-        });
+        this.setState((prevState) => ({
+          useCaseLevel: 1,
+          region: '',
+          selectedUseCase: '',
+          previousState: prevState.useCaseLevel,
+        }));
       })();
@@ -308,10 +304,8 @@ } else if (this.features !== undefined) {
   componentWillReceiveProps(nextProps) {
-    this.setState((prevState) => {
-      return {
-        useCaseLevel: nextProps.mapViewer.state.useCaseLevel,
-        region: nextProps.mapViewer.state.region,
-        selectedUseCase: nextProps.mapViewer.state.selectedUseCase,
-        previousState: prevState.useCaseLevel,
-      };
-    });
+    this.setState((prevState) => ({
+      useCaseLevel: nextProps.mapViewer.state.useCaseLevel,
+      region: nextProps.mapViewer.state.region,
+      selectedUseCase: nextProps.mapViewer.state.selectedUseCase,
+      previousState: prevState.useCaseLevel,
+    }));
   }
@@ -333,3 +327,10 @@
         const region = this.state.selectedUseCase.Region;
-        navigationControl.navigateToLocation(bbox, title, region, layerSpatial);
+        const country = this.state.selectedUseCase.Spatial_coverage;
+        navigationControl.navigateToLocation(
+          bbox,
+          title,
+          region,
+          country,
+          layerSpatial,
+        );
         return this.showUseCase(this.state.selectedUseCase);
@@ -336,0 +337,0 @@ default:

src/components/UseCasesMapViewer/NavigationControl.jsx

@@ -32,5 +32,5 @@ import React from 'react';
     this.view.zoom = 1;
-    infoWidget.setState(() => {
-      return { useCaseLevel: 1 };
-    });
+    infoWidget.setState(() => ({
+      useCaseLevel: 1,
+    }));
   }
@@ -62,6 +62,6 @@
    */
-  navigateToLocation(bBox, useCaseTitle, region, layer) {
+  navigateToLocation(bBox, useCaseTitle, region, country, layer) {
     // layerSpatial.setDefinitionExpression(point);
     this.navigateToRegion(bBox, region, layer);
-    const expression = `Use_case_title = '${useCaseTitle}'`;
+    const expression = `Use_case_title = '${useCaseTitle}' AND Spatial_coverage = '${country}'`;
     layer.definitionExpression = expression;
@@ -108,8 +108,6 @@ }
         );
-        infoWidget.setState(() => {
-          return {
-            useCaseLevel: 2,
-            region: infoWidget.state.selectedUseCase.Region,
-          };
-        });
+        infoWidget.setState(() => ({
+          useCaseLevel: 2,
+          region: infoWidget.state.selectedUseCase.Region,
+        }));
         break;
@@ -116,0 +114,0 @@

src/components/UseCasesMapViewer/UseCasesMapViewer.jsx

@@ -14,6 +14,7 @@ import React, { createRef } from 'react';
   Extent,
-  SimpleMarkerSymbol,
-  SimpleRenderer,
   Basemap,
-  VectorTileLayer;
+  VectorTileLayer,
+  layerControl,
+  navigationControl,
+  layerSpatial;
 
@@ -30,6 +31,17 @@ class UseCasesMapViewer extends React.Component {
     this.id = props.id;
+    this.popupOnce = false;
     this.mapClass = classNames('map-container', {
       [`${props.customClass}`]: props.customClass || null,
     });
-    this.popupOnce = false;
+    this.spatialConfig = {
+      id: 'spatialLayer',
+      url: props.cfg.Services.SpatialCoverageLayer,
+      render: props.cfg.SpatialRenderer,
+    };
+    this.regionConfig = {
+      id: 'regionLayer',
+      url: props.cfg.Services.RegionLayer,
+      render: props.cfg.RegionMarkerRenderer,
+      label: props.cfg.RegionLabel,
+    };
   }
@@ -43,4 +55,2 @@
       'esri/geometry/Extent',
-      'esri/symbols/SimpleMarkerSymbol',
-      'esri/renderers/SimpleRenderer',
       'esri/Basemap',
@@ -54,17 +64,6 @@ 'esri/layers/VectorTileLayer',
         _Extent,
-        _SimpleMarkerSymbol,
-        _SimpleRenderer,
         _Basemap,
         _VectorTileLayer,
       ]) => {
-        [
-          Map,
-          MapView,
-          FeatureLayer,
-          Extent,
-          SimpleMarkerSymbol,
-          SimpleRenderer,
-          Basemap,
-          VectorTileLayer,
-        ] = [
+        [Map, MapView, FeatureLayer, Extent, Basemap, VectorTileLayer] = [
           _Map,
@@ -74,4 +73,2 @@ _MapView,
           _Extent,
-          _SimpleMarkerSymbol,
-          _SimpleRenderer,
           _Basemap,
@@ -123,3 +120,3 @@ _VectorTileLayer,
 
-    const layerControl = new LayerControl({
+    layerControl = new LayerControl({
       map: this.map,
@@ -131,34 +128,17 @@ view: this.view,
 
-    const layerSpatial = layerControl.createLayer({
-      id: 'layerSpatial',
-      url: this.serviceCfg.SpatialCoverageLayer,
+    layerSpatial = layerControl.createLayer({
+      id: this.spatialConfig.id,
+      url: this.spatialConfig.url,
     });
 
+    layerSpatial.renderer = this.spatialConfig.render;
+
     const layerRegion = layerControl.createLayer({
-      id: 'layerRegion',
-      url: this.serviceCfg.RegionLayer,
+      id: this.regionConfig.id,
+      url: this.regionConfig.url,
     });
 
-    const renderer = new SimpleRenderer({
-      symbol: new SimpleMarkerSymbol({
-        size: 4,
-        color: 'Green',
-        outline: null,
-        visualVariables: [
-          {
-            type: 'color',
-            field: 'Use_case_submitting_production_year',
-            // features with 30 ppl/sq km or below are assigned the first color
-            stops: [
-              { value: 2020, color: 'Blue' },
-              { value: 2019, color: 'Black' },
-              { value: 2018, color: 'Green' },
-            ],
-          },
-        ],
-      }),
-    });
+    layerRegion.renderer = this.regionConfig.render;
+    layerRegion.labelingInfo = [this.regionConfig.label];
 
-    layerSpatial.renderer = renderer;
-
     layerControl.addLayer(layerRegion);
@@ -168,3 +148,3 @@ layerControl.addLayer(layerSpatial);
 
-    const navigationControl = new NavigationControl({
+    navigationControl = new NavigationControl({
       map: this.map,
@@ -178,13 +158,5 @@ view: this.view,
 
-    const infoWidget = new InfoWidget({
-      view: this.view,
-      layerControl: layerControl,
-      navigationControl: navigationControl,
-      layerSpatial: layerSpatial,
-    });
-
     this.setMapFunctions(
       this.view,
       layerControl,
-      infoWidget,
       navigationControl,
@@ -199,7 +171,3 @@ layerSpatial,
     //react component to render itself again
-    this.setState(() => {
-      return {
-        useCaseLevel: 1,
-      };
-    });
+    this.setState(() => ({ useCaseLevel: 1 }));
   }
@@ -209,3 +177,3 @@
     let xmlhttp;
-    const url = `${this.serviceCfg.SpatialCoverageLayer}/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`;
+    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();
@@ -226,13 +194,6 @@ xmlhttp.onreadystatechange = function () {
    * @param {LayerControl} layerControl
-   * @param {InfoWidget} infoWidget
    * @param {NavigationControl} navigationControl
    * @param {FeatureLayer} layerSpatial
    */
-  setMapFunctions(
-    view,
-    layerControl,
-    infoWidget,
-    navigationControl,
-    layerSpatial,
-  ) {
+  setMapFunctions(view, layerControl, navigationControl, layerSpatial) {
     view.on('mouse-wheel', function (event) {
@@ -284,2 +245,3 @@ event.stopPropagation();
           const selectedTitle = selectedPoint.Use_case_title;
+          const selectedSpatial = selectedPoint.Spatial_coverage;
           if (this.state.useCaseLevel === 1) {
@@ -306,2 +268,3 @@ navigationControl.navigateToRegion(
               selectedRegion,
+              selectedSpatial,
               layerSpatial,
@@ -423,3 +386,13 @@ );
   renderInfo() {
-    return <InfoWidget view={this.view} mapViewer={this} />;
+    if (this.view) {
+      return (
+        <InfoWidget
+          view={this.view}
+          mapViewer={this}
+          layerControl={layerControl}
+          navigationControl={navigationControl}
+          layerSpatial={layerSpatial}
+        />
+      );
+    }
   }
@@ -426,0 +399,0 @@

No alert changes

Improved metrics

Total package byte prevSize

10487656

increased by0.02%

Lines of code

4605

increased by1.08%

No dependency changes