@eeacms/volto-arcgis-block 0.1.91 → 0.1.92

package/CHANGELOG.md

@@ -4,6 +4,12 @@ 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.92](https://github.com/eea/volto-arcgis-block/compare/0.1.91...0.1.92) - 2 February 2023
+
+#### :hammer_and_wrench: Others
+
+- CLMS-1581. Hotspot widget first version. [masanchez85 - [`f053c16`](https://github.com/eea/volto-arcgis-block/commit/f053c16bcadd8ff327b3317bd7efee6b21526a6d)]
+- CLMS-1668. Hotspot filter v1 [masanchez85 - [`ca16275`](https://github.com/eea/volto-arcgis-block/commit/ca162750ea9d6627fccde99cb3d1caef1fd3fa26)]
 ### [0.1.91](https://github.com/eea/volto-arcgis-block/compare/0.1.90...0.1.91) - 27 January 2023
 
 #### :hammer_and_wrench: Others
@@ -331,10 +337,13 @@ 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)]
@@ -394,6 +403,7 @@ 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
@@ -413,6 +423,7 @@ 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
 
@@ -507,6 +518,7 @@ 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
@@ -751,6 +763,7 @@ 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.91",
+  "version": "0.1.92",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",

package/src/components/MapViewer/HotspotWidget.jsx

@@ -0,0 +1,460 @@
+import React, { createRef } from 'react';
+import { loadModules } from 'esri-loader';
+
+var WMSLayer;
+
+class HotspotWidget extends React.Component {
+  /**
+   * Creator of the Hotspot widget class
+   * @param {*} props
+   */
+  constructor(props) {
+    super(props);
+    //We create a reference to a DOM element to be mounted
+    this.container = createRef();
+    //Initially, we set the state of the component to
+    //not be showing the basemap panel
+    this.state = {
+      showMapMenu: false,
+      avtiveLayers: sessionStorage.checkedLayers,
+    };
+    this.menuClass =
+      'esri-icon-filter esri-widget--button esri-widget esri-interactive';
+    this.dataKlc_code = null;
+    this.esriLayer_lcc = null;
+    this.esriLayer_lc = null;
+    this.subscribedLayers = sessionStorage;
+    this.checkedLayers = this.props.layers
+      ? this.props.layers.checkedLayers
+      : '';
+    this.dataJSONNames = [];
+    this.klcHighlightsArray = [];
+    this.renderPresentLandCover = this.renderPresentLandCover.bind(this);
+    this.renderLandCoverChange = this.renderLandCoverChange.bind(this);
+    this.getLayerParameters = this.getLayerParameters.bind(this);
+    this.getKLCNames = this.getKLCNames.bind(this);
+    this.layerModelInit = this.layerModelInit.bind(this);
+    this.handleApplyFilter = this.handleApplyFilter.bind(this);
+    this.getLayerParameters();
+  }
+
+  loader() {
+    return loadModules(['esri/layers/WMSLayer']).then(([_WMSLayer]) => {
+      WMSLayer = _WMSLayer;
+    });
+  }
+
+  layerModelInit() {
+    const serviceUrl =
+      'https://geospatial.jrc.ec.europa.eu/geoserver/hotspots/wms';
+
+    this.esriLayer_lcc = new WMSLayer({
+      url: serviceUrl,
+      // featureInfoFormat: "text/html",
+      customLayerParameters: {},
+      sublayers: [
+        // LAND COVER CHANGE DATASET ________________________________________________________________________________________________________________
+        {
+          name: 'all_lcc_a_pol',
+          legendUrl:
+            'https://geospatial.jrc.ec.europa.eu/geoserver/hotspots/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=all_lcc_a_pol',
+        },
+      ],
+    });
+    this.esriLayer_lc = new WMSLayer({
+      url: serviceUrl,
+      // featureInfoFormat: "text/html",
+      customLayerParameters: {},
+      sublayers: [
+        // PRESENT LAND COVER DATASET ________________________________________________________________________________________________________________
+        {
+          name: 'all_lcc_a_pol',
+          legendUrl:
+            'https://geospatial.jrc.ec.europa.eu/geoserver/hotspots/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=all_lcc_a_pol',
+        },
+      ],
+    });
+  }
+
+  handleApplyFilter(typeFilter) {
+    if (this.props.selectedLayers) {
+      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'),
+      );
+      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 (typeFilter === 'lcc') {
+      var selectBoxHighlightsLcc = document
+        .getElementById('select-klc-lccTime')
+        .value.match(/\d+/g)
+        .map(Number)[0];
+      /* var typeLegend =
+        document.getElementById('select-klc-highlights-lcc').value ===
+        'Dichotomous'
+          ? 'all_lcc_a_pol'
+          : 'all_lcc_b_pol'; */
+      if (this.esriLayer_lcc !== null) {
+        //this.esriLayer_lcc.sublayers.items[0].name = 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;
+      } else {
+        /* var typeLegend =
+          document.getElementById('select-klc-highlights-lcc').value ===
+          'Dichotomous'
+            ? 'all_present_lc_a_pol'
+            : 'all_present_lc_b_pol'; */
+        var selectBoxHighlightsLc = document
+          .getElementById('select-klc-lcTime')
+          .value.match(/\d+/g)
+          .map(Number)[0];
+        if (this.esriLayer_lc !== null) {
+          //this.esriLayer_lc.sublayers.items[0].name = 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;
+        }
+      }
+    }
+  }
+
+  dropdownAnimation() {
+    var button = this.container.current.querySelector(
+      '.ccl-expandable__button',
+    );
+
+    if (button.ariaExpanded === 'true') button.ariaExpanded = 'false';
+    else button.ariaExpanded = 'true';
+  }
+
+  /**
+   * Method that will be invoked when the
+   * button is clicked. It controls the open
+   * and close actions of the component
+   */
+  openMenu() {
+    if (this.state.showMapMenu) {
+      this.props.mapViewer.setActiveWidget();
+      this.container.current.querySelector('.right-panel').style.display =
+        'none';
+      this.container.current
+        .querySelector('.esri-widget--button')
+        .classList.remove('active-widget');
+      document
+        .querySelector('.esri-ui-top-right.esri-ui-corner')
+        .classList.remove('show-panel');
+      // By invoking the setState, we notify the state we want to reach
+      // and ensure that the component is rendered again
+      this.setState({ showMapMenu: false });
+    } else {
+      this.getKLCNames(this.dataJSONNames, this.dataJSONNames[0].node.klc_name);
+      this.props.mapViewer.setActiveWidget(this);
+      this.container.current.querySelector('.right-panel').style.display =
+        'flex';
+      this.container.current
+        .querySelector('.esri-widget--button')
+        .classList.add('active-widget');
+      document
+        .querySelector('.esri-ui-top-right.esri-ui-corner')
+        .classList.add('show-panel');
+      // By invoking the setState, we notify the state we want to reach
+      // and ensure that the component is rendered again
+      this.setState({ showMapMenu: true });
+    }
+  }
+
+  async getLayerParameters() {
+    fetch('https://land.copernicus.eu/global/hsm/all_geo_klc_json')
+      .then((data) => {
+        if (data.status === 200) {
+          return data.json();
+        } else {
+          throw new Error(data.status);
+        }
+      })
+      .then((data) => {
+        this.dataJSONNames = data.nodes;
+        this.getKLCNames(data.nodes, data.nodes[0].node.klc_name);
+      })
+      .catch(function (error) {
+        /* console.log('error while getting data'); */
+      });
+  }
+
+  renderPresentLandCover() {
+    return (
+      <div className="measurement-dropdown" id="PresentLandCoverDropdown">
+        <div
+          className="ccl-expandable__button"
+          aria-expanded="true"
+          tabIndex="0"
+          role="button"
+          onClick={this.dropdownAnimation.bind(this)}
+          onKeyDown={this.dropdownAnimation.bind(this)}
+        >
+          <span>Present Land Cover</span>
+          <span className="dropdown-icon ccl-icon-chevron-thin-down"></span>
+        </div>
+        <div className="measurement-dropdown-container">
+          <br></br>
+          <div className="esri-print__form-section-container">
+            <label>
+              Legend type
+              <select
+                id="select-klc-highlights-lc"
+                className="esri-select"
+              ></select>
+            </label>
+          </div>
+          <div className="esri-print__form-section-container">
+            <label>
+              Year
+              <select
+                id="select-klc-lcTime"
+                className="esri-select"
+                data-target-property="layout"
+              ></select>
+            </label>
+          </div>
+          <button
+            className="esri-button"
+            onClick={() => this.handleApplyFilter('lc')}
+          >
+            Apply filter
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  getKLCNames(data, selectedOption) {
+    var selectBox;
+    var selectBoxHighlightsLc;
+    var selectBoxLcTime;
+    var selectBoxHighlightsLcc;
+    var selectBoxLccTime;
+
+    selectBox = document.getElementById('select-klc-area');
+    selectBoxHighlightsLcc = document.getElementById(
+      'select-klc-highlights-lcc',
+    );
+    selectBoxLccTime = document.getElementById('select-klc-lccTime');
+    selectBoxHighlightsLc = document.getElementById('select-klc-highlights-lc');
+    selectBoxLcTime = document.getElementById('select-klc-lcTime');
+
+    for (let i = 0; i < data.length; i++) {
+      var option = data[i].node.klc_name;
+      if (option === selectedOption) {
+        this.dataKlc_code = data[i].node.klc_code;
+        //reset all selected options
+        if (selectBoxLcTime && selectBoxHighlightsLc) {
+          this.removeOptions(selectBoxLcTime);
+          this.removeOptions(selectBoxHighlightsLc);
+        }
+        if (selectBoxLccTime && selectBoxHighlightsLcc) {
+          this.removeOptions(selectBoxLccTime);
+          this.removeOptions(selectBoxHighlightsLcc);
+        }
+
+        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));
+          });
+          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),
+          );
+          optionLcTime = data[i].node.present_lc_year;
+          selectBoxLcTime.options.add(
+            new Option(optionLcTime, optionLcTime, optionLcTime),
+          );
+        }
+        if (
+          data[i].node.keymap_info.toLowerCase().includes('a_classes":true')
+        ) {
+          selectBoxHighlightsLc.options.add(
+            new Option('Dichotomous', 'Dichotomous', 'Dichotomous'),
+          );
+          selectBoxHighlightsLcc.options.add(
+            new Option('Dichotomous', 'Dichotomous', 'Dichotomous'),
+          );
+        }
+        if (
+          data[i].node.keymap_info.toLowerCase().includes('b_classes":true')
+        ) {
+          selectBoxHighlightsLc.options.add(
+            new Option('Modular', 'Modular', 'Modular'),
+          );
+          selectBoxHighlightsLcc.options.add(
+            new Option('Modular', 'Modular', 'Modular'),
+          );
+        }
+      }
+      if (selectBox.options.length <= data.length)
+        selectBox.options.add(new Option(option, option, option));
+    }
+  }
+
+  removeOptions(selectElement) {
+    if (selectElement.options.length > 0) {
+      var i,
+        L = selectElement.options.length - 1;
+      for (i = L; i >= 0; i--) {
+        selectElement.remove(i);
+      }
+    }
+  }
+
+  renderLandCoverChange() {
+    return (
+      <div className="measurement-dropdown" id="LandCoverChangeDropdown">
+        <div
+          className="ccl-expandable__button"
+          aria-expanded="true"
+          tabIndex="0"
+          role="button"
+          onClick={this.dropdownAnimation.bind(this)}
+          onKeyDown={this.dropdownAnimation.bind(this)}
+        >
+          <span>Land Cover Change</span>
+          <span className="dropdown-icon ccl-icon-chevron-thin-down"></span>
+        </div>
+        <div className="measurement-dropdown-container">
+          <br></br>
+          <div className="esri-print__form-section-container">
+            <label>
+              Legend type
+              <select
+                id="select-klc-highlights-lcc"
+                className="esri-select"
+              ></select>
+            </label>
+          </div>
+          <div className="esri-print__form-section-container">
+            <label>
+              Year
+              <select
+                id="select-klc-lccTime"
+                className="esri-select"
+                data-target-property="layout"
+              ></select>
+            </label>
+          </div>
+          <button
+            className="esri-button"
+            onClick={() => this.handleApplyFilter('lcc')}
+          >
+            Apply filter
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <>
+        <div ref={this.container} className="hotspot-container">
+          <div tooltip="Hotspot" direction="left" type="widget">
+            <div
+              className={this.menuClass}
+              id="hotspot_button"
+              aria-label="Hotspot"
+              onClick={this.openMenu.bind(this)}
+              onKeyDown={this.openMenu.bind(this)}
+              tabIndex="0"
+              role="button"
+            ></div>
+          </div>
+          <div className="right-panel">
+            <div className="right-panel-header">
+              <span>Hot-spots outside Europe filtering options</span>
+              <span
+                className="map-menu-icon esri-icon-close"
+                onClick={this.openMenu.bind(this)}
+                onKeyDown={this.openMenu.bind(this)}
+                tabIndex="0"
+                role="button"
+              ></span>
+            </div>
+            <div className="right-panel-content">
+              <div className="hotspot-panel">
+                <div className="measurement-dropdown-container">
+                  <div className="esri-print__form-section-container">
+                    <label>
+                      Key Landscape for Conservation (KLC) area
+                      <select
+                        onBlur={(e) =>
+                          this.getKLCNames(this.dataJSONNames, e.target.value)
+                        }
+                        id="select-klc-area"
+                        className="esri-select"
+                      ></select>
+                    </label>
+                  </div>
+                </div>
+                <div className="presentLandCoverContainer">
+                  {this.renderPresentLandCover()}
+                </div>
+                <div className="landCoverChangeContainer">
+                  {this.renderLandCoverChange()}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
+
+  /**
+   * This method is executed after the rener method is executed
+   */
+  async componentDidMount() {
+    await this.loader();
+    this.props.view.ui.add(this.container.current, 'top-right');
+    this.layerModelInit();
+  }
+}
+export default HotspotWidget;

package/src/components/MapViewer/MapViewer.jsx

@@ -16,7 +16,7 @@ import ScaleWidget from './ScaleWidget';
 import LegendWidget from './LegendWidget';
 import InfoWidget from './InfoWidget';
 import MenuWidget from './MenuWidget';
-
+import HotspotWidget from './HotspotWidget';
 //import "isomorphic-fetch";  <-- Necessary to use fetch?
 var Map, MapView, Zoom, intl;
 let mapStatus = {};
@@ -48,6 +48,15 @@ class MapViewer extends React.Component {
       [`${props.customClass}`]: props.customClass || null,
     });
     this.state = {};
