@eeacms/volto-arcgis-block 0.1.476 → 0.1.478

package/.env

@@ -1 +1 @@
-JEST_USE_SETUP=OFF # Jest configuration variables: ON, OFF
+JEST_USE_SETUP=OFF # Jest configuration variables: ON, OFF

package/CHANGELOG.md

@@ -4,6 +4,22 @@ 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.478](https://github.com/eea/volto-arcgis-block/compare/0.1.477...0.1.478) - 3 September 2026
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`60974df`](https://github.com/eea/volto-arcgis-block/commit/60974df4c4d0af3f58e5b7845d408a9d0f022ccd)]
+
+#### :hammer_and_wrench: Others
+
+- (bug): Update WMS endpoint and parameters to restore map layer visualization [Unai Bolivar - [`1597090`](https://github.com/eea/volto-arcgis-block/commit/15970909fa22e24c78b2f6b3d83eb304e7fd039a)]
+### [0.1.477](https://github.com/eea/volto-arcgis-block/compare/0.1.476...0.1.477) - 2 September 2026
+
+#### :hammer_and_wrench: Others
+
+- (lint): lint and prettified [Unai Bolivar - [`e340270`](https://github.com/eea/volto-arcgis-block/commit/e340270b53e3591428cc13acb69041a6f90a448e)]
+- (chore): update hotspots widget for hsm II data [Unai Bolivar - [`9c9d672`](https://github.com/eea/volto-arcgis-block/commit/9c9d67254f5f69faf23d6aa6cb721b7cdafe9b16)]
+- (task): refactor hotspot widget to comply with updated JSON for geo klc hot spot data. [Unai Bolivar - [`39e8be7`](https://github.com/eea/volto-arcgis-block/commit/39e8be7e0fd0e1bfbf3dfe42e43ec7e3eabaafca)]
 ### [0.1.476](https://github.com/eea/volto-arcgis-block/compare/0.1.475...0.1.476) - 31 August 2026
 
 ### [0.1.475](https://github.com/eea/volto-arcgis-block/compare/0.1.474...0.1.475) - 19 August 2026

package/package.json

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

package/src/components/MapViewer/HotspotWidget.jsx

@@ -137,80 +137,192 @@ class HotspotWidget extends React.Component {
     return legendLinkUrl + legend;
   }
 
+  getHotspotWmsConfig() {
+    return {
+      endpoint:
+        this.urls.hotspotWmsEndpoint ||
+        'https://geospatial.jrc.ec.europa.eu/geoserver/hsm/wms',
+      version: this.urls.hotspotWmsVersion || '1.1.0',
+      srs: this.urls.hotspotWmsSrs || 'EPSG:3857',
+      layerNames: this.urls.hotspotWmsLayerNames || {
+        lcc: {
+          a: 'hsm:lcc_a_pols',
+          b: 'hsm:lcc_b_pols',
+        },
+        lc: {
+          a: 'hsm:present_lc_a_pols',
+          b: 'hsm:present_lc_b_pols',
+        },
+        klc: 'hsm:cop_klc',
+        pa: 'hsm:protected_areas',
+      },
+    };
+  }
+
+  resolveLayerVariant(activeLayers, type) {
+    if (!Array.isArray(activeLayers) || !activeLayers.length) return 'b';
+    const hasVariantA = activeLayers.some((layer) =>
+      layer.includes(type === 'lcc' ? 'all_lcc_a_pol' : 'all_present_lc_a_pol'),
+    );
+    return hasVariantA ? 'a' : 'b';
+  }
+
+  resolveWmsLayerName(type, variant) {
+    const config = this.getHotspotWmsConfig();
+    if (type === 'lcc') {
+      return config.layerNames.lcc[variant] || config.layerNames.lcc.b;
+    }
+    if (type === 'lc') {
+      return config.layerNames.lc[variant] || config.layerNames.lc.b;
+    }
+    if (type === 'klc') {
+      return config.layerNames.klc;
+    }
+    if (type === 'pa') {
+      return config.layerNames.pa;
+    }
+    return null;
+  }
+
+  buildCqlFilter(klcCode, date) {
+    const baseFilter =
+      "klc_code LIKE '" + klcCode + "' AND in_pa LIKE 'not_defined'";
+    if (!Number.isFinite(Number(date))) {
+      return baseFilter;
+    }
+    return baseFilter + ' AND date=' + Number(date);
+  }
+
+  buildWmsCustomLayerParameters(cqlFilter) {
+    const config = this.getHotspotWmsConfig();
+    return {
+      SERVICE: 'WMS',
+      REQUEST: 'GetMap',
+      FORMAT: 'image/png',
+      TRANSPARENT: 'true',
+      tiled: 'true',
+      STYLES: '',
+      VERSION: config.version,
+      SRS: config.srs,
+      CQL_FILTER: cqlFilter,
+    };
+  }
+
+  resolveLccDateOptions(
+    klcCode,
+    selectedLcYear,
+    lccDatesByLcYear,
+    lccDateList,
+  ) {
+    const klcLcDateMap = {
+      CAF_02: {
+        2016: [2000, 2019],
+        2019: [2024],
+      },
+      CAF_05: {
+        2015: [2000, 2019],
+        2019: [2024],
+      },
+    };
+
+    const mappedByKlc = klcLcDateMap[klcCode] || null;
+    if (mappedByKlc && Number.isFinite(Number(selectedLcYear))) {
+      const mapped = mappedByKlc[Number(selectedLcYear)];
+      if (Array.isArray(mapped) && mapped.length) {
+        return Array.from(new Set(mapped)).sort((a, b) => a - b);
+      }
+    }
+
+    const mappedByData = Number.isFinite(Number(selectedLcYear))
+      ? lccDatesByLcYear[Number(selectedLcYear)]
+      : null;
+    if (Array.isArray(mappedByData) && mappedByData.length) {
+      return mappedByData;
+    }
+
+    return lccDateList;
+  }
+
   layerModelInit() {
-    const serviceUrl = this.urls.serviceUrl;
+    const serviceUrl = this.getHotspotWmsConfig().endpoint;
     this.esriLayer_lcc = new WMSLayer({
       url: serviceUrl,
+      version: this.getHotspotWmsConfig().version,
       title: '',
       //featureInfoFormat: "application/json",
-      customLayerParameters: {},
+      customLayerParameters: this.buildWmsCustomLayerParameters(''),
       sublayers: [
         // LAND COVER CHANGE DATASET ________________________________________________________________________________________________________________
         {
-          name: this.addLegendName('all_lcc_a_pol'),
+          name: this.addLegendName(this.resolveWmsLayerName('lcc', 'a')),
           legendUrl: this.addLegendNameToUrl('all_lcc_a_pol'),
         },
       ],
     });
     this.esriLayer_lcc = new WMSLayer({
       url: serviceUrl,
+      version: this.getHotspotWmsConfig().version,
       title: '',
       //featureInfoFormat: "application/json",
-      customLayerParameters: {},
+      customLayerParameters: this.buildWmsCustomLayerParameters(''),
       sublayers: [
         // LAND COVER CHANGE DATASET ________________________________________________________________________________________________________________
         {
-          name: this.addLegendName('all_lcc_b_pol'),
+          name: this.addLegendName(this.resolveWmsLayerName('lcc', 'b')),
           legendUrl: this.addLegendNameToUrl('all_lcc_b_pol'),
         },
       ],
     });
     this.esriLayer_lc = new WMSLayer({
       url: serviceUrl,
+      version: this.getHotspotWmsConfig().version,
       title: '',
       //featureInfoFormat: "application/json",
-      customLayerParameters: {},
+      customLayerParameters: this.buildWmsCustomLayerParameters(''),
       sublayers: [
         // PRESENT LAND COVER DATASET ________________________________________________________________________________________________________________
         {
-          name: this.addLegendName('all_present_lc_a_pol'),
+          name: this.addLegendName(this.resolveWmsLayerName('lc', 'a')),
           legendUrl: this.addLegendNameToUrl('all_present_lc_a_pol'),
         },
       ],
     });
     this.esriLayer_lc = new WMSLayer({
       url: serviceUrl,
+      version: this.getHotspotWmsConfig().version,
       title: '',
       //featureInfoFormat: "application/json",
-      customLayerParameters: {},
+      customLayerParameters: this.buildWmsCustomLayerParameters(''),
       sublayers: [
         // PRESENT LAND COVER DATASET ________________________________________________________________________________________________________________
         {
-          name: this.addLegendName('all_present_lc_b_pol'),
+          name: this.addLegendName(this.resolveWmsLayerName('lc', 'b')),
           legendUrl: this.addLegendNameToUrl('all_present_lc_b_pol'),
         },
       ],
     });
     this.esriLayer_klc = new WMSLayer({
       url: serviceUrl,
+      version: this.getHotspotWmsConfig().version,
       title: '',
       //featureInfoFormat: "application/json",
-      customLayerParameters: {},
+      customLayerParameters: this.buildWmsCustomLayerParameters(''),
       sublayers: [
         {
-          name: this.addLegendName('cop_klc'),
+          name: this.addLegendName(this.resolveWmsLayerName('klc')),
           legendUrl: this.addLegendNameToUrl('cop_klc'),
         },
       ],
     });
     this.esriLayer_pa = new WMSLayer({
       url: serviceUrl,
+      version: this.getHotspotWmsConfig().version,
       title: '',
       //featureInfoFormat: "application/json",
-      customLayerParameters: {},
+      customLayerParameters: this.buildWmsCustomLayerParameters(''),
       sublayers: [
         {
-          name: this.addLegendName('protected_areas'),
+          name: this.addLegendName(this.resolveWmsLayerName('pa')),
           legendUrl: this.addLegendNameToUrl('protected_areas'),
         },
       ],
@@ -277,17 +389,12 @@ class HotspotWidget extends React.Component {
             .value.match(/\d+/g)
             .map(Number)[0];
         }
-        for (let i = 0; activeLayers[i]; i++) {
-          let layer = activeLayers[i];
-          if (layer.includes('all_lcc_a_pol')) {
-            typeLegend = 'all_lcc_a_pol';
-            title = 'Dichotomous Land Cover Change in selected Hot Spots';
-            break;
-          } else {
-            typeLegend = 'all_lcc_b_pol';
-            title = 'Modular Land Cover Change in selected Hot Spots';
-          }
-        }
+        const layerVariant = this.resolveLayerVariant(activeLayers, 'lcc');
+        typeLegend = layerVariant === 'a' ? 'all_lcc_a_pol' : 'all_lcc_b_pol';
+        title =
+          layerVariant === 'a'
+            ? 'Dichotomous Land Cover Change in selected Hot Spots'
+            : 'Modular Land Cover Change in selected Hot Spots';
 
         this.addFilteredLayersData(
           filteredLayersData,
@@ -298,7 +405,9 @@ class HotspotWidget extends React.Component {
 
         filterLayer = this.esriLayer_lcc;
 
-        filterLayer.sublayers.items[0].name = this.addLegendName(typeLegend);
+        filterLayer.sublayers.items[0].name = this.addLegendName(
+          this.resolveWmsLayerName('lcc', layerVariant),
+        );
         filterLayer.sublayers.items[0].legendUrl =
           this.addLegendNameToUrl(typeLegend);
         filterLayer.sublayers.items[0].title = title;
@@ -307,30 +416,27 @@ class HotspotWidget extends React.Component {
           bookmarkHotspotFilter.filteredLayers &&
           bookmarkHotspotFilter.filteredLayers['lcc_filter'] !== undefined
         ) {
-          filterLayer.customLayerParameters['CQL_FILTER'] =
-            bookmarkHotspotFilter.filteredLayers['lcc_filter'];
+          filterLayer.customLayerParameters =
+            this.buildWmsCustomLayerParameters(
+              bookmarkHotspotFilter.filteredLayers['lcc_filter'],
+            );
         } else {
-          filterLayer.customLayerParameters['CQL_FILTER'] =
-            'klc_code LIKE ' +
-            "'" +
-            this.dataKlc_code +
-            "'" +
-            " AND in_pa = 'not_defined' AND date = " +
-            selectBoxHighlightsLcc;
+          filterLayer.customLayerParameters =
+            this.buildWmsCustomLayerParameters(
+              this.buildCqlFilter(this.dataKlc_code, selectBoxHighlightsLcc),
+            );
         }
       }
       if (type === 'lc') {
-        for (let i = 0; i < activeLayers.length; i++) {
-          let layer = activeLayers[i];
-          if (layer.includes('all_present_lc_a_pol')) {
-            typeLegend = 'all_present_lc_a_pol';
-            title = 'Dichotomous Present Land Cover in selected Hot Spots';
-            break;
-          } else {
-            typeLegend = 'all_present_lc_b_pol';
-            title = 'Modular Present Land Cover in selected Hot Spots';
-          }
-        }
+        const layerVariant = this.resolveLayerVariant(activeLayers, 'lc');
+        typeLegend =
+          layerVariant === 'a'
+            ? 'all_present_lc_a_pol'
+            : 'all_present_lc_b_pol';
+        title =
+          layerVariant === 'a'
+            ? 'Dichotomous Present Land Cover in selected Hot Spots'
+            : 'Modular Present Land Cover in selected Hot Spots';
 
         let selectLcBoxTime =
           document.getElementById('select-klc-lcTime').value;
@@ -353,7 +459,9 @@ class HotspotWidget extends React.Component {
 
         filterLayer = this.esriLayer_lc;
 
-        filterLayer.sublayers.items[0].name = this.addLegendName(typeLegend);
+        filterLayer.sublayers.items[0].name = this.addLegendName(
+          this.resolveWmsLayerName('lc', layerVariant),
+        );
         filterLayer.sublayers.items[0].legendUrl =
           this.addLegendNameToUrl(typeLegend);
         filterLayer.sublayers.items[0].title = title;
@@ -362,16 +470,15 @@ class HotspotWidget extends React.Component {
           bookmarkHotspotFilter.filteredLayers &&
           bookmarkHotspotFilter.filteredLayers['lc_filter'] !== undefined
         ) {
-          filterLayer.customLayerParameters['CQL_FILTER'] =
-            bookmarkHotspotFilter.filteredLayers['lc_filter'];
+          filterLayer.customLayerParameters =
+            this.buildWmsCustomLayerParameters(
+              bookmarkHotspotFilter.filteredLayers['lc_filter'],
+            );
         } else {
-          filterLayer.customLayerParameters['CQL_FILTER'] =
-            'klc_code LIKE ' +
-            "'" +
-            this.dataKlc_code +
-            "'" +
-            " AND in_pa = 'not_defined' AND date = " +
-            selectBoxHighlightsLc;
+          filterLayer.customLayerParameters =
+            this.buildWmsCustomLayerParameters(
+              this.buildCqlFilter(this.dataKlc_code, selectBoxHighlightsLc),
+            );
         }
       }
       if (type === 'klc') {
@@ -381,13 +488,20 @@ class HotspotWidget extends React.Component {
           bookmarkHotspotFilter.filteredLayers &&
           bookmarkHotspotFilter.filteredLayers['klc_filter'] !== undefined
         ) {
-          this.esriLayer_klc.customLayerParameters['CQL_FILTER'] =
-            bookmarkHotspotFilter.filteredLayers['klc_filter'];
+          this.esriLayer_klc.customLayerParameters =
+            this.buildWmsCustomLayerParameters(
+              bookmarkHotspotFilter.filteredLayers['klc_filter'],
+            );
         } else {
-          this.esriLayer_klc.customLayerParameters['CQL_FILTER'] =
-            "klc_code LIKE '" + this.dataKlc_code + "'";
+          this.esriLayer_klc.customLayerParameters =
+            this.buildWmsCustomLayerParameters(
+              "klc_code LIKE '" + this.dataKlc_code + "'",
+            );
         }
         filterLayer = this.esriLayer_klc;
+        filterLayer.sublayers.items[0].name = this.addLegendName(
+          this.resolveWmsLayerName('klc'),
+        );
         filterLayer.sublayers.items[0].title = title;
       }
       if (type === 'pa') {
@@ -398,13 +512,20 @@ class HotspotWidget extends React.Component {
           bookmarkHotspotFilter.filteredLayers &&
           bookmarkHotspotFilter.filteredLayers['pa_filter'] !== undefined
         ) {
-          this.esriLayer_pa.customLayerParameters['CQL_FILTER'] =
-            bookmarkHotspotFilter.filteredLayers['pa_filter'];
+          this.esriLayer_pa.customLayerParameters =
+            this.buildWmsCustomLayerParameters(
+              bookmarkHotspotFilter.filteredLayers['pa_filter'],
+            );
         } else {
-          this.esriLayer_pa.customLayerParameters['CQL_FILTER'] =
-            "klc_code LIKE '" + this.dataKlc_code + "'";
+          this.esriLayer_pa.customLayerParameters =
+            this.buildWmsCustomLayerParameters(
+              "klc_code LIKE '" + this.dataKlc_code + "'",
+            );
         }
         filterLayer = this.esriLayer_pa;
+        filterLayer.sublayers.items[0].name = this.addLegendName(
+          this.resolveWmsLayerName('pa'),
+        );
         filterLayer.sublayers.items[0].title = title;
       }
       layersToAdd[type + '_filter'] = filterLayer;
@@ -629,7 +750,13 @@ class HotspotWidget extends React.Component {
                 data-target-property="layout"
                 onBlur={() => {}}
                 onChange={(e) => {
-                  this.disableButton();
+                  this.setState(
+                    { lcYear: e.target.value, lccYear: null },
+                    () => {
+                      this.updateLccOptionsForSelectedLc();
+                      this.disableButton();
+                    },
+                  );
                 }}
               ></select>
             </label>
@@ -647,9 +774,14 @@ class HotspotWidget extends React.Component {
     let dichotomousKLCAreas = [];
     let activeLayers = [];
 
-    if (this.props.hotspotData['activeLayers'] === undefined) return;
-
-    activeLayers = Object.keys(this.props.hotspotData['activeLayers']);
+    if (
+      this.props.hotspotData &&
+      this.props.hotspotData['activeLayers'] !== undefined
+    ) {
+      activeLayers = Object.keys(this.props.hotspotData['activeLayers']);
+    } else {
+      activeLayers = [];
+    }
 
     if (selectedOption === undefined) return;
 
@@ -657,19 +789,22 @@ class HotspotWidget extends React.Component {
     selectBoxLccTime = document.getElementById('select-klc-lccTime');
     selectBoxLcTime = document.getElementById('select-klc-lcTime');
 
-    if (selectedOption !== this.state.selectedArea) {
-      this.setState({
-        lcYear: null,
-        lccYear: null,
-      });
-    }
-
     //this.selectedArea = selectedOption;
 
     for (let i = 0; i < data.length; i++) {
       var option = data[i].node.klc_name;
 
-      let keyMapInfoObj = JSON.parse(data[i].node.keymap_info) || {};
+      let rawKeymapInfo = data[i].node.keymap_info;
+      let keyMapInfoObj = {};
+      if (typeof rawKeymapInfo === 'string') {
+        try {
+          keyMapInfoObj = JSON.parse(rawKeymapInfo) || {};
+        } catch (e) {
+          keyMapInfoObj = {};
+        }
+      } else if (rawKeymapInfo && typeof rawKeymapInfo === 'object') {
+        keyMapInfoObj = rawKeymapInfo;
+      }
 
       if (keyMapInfoObj.b_classes === true) {
         modularKLCAreas.push(option);
@@ -695,36 +830,106 @@ class HotspotWidget extends React.Component {
           selectBoxLccTime.options[0].disabled = true;
         }
 
-        if (
-          data[i].node.keymap_info
-            .toLowerCase()
-            .includes('multiple_dates":true')
-        ) {
-          //new select year options values
-          var optionLcTime = data[i].node.present_lc_year;
-          var indexStart = data[i].node.keymap_info
-            .toLowerCase()
-            .indexOf('"dates":[ {');
-          var indexEnd = data[i].node.keymap_info.toLowerCase().indexOf(' }],');
-          var strOut = data[i].node.keymap_info.substring(indexStart, indexEnd);
-          var numbers = strOut.match(/\d+/g).map(Number);
-          numbers.forEach((element) => {
-            selectBoxLccTime.options.add(new Option(element, element, element));
+        let lccDateList = [];
+        let lcDateList = [];
+        let lccDatesByLcYear = {};
+
+        if (Array.isArray(keyMapInfoObj.dates)) {
+          keyMapInfoObj.dates.forEach((entry) => {
+            const lccDate = Number(
+              entry && typeof entry === 'object' ? entry?.date : entry,
+            );
+            const lcDate = Number(
+              entry && typeof entry === 'object' ? entry?.lc_date : undefined,
+            );
+            if (Number.isFinite(lccDate)) {
+              lccDateList.push(lccDate);
+            }
+            if (Number.isFinite(lcDate)) {
+              lcDateList.push(lcDate);
+              if (!lccDatesByLcYear[lcDate]) {
+                lccDatesByLcYear[lcDate] = [];
+              }
+              if (Number.isFinite(lccDate)) {
+                lccDatesByLcYear[lcDate].push(lccDate);
+              }
+            }
           });
-          selectBoxLcTime.options.add(
-            new Option(optionLcTime, optionLcTime, optionLcTime),
-          );
-        } else {
-          //new select year options values
-          var optionLccTime = data[i].node.lcc_year;
-          selectBoxLccTime.options.add(
-            new Option(optionLccTime, optionLccTime, optionLccTime),
+        }
+
+        if (Array.isArray(keyMapInfoObj.multiple_lc_dates)) {
+          lcDateList = lcDateList.concat(
+            keyMapInfoObj.multiple_lc_dates
+              .map((yearEntry) =>
+                Number(
+                  yearEntry && typeof yearEntry === 'object'
+                    ? yearEntry?.date
+                    : yearEntry,
+                ),
+              )
+              .filter((year) => Number.isFinite(year)),
           );
-          optionLcTime = data[i].node.present_lc_year;
-          selectBoxLcTime.options.add(
-            new Option(optionLcTime, optionLcTime, optionLcTime),
+        }
+
+        const dynamicYearValues = Object.keys(keyMapInfoObj)
+          .filter((key) => /^year\d+$/.test(key))
+          .map((key) => Number(keyMapInfoObj[key]))
+          .filter((year) => Number.isFinite(year));
+        if (dynamicYearValues.length) {
+          lccDateList = lccDateList.concat(dynamicYearValues);
+        }
+
+        const presentLcYearFromKeymap = Number(keyMapInfoObj.year_present_lc);
+        if (Number.isFinite(presentLcYearFromKeymap)) {
+          lcDateList.push(presentLcYearFromKeymap);
+        }
+
+        if (
+          !lccDateList.length &&
+          Number.isFinite(Number(data[i].node.lcc_year))
+        ) {
+          lccDateList = [Number(data[i].node.lcc_year)];
+        }
+        if (
+          !lcDateList.length &&
+          Number.isFinite(Number(data[i].node.present_lc_year))
+        ) {
+          lcDateList = [Number(data[i].node.present_lc_year)];
+        }
+
+        lccDateList = Array.from(new Set(lccDateList)).sort((a, b) => a - b);
+        lcDateList = Array.from(new Set(lcDateList)).sort((a, b) => a - b);
+
+        Object.keys(lccDatesByLcYear).forEach((lcDateKey) => {
+          lccDatesByLcYear[lcDateKey] = Array.from(
+            new Set(lccDatesByLcYear[lcDateKey]),
+          ).sort((a, b) => a - b);
+        });
+
+        lcDateList.forEach((element) => {
+          selectBoxLcTime.options.add(new Option(element, element, element));
+        });
+
+        if (this.state.lcYear !== null) {
+          const hasLcYearOption = Array.from(selectBoxLcTime.options).some(
+            (option) => option.value === this.state.lcYear,
           );
+          selectBoxLcTime.value = hasLcYearOption
+            ? this.state.lcYear
+            : 'default';
         }
+
+        const selectedLcYear = Number(this.state.lcYear);
+        const lccOptionsToUse = this.resolveLccDateOptions(
+          data[i].node.klc_code,
+          selectedLcYear,
+          lccDatesByLcYear,
+          lccDateList,
+        );
+
+        lccOptionsToUse.forEach((element) => {
+          selectBoxLccTime.options.add(new Option(element, element, element));
+        });
       }
     }
     if (selectBox) {
@@ -811,6 +1016,22 @@ class HotspotWidget extends React.Component {
           break;
         }
       }
+    } else if (selectBox) {
+      const allKLCAreas = Array.from(
+        new Set(modularKLCAreas.concat(dichotomousKLCAreas)),
+      ).sort((a, b) => a.localeCompare(b));
+      for (let i = 0; i < allKLCAreas.length; i++) {
+        let option = allKLCAreas[i];
+        selectBox.options.add(new Option(option, option, option));
+      }
+      if (this.state.selectedArea !== null) {
+        const hasSelectedOption = Array.from(selectBox.options).some(
+          (option) => option.value === this.state.selectedArea,
+        );
+        selectBox.value = hasSelectedOption
+          ? this.state.selectedArea
+          : 'default';
+      }
     }
     if (selectBox.value === 'default') {
       if (selectBoxLcTime) {
@@ -840,6 +1061,98 @@ class HotspotWidget extends React.Component {
     }
   }
 
+  updateLccOptionsForSelectedLc() {
+    const selectBoxLccTime = document.getElementById('select-klc-lccTime');
+    if (
+      !selectBoxLccTime ||
+      !this.state.selectedArea ||
+      !Array.isArray(this.dataJSONNames)
+    ) {
+      return;
+    }
+
+    const selectedNode = this.dataJSONNames.find(
+      (entry) => entry?.node?.klc_name === this.state.selectedArea,
+    )?.node;
+
+    if (!selectedNode) {
+      return;
+    }
+
+    let rawKeymapInfo = selectedNode.keymap_info;
+    let keyMapInfoObj = {};
+    if (typeof rawKeymapInfo === 'string') {
+      try {
+        keyMapInfoObj = JSON.parse(rawKeymapInfo) || {};
+      } catch (e) {
+        keyMapInfoObj = {};
+      }
+    } else if (rawKeymapInfo && typeof rawKeymapInfo === 'object') {
+      keyMapInfoObj = rawKeymapInfo;
+    }
+
+    let lccDateList = [];
+    let lccDatesByLcYear = {};
+
+    if (Array.isArray(keyMapInfoObj.dates)) {
+      keyMapInfoObj.dates.forEach((entry) => {
+        const lccDate = Number(
+          entry && typeof entry === 'object' ? entry?.date : entry,
+        );
+        const lcDate = Number(
+          entry && typeof entry === 'object' ? entry?.lc_date : undefined,
+        );
+        if (Number.isFinite(lccDate)) {
+          lccDateList.push(lccDate);
+        }
+        if (Number.isFinite(lcDate)) {
+          if (!lccDatesByLcYear[lcDate]) {
+            lccDatesByLcYear[lcDate] = [];
+          }
+          if (Number.isFinite(lccDate)) {
+            lccDatesByLcYear[lcDate].push(lccDate);
+          }
+        }
+      });
+    }
+
+    const dynamicYearValues = Object.keys(keyMapInfoObj)
+      .filter((key) => /^year\d+$/.test(key))
+      .map((key) => Number(keyMapInfoObj[key]))
+      .filter((year) => Number.isFinite(year));
+    if (dynamicYearValues.length) {
+      lccDateList = lccDateList.concat(dynamicYearValues);
+    }
+
+    if (!lccDateList.length && Number.isFinite(Number(selectedNode.lcc_year))) {
+      lccDateList = [Number(selectedNode.lcc_year)];
+    }
+
+    lccDateList = Array.from(new Set(lccDateList)).sort((a, b) => a - b);
+    Object.keys(lccDatesByLcYear).forEach((lcDateKey) => {
+      lccDatesByLcYear[lcDateKey] = Array.from(
+        new Set(lccDatesByLcYear[lcDateKey]),
+      ).sort((a, b) => a - b);
+    });
+
+    const selectedLcYear = Number(this.state.lcYear);
+    const lccOptionsToUse = this.resolveLccDateOptions(
+      selectedNode.klc_code,
+      selectedLcYear,
+      lccDatesByLcYear,
+      lccDateList,
+    );
+
+    this.removeOptions(selectBoxLccTime);
+    selectBoxLccTime.options.add(
+      new Option('Select a year', 'default', true, true),
+    );
+    selectBoxLccTime.options[0].disabled = true;
+    lccOptionsToUse.forEach((element) => {
+      selectBoxLccTime.options.add(new Option(element, element, element));
+    });
+  }
+
   renderLandCoverChange() {
     return (
       <div className="measurement-dropdown" id="LandCoverChangeDropdown">
@@ -955,7 +1268,11 @@ class HotspotWidget extends React.Component {
                       <select
                         onBlur={() => {}}
                         onChange={(e) => {
-                          this.setState({ selectedArea: e.target.value });
+                          this.setState({
+                            selectedArea: e.target.value,
+                            lcYear: null,
+                            lccYear: null,
+                          });
                         }}
                         id="select-klc-area"
                         className="esri-select"
@@ -999,6 +1316,8 @@ class HotspotWidget extends React.Component {
     });
     this.layerModelInit();
     this.getBBoxData();
+    this.getKLCNames(this.dataJSONNames, this.state.selectedArea);
+    this.disableButton();
     this.arcgisEventHandles = [];
     this.props.view.when(() => {
       const handle = this.props.view.map.layers.on('change', () => {
@@ -1070,11 +1389,54 @@ class HotspotWidget extends React.Component {
     }
   }
 
-  componentDidUpdate(prevState, prevProps) {
-    if (prevProps.hotspotData !== this.props.hotspotData) {
+  getHotspotLayerSignature(hotspotData) {
+    if (!hotspotData || typeof hotspotData !== 'object') {
+      return '';
+    }
+    const activeLayers = hotspotData.activeLayers;
+    if (!activeLayers || typeof activeLayers !== 'object') {
+      return '';
+    }
+    return Object.keys(activeLayers)
+      .filter(
+        (key) => key.includes('all_present_lc_') || key.includes('all_lcc_'),
+      )
+      .sort()
+      .join('|');
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const prevHotspotLayerSignature = this.getHotspotLayerSignature(
+      prevProps.hotspotData,
+    );
+    const nextHotspotLayerSignature = this.getHotspotLayerSignature(
+      this.props.hotspotData,
+    );
+
+    if (
+      prevHotspotLayerSignature !== nextHotspotLayerSignature &&
+      (this.state.selectedArea !== null ||
+        this.state.lcYear !== null ||
+        this.state.lccYear !== null)
+    ) {
+      this.setState({
+        selectedArea: null,
+        lcYear: null,
+        lccYear: null,
+      });
+      return;
+    }
+
+    if (
+      prevProps.hotspotData !== this.props.hotspotData ||
+      prevState.selectedArea !== this.state.selectedArea
+    ) {
       this.getKLCNames(this.dataJSONNames, this.state.selectedArea);
       this.disableButton();
     }
+    if (prevState.lcYear !== this.state.lcYear) {
+      this.disableButton();
+    }
   }
 }
 export default HotspotWidget;

package/src/components/MapViewer/MenuWidget.jsx

@@ -7007,14 +7007,25 @@ class MenuWidget extends React.Component {
   layersReorder() {
     let activeLayers = document.querySelectorAll('.active-layer');
     let counter = activeLayers.length - 1;
-    let filterLayer;
+    const hotspotData = this.props.hotspotData || {};
+    const hotspotFilteredLayers =
+      hotspotData.filteredLayers &&
+      typeof hotspotData.filteredLayers === 'object'
+        ? hotspotData.filteredLayers
+        : null;
+    const hotspotActiveLayers =
+      hotspotData.activeLayers && typeof hotspotData.activeLayers === 'object'
+        ? hotspotData.activeLayers
+        : null;
+
     activeLayers.forEach((item, index) => {
+      let filterLayer;
       if (
-        this.props.hotspotData &&
-        this.props.hotspotData.filteredLayers &&
-        Object.keys(this.props.hotspotData.filteredLayers).length > 0
+        hotspotFilteredLayers &&
+        Object.keys(hotspotFilteredLayers).length > 0 &&
+        hotspotActiveLayers
       ) {
-        Object.keys(this.props.hotspotData.activeLayers).forEach((key) => {
+        Object.keys(hotspotActiveLayers).forEach((key) => {
           if (item.id.includes(key)) {
             if (key.includes('all_lcc')) {
               filterLayer = this.layers['lcc_filter'];
@@ -7022,12 +7033,11 @@ class MenuWidget extends React.Component {
               filterLayer = this.layers['lc_filter'];
             }
           }
-          this.map.reorder(filterLayer, index);
         });
       }
       let order = counter - index;
       item.setAttribute('layer-order', order);
-      if (filterLayer === undefined) {
+      if (filterLayer === undefined || filterLayer === null) {
         this.layerReorder(this.layers[item.getAttribute('layer-id')], order);
       } else {
         this.layerReorder(filterLayer, order);
@@ -7056,6 +7066,7 @@ class MenuWidget extends React.Component {
    * @param {*} index
    */
   layerReorder(layer, index) {
+    if (!layer || !this.map) return;
     this.map.reorder(layer, index);
   }
 
@@ -8006,6 +8017,7 @@ class MenuWidget extends React.Component {
   }
 
   deleteFilteredLayer(layer) {
+    if (!layer || !this.props || !this.props.map) return;
     if (
       !(
         layer.includes('all_lcc') ||
@@ -8016,9 +8028,13 @@ class MenuWidget extends React.Component {
     )
       return;
     let filterLayer;
-    //let temp;
-    let updatedHotspotData = this.props.hotspotData;
-    let updatedFilteredLayers = this.props.hotspotData['filteredLayers'];
+    let updatedHotspotData = this.props.hotspotData || {};
+    let updatedFilteredLayers =
+      updatedHotspotData &&
+      updatedHotspotData['filteredLayers'] &&
+      typeof updatedHotspotData['filteredLayers'] === 'object'
+        ? updatedHotspotData['filteredLayers']
+        : {};
     if (this.layers['lcc_filter'] && layer.includes('all_lcc')) {
       this.layers['lcc_filter'].visible = false;
       filterLayer = this.props.map.findLayerById('lcc_filter');
@@ -8044,7 +8060,9 @@ class MenuWidget extends React.Component {
       layer.includes('cop_klc')
     ) {
       this.layers['klc_filter'].visible = false;
-      this.layers[layer].visible = false;
+      if (this.layers[layer]) {
+        this.layers[layer].visible = false;
+      }
       filterLayer = this.props.map.findLayerById('klc_filter');
       if (filterLayer !== undefined) {
         //  temp = filterLayer;
@@ -8059,7 +8077,9 @@ class MenuWidget extends React.Component {
       layer.includes('protected_areas')
     ) {
       this.layers['pa_filter'].visible = false;
-      this.layers[layer].visible = false;
+      if (this.layers[layer]) {
+        this.layers[layer].visible = false;
+      }
       filterLayer = this.props.map.findLayerById('pa_filter');
       if (filterLayer !== undefined) {
         //  temp = filterLayer;
@@ -8070,8 +8090,10 @@ class MenuWidget extends React.Component {
       delete updatedFilteredLayers['pa_filter'];
     }
     this.props.mapLayersHandler(this.layers);
-    updatedHotspotData['filteredLayers'] = updatedFilteredLayers;
-    this.props.hotspotDataHandler(updatedHotspotData);
+    if (this.props.hotspotDataHandler) {
+      updatedHotspotData['filteredLayers'] = updatedFilteredLayers;
+      this.props.hotspotDataHandler(updatedHotspotData);
+    }
   }
 
   /**

package/src/components/MapViewer/config.js

@@ -234,6 +234,21 @@ const config = {
       '/products/lclcc-hot-spots/json-files/all_geo_klc.json/@@download/file',
     legendLinkUrl:
       'https://geospatial.jrc.ec.europa.eu/geoserver/hotspots/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=',
+    hotspotWmsEndpoint: 'https://geospatial.jrc.ec.europa.eu/geoserver/hsm/wms',
+    hotspotWmsVersion: '1.1.0',
+    hotspotWmsSrs: 'EPSG:3857',
+    hotspotWmsLayerNames: {
+      lcc: {
+        a: 'hsm:lcc_a_pols',
+        b: 'hsm:lcc_b_pols',
+      },
+      lc: {
+        a: 'hsm:present_lc_a_pols',
+        b: 'hsm:present_lc_b_pols',
+      },
+      klc: 'hsm:cop_klc',
+      pa: 'hsm:protected_areas',
+    },
     serviceUrl: 'https://geospatial.jrc.ec.europa.eu/geoserver/hotspots/wms',
     positronCompositeThumbnail:
       'https://gisco-services.ec.europa.eu/maps/wmts/OSMPositronComposite/EPSG3857/0/0/0.png',