@eeacms/volto-arcgis-block 0.1.227 → 0.1.228

package/CHANGELOG.md

@@ -4,6 +4,8 @@ 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.228](https://github.com/eea/volto-arcgis-block/compare/0.1.227...0.1.228) - 31 October 2023
+
 ### [0.1.227](https://github.com/eea/volto-arcgis-block/compare/0.1.226...0.1.227) - 30 October 2023
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/LegendWidget.jsx

@@ -223,6 +223,55 @@ class LegendWidget extends React.Component {
     });
   }
 
+  /**
+   * Method that returns true or false if session storage has any visible active layer
+   */
+  enabledVisilelayers() {
+    let enabledVisilelayers = false;
+    let visiblelayersFromStorage = JSON.parse(sessionStorage.visibleLayers);
+    let visibleLayerKeys = Object.keys(visiblelayersFromStorage);
+    for (let i = 0; i < visibleLayerKeys.length; i++) {
+      let currentLayer = visibleLayerKeys[i];
+      if (visiblelayersFromStorage[currentLayer][1] === 'eye')
+        enabledVisilelayers = true;
+    }
+    return enabledVisilelayers;
+  }
+
+  /**
+   * Method to handle "No legend" message visibility
+   */
+  handleNoLegendMessage() {
+    const noLegendMessage = document.querySelectorAll(
+      '.esri-legend__message',
+    )[0];
+    if (sessionStorage.checkedLayers && sessionStorage.checkedLayers === '[]') {
+      // show no legend message
+      if (noLegendMessage) {
+        noLegendMessage.style.display = 'block';
+      }
+    } else if (
+      sessionStorage.visibleLayers &&
+      (this.enabledVisilelayers() || sessionStorage.visibleLayers === '{}')
+    ) {
+      // hide no legend message
+      if (noLegendMessage) {
+        noLegendMessage.style.display = 'none';
+      }
+    } else if (noLegendMessage) {
+      if (
+        sessionStorage.checkedLayers &&
+        sessionStorage.checkedLayers === '[]'
+      ) {
+        noLegendMessage.style.display = 'block';
+      } else if (sessionStorage.visibleLayers && !this.enabledVisilelayers()) {
+        noLegendMessage.style.display = 'block';
+      } else {
+        noLegendMessage.style.display = 'none';
+      }
+    }
+  }
+
   componentDidUpdate(prevState, prevProps) {
     if (prevState.loading !== this.state.loading) {
       if (this.state.loading === true) {
@@ -234,6 +283,7 @@ class LegendWidget extends React.Component {
           this.setState({ loading: false });
         }, 2000);
       }
+      this.handleNoLegendMessage();
     }
   }
 

package/src/components/MapViewer/MenuWidget.jsx

@@ -2037,7 +2037,8 @@ class MenuWidget extends React.Component {
         this.addCustomItemToLegend(layer);
       } else {
         // show existing one
-        existingItem.style.display = 'block';
+        if (!existingItem.innerText.includes('undefined'))
+          existingItem.style.display = 'block';
       }
     } else {
       // hide legend item
@@ -2045,6 +2046,13 @@ class MenuWidget extends React.Component {
         existingItem.style.display = 'none';
       }
     }
+    // hide no legend message
+    const noLegendMessage = document.querySelectorAll(
+      '.esri-legend__message',
+    )[0];
+    if (noLegendMessage) {
+      noLegendMessage.style.display = 'none';
+    }
   }
 
   addCustomItemToLegend(layer) {
@@ -2053,14 +2061,15 @@ class MenuWidget extends React.Component {
     let childDiv = legendDiv.firstChild;
 
     // create legend element
-    let legendItem = this.createStaticLegendImageNode(
-      layer.id,
-      layer.LayerTitle,
-      layer.StaticImageLegend,
-    );
-
-    // append to Legend widet
-    childDiv.appendChild(legendItem);
+    if (layer.LayerTitle !== undefined) {
+      let legendItem = this.createStaticLegendImageNode(
+        layer.id,
+        layer.LayerTitle,
+        layer.StaticImageLegend,
+      );
+      // append to Legend widet
+      childDiv.appendChild(legendItem);
+    }
 
     // hide no legend message
     const noLegendMessage = document.querySelectorAll(
@@ -3007,10 +3016,6 @@ class MenuWidget extends React.Component {
     } else if (layers.length > 0) {
       document.querySelector('.info-container').style.display = 'flex';
     }
-    if (!sessionStorage.getItem('hotspotFilterApplied')) {
-      this.props.mapViewer.closeActiveWidget();
-    }
-    this.renderHotspot();
   }
 
   getLayerTitle(layer) {
@@ -3219,12 +3224,6 @@ class MenuWidget extends React.Component {
       this.visibleLayers[elem.id] = ['fas', 'eye'];
     }
 
-    this.saveVisibility();
-    this.activeLayersJSON[elem.id] = this.addActiveLayer(elem, 0);
-    this.layersReorder();
-    this.saveLayerOrder();
-    this.checkInfoWidget();
-    this.setState({});
     if (this.productId.includes('333e4100b79045daa0ff16466ac83b7f')) {
       // global dynamic land cover
       if (this.visibleLayers[elem.id][1] === 'eye-slash') {
@@ -3242,6 +3241,13 @@ class MenuWidget extends React.Component {
         }
       }
     }
+    this.saveVisibility();
+    this.activeLayersJSON[elem.id] = this.addActiveLayer(elem, 0);
+    this.layersReorder();
+    this.saveLayerOrder();
+    this.checkInfoWidget();
+    this.toggleCustomLegendItem(this.layers[elem.id]);
+    this.setState({});
   }
 
   componentDidUpdate(prevState, prevProps) {