@eeacms/volto-arcgis-block 0.1.255 → 0.1.257

package/CHANGELOG.md

@@ -4,6 +4,20 @@ 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.257](https://github.com/eea/volto-arcgis-block/compare/0.1.256...0.1.257) - 7 February 2024
+
+#### :hammer_and_wrench: Others
+
+- Prettier [manuelmartinezbilbomatica - [`00aa2e9`](https://github.com/eea/volto-arcgis-block/commit/00aa2e921b17404b22c848a7bd3d057328555c5e)]
+- [FEAT] Info widget queries hotspot services [manuelmartinezbilbomatica - [`b9354f5`](https://github.com/eea/volto-arcgis-block/commit/b9354f5ba3e2a6ab7ea88e909cc693c0d3a53aee)]
+- Version format issue solved [manuelmartinezbilbomatica - [`7d967cc`](https://github.com/eea/volto-arcgis-block/commit/7d967cc3b8e0f07d6638d0825869db84fc205db0)]
+- Format issue solved by addin if statement with 'application/json'. Why HotStpot capabilities are not read will be solved later [manuelmartinezbilbomatica - [`3471847`](https://github.com/eea/volto-arcgis-block/commit/34718476b5414389d1c85e41cf68566e9765202e)]
+### [0.1.256](https://github.com/eea/volto-arcgis-block/compare/0.1.255...0.1.256) - 31 January 2024
+
+#### :hammer_and_wrench: Others
+
+- CLMS-2887 (Change): package.json [Urkorue - [`dad702d`](https://github.com/eea/volto-arcgis-block/commit/dad702da1447015b0d73a46463909d92a34b6297)]
+- CLMS-2887 (Change): Improvements for NUTS and Country selection [Urkorue - [`9dcbccd`](https://github.com/eea/volto-arcgis-block/commit/9dcbccd498d9ce3715cd8d882692a0f7ebab5f23)]
 ### [0.1.255](https://github.com/eea/volto-arcgis-block/compare/0.1.254...0.1.255) - 31 January 2024
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -124,21 +124,49 @@ class AreaWidget extends React.Component {
       this.container.current.querySelector('input:checked').click();
     }
   }
+  nutsRadioButton(e) {
+    if (e.target.value === 'nuts') {
+      if (
+        !document.getElementById('download_area_select_nuts2').checked &&
+        !document.getElementById('download_area_select_nuts3').checked
+      ) {
+        document.getElementById('download_area_select_nuts1').checked = true;
+        this.loadNutsService('nuts1', [1, 2]);
+      }
+    }
+    if (
+      e.target.value === 'nuts1' ||
+      e.target.value === 'nuts2' ||
+      e.target.value === 'nuts3'
+    ) {
+      document.getElementById('download_area_select_nuts').checked = true;
+    }
+    if (e.target.value === 'nuts0' || e.target.value === 'area') {
+      document.getElementById('download_area_select_nuts1').checked = false;
+      document.getElementById('download_area_select_nuts2').checked = false;
+      document.getElementById('download_area_select_nuts3').checked = false;
+    }
+  }
   nuts0handler(e) {
     this.loadNutsService(e.target.value, [0]);
+    this.loadCountriesService(e.target.value);
+    this.nutsRadioButton(e);
   }
   nuts1handler(e) {
     this.loadNutsService(e.target.value, [1, 2]);
+    this.nutsRadioButton(e);
   }
   nuts2handler(e) {
     this.loadNutsService(e.target.value, [3, 4, 5]);
+    this.nutsRadioButton(e);
   }
   nuts3handler(e) {
     this.loadNutsService(e.target.value, [6, 7, 8]);
+    this.nutsRadioButton(e);
   }
-  countriesHandler(e) {
-    this.loadCountriesService(e.target.value);
-  }
+  // countriesHandler(e) {
+  //   this.loadCountriesService(e.target.value);
+  // }
 
   loadNutsService(id, levels) {
     this.clearWidget();
@@ -164,7 +192,6 @@ class AreaWidget extends React.Component {
   }
 
   loadCountriesService(id) {
-    this.clearWidget();
     document.querySelector('.esri-attribution__powered-by').style.display =
       'flex';
     var layer = new FeatureLayer({
@@ -205,7 +232,7 @@ class AreaWidget extends React.Component {
     }
   }
 
-  rectanglehandler() {
+  rectanglehandler(event) {
     this.clearWidget();
     window.document.querySelector('.pan-container').style.display = 'flex';
     var fillSymbol = {
@@ -310,6 +337,7 @@ class AreaWidget extends React.Component {
     this.setState({
       ShowGraphics: drawGraphics,
     });
+    this.nutsRadioButton(event);
   }
   clearWidget() {
     window.document.querySelector('.pan-container').style.display = 'none';
@@ -420,14 +448,9 @@ class AreaWidget extends React.Component {
   }
 
   async initFMI() {
-    let currentUrl = window.location.href.split('.eu');
-    let fetchUrl = '';
-    if (currentUrl[0] === 'https://clmsdemo.devel6cph.eea') {
-      fetchUrl =
-        'https://clmsdemo.devel6cph.eea.europa.eu/++api++/@anon-registry';
-    } else {
-      fetchUrl = 'https://land.copernicus.eu/++api++/@anon-registry';
-    }
+    let fetchUrl =
+      window.location.href.replace(window.location.pathname.substring(0), '') +
+      '/++api++/@anon-registry';
     try {
       let nutsResponse = await fetch(
         fetchUrl + '/clms.downloadtool.fme_config_controlpanel.nuts_service',
@@ -499,11 +522,7 @@ class AreaWidget extends React.Component {
             )}
             <div className="right-panel-content">
               <div className="area-panel">
-                <div className="area-header">
-                  For areas of interest in the EU, EFTA, candidate countries or
-                  the United Kingdom: choose NUTS classification or draw a
-                  rectangle on the map.
-                </div>
+                <div className="area-header">Select by country or region</div>
                 <div className="ccl-form">
                   <fieldset className="ccl-fieldset">
                     <div className="ccl-form-group">
@@ -520,80 +539,92 @@ class AreaWidget extends React.Component {
                         className="ccl-form-radio-label"
                         htmlFor="download_area_select_nuts0"
                       >
-                        <span>NUTS 0</span>
+                        <span>By country</span>
                       </label>
                     </div>
                     <div className="ccl-form-group">
                       <input
                         type="radio"
-                        id="download_area_select_nuts1"
+                        id="download_area_select_nuts"
                         name="downloadAreaSelect"
-                        value="nuts1"
-                        className="ccl-checkbox ccl-required ccl-form-check-input"
-                        onClick={this.nuts1handler.bind(this)}
-                      ></input>
-                      <label
-                        className="ccl-form-radio-label"
-                        htmlFor="download_area_select_nuts1"
-                      >
-                        <span>NUTS 1</span>
-                      </label>
-                    </div>
-                    <div className="ccl-form-group">
-                      <input
-                        type="radio"
-                        id="download_area_select_nuts2"
-                        name="downloadAreaSelect"
-                        value="nuts2"
-                        className="ccl-checkbox ccl-required ccl-form-check-input"
-                        onClick={this.nuts2handler.bind(this)}
-                      ></input>
-                      <label
-                        className="ccl-form-radio-label"
-                        htmlFor="download_area_select_nuts2"
-                      >
-                        <span>NUTS 2</span>
-                      </label>
-                    </div>
-                    <div className="ccl-form-group">
-                      <input
-                        type="radio"
-                        id="download_area_select_nuts3"
-                        name="downloadAreaSelect"
-                        value="nuts3"
-                        className="ccl-radio ccl-required ccl-form-check-input"
-                        onClick={this.nuts3handler.bind(this)}
+                        value="nuts"
+                        className="ccl-checkbox cl-required ccl-form-check-input"
+                        onClick={this.nutsRadioButton.bind(this)}
                       ></input>
                       <label
                         className="ccl-form-radio-label"
-                        htmlFor="download_area_select_nuts3"
+                        htmlFor="download_area_select_nuts"
                       >
-                        <span>NUTS 3</span>
+                        <span>By NUTS</span>
+                        <a
+                          href={
+                            'https://land.copernicus.eu/en/faq/map-viewer/what-are-nuts'
+                          }
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          onClick={(e) => e.stopPropagation()}
+                          onKeyDown={(e) => e.stopPropagation()}
+                        >
+                          <span className="map-menu-icon nuts-menu-icon">
+                            <FontAwesomeIcon icon={['fa', 'info-circle']} />
+                          </span>
+                        </a>
                       </label>
                     </div>
-                    <div className="ccl-form-group">
-                      <div>
-                        For areas of interest outside{' '}
-                        <b>the above ones, choose a country or</b> draw a
-                        rectangle on the map.
+                    <div className="nuts-form">
+                      <div className="ccl-form-group">
+                        <input
+                          type="radio"
+                          id="download_area_select_nuts1"
+                          name="downloadAreaSelectNuts"
+                          value="nuts1"
+                          className="ccl-checkbox ccl-required ccl-form-check-input"
+                          onClick={this.nuts1handler.bind(this)}
+                        ></input>
+                        <label
+                          className="ccl-form-radio-label"
+                          htmlFor="download_area_select_nuts1"
+                        >
+                          <span>NUTS 1 (major socio-economic regions)</span>
+                        </label>
+                      </div>
+                      <div className="ccl-form-group">
+                        <input
+                          type="radio"
+                          id="download_area_select_nuts2"
+                          name="downloadAreaSelectNuts"
+                          value="nuts2"
+                          className="ccl-checkbox ccl-required ccl-form-check-input"
+                          onClick={this.nuts2handler.bind(this)}
+                        ></input>
+                        <label
+                          className="ccl-form-radio-label"
+                          htmlFor="download_area_select_nuts2"
+                        >
+                          <span>NUTS 2 (basic regions)</span>
+                        </label>
+                      </div>
+                      <div className="ccl-form-group">
+                        <input
+                          type="radio"
+                          id="download_area_select_nuts3"
+                          name="downloadAreaSelectNuts"
+                          value="nuts3"
+                          className="ccl-radio ccl-required ccl-form-check-input"
+                          onClick={this.nuts3handler.bind(this)}
+                        ></input>
+                        <label
+                          className="ccl-form-radio-label"
+                          htmlFor="download_area_select_nuts3"
+                        >
+                          <span>NUTS 3 (small regions)</span>
+                        </label>
                       </div>
-                      <br></br>
-                      <input
-                        type="radio"
-                        id="download_area_select_countries"
-                        name="downloadAreaSelect"
-                        value="countries"
-                        className="ccl-radio ccl-required ccl-form-check-input"
-                        onClick={this.countriesHandler.bind(this)}
-                      ></input>
-                      <label
-                        className="ccl-form-radio-label"
-                        htmlFor="download_area_select_countries"
-                      >
-                        <span>Country</span>
-                      </label>
                     </div>
                     <br></br>
+                    <div className="rectangle-header">
+                      Draw a rectangle on the map
+                    </div>
                     <div className="ccl-form-group">
                       <input
                         type="radio"
@@ -607,13 +638,10 @@ class AreaWidget extends React.Component {
                         className="ccl-form-radio-label"
                         htmlFor="download_area_select_rectangle"
                       >
-                        <span>Draw by rectangle</span>
-                        <div>
-                          (Click and drag your mouse on the map. As you move
-                          your mouse, you’ll see the area of the rectangle next
-                          to your cursor. Finish the rectangle by releasing your
-                          mouse.)
-                        </div>
+                        <span>
+                          Click and drag your mouse on the map to select your
+                          area of interest
+                        </span>
                       </label>
                     </div>
                   </fieldset>

package/src/components/MapViewer/InfoWidget.jsx

@@ -390,8 +390,9 @@ class InfoWidget extends React.Component {
     let layerId = this.getLayerName(layer);
     let url = layer.featureInfoUrl ? layer.featureInfoUrl : layer.url;
     return this.wmsCapabilities(url).then((xml) => {
+      // let version = this.parseCapabilities(xml, 'wms_capabilities')[0].attributes['version'];
       let version = this.parseCapabilities(xml, 'wms_capabilities')[0]
-        .attributes['version'];
+        .attributes['version'].nodeValue;
       let format = this.parseFormat(xml, layerId);
       let times = '';
       let nTimes = 1;
@@ -419,9 +420,10 @@ class InfoWidget extends React.Component {
             this.props.view.extent.ymax,
           HEIGHT: this.props.view.height,
           WIDTH: this.props.view.width,
-          X: event.screenPoint.x,
-          Y: event.screenPoint.y,
+          X: Math.round(event.screenPoint.x),
+          Y: Math.round(event.screenPoint.y),
           QUERY_LAYERS: layerId,
+          LAYERS: layerId,
           INFO_FORMAT: format,
           TIME: times ? times[0] + '/' + times[nTimes - 1] : '',
           FEATURE_COUNT: '' + nTimes,
@@ -463,19 +465,26 @@ class InfoWidget extends React.Component {
 
   parseCapabilities(xml, tag) {
     let result = xml.getElementsByTagName(tag);
+
     return result;
   }
 
   parseFormat(xml) {
-    let formats = Array.from(
-      Array.from(this.parseCapabilities(xml, 'getFeatureInfo')).map(
-        (f) => f.children,
-      )[0],
-    ).map((v) => v.textContent);
-    let format = formats.filter((v) => v.includes('json'))[0];
-    if (!format) format = formats.filter((v) => v.includes('html'))[0];
-    if (!format) format = formats.filter((v) => v.includes('text/xml'))[0];
-    if (!format) format = formats[0];
+    // console.log(parseCapabilities(xml, 'getFeatureInfo'));
+    let getFeatureInfo_node = this.parseCapabilities(xml, 'getFeatureInfo');
+    let format = false;
+    if (getFeatureInfo_node.length > 0) {
+      let formats = Array.from(
+        Array.from(getFeatureInfo_node).map((f) => f.children)[0],
+      ).map((v) => v.textContent);
+
+      format = formats.filter((v) => v.includes('json'))[0];
+      if (!format) format = formats.filter((v) => v.includes('html'))[0];
+      if (!format) format = formats.filter((v) => v.includes('text/xml'))[0];
+      if (!format) format = formats[0];
+    } else {
+      format = 'application/json';
+    }
     return format;
   }
 

package/src/components/MapViewer/MenuWidget.jsx

@@ -701,6 +701,16 @@ class MenuWidget extends React.Component {
               }
             }
           }
+          layers.forEach((layer, index) => {
+            let activeLayers = document.querySelectorAll('.active-layer');
+            activeLayers.forEach((item) => {
+              if (layer === item.getAttribute('layer-id')) {
+                item.parentElement.insertBefore(item, activeLayers[index]);
+              }
+            });
+          });
+          this.layersReorder();
+          this.saveLayerOrder();
         }
       });
     });

package/src/components/MapViewer/css/ArcgisMap.css

@@ -321,6 +321,37 @@ div.esri-popover
   margin-bottom: 1rem;
 }
 
+.area-header {
+  padding: 1rem;
+  background-color: rgba(160, 177, 40, 0.5);
+  font-weight: bold;
+}
+
+.rectangle-header {
+  padding-top: 0.5rem;
+  border-width: 2px;
+  border-style: solid none none none;
+  border-color: #a0b128;
+  margin-bottom: 1rem;
+  font-weight: bold;
+}
+
+.area-panel .ccl-form {
+  padding-bottom: 0.5rem !important;
+  border-width: 2px;
+  border-style: none none solid none;
+  border-color: #a0b128;
+  margin-left: 1rem !important;
+}
+
+.nuts-form {
+  margin-top: 0.5rem;
+  margin-left: 2rem;
+}
+
+label.ccl-form-radio-label span.nuts-menu-icon {
+  margin-left: 9rem;
+}
 /* Left menu */
 .map-menu {
   position: relative;

package/src/components/UseCasesMapViewer/UseCasesMapViewer.jsx

@@ -198,14 +198,9 @@ class UseCasesMapViewer extends React.Component {
     this.setState(() => ({ useCaseLevel: 1 }));
   }
   async initFMI() {
-    let currentUrl = window.location.href.split('.eu');
-    let fetchUrl = '';
-    if (currentUrl[0] === 'https://clmsdemo.devel6cph.eea') {
-      fetchUrl =
-        'https://clmsdemo.devel6cph.eea.europa.eu/++api++/@anon-registry';
-    } else {
-      fetchUrl = 'https://land.copernicus.eu/++api++/@anon-registry';
-    }
+    let fetchUrl =
+      window.location.href.replace(window.location.pathname.substring(0), '') +
+      '/++api++/@anon-registry';
     try {
       let highlightResponse = await fetch(
         fetchUrl + this.serviceCfg.Highlight_service,