@eeacms/volto-arcgis-block 0.1.129 → 0.1.130

package/CHANGELOG.md

@@ -4,6 +4,12 @@ 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.130](https://github.com/eea/volto-arcgis-block/compare/0.1.129...0.1.130) - 25 April 2023
+
+#### :hammer_and_wrench: Others
+
+- CLMS-1733 (feat): Full extent button added in the Map viewer [Urkorue - [`7eb1a4d`](https://github.com/eea/volto-arcgis-block/commit/7eb1a4d5bbe36153261d761b0e2f34cc145340b7)]
+- CLMS-1733 (feat): Latest changes. Not completed [Urkorue - [`8b53227`](https://github.com/eea/volto-arcgis-block/commit/8b5322726416ba84704df4ee9a786a173fc86613)]
 ### [0.1.129](https://github.com/eea/volto-arcgis-block/compare/0.1.128...0.1.129) - 24 April 2023
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/MenuWidget.jsx

@@ -8,7 +8,7 @@ import AreaWidget from './AreaWidget';
 import TimesliderWidget from './TimesliderWidget';
 import { Toast } from '@plone/volto/components';
 import { toast } from 'react-toastify';
-var WMSLayer, WMTSLayer, FeatureLayer, BaseTileLayer, esriRequest;
+var WMSLayer, WMTSLayer, FeatureLayer, BaseTileLayer, esriRequest, Extent;
 
 const popupSettings = {
   basic: true,
@@ -346,6 +346,8 @@ class MenuWidget extends React.Component {
     this.layers = this.props.layers;
     this.activeLayersJSON = {};
     this.layerGroups = {};
+    this.xml = null;
+    this.dataBBox = null;
 
     // add zoomend listener to map to show/hide zoom in message
     this.view.watch('stationary', (isStationary) => {
@@ -410,6 +412,7 @@ class MenuWidget extends React.Component {
       'esri/layers/FeatureLayer',
       'esri/layers/BaseTileLayer',
       'esri/request',
+      'esri/geometry/Extent',
     ]).then(
       ([
         _WMSLayer,
@@ -417,12 +420,14 @@ class MenuWidget extends React.Component {
         _FeatureLayer,
         _BaseTileLayer,
         _esriRequest,
+        _Extent,
       ]) => {
         WMSLayer = _WMSLayer;
         WMTSLayer = _WMTSLayer;
         FeatureLayer = _FeatureLayer;
         BaseTileLayer = _BaseTileLayer;
         esriRequest = _esriRequest;
+        Extent = _Extent;
       },
     );
   }
@@ -1933,7 +1938,164 @@ class MenuWidget extends React.Component {
       );
     }
   }
+  findCheckedDatasetNoServiceToVisualize(elem) {
+    let parentId = elem.getAttribute('parentid');
+    let selectedDataset = document.querySelector('[id="' + parentId + '"]');
+    this.compCfg.forEach((component) => {
+      component.Products.forEach((product) => {
+        product.Datasets.forEach((dataset) => {
+          if (dataset.DatasetTitle.includes(selectedDataset.title)) {
+            return dataset.MarkAsDownloadableNoServiceToVisualize;
+          }
+        });
+      });
+    });
+  }
+  findCheckedDataset(elem) {
+    let parentId = elem.getAttribute('parentid');
+    let selectedDataset = document.querySelector('[id="' + parentId + '"]');
+    this.compCfg.forEach((component) => {
+      component.Products.forEach((product) => {
+        product.Datasets.forEach((dataset) => {
+          if (dataset.DatasetTitle.includes(selectedDataset.title)) {
+            this.url = dataset.ViewService;
+          }
+        });
+      });
+    });
+  }
+  parseBBOXWMS(xml) {
+    const layerParentNode = xml.querySelectorAll('Layer');
+    let layersChildren = Array.from(layerParentNode).filter(
+      (v) => v.querySelectorAll('Layer').length === 0,
+    );
+    let layerParent = Array.from(layerParentNode).filter(
+      (v) => v.querySelectorAll('Layer').length !== 0,
+    );
+    let BBoxes = {};
+    for (let i in layersChildren) {
+      let layerGeoGraphic = {};
+      if (
+        layersChildren[i].querySelector('EX_GeographicBoundingBox') !== null
+      ) {
+        // If the layer has BBOX
+        layerGeoGraphic = layersChildren[i].querySelector(
+          'EX_GeographicBoundingBox',
+        );
+      } else {
+        // If the layer has no BBOX, it was assigned dataset BBOX
+        layerGeoGraphic = layerParent[0].querySelector(
+          'EX_GeographicBoundingBox',
+        );
+      }
+      BBoxes[layersChildren[i].querySelector('Name').innerText] = {
+        xmin: Number(
+          layerGeoGraphic.querySelector('westBoundLongitude').innerText,
+        ),
+        ymin: Number(
+          layerGeoGraphic.querySelector('southBoundLatitude').innerText,
+        ),
+        xmax: Number(
+          layerGeoGraphic.querySelector('eastBoundLongitude').innerText,
+        ),
+        ymax: Number(
+          layerGeoGraphic.querySelector('northBoundLatitude').innerText,
+        ),
+      };
+    }
+    return BBoxes;
+  } // function parseWMS
+  // Web Map Tiled Services WMTS
+  parseBBOXWMTS(xml) {
+    const layerParentNode = xml.querySelectorAll('Layer');
+    let layersChildren = Array.from(layerParentNode).filter(
+      (v) => v.querySelectorAll('Layer').length === 0,
+    );
+    let layerParent = Array.from(layerParentNode).filter(
+      (v) => v.querySelectorAll('Layer').length !== 0,
+    );
+    let BBoxes = {};
+    for (let i in layersChildren) {
+      let LowerCorner,
+        UpperCorner = [];
+      if (
+        this.parseCapabilities(layersChildren[i], 'ows:LowerCorner').length !==
+        0
+      ) {
+        // If the layer has BBOX
+        LowerCorner = this.parseCapabilities(
+          layersChildren[i],
+          'ows:LowerCorner',
+        )[0].innerText.split(' ');
+        UpperCorner = this.parseCapabilities(
+          layersChildren[i],
+          'ows:UpperCorner',
+        )[0].innerText.split(' ');
+      } else {
+        // If the layer has no BBOX, it was assigned dataset BBOX
+        LowerCorner = this.parseCapabilities(
+          layerParent,
+          'ows:LowerCorner',
+        )[0].innerText.split(' ');
+        UpperCorner = this.parseCapabilities(
+          layerParent,
+          'ows:UpperCorner',
+        )[0].innerText.split(' ');
+      }
+      BBoxes[
+        this.parseCapabilities(layersChildren[i], 'ows:Title')[0].innerText
+      ] = {
+        xmin: Number(LowerCorner[0]),
+        ymin: Number(LowerCorner[1]),
+        xmax: Number(UpperCorner[0]),
+        ymax: Number(UpperCorner[1]),
+      };
+    }
+    return BBoxes;
+  }
+
+  parseCapabilities(xml, tag) {
+    return xml.getElementsByTagName(tag);
+  }
 
+  getCapabilities = (url, serviceType) => {
+    // Get the coordinates of the click on the view
+    return esriRequest(url, {
+      responseType: 'html',
+      sync: 'true',
+      query: {
+        request: 'GetCapabilities',
+        service: serviceType,
+      },
+    })
+      .then((response) => {
+        const xmlDoc = response.data;
+        const parser = new DOMParser();
+        this.xml = parser.parseFromString(xmlDoc, 'text/html');
+        //this.xml = response.data; // assign the response data to this.xml
+      })
+      .catch(() => {});
+  };
+  async fullExtent(elem) {
+    this.findCheckedDataset(elem);
+    let BBoxes = {};
+    if (this.url.toLowerCase().includes('wms')) {
+      await this.getCapabilities(this.url, 'wms');
+      BBoxes = this.parseBBOXWMS(this.xml);
+    } else if (this.url.toLowerCase().includes('wmts')) {
+      await this.getCapabilities(this.url, 'wmts');
+      BBoxes = this.parseBBOXWMTS(this.xml);
+    }
+    const firstLayer = BBoxes[Object.keys(BBoxes)[0]];
+    let myExtent = new Extent({
+      xmin: firstLayer.xmin,
+      ymin: firstLayer.ymin,
+      xmax: firstLayer.xmax,
+      ymax: firstLayer.ymax,
+      // spatialReference: 4326 // by default wkid 4326
+    });
+    this.view.goTo(myExtent);
+  }
   /**
    * Method to show Active Layers of the map
    * @param {*} elem From the click event
@@ -1956,6 +2118,23 @@ class MenuWidget extends React.Component {
           {elem.title}
         </div>
         <div className="active-layer-options" key={'c_' + elem.id}>
+          {!this.findCheckedDatasetNoServiceToVisualize(elem) && (
+            <span
+              className="map-menu-icon active-layer-extent"
+              onClick={() => this.fullExtent(elem)}
+              onKeyDown={() => this.fullExtent(elem)}
+              tabIndex="0"
+              role="button"
+            >
+              <Popup
+                trigger={
+                  <FontAwesomeIcon icon={['fas', 'expand-arrows-alt']} />
+                }
+                content="Full extent"
+                {...popupSettings}
+              />
+            </span>
+          )}
           {elem.parentElement.dataset.timeseries === 'true' && (
             <span
               className="map-menu-icon active-layer-time"