@eeacms/volto-arcgis-block 0.1.220 → 0.1.221

package/CHANGELOG.md

@@ -4,6 +4,17 @@ 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.221](https://github.com/eea/volto-arcgis-block/compare/0.1.220...0.1.221) - 25 October 2023
+
+#### :hammer_and_wrench: Others
+
+- final lint check before push [ujbolivar - [`f6835d2`](https://github.com/eea/volto-arcgis-block/commit/f6835d2ed53d0e600918a05b6a6da1f064395968)]
+- hotspot tabs swaps order based on active layers tab order [ujbolivar - [`4989ddb`](https://github.com/eea/volto-arcgis-block/commit/4989ddb4ebbb6b6097d6d5ebb8aeb66cb132f924)]
+- activelayers are arranged following menu order. Position of dragged layers is preserved [ujbolivar - [`d4cd100`](https://github.com/eea/volto-arcgis-block/commit/d4cd10054bc33a7772a0acbaa059e6e215743c67)]
+- mods done to hotspot and legends again to cover new edgecases [ujbolivar - [`957971f`](https://github.com/eea/volto-arcgis-block/commit/957971fc619283d2ebb7317cf519bacbfebec44e)]
+- hotspot and legend functions working properly [ujbolivar - [`21cafd8`](https://github.com/eea/volto-arcgis-block/commit/21cafd83333bbb4495f276e6cbc7c537b7d26470)]
+- Completed: CLMS-2678, CLMS-2663, CLMS-1985, CLMS-2400, CLMS-2678 [ujbolivar - [`fd78b38`](https://github.com/eea/volto-arcgis-block/commit/fd78b381de7772cff70eef7fb480a4af5f03e539)]
+- hotspot layers are added and removed correctly, still needs a bit of fine tuning, but definitely on track now [ujbolivar - [`1835b08`](https://github.com/eea/volto-arcgis-block/commit/1835b08daa1f4d9ce26d103d783b944e074059da)]
 ### [0.1.220](https://github.com/eea/volto-arcgis-block/compare/0.1.219...0.1.220) - 24 October 2023
 
 ### [0.1.219](https://github.com/eea/volto-arcgis-block/compare/0.1.218...0.1.219) - 24 October 2023

package/package.json

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

package/src/components/MapViewer/HotspotWidget.jsx

@@ -17,6 +17,10 @@ class HotspotWidget extends React.Component {
     this.state = {
       showMapMenu: false,
       activeLayers: {},
+      selectedArea: null,
+      lcYear: null,
+      lccYear: null,
+      activeLayersArray: [],
     };
     this.menuClass =
       'esri-icon-filter esri-widget--button esri-widget esri-interactive';
@@ -40,12 +44,15 @@ class HotspotWidget extends React.Component {
     this.layerModelInit = this.layerModelInit.bind(this);
     this.getBBoxData = this.getBBoxData.bind(this);
     this.handleApplyFilter = this.handleApplyFilter.bind(this);
+    this.filteredLayersToHotspotData = this.filteredLayersToHotspotData.bind(
+      this,
+    );
     this.mapCfg = this.props.mapCfg;
-    //this.getLayerParameters();
     this.selectedArea = null;
     this.lcYear = null;
     this.lccYear = null;
     this.urls = this.props.urls;
+    this.layers = this.props.selectedLayers;
   }
 
   loader() {
@@ -184,65 +191,24 @@ 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) {
-      //Clear previous selections when applying a new filter
-      var currentLccLayer = Object.keys(this.props.selectedLayers).find((e) =>
-        e.includes('lcc_filter'),
-      );
-      if (currentLccLayer) delete this.props.selectedLayers[currentLccLayer];
-
-      var currentLcLayer = Object.keys(this.props.selectedLayers).find((e) =>
-        e.includes('lc_filter'),
-      );
-      if (currentLcLayer) delete this.props.selectedLayers[currentLcLayer];
-
-      var currentKlcLayer = Object.keys(this.props.selectedLayers).find((e) =>
-        e.includes('klc_filter'),
-      );
-      if (currentKlcLayer) delete this.props.selectedLayers[currentKlcLayer];
+    let activeLayers =
+      this.props.hotspotData && this.props.hotspotData['activeLayers']
+        ? Object.keys(this.props.hotspotData['activeLayers'])
+        : [];
+    let filteredLayers =
+      this.props.hotspotData && this.props.hotspotData['filteredLayers']
+        ? Object.keys(this.props.hotspotData['filteredLayers'])
+        : [];
+    let layersToAdd = {};
 
-      var currentPaLayer = Object.keys(this.props.selectedLayers).find((e) =>
-        e.includes('pa_filter'),
-      );
-      if (currentPaLayer) delete this.props.selectedLayers[currentPaLayer];
-
-      var currentLcckey = Object.keys(this.props.selectedLayers).find((e) =>
-        e.includes('all_lcc'),
-      );
-      var currentLckey = Object.keys(this.props.selectedLayers).find((e) =>
-        e.includes('all_present_lc'),
-      );
-      var currentKlckey = Object.keys(this.props.selectedLayers).find((e) =>
-        e.includes('cop_klc'),
-      );
-      var currentPakey = Object.keys(this.props.selectedLayers).find((e) =>
-        e.includes('protected_areas'),
-      );
-      if (currentLcckey) {
-        //this.props.map.remove(this.props.selectedLayers[currentLcckey]);
-        this.props.selectedLayers[currentLcckey].visible = false;
-      }
-      if (currentLckey) {
-        //this.props.map.remove(this.props.selectedLayers[currentLckey]);
-        this.props.selectedLayers[currentLckey].visible = false;
-      }
-      if (currentKlckey) {
-        //this.props.map.remove(this.props.selectedLayers[currentKlckey]);
-        this.props.selectedLayers[currentKlckey].visible = false;
-      }
-      if (currentPakey) {
-        //this.props.map.remove(this.props.selectedLayers[currentPakey]);
-        this.props.selectedLayers[currentPakey].visible = false;
-      }
-    }
     typeFilter.forEach((type) => {
+      let filterLayer;
+
       if (type === 'lcc') {
         let selectLccBoxTime = document.getElementById('select-klc-lccTime')
           .value;
-        this.lccYear = selectLccBoxTime;
+        //this.lccYear = selectLccBoxTime;
+        this.setState({ lccYear: selectLccBoxTime });
         var selectBoxHighlightsLcc = document
           .getElementById('select-klc-lccTime')
           .value.match(/\d+/g)
@@ -258,30 +224,19 @@ class HotspotWidget extends React.Component {
           }
         }
 
-        if (this.esriLayer_lcc !== null) {
-          if (this.esriLayer_lcc2 !== null) {
-            this.props.map.remove(this.esriLayer_lcc2);
-          }
+        filterLayer = this.esriLayer_lcc;
 
-          this.esriLayer_lcc.sublayers.items[0].name = this.addLegendName(
-            typeLegend,
-          );
-          this.esriLayer_lcc.sublayers.items[0].legendUrl = this.addLegendNameToUrl(
-            typeLegend,
-          );
-          this.esriLayer_lcc.customLayerParameters['CQL_FILTER'] =
-            'klc_code LIKE ' +
-            "'" +
-            this.dataKlc_code +
-            "'" +
-            " AND in_pa = 'not_defined' AND date = " +
-            selectBoxHighlightsLcc;
-          this.props.map.add(this.esriLayer_lcc);
-          this.props.selectedLayers['lcc_filter'] = this.esriLayer_lcc;
-          this.props.selectedLayers['lcc_filter'].visible = true;
-          this.esriLayer_lcc2 = this.esriLayer_lcc;
-          //this.layerModelInit();
-        }
+        filterLayer.sublayers.items[0].name = this.addLegendName(typeLegend);
+        filterLayer.sublayers.items[0].legendUrl = this.addLegendNameToUrl(
+          typeLegend,
+        );
+        filterLayer.customLayerParameters['CQL_FILTER'] =
+          'klc_code LIKE ' +
+          "'" +
+          this.dataKlc_code +
+          "'" +
+          " AND in_pa = 'not_defined' AND date = " +
+          selectBoxHighlightsLcc;
       }
       if (type === 'lc') {
         for (let i = 0; i < activeLayers.length; i++) {
@@ -296,80 +251,94 @@ class HotspotWidget extends React.Component {
 
         let selectLcBoxTime = document.getElementById('select-klc-lcTime')
           .value;
-        this.lcYear = selectLcBoxTime;
+        //this.lcYear = selectLcBoxTime;
+        this.setState({ lcYear: selectLcBoxTime });
         var selectBoxHighlightsLc = document
           .getElementById('select-klc-lcTime')
           .value.match(/\d+/g)
           .map(Number)[0];
 
-        if (this.esriLayer_lc !== null) {
-          if (this.esriLayer_lc2 !== null) {
-            this.props.map.remove(this.esriLayer_lc2);
-          }
-          this.esriLayer_lc.sublayers.items[0].name = this.addLegendName(
-            typeLegend,
-          );
-          this.esriLayer_lc.sublayers.items[0].legendUrl = this.addLegendNameToUrl(
-            typeLegend,
-          );
-          this.esriLayer_lc.customLayerParameters['CQL_FILTER'] =
-            'klc_code LIKE ' +
-            "'" +
-            this.dataKlc_code +
-            "'" +
-            " AND in_pa = 'not_defined' AND date = " +
-            selectBoxHighlightsLc;
-          this.props.map.add(this.esriLayer_lc);
-          this.props.selectedLayers['lc_filter'] = this.esriLayer_lc;
-          this.props.selectedLayers['lc_filter'].visible = true;
-          this.esriLayer_lc2 = this.esriLayer_lc;
-        }
+        filterLayer = this.esriLayer_lc;
+
+        filterLayer.sublayers.items[0].name = this.addLegendName(typeLegend);
+        filterLayer.sublayers.items[0].legendUrl = this.addLegendNameToUrl(
+          typeLegend,
+        );
+        filterLayer.customLayerParameters['CQL_FILTER'] =
+          'klc_code LIKE ' +
+          "'" +
+          this.dataKlc_code +
+          "'" +
+          " AND in_pa = 'not_defined' AND date = " +
+          selectBoxHighlightsLc;
       }
-      this.esriLayer_klc.customLayerParameters['CQL_FILTER'] =
-        "klc_code LIKE '" + this.dataKlc_code + "'";
-      this.props.selectedLayers['klc_filter'] = this.esriLayer_klc;
       if (type === 'klc') {
-        if (this.esriLayer_klc !== null) {
-          if (this.esriLayer_klc2 !== null) {
-            this.props.map.remove(this.esriLayer_klc2);
-          }
-          this.props.map.add(this.esriLayer_klc);
-          this.props.selectedLayers['klc_filter'].visible = true;
-          this.esriLayer_klc2 = this.esriLayer_klc;
-          //this.layerModelInit();
-        }
+        this.esriLayer_klc.customLayerParameters['CQL_FILTER'] =
+          "klc_code LIKE '" + this.dataKlc_code + "'";
+        filterLayer = this.esriLayer_klc;
       }
-      this.esriLayer_pa.customLayerParameters['CQL_FILTER'] =
-        "klc_code LIKE '" + this.dataKlc_code + "'";
-      this.props.selectedLayers['pa_filter'] = this.esriLayer_pa;
       if (type === 'pa') {
-        if (this.esriLayer_pa !== null) {
-          if (this.esriLayer_pa2 !== null) {
-            this.props.map.remove(this.esriLayer_pa2);
-          }
-          this.props.map.add(this.esriLayer_pa);
-          this.props.selectedLayers['pa_filter'].visible = true;
-          this.esriLayer_pa2 = this.esriLayer_pa;
-          //this.layerModelInit();
-        }
+        this.esriLayer_pa.customLayerParameters['CQL_FILTER'] =
+          "klc_code LIKE '" + this.dataKlc_code + "'";
+        filterLayer = this.esriLayer_pa;
+      }
+      layersToAdd[type + '_filter'] = filterLayer;
+    });
+    activeLayers.forEach((activeLayer) => {
+      let layerId = Object.keys(this.layers).find((key) =>
+        key.includes(activeLayer),
+      );
+      if (layerId !== undefined) this.layers[layerId].visible = false;
+      let layer = this.props.map.findLayerById(layerId);
+      if (layer !== undefined) {
+        layer.clear();
+        layer.destroy();
+        this.props.map.remove(layer);
       }
-      this.layerModelInit();
-      this.setBBoxCoordinates(this.dataBBox);
-      //this.setState({ activeLayers: {[type+'_filter']: this.props.selectedLayers[type+'_filter']}})
     });
+    filteredLayers.forEach((filteredLayer) => {
+      let layerId = Object.keys(this.layers).find((key) =>
+        key.includes(filteredLayer),
+      );
+      if (layerId !== undefined) this.layers[layerId].visible = false;
+      let layer = this.props.map.findLayerById(layerId);
+      if (layer !== undefined) {
+        layer.clear();
+        layer.destroy();
+        this.props.map.remove(layer);
+      }
+    });
+    this.props.map.addMany(Object.values(layersToAdd));
+    Object.keys(layersToAdd).forEach((key) => {
+      this.layers[key] = layersToAdd[key];
+      this.layers[key].visible = true;
+    });
+    this.setBBoxCoordinates(this.dataBBox);
     //set sessionStorage value to keep the widget open
     sessionStorage.setItem('hotspotFilterApplied', 'true');
     this.disableButton();
-    const layerView = await this.props.view.whenLayerView(
-      this.props.selectedLayers[typeFilter[0] + '_filter'],
-    );
-    layerView.watch('updating', (isUpdating) => {
-      if (!isUpdating) {
-        setTimeout(() => {
-          this.props.loadingHandler(false);
-        }, 1000);
-      }
+    this.props.mapLayersHandler(this.layers);
+    this.filteredLayersToHotspotData(Object.keys(layersToAdd));
+  }
+
+  filteredLayersToHotspotData(layerIds) {
+    let updatedFilteredLayers = this.props.hotspotData['filteredLayers'] || {};
+    let newHotspotData = this.props.hotspotData;
+    layerIds.forEach((layerId) => {
+      let layer = Object.entries(this.layers).find(
+        ([key, value]) => key === layerId,
+      )?.[1];
+
+      Object.keys(updatedFilteredLayers).forEach((key) => {
+        if (key === layerId) {
+          delete updatedFilteredLayers[key];
+        }
+      });
+
+      updatedFilteredLayers[layerId] = layer;
     });
+    newHotspotData['filteredLayers'] = updatedFilteredLayers;
+    return this.props.hotspotDataHandler(newHotspotData);
   }
 
   dropdownAnimation() {
@@ -389,7 +358,6 @@ class HotspotWidget extends React.Component {
 
   openMenu() {
     if (this.state.showMapMenu) {
-      //this.getKLCNames(this.dataJSONNames, this.selectedArea);
       this.props.mapViewer.setActiveWidget();
       this.container.current.querySelector('.right-panel').style.display =
         'none';
@@ -403,9 +371,6 @@ 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.props.mapViewer.setActiveWidget(this);
       this.container.current.querySelector('.right-panel').style.display =
         'flex';
@@ -432,9 +397,6 @@ class HotspotWidget extends React.Component {
       })
       .then((data) => {
         this.dataJSONNames = data.nodes;
-        //if (this.selectedArea == null) {
-        //  this.selectedArea = data.nodes[0].node.klc_name;
-        //}
       })
       .catch(function (error) {
         /* console.log('error while getting data'); */
@@ -475,6 +437,7 @@ class HotspotWidget extends React.Component {
     let lccContainer = document.querySelector('.landCoverChangeContainer');
     let lccTimeSelect = document.querySelector('#select-klc-lccTime');
     let lcTimeSelect = document.querySelector('#select-klc-lcTime');
+    if (lcContainer === null || lccContainer === null) return;
     if (
       (lcContainer.style.display === 'block' &&
         lcTimeSelect.value === 'default') ||
@@ -541,12 +504,14 @@ class HotspotWidget extends React.Component {
     selectBoxLccTime = document.getElementById('select-klc-lccTime');
     selectBoxLcTime = document.getElementById('select-klc-lcTime');
 
-    if (selectedOption !== this.selectedArea) {
-      this.lcYear = null;
-      this.lccYear = null;
+    if (selectedOption !== this.state.selectedArea) {
+      this.setState({
+        lcYear: null,
+        lccYear: null,
+      });
     }
 
-    this.selectedArea = selectedOption;
+    //this.selectedArea = selectedOption;
 
     for (let i = 0; i < data.length; i++) {
       var option = data[i].node.klc_name;
@@ -632,16 +597,16 @@ class HotspotWidget extends React.Component {
             selectBox.options.add(new Option(option, option, option));
           }
           for (let u = 0; u < selectBox.options.length; u++) {
-            if (!selectBox.options[u].label.includes(this.selectedArea)) {
+            if (!selectBox.options[u].label.includes(this.state.selectedArea)) {
               selectBox.value = 'default';
               continue;
             } else {
-              selectBox.value = this.selectedArea;
-              if (this.lcYear !== null) {
-                selectBoxLcTime.value = this.lcYear;
+              selectBox.value = this.state.selectedArea;
+              if (this.state.lcYear !== null) {
+                selectBoxLcTime.value = this.state.lcYear;
               }
-              if (this.lccYear !== null) {
-                selectBoxLccTime.value = this.lccYear;
+              if (this.state.lccYear !== null) {
+                selectBoxLccTime.value = this.state.lccYear;
               }
               break; // move break statement inside the if block
             }
@@ -656,18 +621,18 @@ class HotspotWidget extends React.Component {
             selectBox.options.add(new Option(option, option, option));
           }
           for (let u = 0; u < selectBox.options.length; u++) {
-            if (!selectBox.options[u].label.includes(this.selectedArea)) {
+            if (!selectBox.options[u].label.includes(this.state.selectedArea)) {
               selectBox.value = 'default';
               continue;
             } else {
-              selectBox.value = this.selectedArea;
-              if (this.lcYear !== null) {
-                selectBoxLcTime.value = this.lcYear;
+              selectBox.value = this.state.selectedArea;
+              if (this.state.lcYear !== null) {
+                selectBoxLcTime.value = this.state.lcYear;
               }
-              if (this.lccYear !== null) {
-                selectBoxLccTime.value = this.lccYear;
+              if (this.state.lccYear !== null) {
+                selectBoxLccTime.value = this.state.lccYear;
               }
-              break; // move break statement inside the if block
+              break;
             }
           }
           break;
@@ -738,6 +703,29 @@ class HotspotWidget extends React.Component {
   }
 
   render() {
+    let divs = [
+      {
+        id: 'all_present_lc',
+        func: this.renderPresentLandCover,
+        className: 'presentLandCoverContainer',
+      },
+      {
+        id: 'all_lcc',
+        func: this.renderLandCoverChange,
+        className: 'landCoverChangeContainer',
+      },
+    ];
+
+    divs.sort((a, b) => {
+      let indexA = this.state.activeLayersArray.findIndex((layer) =>
+        layer.getAttribute('layer-id').includes(a.id),
+      );
+      let indexB = this.state.activeLayersArray.findIndex((layer) =>
+        layer.getAttribute('layer-id').includes(b.id),
+      );
+      if (indexA === -1 || indexB === -1) return 0;
+      return indexA - indexB;
+    });
     return (
       <>
         <div ref={this.container} className="hotspot-container">
@@ -772,8 +760,7 @@ class HotspotWidget extends React.Component {
                       <select
                         onBlur={() => {}}
                         onChange={(e) => {
-                          this.getKLCNames(this.dataJSONNames, e.target.value);
-                          this.disableButton();
+                          this.setState({ selectedArea: e.target.value });
                         }}
                         id="select-klc-area"
                         className="esri-select"
@@ -781,11 +768,10 @@ class HotspotWidget extends React.Component {
                     </label>
                   </div>
                 </div>
-                <div className="presentLandCoverContainer">
-                  {this.renderPresentLandCover()}
-                </div>
-                <div className="landCoverChangeContainer">
-                  {this.renderLandCoverChange()}
+                <div>
+                  {divs.map((div) => (
+                    <div className={div.className}>{div.func()}</div>
+                  ))}
                 </div>
                 <button
                   id="applyFilterButton"
@@ -802,6 +788,31 @@ class HotspotWidget extends React.Component {
     );
   }
 
+  //sortHotspotTabs = () => {
+  //  let activeLayersArray = Array.from(document.querySelectorAll('.active-layer'));
+  //  let divs = [
+  //    { id: 'all_present_lc', func: this.renderPresentLandCover, className: 'presentLandCoverContainer' },
+  //    { id: 'all_lcc', func: this.renderLandCoverChange, className: 'landCoverChangeContainer' }
+  //  ];
+  //
+  //  divs.sort((a, b) => {
+  //    let indexA = activeLayersArray.findIndex(layer => layer.getAttribute('layer-id').includes(a.id));
+  //    let indexB = activeLayersArray.findIndex(layer => layer.getAttribute('layer-id').includes(b.id));
+  //    if (indexA === -1 || indexB === -1) return 0;
+  //    return indexA - indexB;
+  //  });
+  //
+  //  return (
+  //    <div>
+  //      {divs.map(div => (
+  //        <div className={div.className}>
+  //          {div.func()}
+  //        </div>
+  //      ))}
+  //    </div>
+  //  );
+  //}
+
   /**
    * This method is executed after the rener method is executed
    */
@@ -811,12 +822,22 @@ class HotspotWidget extends React.Component {
     this.props.view.ui.add(this.container.current, 'top-right');
     this.layerModelInit();
     this.getBBoxData();
+    this.props.view.map.layers.on('change', () => {
+      this.setState({
+        activeLayersArray: Array.from(
+          document.querySelectorAll('.active-layer'),
+        ),
+      });
+      const newHotspotData = this.props.hotspotData;
+      this.props.hotspotDataHandler(newHotspotData);
+    });
   }
 
   componentDidUpdate(prevState, prevProps) {
     if (prevProps.hotspotData !== this.props.hotspotData) {
-      this.getKLCNames(this.dataJSONNames, this.selectedArea);
+      this.getKLCNames(this.dataJSONNames, this.state.selectedArea);
       this.disableButton();
+      //this.layerModelInit();
     }
   }
 }

package/src/components/MapViewer/LegendWidget.jsx

@@ -45,6 +45,25 @@ class LegendWidget extends React.Component {
     });
   }
 
+  scanImages() {
+    let img = {};
+    const collection = document.getElementsByClassName('esri-legend__symbol');
+    Array.prototype.forEach.call(collection, (element) => {
+      if (element.hasChildNodes()) {
+        for (let i = 0; i < element.childNodes.length; i++) {
+          let child = element.childNodes[i];
+          if (child.nodename === 'IMG') {
+            img = child;
+            break;
+          }
+        }
+      } else img = element;
+      if (!(img instanceof HTMLImageElement)) return;
+
+      img.onerror = () => this.setState({ loading: true });
+    });
+  }
+
   brokenLegendImagePatch() {
     const collection = document.getElementsByClassName('esri-legend__symbol');
     Array.prototype.forEach.call(collection, (element) => {
@@ -176,11 +195,6 @@ 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();
@@ -204,16 +218,28 @@ class LegendWidget extends React.Component {
       }),
       container: document.querySelector('.legend-panel'),
     });
-    this.props.view.allLayerViews.watch('length', () => {
-      this.imageFixWithTimer();
+    this.LegendWidget.when(() => {
+      this.LegendWidget.activeLayerInfos.on('after-changes', (event) => {
+        this.setState({ loading: true });
+        this.scanImages();
+      });
     });
   }
 
-  componentDidUpdate(prevProps) {
-    if (this.props.hotspotData?.layerViewError !== undefined) {
-      this.imageFixWithTimer();
+  componentDidUpdate(prevState, prevProps) {
+    if (prevState.loading !== this.state.loading) {
+      if (this.state.loading === true) {
+        setTimeout(() => {
+          this.brokenLegendImagePatch();
+          if (this.props.download) {
+            this.hideNutsLegend();
+          }
+          this.setState({ loading: false });
+        }, 2000);
+      }
     }
   }
+
   /**
    * This method renders the component
    * @returns jsx

package/src/components/MapViewer/LoadingSpinner.jsx

@@ -9,7 +9,11 @@ class LoadingSpinner extends React.Component {
     this.container = createRef();
     //Initially, we set the state of the component to
     //not be showing the basemap panel
-    this.state = {};
+    this.state = {
+      loading: false,
+    };
+    this.showLoading = this.showLoading.bind(this);
+    this.listenForLayerChanges = this.listenForLayerChanges.bind(this);
   }
 
   loader() {
@@ -18,8 +22,38 @@ class LoadingSpinner extends React.Component {
     });
   }
 
+  listenForLayerChanges() {
+    this.props.view.map.layers.on('change', (event) => {
+      if (event.added.length > 0)
+        if (this.state.loading === false) {
+          this.setState({ loading: true });
+          this.showLoading();
+        }
+    });
+    this.props.view.on('layerview-create', (event) => {
+      if (event.layer.loadStatus === 'loaded') {
+        this.props.view.watch('updating', (isUpdating) => {
+          if (!isUpdating) {
+            if (this.state.loading === true) {
+              this.setState({ loading: false });
+              this.showLoading();
+            }
+          }
+        });
+      }
+    });
+    this.props.view.on('layerview-create-error', (event) => {
+      if (event.layer.loadError !== null) {
+        if (this.state.loading === true) {
+          this.setState({ loading: false });
+          this.showLoading();
+        }
+      }
+    });
+  }
+
   showLoading() {
-    if (this.props.layerLoading === false) {
+    if (this.state.loading === false) {
       this.container.current.style.display = 'none';
     } else {
       this.container.current.style.display = 'block';
@@ -29,18 +63,22 @@ class LoadingSpinner extends React.Component {
 
   async componentDidMount() {
     await this.loader();
-    this.props.view.when(() => {
-      this.props.view.ui.add(this.container.current, 'manual');
-      watchUtils.watch(this.props.view, 'updating', () => {
-        return;
-      });
+    //this.props.view.when(() => {
+    //  this.props.view.ui.add(this.container.current, 'manual');
+    //  this.listenForLayerChanges();
+    //});
+    watchUtils.when(this.props.view, 'ready', (isReady) => {
+      if (isReady) {
+        this.props.view.ui.add(this.container.current, 'manual');
+        this.listenForLayerChanges();
+      }
     });
   }
 
-  componentDidUpdate(prevProps) {
-    if (this.props.layerLoading !== prevProps.layerLoading) {
-      this.showLoading();
-    }
+  componentDidUpdate(prevState) {
+    //    if (this.state.loading !== prevState.loading) {
+    //      this.showLoading();
+    //    }
   }
 
   render() {

package/src/components/MapViewer/MapViewer.jsx

@@ -55,8 +55,8 @@ class MapViewer extends React.Component {
     });
     this.state = {
       layerLoading: false,
+      layers: {},
     };
-    this.layers = {};
     this.activeLayersHandler = this.activeLayersHandler.bind(this);
     this.activeLayersArray = {};
     this.props.mapviewer_config.loading = true;
@@ -64,6 +64,11 @@ class MapViewer extends React.Component {
     this.userID = null;
     this.loadingHandler = this.loadingHandler.bind(this);
     this.hotspotDataHandler = this.hotspotDataHandler.bind(this);
+    this.mapLayersHandler = this.mapLayersHandler.bind(this);
+  }
+
+  mapLayersHandler(newLayers) {
+    this.setState({ layers: newLayers });
   }
 
   loadingHandler(bool) {
@@ -307,6 +312,7 @@ class MapViewer extends React.Component {
           mapViewer={this}
           download={this.props.mapviewer_config.Download}
           urls={this.cfgUrls}
+          layerLoading={this.state.layerLoading}
           hotspotData={this.state.hotspotData}
           hotspotDataHandler={this.hotspotDataHandler}
         />
@@ -364,7 +370,7 @@ class MapViewer extends React.Component {
         <HotspotWidget
           view={this.view}
           map={this.map}
-          selectedLayers={this.layers}
+          selectedLayers={this.state.layers}
           mapViewer={this}
           layers={sessionStorage}
           mapCfg={this.mapCfg}
@@ -372,6 +378,7 @@ class MapViewer extends React.Component {
           loadingHandler={this.loadingHandler}
           hotspotData={this.state.hotspotData}
           hotspotDataHandler={this.hotspotDataHandler}
+          mapLayersHandler={this.mapLayersHandler}
         />
       );
   }
@@ -388,12 +395,13 @@ class MapViewer extends React.Component {
           mapViewer={this}
           updateArea={this.updateArea}
           area={this.state.area}
-          layers={this.layers}
+          layers={this.state.layers}
           activeLayersHandler={this.activeLayersHandler}
           urls={this.cfgUrls}
           loadingHandler={this.loadingHandler}
           hotspotDataHandler={this.hotspotDataHandler}
           hotspotData={this.state.hotspotData}
+          mapLayersHandler={this.mapLayersHandler}
         />
       ); //call conf
   }

package/src/components/MapViewer/MenuWidget.jsx

@@ -253,6 +253,7 @@ class MenuWidget extends React.Component {
       noServiceModal: true,
       setNoServiceModal: true,
       TMSLayerObj: null,
+      draggedElements: [],
     };
     this.menuClass =
       'esri-icon-drag-horizontal esri-widget--button esri-widget esri-interactive';
@@ -263,6 +264,8 @@ class MenuWidget extends React.Component {
     this.xml = null;
     this.dataBBox = null;
     this.extentInitiated = false;
+    this.hotspotLayerIds = [];
+    this.getHotspotLayerIds = this.getHotspotLayerIds.bind(this);
     this.prepareHotspotLayers = this.prepareHotspotLayers.bind(this);
     this.activeLayersToHotspotData = this.activeLayersToHotspotData.bind(this);
     this.getLimitScale = this.getLimitScale.bind(this);
@@ -631,7 +634,6 @@ class MenuWidget extends React.Component {
               bubbles: true,
               cancelable: false,
             });
-            // let el = document.getElementById('active_label');
             let el = document.getElementById('download_label');
             el.dispatchEvent(event);
           }
@@ -647,6 +649,7 @@ class MenuWidget extends React.Component {
     await this.loader();
     await this.getTMSLayersJSON();
     this.prepareHotspotLayers();
+    this.getHotspotLayerIds();
     this.props.view.ui.add(this.container.current, 'top-left');
     if (this.props.download) {
       setTimeout(() => {
@@ -1401,7 +1404,6 @@ class MenuWidget extends React.Component {
           url: viewService,
           featureInfoFormat: 'text/html',
           featureInfoUrl: viewService,
-          //id: layer.LayerId,
           title: '',
           legendEnabled: true,
           sublayers: [
@@ -1559,7 +1561,7 @@ class MenuWidget extends React.Component {
             const height = this.tileInfo.size[0];
             // create a canvas with 2D rendering context
             const canvas = document.createElement('canvas');
-            const context = canvas.getContext('2d');
+            const context = canvas.getContext('2d'); //try modifying this value for 3d test UNAI
             //canvas
             canvas.width = width;
             canvas.height = height;
@@ -1691,16 +1693,6 @@ class MenuWidget extends React.Component {
       }
     }
     if (productContainerId === 'd764e020485a402598551fa461bf1db2') {
-      //      if (this.layers['lc_filter'] || this.layers['lcc_filter']) {
-      //        let myExtent = new Extent({
-      //          xmin: -2037508.342789,
-      //          ymin: -2037508.342789,
-      //          xmax: 8037508.342789,
-      //          ymax: 8037508.342789,
-      //          spatialReference: 3857, // by default wkid 4326
-      //        });
-      //        this.view.goTo(myExtent);
-      //      }
       if (nextElemSibling) {
         siblingInput = nextElemSibling.querySelector('input');
       } else if (previousElemSibling) {
@@ -1807,6 +1799,7 @@ class MenuWidget extends React.Component {
   }
 
   async toggleLayer(elem) {
+    if (this.layers[elem.id] === undefined) return;
     if (!this.visibleLayers) this.visibleLayers = {};
     if (!this.timeLayers) this.timeLayers = {};
     let parentId = elem.getAttribute('parentid');
@@ -1814,9 +1807,10 @@ class MenuWidget extends React.Component {
       .getElementById(parentId)
       .closest('.map-menu-product-dropdown')
       .getAttribute('productid');
+
     let group = this.getGroup(elem);
     if (elem.checked) {
-      this.props.loadingHandler(true);
+      //this.props.loadingHandler(true);
       if (
         this.props.download ||
         this.location.search.includes('product=') ||
@@ -1833,20 +1827,25 @@ class MenuWidget extends React.Component {
         }
       }
       if (this.layers['lc_filter'] || this.layers['lcc_filter']) {
-        if (elem.id.includes('cop_klc')) {
+        if (
+          elem.id.includes('cop_klc') &&
+          this.layers['klc_filter'] !== undefined
+        ) {
           this.layers['klc_filter'].visible = true;
           this.map.add(this.layers['klc_filter']);
-        } else if (elem.id.includes('protected_areas')) {
+        } else if (
+          elem.id.includes('protected_areas') &&
+          this.layers['pa_filter'] !== undefined
+        ) {
           this.layers['pa_filter'].visible = true;
           this.map.add(this.layers['pa_filter']);
         } else {
           this.map.add(this.layers[elem.id]);
         }
       } else {
+        this.layers[elem.id].visible = true; //layer id
         this.map.add(this.layers[elem.id]);
       }
-      if (this.layers[elem.id] === undefined) return;
-      this.layers[elem.id].visible = true; //layer id
       this.visibleLayers[elem.id] = ['fas', 'eye'];
       this.timeLayers[elem.id] = ['far', 'clock'];
       if (group) {
@@ -1872,36 +1871,41 @@ 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);
-            } 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.props.view //mueve esto
+      //  .whenLayerView(this.layers[elem.id])
+      //  .then((layerView) => {
+      //    layerView.watch('updating', (isUpdating) => {
+      //      if (!isUpdating) {
+      //        setTimeout(() => {
+      //        this.props.loadingHandler(false);
+      //        }, 2000);
+      //      } 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');
       sessionStorage.removeItem('timeSliderTag');
       this.deleteCheckedLayer(elem.id);
-      this.deleteFilteredLayer(elem.id);
       this.layers[elem.id].opacity = 1;
       this.layers[elem.id].visible = false;
+      this.deleteFilteredLayer(elem.id);
       let mapLayer = this.map.findLayerById(elem.id);
-      if (mapLayer) mapLayer.destroy();
-      this.map.remove(this.layers[elem.id]);
+      if (mapLayer) {
+        mapLayer.clear();
+        mapLayer.destroy();
+        this.map.remove(this.layers[elem.id]);
+      }
       delete this.activeLayersJSON[elem.id];
       delete this.visibleLayers[elem.id];
       delete this.timeLayers[elem.id];
@@ -1919,22 +1923,30 @@ class MenuWidget extends React.Component {
     this.activeLayersToHotspotData(elem.id);
     // update DOM
     //this.setState({});
+    let checkedLayers = sessionStorage.getItem('checkedLayers');
+    if (checkedLayers && checkedLayers.length === 0) {
+      this.props.loadingHandler(false);
+    }
   }
 
-  activeLayersToHotspotData(layerId) {
-    let layer = Object.entries(this.layers).find(
-      ([key, value]) => key === layerId,
-    )?.[1];
+  getHotspotLayerIds() {
     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);
       });
     });
+    this.hotspotLayersIds = hotspotLayersIds;
+  }
+
+  activeLayersToHotspotData(layerId) {
+    let layer = Object.entries(this.layers).find(
+      ([key, value]) => key === layerId,
+    )?.[1];
+    let hotspotLayersIds = this.hotspotLayersIds;
+    let updatedActiveLayers = this.props.hotspotData['activeLayers'] || {};
+    let newHotspotData = this.props.hotspotData;
 
     for (let i = 0; i < hotspotLayersIds.length; i++) {
       const id = hotspotLayersIds[i];
@@ -2141,16 +2153,24 @@ class MenuWidget extends React.Component {
     if (!activeLayersArray.length) {
       messageLayers && (messageLayers.style.display = 'block');
     } else messageLayers && (messageLayers.style.display = 'none');
-    let activeLayers = Array.from(
-      document.querySelectorAll('.active-layer'),
-    ).map((elem) => {
-      return elem.getAttribute('layer-id');
+    let data = activeLayersArray.sort((a, b) => {
+      let layerIdA = a.props['layer-id'];
+      let layerIdB = b.props['layer-id'];
+      layerIdA = layerIdA.split('_').slice(-4).join('_');
+      layerIdB = layerIdB.split('_').slice(-4).join('_');
+
+      if (
+        this.state.draggedElements !== undefined &&
+        (this.state.draggedElements.includes(layerIdA) ||
+          this.state.draggedElements.includes(layerIdB))
+      ) {
+        return 0;
+      }
+
+      if (layerIdA < layerIdB) return -1;
+      if (layerIdA > layerIdB) return 1;
+      return 0;
     });
-    let data = activeLayersArray.sort(
-      (a, b) =>
-        activeLayers.indexOf(a.props['layer-id']) -
-        activeLayers.indexOf(b.props['layer-id']),
-    );
     this.activeLayersHandler(activeLayersArray);
     return data;
   }
@@ -2731,7 +2751,7 @@ class MenuWidget extends React.Component {
   onDrop(e) {
     let dst = e.target.closest('div.active-layer');
     if (dst === this.draggingElement) return;
-
+    let id = dst.id.split('_').slice(-4).join('_');
     //First, we decide how to insert the element in the DOM
     let init_ord = this.draggingElement.getAttribute('layer-order');
     let dst_ord = dst.getAttribute('layer-order');
@@ -2742,6 +2762,9 @@ class MenuWidget extends React.Component {
       dst.parentElement.insertBefore(this.draggingElement, dst);
     }
 
+    if (!this.state.draggedElements.includes(id)) {
+      this.setState({ draggedElements: [...this.state.draggedElements, id] });
+    }
     this.layersReorder();
     this.saveLayerOrder();
   }
@@ -3378,16 +3401,72 @@ class MenuWidget extends React.Component {
   }
 
   deleteFilteredLayer(layer) {
-    let layers = this.layers;
-    if (layers['lcc_filter'] && layer.includes('all_lcc')) {
-      delete layers['lcc_filter'];
-    } else if (layers['lc_filter'] && layer.includes('all_present_lc')) {
-      delete layers['lc_filter'];
-    } else if (layers['klc_filter'] && layer.includes('cop_klc')) {
-      layers['klc_filter'].visible = false;
-    } else if (layers['pa_filter'] && layer.includes('protected_areas')) {
-      layers['pa_filter'].visible = false;
-    }
+    if (
+      !(
+        layer.includes('all_lcc') ||
+        layer.includes('all_present') ||
+        layer.includes('cop_klc') ||
+        layer.includes('protected_areas')
+      )
+    )
+      return;
+    let filterLayer;
+    //let temp;
+    let updatedHotspotData = this.props.hotspotData;
+    let updatedFilteredLayers = this.props.hotspotData['filteredLayers'];
+    if (this.layers['lcc_filter'] && layer.includes('all_lcc')) {
+      this.layers['lcc_filter'].visible = false;
+      filterLayer = this.props.map.findLayerById('lcc_filter');
+      if (filterLayer !== undefined) {
+        filterLayer.clear();
+        filterLayer.destroy();
+        this.props.map.remove(filterLayer);
+      }
+      delete updatedFilteredLayers['lcc_filter'];
+      delete this.layers['lcc_filter'];
+    } else if (this.layers['lc_filter'] && layer.includes('all_present_lc')) {
+      this.layers['lc_filter'].visible = false;
+      filterLayer = this.props.map.findLayerById('lc_filter');
+      if (filterLayer !== undefined) {
+        filterLayer.clear();
+        filterLayer.destroy();
+        this.props.map.remove(filterLayer);
+      }
+      delete updatedFilteredLayers['lc_filter'];
+      delete this.layers['lc_filter'];
+    } else if (
+      this.layers['klc_filter'] !== undefined &&
+      layer.includes('cop_klc')
+    ) {
+      this.layers['klc_filter'].visible = false;
+      this.layers[layer].visible = false;
+      filterLayer = this.props.map.findLayerById('klc_filter');
+      if (filterLayer !== undefined) {
+        //  temp = filterLayer;
+        filterLayer.clear();
+        filterLayer.destroy();
+        this.props.map.remove(filterLayer);
+      }
+      delete updatedFilteredLayers['klc_filter'];
+      //delete this.layers['klc_filter'];
+    } else if (
+      this.layers['pa_filter'] !== undefined &&
+      layer.includes('protected_areas')
+    ) {
+      this.layers['pa_filter'].visible = false;
+      this.layers[layer].visible = false;
+      filterLayer = this.props.map.findLayerById('pa_filter');
+      if (filterLayer !== undefined) {
+        //  temp = filterLayer;
+        filterLayer.clear();
+        filterLayer.destroy();
+        this.props.map.remove(filterLayer);
+      }
+      delete updatedFilteredLayers['pa_filter'];
+    }
+    this.props.mapLayersHandler(this.layers);
+    updatedHotspotData['filteredLayers'] = updatedFilteredLayers;
+    this.props.hotspotDataHandler(updatedHotspotData);
   }
 
   /**