+    this.layers = {};
+    this.activeLayersHandler = this.activeLayersHandler.bind(this);
+    this.activeLayersArray = {};
+  }
+
+  activeLayersHandler(newActiveLayers) {
+    this.activeLayers = newActiveLayers;
+    mapStatus.activeLayers = newActiveLayers;
+    sessionStorage.setItem('mapStatus', JSON.stringify(mapStatus));
   }
 
   setCenterState(centerStatus) {
@@ -104,8 +113,10 @@ class MapViewer extends React.Component {
       mapStatus = {};
       mapStatus.zoom = this.mapCfg.zoom;
       mapStatus.center = this.mapCfg.center;
+      mapStatus.activeLayers = this.mapCfg.activeLayers;
       this.setCenterState(this.mapCfg.center);
       this.setZoomState(this.mapCfg.zoom);
+      this.activeLayersHandler(this.mapCfg.activeLayers);
     }
 
     this.view = new MapView({
@@ -221,6 +232,19 @@ class MapViewer extends React.Component {
       return <InfoWidget view={this.view} map={this.map} mapViewer={this} />;
   }
 
+  renderHotspot() {
+    if (this.view)
+      return (
+        <HotspotWidget
+          view={this.view}
+          map={this.map}
+          selectedLayers={this.layers}
+          mapViewer={this}
+          layers={sessionStorage}
+        />
+      );
+  }
+
   renderMenu() {
     if (this.view)
       return (
@@ -232,6 +256,8 @@ class MapViewer extends React.Component {
           mapViewer={this}
           updateArea={this.updateArea}
           area={this.state.area}
+          layers={this.layers}
+          activeLayersHandler={this.activeLayersHandler}
         />
       ); //call conf
   }
@@ -259,6 +285,7 @@ class MapViewer extends React.Component {
           {this.renderArea()}
           {this.renderScale()}
           {this.renderInfo()}
+          {this.renderHotspot()}
           {this.renderMenu()}
         </div>
       </div>
@@ -285,7 +312,7 @@ export const CheckLogin = ({ reference }) => {
 
 export default compose(
   connect(
-    (state, props) => ({
+    (state) => ({
       mapviewer_config: state.mapviewer_config.mapviewer_config,
     }),
     { MapViewerConfig },

package/src/components/MapViewer/MenuWidget.jsx

@@ -449,7 +449,7 @@ class MenuWidget extends React.Component {
     this.menuClass =
       'esri-icon-drag-horizontal esri-widget--button esri-widget esri-interactive';
     this.loadFirst = true;
-    this.layers = {};
+    this.layers = this.props.layers;
     this.activeLayersJSON = {};
     this.layerGroups = {};
 
@@ -463,6 +463,8 @@ class MenuWidget extends React.Component {
         }
       }
     });
+
+    this.activeLayersHandler = this.props.activeLayersHandler;
   }
 
   loader() {
@@ -577,24 +579,25 @@ class MenuWidget extends React.Component {
 
     // CLMS-1389
     // "Active on map" section and the time slider opened by default if download and timeseries == true
-    if (this.props.download && this.layers) {
-      let layerid = Object.keys(this.layers)[0];
-
-      if (layerid && this.layers[layerid].isTimeSeries) {
-        // select active on map tab
-        let event = new MouseEvent('click', {
-          view: window,
-          bubbles: true,
-          cancelable: false,
-        });
-        let el = document.getElementById('active_label');
-        el.dispatchEvent(event);
-
-        //open time slider
-        let layerElem = document.getElementById(layerid);
-        this.showTimeSlider(layerElem);
+    if (this.layers)
+      if (this.props.download && this.layers) {
+        let layerid = Object.keys(this.layers)[0];
+
+        if (layerid && this.layers[layerid].isTimeSeries) {
+          // select active on map tab
+          let event = new MouseEvent('click', {
+            view: window,
+            bubbles: true,
+            cancelable: false,
+          });
+          let el = document.getElementById('active_label');
+          el.dispatchEvent(event);
+
+          //open time slider
+          let layerElem = document.getElementById(layerid);
+          this.showTimeSlider(layerElem);
+        }
       }
-    }
   }
 
   /**
@@ -1525,6 +1528,7 @@ class MenuWidget extends React.Component {
     }
     // update DOM
     this.setState({});
+    //this.activeLayersHandler(this.activeLayersAsArray);
   }
 
   /**
@@ -1638,6 +1642,8 @@ class MenuWidget extends React.Component {
         activeLayers.indexOf(a.props['layer-id']) -
         activeLayers.indexOf(b.props['layer-id']),
     );
+    //this.props.mapDispatchToProps(activeLayersArray);
+    this.activeLayersHandler(activeLayersArray);
     return data;
   }
 
@@ -2451,6 +2457,41 @@ class MenuWidget extends React.Component {
     }
   }
 
+  renderHotspot() {
+    var hotspotLayers = [];
+    Object.keys(this.activeLayersJSON).forEach((key) => {
+      let layer = this.layers[key];
+      if (
+        /* layer.visible && */
+        key.includes('all_present_lc_a_pol') ||
+        key.includes('all_lcc_a_pol')
+      ) {
+        hotspotLayers.push(layer);
+      }
+    });
+    if (
+      hotspotLayers.length === 0 &&
+      document.querySelector('.hotspot-container')
+    ) {
+      this.props.mapViewer.closeActiveWidget();
+      document.querySelector('.hotspot-container').style.display = 'none';
+    } else if (this.props.view && hotspotLayers.length > 0) {
+      document.querySelector('.hotspot-container').style.display = 'flex';
+      if (sessionStorage.checkedLayers.includes('all_present_lc_a_pol'))
+        document.querySelector('.presentLandCoverContainer').style.display =
+          'block';
+      else
+        document.querySelector('.presentLandCoverContainer').style.display =
+          'none';
+      if (sessionStorage.checkedLayers.includes('all_lcc_a_pol'))
+        document.querySelector('.landCoverChangeContainer').style.display =
+          'block';
+      else
+        document.querySelector('.landCoverChangeContainer').style.display =
+          'none';
+    }
+  }
+
   renderTimeslider(elem, layer) {
     if (this.props.view && layer) {
       let activeLayer = document.querySelector('#active_' + elem.id);
@@ -2693,6 +2734,7 @@ class MenuWidget extends React.Component {
             tabIndex="0"
           ></div>
           {<TouchScreenPopup />}
+          {this.renderHotspot()}
         </div>
       </>
     );

package/src/components/MapViewer/config.js

@@ -5,6 +5,7 @@ const config = {
     zoom: 4,
     minZoom: 3,
     maxZoom: 20,
+    activeLayers: [],
   },
   Components: [
     {

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

@@ -1155,3 +1155,35 @@ input[type='range']::-ms-track {
   font-family: 'Lato', sans-serif;
   font-size: 0.875rem;
 }
+
+/* Hotspot*/
+.hotspot-container {
+  display: flex;
+  flex-direction: column;
+  box-shadow: none !important;
+}
+
+.hotspot-panel/*.esri-legend.esri-widget*/ {
+  overflow: visible;
+}
+
+.hotspot-container .esri-button {
+  border: none;
+  background-color: #a0b128;
+}
+
+.hotspot-container .esri-button:hover {
+  border-color: #a0b128;
+  background-color: white;
+  color: #a0b128;
+}
+
+/*.hotspot-container .esri-select{
+  font-family:Helvetica, sans-serif;
+  font-size:20px;
+  display:flex;
+  flex-direction:column;
+  justify-content:center;
+  align-items:center;
+}
+*/