@eeacms/volto-arcgis-block 0.1.220 → 0.1.222

package/CHANGELOG.md

@@ -4,6 +4,31 @@ 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.222](https://github.com/eea/volto-arcgis-block/compare/0.1.221...0.1.222) - 25 October 2023
+
+#### :hammer_and_wrench: Others
+
+- ready for push [ujbolivar - [`1d00c02`](https://github.com/eea/volto-arcgis-block/commit/1d00c02ac73a24f2179eafbb947cc10ffb19aabb)]
+- ran linting scripts [ujbolivar - [`839258f`](https://github.com/eea/volto-arcgis-block/commit/839258fc2674edd345fb308ad86c33f9e6b8b8c8)]
+- miguel fix added [ujbolivar - [`2f91b36`](https://github.com/eea/volto-arcgis-block/commit/2f91b3642a3d7ec3b9df8163870453d323536f0e)]
+- final lint check before push for hotspot and vector layer update corrections [ujbolivar - [`b1c025c`](https://github.com/eea/volto-arcgis-block/commit/b1c025cd85b231a322d6ab9bde024d622498ec23)]
+- hotspot tabs swaps order based on active layers tab order [ujbolivar - [`b928c3c`](https://github.com/eea/volto-arcgis-block/commit/b928c3ccc8304163ad756e32ecbfb9072a398575)]
+- activelayers are arranged following menu order. Position of dragged layers is preserved [ujbolivar - [`68f1ff4`](https://github.com/eea/volto-arcgis-block/commit/68f1ff43774b6690a7f1f94f12d197f5b518c760)]
+- mods done to hotspot and legends again to cover new edgecases [ujbolivar - [`a1367a3`](https://github.com/eea/volto-arcgis-block/commit/a1367a33fd2184f604182a1c7dffd21e9cb3eed7)]
+- hotspot and legend functions working properly [ujbolivar - [`0f87558`](https://github.com/eea/volto-arcgis-block/commit/0f875580d11ee93ae9919fb7d893dacf360ea7c3)]
+- layers are added and destroyed properly even when pa and klc is unchecked in menuwidget and checked again, it still loads the filtered layer correctly. Legends are acting up after this action as they do not load properly. Next commit will have this feature corrected. [ujbolivar - [`eb6e950`](https://github.com/eea/volto-arcgis-block/commit/eb6e950dc312c1ea3343a29a5d716d183f15b0bd)]
+- hotspot layers are added and removed correctly, still needs a bit of fine tuning, but definitely on track now [ujbolivar - [`240ab62`](https://github.com/eea/volto-arcgis-block/commit/240ab62ca36e561367c66f527d36529024a5a066)]
+### [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
@@ -1020,13 +1045,10 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Merge pull request #148 from eea/develop [KCarpinteroBM - [`24266fb`](https://github.com/eea/volto-arcgis-block/commit/24266fb3a0c1662d22ae0529dc1d5a25c711cf97)]
-- Revert "[JENKINS] Use eeacms/plone-backend and Volto alpha version- Refs #151967" [Mikel Larreategi - [`f751f69`](https://github.com/eea/volto-arcgis-block/commit/f751f69f652f0340ae55af6a4dab89d6bdc80906)]
 - Revert "Revert "Mapviewer menu and map viewer options persistence"" [Mikel Larreategi - [`ad6e440`](https://github.com/eea/volto-arcgis-block/commit/ad6e440cdc160cffb1e86e1b26e501dbe648476c)]
 - Revert "code coverage removal" [Mikel Larreategi - [`376f2d1`](https://github.com/eea/volto-arcgis-block/commit/376f2d1cd6e4e5110b3b63d5114af1bcfebe094b)]
 - Revert "Update cypress.json" [Mikel Larreategi - [`43d01a0`](https://github.com/eea/volto-arcgis-block/commit/43d01a0a95a58ef5215c6cbf18223ca30a11b9cc)]
 - Revert "Update cypress.json" [Mikel Larreategi - [`054c4ae`](https://github.com/eea/volto-arcgis-block/commit/054c4ae1767e1f26e6ec7e96a0e26a9711f29f04)]
-- Revert "revert [JENKINS] Use eeacms/plone-backend and Volto alpha version- Refs #151967" [Mikel Larreategi - [`64ab56e`](https://github.com/eea/volto-arcgis-block/commit/64ab56e0f1f8dddc26f26039509a028e34653e64)]
-- revert [JENKINS] Use eeacms/plone-backend and Volto alpha version- Refs #151967 [Mikel Larreategi - [`85ee194`](https://github.com/eea/volto-arcgis-block/commit/85ee1941e029df2b7dc910bf75231c75ffeca8c2)]
 - Update cypress.json [KCarpinteroBM - [`be285ff`](https://github.com/eea/volto-arcgis-block/commit/be285fff0c53e06a0180d5318cce81195eabcf80)]
 - Update cypress.json [KCarpinteroBM - [`a7f2118`](https://github.com/eea/volto-arcgis-block/commit/a7f2118acb7b048b4cef85aa9663c2244a1c9ca0)]
 - linting fix [KCarpinteroBM - [`27e969a`](https://github.com/eea/volto-arcgis-block/commit/27e969a7a411fd4646e0e742ce846efc0d79703e)]
@@ -1086,7 +1108,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - UX improvements [rodriama - [`151dc4b`](https://github.com/eea/volto-arcgis-block/commit/151dc4b02d0a73fdd66de9d594620ac0fa5f1dbf)]
 - deleted failing tests [KCarpinteroBM - [`ddaa9e6`](https://github.com/eea/volto-arcgis-block/commit/ddaa9e6f06db6960a4c214d3be2420c48b26715d)]
 - cleaning unnecessary files [KCarpinteroBM - [`2c02199`](https://github.com/eea/volto-arcgis-block/commit/2c021990912beb02b603a1de89aecd62e0063769)]
-- Reverting to Automated release 0.1.39 [KCarpinteroBM - [`fb9f317`](https://github.com/eea/volto-arcgis-block/commit/fb9f3176ccdea18fceb329eaac13ced0566ee648)]
 - commands added [KCarpinteroBM - [`049e60b`](https://github.com/eea/volto-arcgis-block/commit/049e60b7d124d1c05abd0b2775b510795f4ed59f)]
 - Mapviewer testing implementation [KCarpinteroBM - [`0103002`](https://github.com/eea/volto-arcgis-block/commit/0103002869eea108e16e3b5ff2e77a725dcc7c4b)]
 ### [0.1.39](https://github.com/eea/volto-arcgis-block/compare/0.1.38...0.1.39) - 24 March 2022
@@ -1106,7 +1127,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - ESLint fix [rodriama - [`75dae9b`](https://github.com/eea/volto-arcgis-block/commit/75dae9b5bba18ab6d9624f6c99714b4bd2179003)]
 - Remove section title [rodriama - [`ece860e`](https://github.com/eea/volto-arcgis-block/commit/ece860eae3519c7e611abac16e8d53c9a9408b34)]
 - Es-Lint [manuelmartinezbilbomatica - [`39d8d11`](https://github.com/eea/volto-arcgis-block/commit/39d8d11b9096fd603df8510c119d2e12817415d6)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`bf9f683`](https://github.com/eea/volto-arcgis-block/commit/bf9f683dd35a9edb4cfd9111affcb8f8edbeae89)]
 - FEAT: Parser Time implemented [manuelmartinezbilbomatica - [`689c99e`](https://github.com/eea/volto-arcgis-block/commit/689c99e55221fee6c7c7fafc4ab95ae7a646d3dd)]
 ### [0.1.38](https://github.com/eea/volto-arcgis-block/compare/0.1.37...0.1.38) - 18 March 2022
 
@@ -1201,7 +1221,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - ESLint fix [rodriama - [`5fd3772`](https://github.com/eea/volto-arcgis-block/commit/5fd3772f197a3a380067962a5638dbf901a4624e)]
 - Pixel info [rodriama - [`1ccef39`](https://github.com/eea/volto-arcgis-block/commit/1ccef39a9adcc3ee94655c77a5a166b613600a08)]
 - NUTS bug fix [rodriama - [`37fe7f3`](https://github.com/eea/volto-arcgis-block/commit/37fe7f3fad2c005e3b7c234b3b0564d5df92fa8c)]
-- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`ea5af8b`](https://github.com/eea/volto-arcgis-block/commit/ea5af8b02a5f2ee25b9b0be67cf3792bbbe84ed7)]
 ### [0.1.23](https://github.com/eea/volto-arcgis-block/compare/0.1.22...0.1.23) - 17 December 2021
 
 #### :hammer_and_wrench: Others
@@ -1446,7 +1465,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Trying to delay ArcGIS modules load [gonzalezsd - [`ff16985`](https://github.com/eea/volto-arcgis-block/commit/ff169858e42d30bfcacc423ffc27762bb9ef05a4)]
 - Run bootstrap to fix files [valentinab25 - [`236893f`](https://github.com/eea/volto-arcgis-block/commit/236893f03314eb638b7667f81b1f91491a98ee17)]
 - fix git_name [valentinab25 - [`c7806c3`](https://github.com/eea/volto-arcgis-block/commit/c7806c312964425dc23e5d4c6973de8b81ddaeac)]
-- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`e3afb51`](https://github.com/eea/volto-arcgis-block/commit/e3afb515dda459ee03e2b5d4b56465d2d4ad1503)]
 - Trying to change imports [gonzalezsd - [`d83d7e2`](https://github.com/eea/volto-arcgis-block/commit/d83d7e2f68da4b2a284735847f93c0763a7e13b6)]
 - default design [bipoza - [`88fbe0b`](https://github.com/eea/volto-arcgis-block/commit/88fbe0b2bc73e732e2993324a567f53902e85506)]
 - cleanup of unused code [bipoza - [`b167677`](https://github.com/eea/volto-arcgis-block/commit/b1676771f637f056cad50cb0bc186f2ea79e8517)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.220",
+  "version": "0.1.222",
   "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,12 @@ class HotspotWidget extends React.Component {
                     </label>
                   </div>
                 </div>
-                <div className="presentLandCoverContainer">
-                  {this.renderPresentLandCover()}
-                </div>
-                <div className="landCoverChangeContainer">
-                  {this.renderLandCoverChange()}
+                <div>
+                  {divs.map((div, i) => (
+                    <div key={i} className={div.className}>
+                      {div.func()}
+                    </div>
+                  ))}
                 </div>
                 <button
                   id="applyFilterButton"
@@ -802,6 +790,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 +824,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,14 +45,38 @@ class LegendWidget extends React.Component {
     });
   }
 
-  brokenLegendImagePatch() {
+  scanImages() {
+    let img = {};
     const collection = document.getElementsByClassName('esri-legend__symbol');
     Array.prototype.forEach.call(collection, (element) => {
-      let img = {};
+      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;
 
-      if (element.hasChildNodes()) img = element.childNodes[0];
-      else img = element;
+      img.onerror = () => this.setState({ loading: true });
+    });
+  }
 
+  brokenLegendImagePatch() {
+    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.complete && img.naturalHeight !== 0)) {
         // If img src returns a broken link
         if (img?.src?.includes('all_present_lc_a_pol')) {
@@ -62,28 +86,13 @@ class LegendWidget extends React.Component {
 
           img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent =
             'Dichotomous Present Land Cover in selected hot spots';
-          return;
         } else if (img?.src?.includes('all_present_lc_b_pol')) {
-          //img.src ='none';
-          const legends = document.getElementsByClassName(
-            'esri-legend__service',
-          );
-          for (let i = 0; i < legends.length; i++) {
-            const legend = legends[i];
-            //find the legend that contains a broken img
-            if (
-              legend.querySelector('img')?.src?.includes('all_present_lc_b_pol')
-            ) {
-              const img = legend.querySelector('img');
-              //set this legend to display none
-              if (!(img.complete && img.naturalHeight !== 0)) {
-                legend.style.display = 'none';
-              }
-              break; // break out of the loop after the first match
-            }
-          }
-          /*img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent =
-            'Modular Present Land Cover in selected hot spots';*/
+          img.src = this.props.hotspotData.all_present_lc[
+            'all_present_lc_b_pol'
+          ].FilterStaticImageLegend;
+
+          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.props.hotspotData.all_lcc[
             'all_lcc_a_pol'
@@ -92,29 +101,25 @@ class LegendWidget extends React.Component {
           img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent =
             'Dichotomous Land Cover Change in selected hot spots';
         } else if (img?.src?.includes('all_lcc_b_pol')) {
-          //img.src ='none';
-          const legends = document.getElementsByClassName(
-            'esri-legend__service',
-          );
-          for (let i = 0; i < legends.length; i++) {
-            const legend = legends[i];
-            //find the legend that contains a broken img
-            if (legend.querySelector('img')?.src?.includes('all_lcc_b_pol')) {
-              const img = legend.querySelector('img');
-              //set this legend to display none
-              if (!(img.complete && img.naturalHeight !== 0)) {
-                legend.style.display = 'none';
-              }
-              break; // break out of the loop after the first match
-            }
-          }
-          /*img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent =
-            'Modular Present Land Cover in selected hot spots';*/
+          img.src = this.props.hotspotData.all_lcc[
+            'all_lcc_b_pol'
+          ].FilterStaticImageLegend;
+
+          img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent =
+            'Modular Land Cover Change in selected hot spots';
         } else if (img?.src?.includes('cop_klc')) {
-          img.src = this.urls.cop_klc;
+          img.src = this.props.hotspotData.cop_klc[
+            'cop_klc'
+          ].FilterStaticImageLegend;
 
           img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent =
             'Key Landscapes for Conservation borders in selected hotspots';
+        } else if (img?.src?.includes('protected_areas')) {
+          img.src = this.props.hotspotData.protected_areas[
+            'protected_areas'
+          ].FilterStaticImageLegend;
+          img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent =
+            'Protected Areas in Key Landscapes for Conservation borders in selected hot-spots';
         } else if (img.style) {
           img.parentNode.parentNode.parentNode.parentNode.firstElementChild.style.display =
             'none';
@@ -126,6 +131,15 @@ class LegendWidget extends React.Component {
           span.innerHTML = 'No legend available';
           element.parentNode.appendChild(span);
         }
+        if (
+          img.closest('.esri-legend__service').firstElementChild.nodeName ===
+            'H3' &&
+          img.closest('.esri-legend__service').firstElementChild.textContent ===
+            'WMS'
+        ) {
+          img.closest('.esri-legend__service').firstElementChild.style.display =
+            'none';
+        }
       }
     });
   }
@@ -176,11 +190,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 +213,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);
@@ -323,8 +326,8 @@ class MenuWidget extends React.Component {
           }
         }
         if (!this.visibleLayers) this.visibleLayers = {};
-        this.view.watch('scale', (newValue) => {});
-        //this.handleRasterVectorLegend();
+        this.handleRasterVectorLegend();
+        this.setState({});
       }
     });
 
@@ -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(() => {
@@ -977,8 +980,8 @@ class MenuWidget extends React.Component {
                       <Popup
                         trigger={
                           product.ProductId ===
-                            '8474c3b080fa42cc837f1d2338fcf096' ||
-                          product.ProductTitle === 'Snow and Ice Parameters' ? (
+                          '8474c3b080fa42cc837f1d2338fcf096' /*||
+                          product.ProductTitle === 'Snow and Ice Parameters' */ ? (
                             <div className="zoom-in-message-container">
                               <span>{product.ProductTitle}</span>
                               <div
@@ -998,9 +1001,9 @@ class MenuWidget extends React.Component {
                         style={{ transform: 'translateX(-4rem)' }}
                       />
                     ) : product.ProductId ===
-                        '8474c3b080fa42cc837f1d2338fcf096' ||
+                      '8474c3b080fa42cc837f1d2338fcf096' /*||
                       product.ProductTitle ===
-                        'High Resolution Snow and Ice Parameters' ? (
+                        'High Resolution Snow and Ice Parameters' */ ? (
                       <div className="zoom-in-message-container">
                         <span>{product.ProductTitle}</span>
                         <div className="zoom-in-message">
@@ -1245,6 +1248,14 @@ class MenuWidget extends React.Component {
                                 Zoom in to view on map
                               </div>
                             </div>
+                          ) : dataset.productId ===
+                            'd764e020485a402598551fa461bf1db2' ? (
+                            <div className="hotspot-filter-message-container">
+                              <span>{dataset.DatasetTitle}</span>
+                              <div className="hotspot-filter-message hotspot-filter-message-dataset">
+                                Use the filter to visualize a KLC area
+                              </div>
+                            </div>
                           ) : (
                             <span>{dataset.DatasetTitle}</span>
                           )
@@ -1262,6 +1273,14 @@ class MenuWidget extends React.Component {
                           Zoom in to view on map
                         </div>
                       </div>
+                    ) : dataset.productId ===
+                      'd764e020485a402598551fa461bf1db2' ? (
+                      <div className="hotspot-filter-message-container">
+                        <span>{dataset.DatasetTitle}</span>
+                        <div className="hotspot-filter-message hotspot-filter-message-dataset">
+                          Use the filter to visualize a KLC area
+                        </div>
+                      </div>
                     ) : (
                       <span>{dataset.DatasetTitle}</span>
                     )}
@@ -1401,7 +1420,6 @@ class MenuWidget extends React.Component {
           url: viewService,
           featureInfoFormat: 'text/html',
           featureInfoUrl: viewService,
-          //id: layer.LayerId,
           title: '',
           legendEnabled: true,
           sublayers: [
@@ -1691,16 +1709,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 +1815,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 +1823,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 +1843,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 +1887,20 @@ 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.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];
@@ -1917,24 +1916,26 @@ class MenuWidget extends React.Component {
       this.toggleCustomLegendItem(this.layers[elem.id]);
     }
     this.activeLayersToHotspotData(elem.id);
-    // update DOM
-    //this.setState({});
   }
 
-  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 +2142,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 +2740,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 +2751,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 +3390,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);
   }
 
   /**

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

@@ -1244,7 +1244,14 @@ input[type='range']::-ms-track {
   box-shadow: none;
 }
 
-.zoom-in-message {
+.hotspot-filter-message-container,
+.hotspot-filter-message,
+.hotspot-filter-message-dataset {
+  display: block;
+}
+
+.zoom-in-message,
+.hotspot-filter-message {
   padding: 0.1rem 0.6rem 0.1rem 0.6rem;
   margin-top: 0.2rem;
   background: #a0b128;