@eeacms/volto-arcgis-block 0.1.207 → 0.1.209

package/CHANGELOG.md

@@ -4,6 +4,19 @@ 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.209](https://github.com/eea/volto-arcgis-block/compare/0.1.208...0.1.209) - 3 October 2023
+
+#### :hammer_and_wrench: Others
+
+- ready to upload hotpsot bug fixes [ujbolivar - [`0799ca8`](https://github.com/eea/volto-arcgis-block/commit/0799ca8028bec5a15ececdbe4504fbb83c065603)]
+- setting up hotspot bug fixes for latest dev update before pushing [ujbolivar - [`f117e0e`](https://github.com/eea/volto-arcgis-block/commit/f117e0e7ee37e35e7b6ae77549d92d44289d8328)]
+- hotspotstate is updated with activelayers for hotspot widget [ujbolivar - [`b36f4a5`](https://github.com/eea/volto-arcgis-block/commit/b36f4a5362604188497b5bb0d080219d1ebf44b9)]
+### [0.1.208](https://github.com/eea/volto-arcgis-block/compare/0.1.207...0.1.208) - 2 October 2023
+
+#### :hammer_and_wrench: Others
+
+- info widget bug when activate/deactivate LLC layer fixed [masanchez85 - [`6cb51a9`](https://github.com/eea/volto-arcgis-block/commit/6cb51a9739718817bc81c860c95c93aeec5f708b)]
+- CLMS-2349, BBOX fixing and text to hyperlink adaptation [masanchez85 - [`7d8dfa2`](https://github.com/eea/volto-arcgis-block/commit/7d8dfa2e0fdd036dad132ef53494314a13fcca9e)]
 ### [0.1.207](https://github.com/eea/volto-arcgis-block/compare/0.1.206...0.1.207) - 27 September 2023
 
 ### [0.1.206](https://github.com/eea/volto-arcgis-block/compare/0.1.205...0.1.206) - 26 September 2023

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -194,13 +194,21 @@ class AreaWidget extends React.Component {
   }
 
   checkExtent(extent) {
+    let extentToCHeck = new Extent({
+      xmin: -4957196.074387185,
+      xmax: 8896862.428240843,
+      ymin: 2252343.9407090154,
+      ymax: 12114555.078173038,
+      spatialReference: { wkid: 102100 },
+    });
     if (
-      extent.xmin < -31.27 &&
-      extent.xmax > 44.82 &&
-      extent.ymin < 27.64 &&
-      extent.ymax > 80.83
+      extent.xmin < extentToCHeck.xmin &&
+      extent.xmax > extentToCHeck.xmax &&
+      extent.ymin < extentToCHeck.ymin &&
+      extent.ymax > extentToCHeck.ymax
     )
       return true;
+    else return false;
   }
 
   rectanglehandler() {
@@ -565,8 +573,17 @@ class AreaWidget extends React.Component {
                         <FontAwesomeIcon icon={['fas', 'info-circle']} />
                       </span>
                       <div className="drawRectanglePopupWarning-text">
-                        Full dataset's only downloadable through the M2M API,
-                        AOI isn't sent to cart
+                        <a
+                          style={{ color: 'black', cursor: 'pointer' }}
+                          className="drawRectanglePopupWarning"
+                          id="drawRectanglePopupWarning"
+                          href="https://clmsdemo.devel6cph.eea.europa.eu/en/how-to-guides/how-to-download-spatial-data/how-to-download-m2m"
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          To download the full dataset consult the "How to
+                          download M2M" How to guide.
+                        </a>
                       </div>
                     </>
                   )}

package/src/components/MapViewer/HotspotWidget.jsx

@@ -16,6 +16,7 @@ class HotspotWidget extends React.Component {
     //not be showing the basemap panel
     this.state = {
       showMapMenu: false,
+      activeLayers: {},
     };
     this.menuClass =
       'esri-icon-filter esri-widget--button esri-widget esri-interactive';
@@ -183,7 +184,7 @@ class HotspotWidget extends React.Component {
 
   async handleApplyFilter(typeFilter) {
     let typeLegend;
-
+    const activeLayers = Object.keys(this.props.hotspotData['activeLayers']);
     this.props.loadingHandler(true);
 
     if (this.props.selectedLayers) {
@@ -247,8 +248,8 @@ class HotspotWidget extends React.Component {
           .value.match(/\d+/g)
           .map(Number)[0];
 
-        for (let i = 0; i < this.state.activeLayers.length; i++) {
-          let layer = this.state.activeLayers[i];
+        for (let i = 0; activeLayers[i]; i++) {
+          let layer = activeLayers[i];
           if (layer.includes('all_lcc_a_pol')) {
             typeLegend = 'all_lcc_a_pol';
             break;
@@ -283,8 +284,8 @@ class HotspotWidget extends React.Component {
         }
       }
       if (type === 'lc') {
-        for (let i = 0; i < this.state.activeLayers.length; i++) {
-          let layer = this.state.activeLayers[i];
+        for (let i = 0; i < activeLayers.length; i++) {
+          let layer = activeLayers[i];
           if (layer.includes('all_present_lc_a_pol')) {
             typeLegend = 'all_present_lc_a_pol';
             break;
@@ -354,6 +355,7 @@ class HotspotWidget extends React.Component {
       }
       this.layerModelInit();
       this.setBBoxCoordinates(this.dataBBox);
+      //this.setState({ activeLayers: {[type+'_filter']: this.props.selectedLayers[type+'_filter']}})
     });
     //set sessionStorage value to keep the widget open
     sessionStorage.setItem('hotspotFilterApplied', 'true');
@@ -387,7 +389,7 @@ class HotspotWidget extends React.Component {
 
   openMenu() {
     if (this.state.showMapMenu) {
-      this.getKLCNames(this.dataJSONNames, this.selectedArea);
+      //this.getKLCNames(this.dataJSONNames, this.selectedArea);
       this.props.mapViewer.setActiveWidget();
       this.container.current.querySelector('.right-panel').style.display =
         'none';
@@ -401,9 +403,9 @@ class HotspotWidget extends React.Component {
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: false });
     } else {
-      this.getLayerParameters();
-      if (this.getLayerParameters.length !== 0)
-        this.getKLCNames(this.dataJSONNames, this.selectedArea);
+      //this.getLayerParameters();
+      //if (this.getLayerParameters.length !== 0)
+      //this.getKLCNames(this.dataJSONNames, this.selectedArea);
       this.props.mapViewer.setActiveWidget(this);
       this.container.current.querySelector('.right-panel').style.display =
         'flex';
@@ -433,7 +435,6 @@ class HotspotWidget extends React.Component {
         //if (this.selectedArea == null) {
         //  this.selectedArea = data.nodes[0].node.klc_name;
         //}
-        this.getKLCNames(data.nodes, this.selectedArea);
       })
       .catch(function (error) {
         /* console.log('error while getting data'); */
@@ -442,6 +443,7 @@ class HotspotWidget extends React.Component {
 
   renderApplyFilterButton() {
     let typeFilter = [];
+    const activeLayers = Object.keys(this.props.hotspotData['activeLayers']);
 
     if (
       this.container.current.querySelector('.presentLandCoverContainer').style
@@ -456,7 +458,7 @@ class HotspotWidget extends React.Component {
     ) {
       typeFilter.push('lcc');
     }
-    this.state.activeLayers.forEach((layer) => {
+    activeLayers.forEach((layer) => {
       if (layer.match('cop_klc')) {
         typeFilter.push('klc');
       }
@@ -527,6 +529,13 @@ class HotspotWidget extends React.Component {
     var selectBoxLccTime;
     let modularKLCAreas = [];
     let dichotomousKLCAreas = [];
+    let activeLayers = [];
+
+    if (this.props.hotspotData['activeLayers'] === undefined) return;
+
+    activeLayers = Object.keys(this.props.hotspotData['activeLayers']);
+
+    if (selectedOption === undefined) return;
 
     selectBox = document.getElementById('select-klc-area');
     selectBoxLccTime = document.getElementById('select-klc-lccTime');
@@ -612,11 +621,11 @@ class HotspotWidget extends React.Component {
       );
       selectBox.options[0].disabled = true;
     }
-    if (this.state.activeLayers.length) {
-      for (let a = 0; a < this.state.activeLayers.length; a++) {
+    if (activeLayers.length) {
+      for (let a = 0; a < activeLayers.length; a++) {
         if (
-          this.state.activeLayers[a].includes('all_lcc_b_pol') ||
-          this.state.activeLayers[a].includes('all_present_lc_b_pol')
+          activeLayers[a].includes('all_lcc_b_pol') ||
+          activeLayers[a].includes('all_present_lc_b_pol')
         ) {
           for (let i = 0; i < modularKLCAreas.length; i++) {
             let option = modularKLCAreas[i];
@@ -634,13 +643,13 @@ class HotspotWidget extends React.Component {
               if (this.lccYear !== null) {
                 selectBoxLccTime.value = this.lccYear;
               }
+              break; // move break statement inside the if block
             }
-            break;
           }
           break;
         } else if (
-          this.state.activeLayers[a].includes('all_lcc_a_pol') ||
-          this.state.activeLayers[a].includes('all_present_lc_a_pol')
+          activeLayers[a].includes('all_lcc_a_pol') ||
+          activeLayers[a].includes('all_present_lc_a_pol')
         ) {
           for (let i = 0; i < dichotomousKLCAreas.length; i++) {
             let option = dichotomousKLCAreas[i];
@@ -658,12 +667,11 @@ class HotspotWidget extends React.Component {
               if (this.lccYear !== null) {
                 selectBoxLccTime.value = this.lccYear;
               }
+              break; // move break statement inside the if block
             }
-            break;
           }
           break;
         }
-        break;
       }
     }
     if (selectBox.value === 'default') {
@@ -803,25 +811,13 @@ class HotspotWidget extends React.Component {
     this.props.view.ui.add(this.container.current, 'top-right');
     this.layerModelInit();
     this.getBBoxData();
-    // Listen for changes to sessionStorage
-    window.addEventListener('storage', this.handleStorageChange);
   }
 
-  componentDidUpdate(prevState) {
-    if (prevState.activeLayers !== this.state.activeLayers) {
+  componentDidUpdate(prevState, prevProps) {
+    if (prevProps.hotspotData !== this.props.hotspotData) {
       this.getKLCNames(this.dataJSONNames, this.selectedArea);
       this.disableButton();
     }
   }
-
-  componentWillUnmount() {
-    // Remove the event listener when the component is unmounted
-    window.removeEventListener('storage', this.handleStorageChange);
-  }
-
-  handleStorageChange = () => {
-    this.setState({ activeLayers: JSON.parse(sessionStorage.checkedLayers) });
-    this.forceUpdate();
-  };
 }
 export default HotspotWidget;

package/src/components/MapViewer/InfoWidget.jsx

@@ -919,6 +919,7 @@ class InfoWidget extends React.Component {
   render() {
     let noData = true;
     if (this.state.pixelInfo) {
+      /* debugger */
       noData = this.infoData[this.state.layerIndex].data.data
         ? this.infoData[this.state.layerIndex].data.data.values.map((a) => {
             return a[
@@ -927,6 +928,7 @@ class InfoWidget extends React.Component {
           }).length === 0
         : true;
     } else if (this.state.popup) {
+      /* debugger */
       noData = this.infoData[this.state.layerIndex].data.length === 0 && true;
     }
     return (

package/src/components/MapViewer/LegendWidget.jsx

@@ -56,7 +56,9 @@ class LegendWidget extends React.Component {
       if (!(img.complete && img.naturalHeight !== 0)) {
         // If img src returns a broken link
         if (img?.src?.includes('all_present_lc_a_pol')) {
-          img.src = this.urls.all_present_lc_a_pol;
+          img.src = this.props.hotspotData.all_present_lc[
+            'all_present_lc_a_pol'
+          ].FilterStaticImageLegend;
 
           img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent =
             'Dichotomous Present Land Cover in selected hot spots';
@@ -83,7 +85,9 @@ class LegendWidget extends React.Component {
           /*img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent =
             'Modular Present Land Cover in selected hot spots';*/
         } else if (img?.src?.includes('all_lcc_a_pol')) {
-          img.src = this.urls.all_lcc_a_pol;
+          img.src = this.props.hotspotData.all_lcc[
+            'all_lcc_a_pol'
+          ].FilterStaticImageLegend;
 
           img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent =
             'Dichotomous Land Cover Change in selected hot spots';
@@ -172,6 +176,11 @@ class LegendWidget extends React.Component {
   }
 
   imageFixWithTimer() {
+    let newHotspotData = this.props.hotspotData;
+    if (this.props.hotspotData?.layerViewError !== undefined) {
+      delete newHotspotData['layerViewError'];
+    }
+    this.props.hotspotDataHandler(newHotspotData);
     this.setState({ loading: true });
     setTimeout(() => {
       this.brokenLegendImagePatch();
@@ -200,6 +209,11 @@ class LegendWidget extends React.Component {
     });
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.hotspotData?.layerViewError !== undefined) {
+      this.imageFixWithTimer();
+    }
+  }
   /**
    * This method renders the component
    * @returns jsx

package/src/components/MapViewer/MapViewer.jsx

@@ -11,6 +11,7 @@ import { useIntl } from 'react-intl';
 import BasemapWidget from './BasemapWidget';
 import MeasurementWidget from './MeasurementWidget';
 import PrintWidget from './PrintWidget';
+import SwipeWidget from './SwipeWidget';
 import AreaWidget from './AreaWidget';
 import ScaleWidget from './ScaleWidget';
 import LegendWidget from './LegendWidget';
@@ -62,12 +63,20 @@ class MapViewer extends React.Component {
     this.cfgUrls = this.props.cfg.Urls;
     this.userID = null;
     this.loadingHandler = this.loadingHandler.bind(this);
+    this.hotspotDataHandler = this.hotspotDataHandler.bind(this);
   }
 
   loadingHandler(bool) {
     this.setState({ layerLoading: bool });
   }
 
+  hotspotDataHandler(newHotspotData) {
+    if (!this.state.hotspotData) {
+      this.setState({ hotspotData: {} });
+    }
+    this.setState({ hotspotData: newHotspotData });
+  }
+
   activeLayersHandler(newActiveLayers) {
     this.activeLayers = newActiveLayers;
     mapStatus.activeLayers = newActiveLayers;
@@ -235,7 +244,12 @@ class MapViewer extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    if (this.props.Download || (this.location && this.location.search !== '')) {
+    if (
+      this.props.Download ||
+      (this.location &&
+        (this.location.search.includes('product=') ||
+          this.location.search.includes('dataset=')))
+    ) {
       let toc_panel_scrolls = sessionStorage.getItem('toc_panel_scrolls');
       sessionStorage.clear();
       sessionStorage.setItem('toc_panel_scrolls', toc_panel_scrolls);
@@ -293,6 +307,8 @@ class MapViewer extends React.Component {
           mapViewer={this}
           download={this.props.mapviewer_config.Download}
           urls={this.cfgUrls}
+          hotspotData={this.state.hotspotData}
+          hotspotDataHandler={this.hotspotDataHandler}
         />
       );
   }
@@ -308,6 +324,12 @@ class MapViewer extends React.Component {
     if (this.view) return <PrintWidget view={this.view} mapViewer={this} />;
   }
 
+  renderSwipe() {
+    if (this.props.mapviewer_config.Download) return;
+    if (this.view)
+      return <SwipeWidget view={this.view} mapViewer={this} map={this.map} />;
+  }
+
   renderArea() {
     if (this.props.mapviewer_config.Download) return;
     if (this.view) {
@@ -341,6 +363,8 @@ class MapViewer extends React.Component {
           mapCfg={this.mapCfg}
           urls={this.cfgUrls}
           loadingHandler={this.loadingHandler}
+          hotspotData={this.state.hotspotData}
+          hotspotDataHandler={this.hotspotDataHandler}
         />
       );
   }
@@ -361,6 +385,8 @@ class MapViewer extends React.Component {
           activeLayersHandler={this.activeLayersHandler}
           urls={this.cfgUrls}
           loadingHandler={this.loadingHandler}
+          hotspotDataHandler={this.hotspotDataHandler}
+          hotspotData={this.state.hotspotData}
         />
       ); //call conf
   }
@@ -402,6 +428,7 @@ class MapViewer extends React.Component {
             {this.renderLegend()}
             {this.renderMeasurement()}
             {this.renderPrint()}
+            {this.renderSwipe()}
             {this.renderArea()}
             {this.renderPan()}
             {this.renderScale()}

package/src/components/MapViewer/MenuWidget.jsx

@@ -259,7 +259,8 @@ class MenuWidget extends React.Component {
     this.xml = null;
     this.dataBBox = null;
     this.extentInitiated = false;
-
+    this.prepareHotspotLayers = this.prepareHotspotLayers.bind(this);
+    this.activeLayersToHotspotData = this.activeLayersToHotspotData.bind(this);
     // add zoomend listener to map to show/hide zoom in message
     this.view.watch('stationary', (isStationary) => {
       let snowAndIceInSessionStorage = sessionStorage.getItem('snowAndIce');
@@ -351,6 +352,56 @@ class MenuWidget extends React.Component {
     );
   }
 
+  stringMatch(str1, str2) {
+    let matchingPart = '';
+    for (let i = 0; i < str1.length; i++) {
+      if (str1[i] === str2[i]) {
+        matchingPart += str1[i];
+      } else {
+        break;
+      }
+    }
+    return matchingPart;
+  }
+
+  prepareHotspotLayers() {
+    this.compCfg.forEach((component) => {
+      const hotspotProduct = component.Products.find(
+        (product) => product.ProductId === 'd764e020485a402598551fa461bf1db2',
+      );
+
+      if (hotspotProduct !== undefined) {
+        const datasetObj = {};
+        hotspotProduct.Datasets.forEach((dataset) => {
+          const layerObj = {};
+          dataset.Layer.forEach((layer) => {
+            layerObj[layer.LayerId] = layer;
+          });
+          let key;
+          if (dataset.Layer.length === 1) {
+            key = dataset.Layer[0].LayerId;
+          } else if (dataset.Layer.length === 2) {
+            key = this.stringMatch(
+              dataset.Layer[0].LayerId,
+              dataset.Layer[1].LayerId,
+            );
+            if (key.endsWith('_')) {
+              key = key.slice(0, -1);
+            }
+          } else if (dataset.Layer.length > 2) {
+            key = dataset.DatasetTitle.toLowerCase()
+              .split(' ')
+              .join('_')
+              .split('_(')[0]
+              .split('_for')[0];
+          }
+          datasetObj[key] = layerObj;
+        });
+        return this.props.hotspotDataHandler(datasetObj);
+      }
+    });
+  }
+
   // get custom TMS layer JSON
   getTMSLayersJSON() {
     let promises = []; // download JSON file calls
@@ -589,6 +640,7 @@ class MenuWidget extends React.Component {
     loadCss();
     await this.loader();
     await this.getTMSLayersJSON();
+    this.prepareHotspotLayers();
     this.props.view.ui.add(this.container.current, 'top-left');
     if (this.props.download) {
       setTimeout(() => {
@@ -1542,6 +1594,8 @@ class MenuWidget extends React.Component {
    */
 
   checkForHotspots(elem, productContainerId) {
+    if (!(elem.id.includes('all_present') || elem.id.includes('all_lcc')))
+      return;
     let elemContainer = document
       .getElementById(elem.id)
       .closest('.ccl-form-group');
@@ -1718,15 +1772,15 @@ class MenuWidget extends React.Component {
       .getElementById(parentId)
       .closest('.map-menu-product-dropdown')
       .getAttribute('productid');
-    /*let modularLC;
-    if (elem.id.includes('all_present_lc_b_pol')) {
-      modularLC = elem.id;
-    }*/
 
     let group = this.getGroup(elem);
     if (elem.checked) {
       this.props.loadingHandler(true);
-      if (this.props.download || this.location.search !== '') {
+      if (
+        this.props.download ||
+        this.location.search.includes('product=') ||
+        this.location.search.includes('dataset=')
+      ) {
         if (
           this.extentInitiated === false &&
           productContainerId !== 'd764e020485a402598551fa461bf1db2' // hotspot
@@ -1747,13 +1801,7 @@ class MenuWidget extends React.Component {
         } else {
           this.map.add(this.layers[elem.id]);
         }
-      } /*else if (this.layers[modularLC]) {
-        let previousElem = document
-          .getElementById(elem.id)
-          .closest('.ccl-form-group')
-          .previousElementSibling.querySelector('input');
-        this.map.add(this.layers[previousElem.id]);
-      } */ else {
+      } else {
         this.map.add(this.layers[elem.id]);
       }
       if (this.layers[elem.id] === undefined) return;
@@ -1783,13 +1831,25 @@ class MenuWidget extends React.Component {
       if (nuts) {
         this.map.reorder(nuts, this.map.layers.items.length + 1);
       }
-      this.props.view.whenLayerView(this.layers[elem.id]).then((layerView) => {
-        layerView.watch('updating', (isUpdating) => {
-          if (!isUpdating) {
-            this.props.loadingHandler(false);
-          }
+      this.props.view
+        .whenLayerView(this.layers[elem.id])
+        .then((layerView) => {
+          layerView.watch('updating', (isUpdating) => {
+            if (!isUpdating) {
+              this.props.loadingHandler(false);
+            } else {
+            }
+          });
+        })
+        .catch((error) => {
+          let newHotspotData = this.props.hotspotData;
+          let LayerId = elem.id.replace(/\d+\D*/g, '').slice(0, -1);
+          let errObj = {};
+          errObj[LayerId] = error;
+          newHotspotData['layerViewError'] = errObj;
+          this.props.hotspotDataHandler(newHotspotData);
+          this.props.loadingHandler(false);
         });
-      });
       this.checkForHotspots(elem, productContainerId);
     } else {
       sessionStorage.removeItem('downloadButtonClicked');
@@ -1815,10 +1875,44 @@ class MenuWidget extends React.Component {
     ) {
       this.toggleCustomLegendItem(this.layers[elem.id]);
     }
+    this.activeLayersToHotspotData(elem.id);
     // update DOM
-    this.setState({});
+    //this.setState({});
   }
 
+  activeLayersToHotspotData(layerId) {
+    let layer = Object.entries(this.layers).find(
+      ([key, value]) => key === layerId,
+    )?.[1];
+    let hotspotLayersIds = [];
+    let updatedActiveLayers = this.props.hotspotData['activeLayers'] || {};
+    let newHotspotData = this.props.hotspotData;
+
+    Object.keys(this.props.hotspotData).forEach((key) => {
+      let dataset = this.props.hotspotData[key];
+      Object.keys(dataset).forEach((layerKey) => {
+        hotspotLayersIds.push(layerKey);
+      });
+    });
+
+    for (let i = 0; i < hotspotLayersIds.length; i++) {
+      const id = hotspotLayersIds[i];
+      if (!layerId.includes(id)) continue;
+      else if (layerId.includes(id)) {
+        if (layer.visible === true) {
+          updatedActiveLayers[id] = layer;
+        } else if (layer.visible === false) {
+          if (updatedActiveLayers[id]) {
+            delete updatedActiveLayers[id];
+          }
+        }
+        break;
+      }
+    }
+
+    newHotspotData['activeLayers'] = updatedActiveLayers;
+    return this.props.hotspotDataHandler(newHotspotData);
+  }
   //CLMS-1634 - This shows the zoom message for the checked dataset under the Snow and Ice Parameters Products dropdown only.
 
   showZoomMessageOnDataset(dataset) {
@@ -2849,16 +2943,15 @@ class MenuWidget extends React.Component {
         layers.push(layer);
       }
     });
+    if (layers.length === 0 && document.querySelector('.info-container')) {
+      document.querySelector('.info-container').style.display = 'none';
+    } else if (layers.length > 0) {
+      document.querySelector('.info-container').style.display = 'flex';
+    }
     if (!sessionStorage.getItem('hotspotFilterApplied')) {
-      if (layers.length === 0 && document.querySelector('.info-container')) {
-        this.props.mapViewer.closeActiveWidget();
-        document.querySelector('.info-container').style.display = 'none';
-      } else if (layers.length > 0) {
-        document.querySelector('.info-container').style.display = 'flex';
-      }
+      this.props.mapViewer.closeActiveWidget();
     }
     this.renderHotspot();
-    /**/
   }
 
   getLayerTitle(layer) {
@@ -3246,10 +3339,8 @@ class MenuWidget extends React.Component {
   deleteFilteredLayer(layer) {
     let layers = this.layers;
     if (layers['lcc_filter'] && layer.includes('all_lcc')) {
-      layers['lcc_filter'].visible = false;
       delete layers['lcc_filter'];
     } else if (layers['lc_filter'] && layer.includes('all_present_lc')) {
-      layers['lc_filter'].visible = false;
       delete layers['lc_filter'];
     } else if (layers['klc_filter'] && layer.includes('cop_klc')) {
       layers['klc_filter'].visible = false;

package/src/components/MapViewer/SwipeWidget.jsx

@@ -0,0 +1,238 @@
+import React, { createRef } from 'react';
+//import "@arcgis/core/assets/esri/css/main.css";
+//import "./css/ArcgisMap.css";
+import { loadModules } from 'esri-loader';
+var Swipe;
+
+class SwipeWidget extends React.Component {
+  /**
+   * Creator of the Measurement 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.menuClass =
+      'esri-icon-swap esri-widget--button esri-widget esri-interactive';
+    this.titleMaxLength = 50;
+    this.authorMaxLength = 60;
+    this.textMaxLength = 180;
+    this.sizeMax = 15000;
+    this.dpiMax = 1200;
+    this.scaleMax = 600000000;
+    this.map = this.props.map;
+    this.visibleSavedLayers = [];
+  }
+
+  loader() {
+    return loadModules(['esri/widgets/Swipe']).then(([_Swipe]) => {
+      Swipe = _Swipe;
+    });
+  }
+
+  /**
+   * 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) {
+      // CLOSE
+      this.props.mapViewer.setActiveWidget();
+      this.container.current
+        .querySelector('.esri-widget--button')
+        .classList.remove('active-widget');
+      document
+        .querySelector('.esri-ui-top-right.esri-ui-corner')
+        .classList.remove('show-panel');
+      this.loadVisibleLayers();
+      this.swipe.leadingLayers.removeAll();
+      this.swipe.trailingLayers.removeAll();
+      this.props.view.ui.remove(this.swipe);
+      this.container.current.querySelector('.right-panel').style.display =
+        'none';
+      this.setState({ showMapMenu: false });
+    } else {
+      // OPEN
+      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.loadOptions();
+      this.map.layers.on('change', () => {
+        this.loadVisibleLayers();
+        this.swipe.leadingLayers.removeAll();
+        this.swipe.trailingLayers.removeAll();
+        this.props.view.ui.remove(this.swipe);
+        this.loadOptions();
+      });
+      this.setState({ showMapMenu: true });
+    }
+  }
+  /**
+   * This method is executed after the rener method is executed
+   */
+  async componentDidMount() {
+    this.props.view.ui.add(this.container.current, 'top-right');
+    await this.loader();
+    this.swipe = new Swipe({
+      view: this.props.view,
+      position: 50,
+    });
+  }
+
+  getLayerTitle(layer) {
+    let title;
+    if (layer.url.toLowerCase().includes('wmts')) {
+      title = layer._wmtsTitle;
+    } else {
+      if (layer.sublayers) {
+        title = layer.sublayers.items[0].title;
+      } else if (layer.activeLayer) {
+        title = layer.activeLayer.title;
+      } else {
+        title = layer.title;
+      }
+    }
+    return title;
+  }
+  loadOptions() {
+    var selectLeadingLayer = document.getElementById('select-leading-layer');
+    var selectTrailingLayer = document.getElementById('select-trailing-layer');
+    this.removeOptions(selectLeadingLayer);
+    this.removeOptions(selectTrailingLayer);
+    selectLeadingLayer.options.add(
+      new Option('Select a leading layer', 'default', true, true),
+    );
+    selectLeadingLayer.options[0].disabled = true;
+    selectTrailingLayer.options.add(
+      new Option('Select a trailing layer', 'default', true, true),
+    );
+    selectTrailingLayer.options[0].disabled = true;
+    this.map.layers.forEach((layer) => {
+      selectLeadingLayer.options.add(
+        new Option(this.getLayerTitle(layer), layer.id, layer.id),
+      );
+      selectTrailingLayer.options.add(
+        new Option(this.getLayerTitle(layer), layer.id, layer.id),
+      );
+    });
+  }
+  removeOptions(selectElement) {
+    if (selectElement.options.length > 0) {
+      var i,
+        L = selectElement.options.length - 1;
+      for (i = L; i >= 0; i--) {
+        selectElement.remove(i);
+      }
+    }
+  }
+  renderApplySwipeButton() {
+    if (this.visibleSavedLayers.length === 0) {
+      this.saveVisibleLayers();
+    }
+    this.props.view.ui.remove(this.swipe);
+    this.props.view.ui.add(this.swipe);
+    let selectedLeadingLayer = document.getElementById('select-leading-layer')
+      .value;
+    let selectedTrailingLayer = document.getElementById('select-trailing-layer')
+      .value;
+    this.swipe.leadingLayers.removeAll();
+    this.swipe.trailingLayers.removeAll();
+    this.map.layers.forEach((layer) => {
+      layer.visible = false;
+      if (layer.id === selectedLeadingLayer) {
+        layer.visible = true;
+        this.swipe.leadingLayers.add(layer);
+      }
+      if (layer.id === selectedTrailingLayer) {
+        layer.visible = true;
+        this.swipe.trailingLayers.add(layer);
+      }
+    });
+  }
+  saveVisibleLayers() {
+    this.visibleSavedLayers.push('default');
+    this.map.layers.forEach((layer) => {
+      if (layer.visible) {
+        this.visibleSavedLayers.push(layer.id);
+      }
+    });
+  }
+  loadVisibleLayers() {
+    this.map.layers.forEach((layer) => {
+      this.visibleSavedLayers.forEach((visibleLayerId) => {
+        if (layer.id === visibleLayerId) {
+          layer.visible = true;
+        }
+      });
+    });
+    this.visibleSavedLayers = [];
+  }
+  /**
+   * This method renders the component
+   * @returns jsx
+   */
+  render() {
+    return (
+      <>
+        <div ref={this.container} className="swipe-container">
+          <div tooltip="Swipe" direction="left" type="widget">
+            <div
+              className={this.menuClass}
+              id="map_swipe_button"
+              aria-label="Swipe"
+              onClick={this.openMenu.bind(this)} //aqui deberían ir ocultar panel y mas abajo cerrar (pasar a 3d)
+              onKeyDown={this.openMenu.bind(this)}
+              tabIndex="0"
+              role="button"
+            ></div>
+          </div>
+          {/* Al final el IF lo añadiremos aqui en estos OpenMenu */}
+          <div className="right-panel">
+            <div className="right-panel-header">
+              <span>Swipe</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="swipe-panel">
+                <span>Leading Layer</span>
+                <select id="select-leading-layer" class="esri-select"></select>
+                <br></br>
+                <span>Trailing Layer</span>
+                <select id="select-trailing-layer" class="esri-select"></select>
+                <br></br>
+                <button
+                  id="applySwipeButton"
+                  class="esri-button"
+                  onClick={() => this.renderApplySwipeButton()}
+                >
+                  Swipe
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
+}
+
+export default SwipeWidget;

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

@@ -1371,3 +1371,16 @@ div.map-container.popup-block {
   align-items:center;
 }
 */
+
+/*Swipe*/
+
+.swipe-container .esri-button {
+  border: none;
+  background-color: #a0b128;
+}
+
+.swipe-container .esri-button:hover {
+  border-color: #a0b128;
+  background-color: white;
+  color: #a0b128;
+}