@eeacms/volto-arcgis-block 0.1.134 → 0.1.136

package/CHANGELOG.md

@@ -4,6 +4,27 @@ 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.136](https://github.com/eea/volto-arcgis-block/compare/0.1.135...0.1.136) - 5 May 2023
+
+#### :hammer_and_wrench: Others
+
+- CLMS-2060 (chore): ran linting scripts and passed. [ujbolivar - [`76fed5c`](https://github.com/eea/volto-arcgis-block/commit/76fed5c5960453233dddf63e7946bb5b4f249c42)]
+- CLMS-2060 (chore): ran linting scripts [ujbolivar - [`2dcb14a`](https://github.com/eea/volto-arcgis-block/commit/2dcb14a6c87d5b37787375cff05352f4344eae9c)]
+- [FEAT]: Code can load all layers or just a group of them. Gisco Basemap add to Map by default [martinman - [`08524e6`](https://github.com/eea/volto-arcgis-block/commit/08524e6386d6103cff9dbc92e5a6ed313a49ee35)]
+- CLMS-2060 (chore): Ticket completed. NUTS is working [ujbolivar - [`38c364d`](https://github.com/eea/volto-arcgis-block/commit/38c364d2db017638981eddee66aff0b75706e472)]
+- revert back to feature layer implementation [ujbolivar - [`78075ae`](https://github.com/eea/volto-arcgis-block/commit/78075ae608991e5a815d410bf0c2e438796b6f37)]
+- still not completed [ujbolivar - [`629e825`](https://github.com/eea/volto-arcgis-block/commit/629e82561b1e0887bc49b2cfffe750c4d4ab3274)]
+- Merge local changes and latest changes [martinman - [`243d6d4`](https://github.com/eea/volto-arcgis-block/commit/243d6d4122b5dea59e719a40c7edf57c1a99a3b8)]
+- CLMS-2060 (chore): changed url to production endpoint for NUTS. Not completed [ujbolivar - [`cd6627e`](https://github.com/eea/volto-arcgis-block/commit/cd6627e14825d7503513642079884abc4292462a)]
+- FEAT: Thumbnails from GetMap requests. Next step generate Basemaps automatically from Gisco GetCapabilities. Set Gisco Basemap as default in Mapviewer [martinman - [`b53b7d6`](https://github.com/eea/volto-arcgis-block/commit/b53b7d6ad4874e65bf93499839614ee48f3850ce)]
+- FEAT: Gisco basemaps added and some ESRI basemaps. Next step add thumbnails [martinman - [`00152b9`](https://github.com/eea/volto-arcgis-block/commit/00152b9637746ac6666bf8c4ec6b5b8257c76d7a)]
+- First commit [martinman - [`8508c9a`](https://github.com/eea/volto-arcgis-block/commit/8508c9a3830afe0b84f1582923bde616a68b38b6)]
+### [0.1.135](https://github.com/eea/volto-arcgis-block/compare/0.1.134...0.1.135) - 5 May 2023
+
+#### :hammer_and_wrench: Others
+
+- CLMS-1733 (lint):Ran linting scripts before push [Urkorue - [`3fffb43`](https://github.com/eea/volto-arcgis-block/commit/3fffb438efb27a59f251ea89bd35b67301af9040)]
+- CLMS-1733 (fix): Compares the product title instead of the url [Urkorue - [`41b88af`](https://github.com/eea/volto-arcgis-block/commit/41b88afdfc34dafccd9d587da880caf998bf7f41)]
 ### [0.1.134](https://github.com/eea/volto-arcgis-block/compare/0.1.133...0.1.134) - 4 May 2023
 
 ### [0.1.133](https://github.com/eea/volto-arcgis-block/compare/0.1.132...0.1.133) - 2 May 2023

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -137,7 +137,7 @@ class AreaWidget extends React.Component {
     this.clearWidget();
 
     levels.forEach((level) => {
-      var url = `https://trial.discomap.eea.europa.eu/arcgis/rest/services/CLMS/NUTS_2021_Improved/MapServer/`;
+      var url = `https://land.discomap.eea.europa.eu/arcgis/rest/services/CLMS_Portal/NUTS_2021_Improved/MapServer/`;
       var layer = new FeatureLayer({
         id: id,
         url: url,

package/src/components/MapViewer/BasemapWidget.jsx

@@ -1,10 +1,16 @@
 import React, { createRef } from 'react';
 import { loadModules } from 'esri-loader';
 var BasemapGallery;
-// var Basemap;
-// var WebTileLayer;
+var Basemap;
+var WebTileLayer;
+var esriRequest;
 // var LocalBasemapsSource;
 
+// Configuration
+const LOAD_WHOLE_SERVICE = false;
+const GISCO_CAPABILITIES_URL =
+  'https://gisco-services.ec.europa.eu/maps/wmts/1.0.0/WMTSCapabilities.xml';
+
 class BasemapWidget extends React.Component {
   /**
    * Creator of the Basemap widget class
@@ -28,12 +34,21 @@ class BasemapWidget extends React.Component {
       'esri/Basemap',
       'esri/layers/WebTileLayer',
       'esri/widgets/BasemapGallery/support/LocalBasemapsSource',
+      'esri/request',
     ]).then(
-      ([_BasemapGallery, _Basemap, _WebTileLayer, _LocalBasemapsSource]) => {
-        BasemapGallery = _BasemapGallery;
-        // Basemap = _Basemap;
-        // WebTileLayer = _WebTileLayer;
-        // LocalBasemapsSource = _LocalBasemapsSource;
+      ([
+        _BasemapGallery,
+        _Basemap,
+        _WebTileLayer,
+        _LocalBasemapsSource,
+        _esriRequest,
+      ]) => {
+        [BasemapGallery] = [_BasemapGallery];
+        [Basemap] = [_Basemap];
+        [WebTileLayer] = [_WebTileLayer];
+        [esriRequest] = [_esriRequest];
+
+        // [LocalBasemapsSource] = [_LocalBasemapsSource];
       },
     );
   }
@@ -43,33 +58,51 @@ class BasemapWidget extends React.Component {
    * button is clicked. It controls the open
    * and close actions of the component
    */
-  openMenu() {
-    if (this.loadFirst) {
-      document
-        .querySelectorAll('.esri-basemap-gallery__item')[3]
-        .setAttribute('aria-selected', true);
-      document
-        .querySelectorAll('.esri-basemap-gallery__item')[3]
-        .classList.add('esri-basemap-gallery__item--selected');
-      this.loadFirst = false;
 
-      document
-        .querySelector('.esri-basemap-gallery__item-container')
-        .addEventListener(
-          'click',
-          (e) => {
-            document
-              .querySelectorAll('.esri-basemap-gallery__item')[3]
-              .setAttribute('aria-selected', false);
-            document
-              .querySelectorAll('.esri-basemap-gallery__item')[3]
-              .classList.remove('esri-basemap-gallery__item--selected');
-          },
-          {
-            once: true,
-          },
-        );
-    }
+  getGISCOCapabilities = (url) => {
+    // Get the coordinates of the click on the view
+    return esriRequest(url, {
+      responseType: 'html',
+      sync: 'true',
+    }).then((response) => {
+      let parser = new DOMParser();
+      let xml = parser.parseFromString(response.data, 'text/html');
+      return xml;
+    });
+  };
+
+  parseCapabilities = (xml, tag) => {
+    return xml.getElementsByTagName(tag);
+  };
+
+  openMenu = () => {
+    // if (this.loadFirst) {
+    //   // Add styles to selected basemap, but fails if not exist
+    //   document
+    //     .querySelectorAll('.esri-basemap-gallery__item')[0]
+    //     .setAttribute('aria-selected', true);
+    //   document
+    //     .querySelectorAll('.esri-basemap-gallery__item')[0]
+    //     .classList.add('esri-basemap-gallery__item--selected');
+    //   this.loadFirst = false;
+
+    //   document
+    //     .querySelector('.esri-basemap-gallery__item-container')
+    //     .addEventListener(
+    //       'click',
+    //       (e) => {
+    //         document
+    //           .querySelectorAll('.esri-basemap-gallery__item')[0]
+    //           .setAttribute('aria-selected', false);
+    //         document
+    //           .querySelectorAll('.esri-basemap-gallery__item')[0]
+    //           .classList.remove('esri-basemap-gallery__item--selected');
+    //       },
+    //       {
+    //         once: true,
+    //       },
+    //   );
+    // }
 
     if (this.state.showMapMenu) {
       this.props.mapViewer.setActiveWidget();
@@ -99,38 +132,117 @@ class BasemapWidget extends React.Component {
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: true });
     }
-  }
+  };
   /**
    * This method is executed after the rener method is executed
    */
+
+  layerArray = [];
   async componentDidMount() {
     await this.loader();
     if (!this.container.current) return;
 
-    // custom basemaps
-    // let basemaps = [Basemap.fromId('topo-vector'), Basemap.fromId('hybrid')];
-    // basemaps.push(
-    //   new Basemap({
-    //     baseLayers: [
-    //       new WebTileLayer({
-    //         urlTemplate:
-    //           'https://gisco-services.ec.europa.eu/maps/wmts/OSMCartoV4CompositeEN/EPSG3857/{z}/{x}/{y}.png',
-    //       }),
-    //     ],
-    //     title: 'OSM GISCO',
-    //     id: 'osm-gisco',
-    //   }),
-    // );
-
-    // let customSource = new LocalBasemapsSource({
-    //      basemaps,
-    // });
-
-    this.basemapGallery = new BasemapGallery({
-      view: this.props.view,
-      container: this.container.current.querySelector('.basemap-panel'),
-      // source: customSource
-    });
+    if (LOAD_WHOLE_SERVICE) {
+      // Load all layers in GISCO service as basemap
+      this.getGISCOCapabilities(GISCO_CAPABILITIES_URL).then((xml) => {
+        let layers = Array.from(xml.querySelectorAll('Layer')).filter(
+          (v) => v.querySelectorAll('Layer').length === 0,
+        );
+        let url = '';
+
+        let epsgArray = [];
+        Array.from(layers[0].querySelectorAll('tilematrixset')).map(
+          (element) => {
+            epsgArray.push(element.innerText);
+            return element;
+          },
+        );
+        let proj = 'EPSG3857'; //default projection
+        for (let i = 0; i < layers.length; i++) {
+          if (!epsgArray.includes(proj)) {
+            proj = epsgArray[0];
+          }
+          url = this.parseCapabilities(layers[i], 'ResourceURL')[0].attributes
+            .template.textContent;
+          let basemapCode = `
+            let basemap${i} = new Basemap({
+              title: this.parseCapabilities(layers[${i}], 'ows:title')[0].innerText,
+              thumbnailUrl: ${url}.replace('{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}', '/${proj}/0/0/0'),
+              baseLayers: [
+                new WebTileLayer({
+                  urlTemplate: ${url}.replace('{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}', '/${proj}/{z}/{x}/{y}')
+                })
+              ]
+            });
+            this.layerArray.push(basemap${i});
+          `;
+
+          Function.apply(null, [basemapCode]).call(this);
+        }
+        this.basemapGallery = new BasemapGallery({
+          view: this.props.view,
+          container: this.container.current.querySelector('.basemap-panel'),
+          source: this.layerArray,
+        });
+      });
+    } else {
+      // Only 3 basemaps
+      this.positronCompositeBasemap = new Basemap({
+        title: 'Positron composite',
+        thumbnailUrl:
+          'https://gisco-services.ec.europa.eu/maps/wmts/OSMPositronComposite/EPSG3857/0/0/0.png',
+        baseLayers: [
+          new WebTileLayer({
+            urlTemplate:
+              'https://gisco-services.ec.europa.eu/maps/tiles/OSMPositronComposite/EPSG3857/{z}/{x}/{y}.png',
+          }),
+        ],
+        // referenceLayers: [
+        //   new _WebTileLayer(...)
+        // ],
+      });
+
+      this.blossomCompositeBasemap = new Basemap({
+        title: 'Blossom composite',
+        thumbnailUrl:
+          'https://gisco-services.ec.europa.eu/maps/wmts/OSMBlossomComposite/EPSG3857/0/0/0.png',
+        baseLayers: [
+          new WebTileLayer({
+            urlTemplate:
+              'https://gisco-services.ec.europa.eu/maps/tiles/OSMBlossomComposite/EPSG3857/{z}/{x}/{y}.png',
+          }),
+        ],
+        // referenceLayers: [
+        //   new WebTileLayer(...)
+        // ],
+      });
+
+      this.worldBoundariesBasemap = new Basemap({
+        title: 'World boundaries',
+        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',
+          }),
+        ],
+        // referenceLayers: [
+        //   new WebTileLayer(...)
+        // ],
+      });
+
+      this.basemapGallery = new BasemapGallery({
+        view: this.props.view,
+        container: this.container.current.querySelector('.basemap-panel'),
+        source: [
+          this.worldBoundariesBasemap,
+          this.blossomCompositeBasemap,
+          this.positronCompositeBasemap,
+        ],
+      });
+    }
+
     this.props.view.ui.add(this.container.current, 'top-right');
   }
   /**

package/src/components/MapViewer/MapViewer.jsx

@@ -18,7 +18,7 @@ import InfoWidget from './InfoWidget';
 import MenuWidget from './MenuWidget';
 import HotspotWidget from './HotspotWidget';
 //import "isomorphic-fetch";  <-- Necessary to use fetch?
-var Map, MapView, Zoom, intl;
+var Map, MapView, Zoom, intl, Basemap, WebTileLayer;
 let mapStatus = {};
 const CheckLanguage = () => {
   const { locale } = useIntl();
@@ -83,8 +83,17 @@ class MapViewer extends React.Component {
       'esri/views/MapView',
       'esri/widgets/Zoom',
       'esri/intl',
-    ]).then(([_Map, _MapView, _Zoom, _intl]) => {
-      [Map, MapView, Zoom, intl] = [_Map, _MapView, _Zoom, _intl];
+      'esri/Basemap',
+      'esri/layers/WebTileLayer',
+    ]).then(([_Map, _MapView, _Zoom, _intl, _Basemap, _WebTileLayer]) => {
+      [Map, MapView, Zoom, intl, Basemap, WebTileLayer] = [
+        _Map,
+        _MapView,
+        _Zoom,
+        _intl,
+        _Basemap,
+        _WebTileLayer,
+      ];
     });
   }
 
@@ -107,8 +116,25 @@ class MapViewer extends React.Component {
     await this.waitForDataFill();
     // this.mapdiv.current is the reference to the current DOM element of
     // this.mapdiv after it was mounted by the render() method
+
+    this.positronCompositeBasemap = new Basemap({
+      title: 'Positron composite',
+      thumbnailUrl:
+        'https://gisco-services.ec.europa.eu/maps/wmts/OSMPositronComposite/EPSG3857/0/0/0.png',
+      baseLayers: [
+        new WebTileLayer({
+          urlTemplate:
+            'https://gisco-services.ec.europa.eu/maps/tiles/OSMPositronComposite/EPSG3857/{z}/{x}/{y}.png',
+        }),
+      ],
+      // referenceLayers: [
+      //   new _WebTileLayer(...)
+      // ],
+    });
+
     this.map = new Map({
-      basemap: 'topo',
+      // basemap: 'topo',
+      basemap: this.positronCompositeBasemap,
     });
 
     mapStatus = this.recoverState();

package/src/components/MapViewer/MenuWidget.jsx

@@ -1961,6 +1961,7 @@ class MenuWidget extends React.Component {
         product.Datasets.forEach((dataset) => {
           if (dataset.DatasetTitle.includes(selectedDataset.title)) {
             this.url = dataset.ViewService;
+            this.productTitle = product.ProductTitle;
           }
         });
       });
@@ -2105,10 +2106,13 @@ class MenuWidget extends React.Component {
     this.findCheckedDataset(elem);
     let BBoxes = {};
     let firstLayer;
-    if (this.url.toLowerCase().includes('globaldynamiclandcover')) {
+    if (this.productTitle.includes('Global Dynamic Land Cover')) {
       this.findDatasetBoundingBox(elem);
       BBoxes = this.parseBBOXJSON(this.dataBBox);
-    } else if (this.url.toLowerCase().includes('globalland.vgt.vito')) {
+    } else if (
+      this.productTitle.includes('Low Resolution Vegetation Parameters') ||
+      this.productTitle.includes('Water Parameters')
+    ) {
       if (
         this.layers[elem.id].fullExtents &&
         this.layers[elem.id].fullExtents !== null