@eeacms/volto-arcgis-block 0.1.182 → 0.1.184

package/CHANGELOG.md

@@ -4,6 +4,18 @@ 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.184](https://github.com/eea/volto-arcgis-block/compare/0.1.183...0.1.184) - 21 August 2023
+
+#### :hammer_and_wrench: Others
+
+- CLMS-2454 (feat): ESRI Copyright displayed in Area Selection widget when selecting countries [Urkorue - [`e7d060d`](https://github.com/eea/volto-arcgis-block/commit/e7d060dfd8436584e34bc08d67840875b2e3c136)]
+### [0.1.183](https://github.com/eea/volto-arcgis-block/compare/0.1.182...0.1.183) - 7 August 2023
+
+#### :hammer_and_wrench: Others
+
+- CLMS-2446 (jenkins) [Urkorue - [`efc5da9`](https://github.com/eea/volto-arcgis-block/commit/efc5da9ae68f664b295ffee899afb1cd51701507)]
+- CLMS-2446 (bug): EEA38+UK remarked in the use cases map [Urkorue - [`c70ac80`](https://github.com/eea/volto-arcgis-block/commit/c70ac805f53d70efb07e68bd86afabe006bc7b0b)]
+- CLMS-2402 (feat): Changed Use cases basemap to other with more information [Urkorue - [`5f7b42f`](https://github.com/eea/volto-arcgis-block/commit/5f7b42fbfb3e8138a139bdf780a5f09e07fc7f4f)]
 ### [0.1.182](https://github.com/eea/volto-arcgis-block/compare/0.1.181...0.1.182) - 3 August 2023
 
 #### :house: Documentation changes

package/Jenkinsfile

@@ -198,7 +198,7 @@ pipeline {
         }
       }
     }
-
+/*
     stage('SonarQube compare to master') {
       when {
         allOf {
@@ -223,7 +223,7 @@ pipeline {
         }
       }
     }
-
+*/
     stage('Pull Request') {
       when {
         not {

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -259,6 +259,7 @@ class AreaWidget extends React.Component {
       document.querySelector('.drawRectanglePopup-block').style.display =
         'block';
     }
+    this.props.view.ui._removeComponents(['attribution']);
   }
 
   /**
@@ -272,6 +273,7 @@ class AreaWidget extends React.Component {
     });
     this.props.map.add(this.nutsGroupLayer);
     this.props.view.on('click', (event) => {
+      this.props.view.ui.components = ['attribution'];
       if (
         (this.props.mapViewer.activeWidget === this || this.props.download) &&
         (this.props.mapViewer.activeWidget

package/src/components/MapViewer/BookmarkWidget.jsx

@@ -0,0 +1,152 @@
+import React, { createRef } from 'react';
+//import "@arcgis/core/assets/esri/css/main.css";
+//import "./css/ArcgisMap.css";
+import { loadModules } from 'esri-loader';
+
+export const BOOKMARK_SESSION_KEY = 'bookmark_session';
+
+var Bookmarks;
+class BookmarkWidget extends React.Component {
+  /**
+   * Creator of the Basemap widget class
+   * @param {*} props
+   */
+  constructor(props) {
+    super(props);
+    //We create a reference to a DOM element to be mounted
+    this.container = createRef();
+    //Initially, we set the state of the component to
+    //not be showing the basemap panel
+    this.state = {
+      showMapMenu: false,
+    };
+    this.mapViewer = this.props.mapViewer;
+    this.userID = this.props.userID;
+    this.menuClass =
+      'esri-icon-bookmark esri-widget--button esri-widget esri-interactive';
+  }
+
+  loader() {
+    return loadModules(['esri/widgets/Bookmarks']).then(([_Bookmarks]) => {
+      Bookmarks = _Bookmarks;
+    });
+  }
+  /**
+   * Method that will be invoked when the
+   * button is clicked. It controls the open
+   * and close actions of the component
+   */
+  openMenu() {
+    if (this.state.showMapMenu) {
+      this.props.mapViewer.setActiveWidget();
+      this.container.current.querySelector('.right-panel').style.display =
+        'none';
+      this.container.current
+        .querySelector('.esri-widget--button')
+        .classList.remove('active-widget');
+      document
+        .querySelector('.esri-ui-top-right.esri-ui-corner')
+        .classList.remove('show-panel');
+      // By invoking the setState, we notify the state we want to reach
+      // and ensure that the component is rendered again
+      this.setState({ showMapMenu: false });
+    } else {
+      this.props.mapViewer.setActiveWidget(this);
+      this.container.current.querySelector('.right-panel').style.display =
+        'flex';
+      this.container.current
+        .querySelector('.esri-widget--button')
+        .classList.add('active-widget');
+      document
+        .querySelector('.esri-ui-top-right.esri-ui-corner')
+        .classList.add('show-panel');
+      // By invoking the setState, we notify the state we want to reach
+      // and ensure that the component is rendered again
+      this.setState({ showMapMenu: true });
+    }
+  }
+  /**
+   * This method is executed after the rener method is executed
+   */
+
+  async componentDidMount() {
+    await this.loader();
+    this.props.view.ui.add(this.container.current, 'top-right');
+    let sessionBookmarks = {};
+    if (this.userID != null) {
+      sessionBookmarks =
+        JSON.parse(
+          localStorage.getItem(BOOKMARK_SESSION_KEY + '_' + this.userID),
+        ) || {};
+    }
+    this.Bookmarks = new Bookmarks({
+      view: this.props.view,
+      // allows bookmarks to be added, edited, or deleted
+      editingEnabled: true,
+      visibleElements: {
+        time: false, // don't show the time (h:m:s) next to the date
+      },
+      container: document.querySelector('.bookmark-panel'),
+      bookmarks: sessionBookmarks,
+    });
+
+    this.Bookmarks.when(() => {
+      this.Bookmarks.bookmarks.on('change', () => {
+        if (this.userID != null) {
+          localStorage.setItem(
+            BOOKMARK_SESSION_KEY + '_' + this.userID,
+            JSON.stringify(this.Bookmarks.bookmarks.items),
+          );
+        }
+      });
+      this.Bookmarks.on('bookmark-edit', () => {
+        if (this.userID != null) {
+          localStorage.setItem(
+            BOOKMARK_SESSION_KEY + '_' + this.userID,
+            JSON.stringify(this.Bookmarks.bookmarks.items),
+          );
+        }
+      });
+    });
+  }
+  /**
+   * This method renders the component
+   * @returns jsx
+   */
+  render() {
+    return (
+      <>
+        <div ref={this.container} className="legend-container">
+          <div tooltip="Bookmark" direction="left" type="widget">
+            <div
+              className={this.menuClass}
+              id="legend_button"
+              aria-label="Bookmark"
+              onClick={this.openMenu.bind(this)}
+              onKeyDown={this.openMenu.bind(this)}
+              tabIndex="0"
+              role="button"
+            ></div>
+          </div>
+          <div className="right-panel">
+            <div className="right-panel-header">
+              <span>Bookmark</span>
+              <span
+                className="map-menu-icon esri-icon-close"
+                onClick={this.openMenu.bind(this)}
+                onKeyDown={this.openMenu.bind(this)}
+                tabIndex="0"
+                role="button"
+              ></span>
+            </div>
+            <div className="right-panel-content">
+              <div className="bookmark-panel"></div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
+}
+
+export default BookmarkWidget;

package/src/components/MapViewer/MapViewer.jsx

@@ -18,6 +18,7 @@ import InfoWidget from './InfoWidget';
 import MenuWidget from './MenuWidget';
 import HotspotWidget from './HotspotWidget';
 import PanWidget from './PanWidget';
+import BookmarkWidget from './BookmarkWidget';
 //import "isomorphic-fetch";  <-- Necessary to use fetch?
 var Map, MapView, Zoom, intl, Basemap, WebTileLayer, Extent;
 let mapStatus = {};
@@ -55,6 +56,7 @@ class MapViewer extends React.Component {
     this.activeLayersArray = {};
     this.props.mapviewer_config.loading = true;
     this.cfgUrls = this.props.cfg.Urls;
+    this.userID = null;
   }
 
   activeLayersHandler(newActiveLayers) {
@@ -90,6 +92,7 @@ class MapViewer extends React.Component {
       'esri/Basemap',
       'esri/layers/WebTileLayer',
       'esri/geometry/Extent',
+      'esri/widgets/Bookmarks',
     ]).then(
       ([_Map, _MapView, _Zoom, _intl, _Basemap, _WebTileLayer, _Extent]) => {
         [Map, MapView, Zoom, intl, Basemap, WebTileLayer, Extent] = [
@@ -350,6 +353,10 @@ class MapViewer extends React.Component {
       ); //call conf
   }
 
+  renderBookmark() {
+    if (this.view) return <CheckUserID reference={this} />;
+  }
+
   appLanguage() {
     return intl && <CheckLanguage />;
   }
@@ -383,6 +390,7 @@ class MapViewer extends React.Component {
             {this.renderInfo()}
             {this.renderHotspot()}
             {this.renderMenu()}
+            {this.renderBookmark()}
           </div>
         </div>
       );
@@ -407,6 +415,36 @@ export const CheckLogin = ({ reference }) => {
     </>
   );
 };
+export const CheckUserID = ({ reference }) => {
+  let { user_id, isLoggedIn } = useCartState();
+  if (isLoggedIn) {
+    return (
+      <>
+        {
+          <BookmarkWidget
+            view={reference.view}
+            map={reference.map}
+            mapViewer={reference}
+            userID={user_id}
+          />
+        }
+      </>
+    );
+  } else {
+    return (
+      <>
+        {
+          <BookmarkWidget
+            view={reference.view}
+            map={reference.map}
+            mapViewer={reference}
+            userID={null}
+          />
+        }
+      </>
+    );
+  }
+};
 
 export default compose(
   connect(

package/src/components/UseCasesMapViewer/LayerControl.jsx

@@ -29,7 +29,12 @@ class LayerControl {
 
   getGeometry(country, layer) {
     layer.definitionExpression = `(`;
-    if (country === 'EU' || country === 'EU 27+UK' || country === 'EEA+38UK') {
+    if (
+      country === 'EU' ||
+      country === 'EU 27+UK' ||
+      country === 'EEA38' ||
+      country === 'EEA38+UK'
+    ) {
       let states = mapViewer.props.cfg.Codes[country];
       for (let i = 0; i < states.length; i++) {
         layer.definitionExpression += `CNTR_ID = '${states[i]}'`;
@@ -124,6 +129,7 @@ class LayerControl {
     return Math.min(latZoom, lngZoom, this.zoomMax);
     //TODO calculate the corresponding level of zoom automatically
   }
+
   latRad(lat) {
     let sin = Math.sin((lat * Math.PI) / 180);
     let radX2 = Math.log((1 + sin) / (1 - sin)) / 2;

package/src/components/UseCasesMapViewer/NavigationControl.jsx

@@ -21,7 +21,7 @@ class NavigationControl extends React.Component {
     this.layerControl.hideLayer(layerSpatial.id);
     this.layerControl.showLayer(layerRegion.id);
     this.view.center = this.center;
-    this.view.zoom = 0;
+    this.view.zoom = 1;
     layerSpatial.definitionExpression = null;
     mapViewer.setState(() => ({
       useCaseLevel: 1,

package/src/components/UseCasesMapViewer/UseCasesMapViewer.jsx

@@ -13,11 +13,11 @@ let Map,
   FeatureLayer,
   Extent,
   Basemap,
-  VectorTileLayer,
   layerControl,
   navigationControl,
   layerSpatial,
-  layerHighlight;
+  layerHighlight,
+  WebTileLayer;
 
 class UseCasesMapViewer extends React.Component {
   constructor(props) {
@@ -74,23 +74,16 @@ class UseCasesMapViewer extends React.Component {
       'esri/layers/FeatureLayer',
       'esri/geometry/Extent',
       'esri/Basemap',
-      'esri/layers/VectorTileLayer',
+      'esri/layers/WebTileLayer',
     ]).then(
-      ([
-        _Map,
-        _MapView,
-        _FeatureLayer,
-        _Extent,
-        _Basemap,
-        _VectorTileLayer,
-      ]) => {
-        [Map, MapView, FeatureLayer, Extent, Basemap, VectorTileLayer] = [
+      ([_Map, _MapView, _FeatureLayer, _Extent, _Basemap, _WebTileLayer]) => {
+        [Map, MapView, FeatureLayer, Extent, Basemap, WebTileLayer] = [
           _Map,
           _MapView,
           _FeatureLayer,
           _Extent,
           _Basemap,
-          _VectorTileLayer,
+          _WebTileLayer,
         ];
       },
     );
@@ -105,27 +98,29 @@ class UseCasesMapViewer extends React.Component {
     loadCss();
     await this.loader();
 
-    const gray_basemap = new VectorTileLayer({
-      portalItem: {
-        id: '291da5eab3a0412593b66d384379f89f',
-      },
-    });
-
-    let basemap = new Basemap({
-      baseLayers: [gray_basemap],
+    this.basemap = new Basemap({
+      title: 'Countries World',
+      thumbnailUrl:
+        'https://gisco-services.ec.europa.eu/maps/wmts/CountriesWorld/EPSG3857/0/0/0.png',
+      baseLayers: [
+        new WebTileLayer({
+          urlTemplate:
+            'https://gisco-services.ec.europa.eu/maps/tiles/CountriesWorld/EPSG3857/{z}/{x}/{y}.png',
+        }),
+      ],
     });
 
     // this.mapdiv.current is the reference to the current DOM element of
     // this.mapdiv after it was mounted by the render() method
     this.map = new Map({
-      basemap: basemap,
+      basemap: this.basemap,
     });
 
     this.view = new MapView({
       container: this.mapdiv.current,
       map: this.map,
       center: this.mapCfg.center,
-      zoom: this.mapCfg.zoom,
+      zoom: 1,
       ui: {
         components: ['attribution'],
       },