@eeacms/volto-arcgis-block 0.1.444 → 0.1.445

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.445](https://github.com/eea/volto-arcgis-block/compare/0.1.444...0.1.445) - 28 April 2026
+
 ### [0.1.444](https://github.com/eea/volto-arcgis-block/compare/0.1.443...0.1.444) - 17 April 2026
 
 ### [0.1.443](https://github.com/eea/volto-arcgis-block/compare/0.1.442...0.1.443) - 10 April 2026

package/package.json

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

package/src/components/MapViewer/BasemapWidget.jsx

@@ -286,28 +286,30 @@ class BasemapWidget extends React.Component {
     return (
       <>
         <div ref={this.container} className="basemap-container">
-          <div tooltip="Basemap gallery" direction="left" type="widget">
-            <div
-              // ref={this.basemaps}
-              className={this.menuClass}
-              id="map_basemap_button"
-              aria-label="Basemap gallery"
-              onClick={this.openMenu.bind(this)}
-              onKeyDown={(e) => {
-                if (
-                  !e.altKey &&
-                  e.code !== 'Tab' &&
-                  !e.ctrlKey &&
-                  e.code !== 'Delete' &&
-                  !e.shiftKey &&
-                  !e.code.startsWith('F')
-                ) {
-                  this.openMenu(this);
-                }
-              }}
-              tabIndex="0"
-              role="button"
-            ></div>
+          <div className="analysis-group">
+            <div tooltip="Basemap gallery" direction="left" type="widget">
+              <div
+                // ref={this.basemaps}
+                className={this.menuClass}
+                id="map_basemap_button"
+                aria-label="Basemap gallery"
+                onClick={this.openMenu.bind(this)}
+                onKeyDown={(e) => {
+                  if (
+                    !e.altKey &&
+                    e.code !== 'Tab' &&
+                    !e.ctrlKey &&
+                    e.code !== 'Delete' &&
+                    !e.shiftKey &&
+                    !e.code.startsWith('F')
+                  ) {
+                    this.openMenu(this);
+                  }
+                }}
+                tabIndex="0"
+                role="button"
+              ></div>
+            </div>
           </div>
           <div className="right-panel">
             <div className="right-panel-header">

package/src/components/MapViewer/BookmarkWidget.jsx

@@ -1291,27 +1291,29 @@ class BookmarkWidget extends React.Component {
     return (
       <>
         <div ref={this.container} className="bookmark-container">
-          <div tooltip="Bookmark" direction="left" type="widget">
-            <div
-              className={this.menuClass}
-              id="bookmark_button"
-              aria-label="Bookmark"
-              onClick={this.openMenu.bind(this)}
-              onKeyDown={(e) => {
-                if (
-                  !e.altKey &&
-                  e.code !== 'Tab' &&
-                  !e.ctrlKey &&
-                  e.code !== 'Delete' &&
-                  !e.shiftKey &&
-                  !e.code.startsWith('F')
-                ) {
-                  this.openMenu(this);
-                }
-              }}
-              tabIndex="0"
-              role="button"
-            ></div>
+          <div className="tools-group">
+            <div tooltip="Bookmark" direction="left" type="widget">
+              <div
+                className={this.menuClass}
+                id="bookmark_button"
+                aria-label="Bookmark"
+                onClick={this.openMenu.bind(this)}
+                onKeyDown={(e) => {
+                  if (
+                    !e.altKey &&
+                    e.code !== 'Tab' &&
+                    !e.ctrlKey &&
+                    e.code !== 'Delete' &&
+                    !e.shiftKey &&
+                    !e.code.startsWith('F')
+                  ) {
+                    this.openMenu(this);
+                  }
+                }}
+                tabIndex="0"
+                role="button"
+              ></div>
+            </div>
           </div>
           <div className="right-panel">
             <div className="right-panel-header">

package/src/components/MapViewer/ErrorReportWidget.jsx

@@ -1,5 +1,6 @@
 import React, { createRef } from 'react';
 import { loadModules } from 'esri-loader';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 class ErrorReport extends React.Component {
   constructor(props) {
@@ -14,7 +15,7 @@ class ErrorReport extends React.Component {
       instructionsText: 'First select a pixel in the data viewer',
     };
     this.menuClass =
-      'esri-icon-notice-round esri-widget--button esri-widget esri-interactive';
+      'errorreport esri-widget--button esri-widget esri-interactive';
     this.helpdeskUrl = 'https://land.copernicus.eu/en/contact-service-helpdesk';
   }
 
@@ -251,27 +252,31 @@ class ErrorReport extends React.Component {
     return (
       <>
         <div ref={this.container} className="error-report-container">
-          <div tooltip="Report an issue" direction="left" type="widget">
-            <div
-              className={this.menuClass}
-              id="map_error_report_button"
-              aria-label="Report an issue"
-              onClick={this.openMenu.bind(this)}
-              onKeyDown={(e) => {
-                if (
-                  !e.altKey &&
-                  e.code !== 'Tab' &&
-                  !e.ctrlKey &&
-                  e.code !== 'Delete' &&
-                  !e.shiftKey &&
-                  !e.code.startsWith('F')
-                ) {
-                  this.openMenu(this);
-                }
-              }}
-              tabIndex="0"
-              role="button"
-            ></div>
+          <div className="tools-group">
+            <div tooltip="Report an issue" direction="left" type="widget">
+              <div
+                className={this.menuClass}
+                id="map_error_report_button"
+                aria-label="Report an issue"
+                onClick={this.openMenu.bind(this)}
+                onKeyDown={(e) => {
+                  if (
+                    !e.altKey &&
+                    e.code !== 'Tab' &&
+                    !e.ctrlKey &&
+                    e.code !== 'Delete' &&
+                    !e.shiftKey &&
+                    !e.code.startsWith('F')
+                  ) {
+                    this.openMenu(this);
+                  }
+                }}
+                tabIndex="0"
+                role="button"
+              >
+                <FontAwesomeIcon icon={['fa', 'comment-dots']} />
+              </div>
+            </div>
           </div>
           <div className="right-panel">
             <div className="right-panel-header">

package/src/components/MapViewer/MapViewer.jsx

@@ -35,6 +35,7 @@ import ErrorReportWidget from './ErrorReportWidget';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable';
 import { getTaxonomy } from '@eeacms/volto-taxonomy/actions';
 import { fetchCatalogApiDates } from '../../actions';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 //import "isomorphic-fetch";  <-- Necessary to use fetch?
 var Map, MapView, SceneView, Zoom, intl, Basemap, WebTileLayer, Extent;
@@ -647,6 +648,8 @@ class MapViewer extends React.Component {
       { selector: '.upload-container', position: 'top-right' },
       { selector: '.viewmode-container', position: 'top-right' },
       { selector: '.error-report-container', position: 'top-right' },
+      { selector: '.analysis-container', position: 'top-right' },
+      { selector: '.tools-container', position: 'top-right' },
     ];
 
     uiContainerConfig.forEach(({ selector, position }) => {
@@ -774,6 +777,8 @@ class MapViewer extends React.Component {
       '.esri-swipe',
       '.viewmode-container',
       '#loader',
+      '.analysis-container',
+      '.tools-container',
     ];
 
     widgetSelectorList.forEach((selector) => {
@@ -1594,6 +1599,20 @@ class MapViewer extends React.Component {
       this.activeWidget = null;
       return;
     }
+    if (
+      !widget.menuClass?.includes('measure') &&
+      !widget.menuClass?.includes('basemap') &&
+      !widget.menuClass?.includes('swap')
+    ) {
+      this.closeAnalysis();
+    }
+    if (
+      !widget.menuClass?.includes('bookmark') &&
+      !widget.menuClass?.includes('errorreport') &&
+      !widget.menuClass?.includes('printer')
+    ) {
+      this.closeTools();
+    }
     if (this.activeWidget === widget) return;
     this.closeActiveWidget();
     this.activeWidget = widget;
@@ -1865,6 +1884,130 @@ class MapViewer extends React.Component {
       );
   }
 
+  renderAnalysis() {
+    if (this.view)
+      return (
+        <div className="analysis-container">
+          <div tooltip="Analysis" direction="left" type="widget">
+            <div
+              tabIndex="0"
+              role="button"
+              className="analysis-widget-button esri-widget--button esri-widget esri-interactive"
+              onClick={this.openAnalysis.bind(this)}
+              onKeyDown={(e) => {
+                if (
+                  !e.altKey &&
+                  e.code !== 'Tab' &&
+                  !e.ctrlKey &&
+                  e.code !== 'Delete' &&
+                  !e.shiftKey &&
+                  !e.code.startsWith('F')
+                ) {
+                  this.openAnalysis(this);
+                }
+              }}
+            >
+              <FontAwesomeIcon icon={['fas', 'vial']} />
+            </div>
+          </div>
+        </div>
+      );
+  }
+
+  openAnalysis() {
+    let analysisIcon = document.querySelector('.analysis-widget-button');
+    if (analysisIcon.classList.contains('active-widget')) {
+      this.closeAnalysis();
+    } else {
+      document.querySelector('#map_basemap_button').click();
+      analysisIcon.classList.add('active-widget');
+      document.querySelectorAll('.analysis-group').forEach((widget) => {
+        widget.style.display = 'block';
+      });
+      if (
+        document
+          .querySelector('.tools-widget-button')
+          .classList.contains('active-widget')
+      ) {
+        this.closeTools();
+      }
+    }
+  }
+
+  closeAnalysis() {
+    let analysisIcon = document.querySelector('.analysis-widget-button');
+    analysisIcon.classList.remove('active-widget');
+    document.querySelectorAll('.analysis-group').forEach((widget) => {
+      widget.style.display = 'none';
+    });
+    let button = document.querySelector('#map_basemap_button');
+    if (button.classList.contains('active-widget')) {
+      button.click();
+    }
+  }
+
+  renderTools() {
+    if (this.view)
+      return (
+        <div className="tools-container">
+          <div tooltip="Tools" direction="left" type="widget">
+            <div
+              tabIndex="0"
+              role="button"
+              className="tools-widget-button esri-widget--button esri-widget esri-interactive"
+              onClick={this.openTools.bind(this)}
+              onKeyDown={(e) => {
+                if (
+                  !e.altKey &&
+                  e.code !== 'Tab' &&
+                  !e.ctrlKey &&
+                  e.code !== 'Delete' &&
+                  !e.shiftKey &&
+                  !e.code.startsWith('F')
+                ) {
+                  this.openTools(this);
+                }
+              }}
+            >
+              <FontAwesomeIcon icon={['fa', 'toolbox']} />
+            </div>
+          </div>
+        </div>
+      );
+  }
+
+  openTools() {
+    let toolsIcon = document.querySelector('.tools-widget-button');
+    if (toolsIcon.classList.contains('active-widget')) {
+      this.closeTools();
+    } else {
+      document.querySelector('#bookmark_button').click();
+      toolsIcon.classList.add('active-widget');
+      document.querySelectorAll('.tools-group').forEach((widget) => {
+        widget.style.display = 'block';
+      });
+      if (
+        document
+          .querySelector('.analysis-widget-button')
+          .classList.contains('active-widget')
+      ) {
+        this.closeAnalysis();
+      }
+    }
+  }
+
+  closeTools() {
+    let toolsIcon = document.querySelector('.tools-widget-button');
+    toolsIcon.classList.remove('active-widget');
+    document.querySelectorAll('.tools-group').forEach((widget) => {
+      widget.style.display = 'none';
+    });
+    let button = document.querySelector('#bookmark_button');
+    if (button.classList.contains('active-widget')) {
+      button.click();
+    }
+  }
+
   renderViewModeSwitcher() {
     if (!this.view) return null;
 
@@ -1937,6 +2080,8 @@ class MapViewer extends React.Component {
               <CheckUserID reference={this} />
               {this.renderUploadService()}
               {this.renderErrorReport()}
+              {this.renderAnalysis()}
+              {this.renderTools()}
             </>
           )}
         </div>

package/src/components/MapViewer/MeasurementWidget.jsx

@@ -358,27 +358,29 @@ class MeasurementWidget extends React.Component {
     return (
       <>
         <div ref={this.container} className="measurement-container">
-          <div tooltip="Measurement" direction="left" type="widget">
-            <div
-              className={this.menuClass}
-              id="map_measurement_button"
-              aria-label="Measurement"
-              onClick={this.openMenu.bind(this)}
-              onKeyDown={(e) => {
-                if (
-                  !e.altKey &&
-                  e.code !== 'Tab' &&
-                  !e.ctrlKey &&
-                  e.code !== 'Delete' &&
-                  !e.shiftKey &&
-                  !e.code.startsWith('F')
-                ) {
-                  this.openMenu(this);
-                }
-              }}
-              tabIndex="0"
-              role="button"
-            ></div>
+          <div className="analysis-group">
+            <div tooltip="Measurement" direction="left" type="widget">
+              <div
+                className={this.menuClass}
+                id="map_measurement_button"
+                aria-label="Measurement"
+                onClick={this.openMenu.bind(this)}
+                onKeyDown={(e) => {
+                  if (
+                    !e.altKey &&
+                    e.code !== 'Tab' &&
+                    !e.ctrlKey &&
+                    e.code !== 'Delete' &&
+                    !e.shiftKey &&
+                    !e.code.startsWith('F')
+                  ) {
+                    this.openMenu(this);
+                  }
+                }}
+                tabIndex="0"
+                role="button"
+              ></div>
+            </div>
           </div>
           <div className="right-panel">
             <div className="right-panel-header">

package/src/components/MapViewer/PrintWidget.jsx

@@ -252,27 +252,29 @@ class PrintWidget extends React.Component {
     return (
       <>
         <div ref={this.container} className="print-container">
-          <div tooltip="Print" direction="left" type="widget">
-            <div
-              className={this.menuClass}
-              id="map_print_button"
-              aria-label="Print"
-              onClick={this.openMenu.bind(this)}
-              onKeyDown={(e) => {
-                if (
-                  !e.altKey &&
-                  e.code !== 'Tab' &&
-                  !e.ctrlKey &&
-                  e.code !== 'Delete' &&
-                  !e.shiftKey &&
-                  !e.code.startsWith('F')
-                ) {
-                  this.openMenu(this);
-                }
-              }}
-              tabIndex="0"
-              role="button"
-            ></div>
+          <div className="tools-group">
+            <div tooltip="Print" direction="left" type="widget">
+              <div
+                className={this.menuClass}
+                id="map_print_button"
+                aria-label="Print"
+                onClick={this.openMenu.bind(this)}
+                onKeyDown={(e) => {
+                  if (
+                    !e.altKey &&
+                    e.code !== 'Tab' &&
+                    !e.ctrlKey &&
+                    e.code !== 'Delete' &&
+                    !e.shiftKey &&
+                    !e.code.startsWith('F')
+                  ) {
+                    this.openMenu(this);
+                  }
+                }}
+                tabIndex="0"
+                role="button"
+              ></div>
+            </div>
           </div>
           <div className="right-panel">
             <div className="right-panel-header">

package/src/components/MapViewer/SwipeWidget.jsx

@@ -512,27 +512,29 @@ class SwipeWidget extends React.Component {
     return (
       <>
         <div ref={this.container} className="swipe-container">
-          <div tooltip="Swipe" direction="left" type="widget">
-            <div
-              className={this.menuClass}
-              id="map_swipe_button"
-              aria-label="Swipe"
-              onClick={this.openMenu.bind(this)} //aqui deberían ir ocultar panel y mas abajo cerrar (pasar a 3d)
-              onKeyDown={(e) => {
-                if (
-                  !e.altKey &&
-                  e.code !== 'Tab' &&
-                  !e.ctrlKey &&
-                  e.code !== 'Delete' &&
-                  !e.shiftKey &&
-                  !e.code.startsWith('F')
-                ) {
-                  this.openMenu(this);
-                }
-              }}
-              tabIndex="0"
-              role="button"
-            ></div>
+          <div className="analysis-group">
+            <div tooltip="Swipe" direction="left" type="widget">
+              <div
+                className={this.menuClass}
+                id="map_swipe_button"
+                aria-label="Swipe"
+                onClick={this.openMenu.bind(this)} //aqui deberían ir ocultar panel y mas abajo cerrar (pasar a 3d)
+                onKeyDown={(e) => {
+                  if (
+                    !e.altKey &&
+                    e.code !== 'Tab' &&
+                    !e.ctrlKey &&
+                    e.code !== 'Delete' &&
+                    !e.shiftKey &&
+                    !e.code.startsWith('F')
+                  ) {
+                    this.openMenu(this);
+                  }
+                }}
+                tabIndex="0"
+                role="button"
+              ></div>
+            </div>
           </div>
           {/* Al final el IF lo añadiremos aqui en estos OpenMenu */}
           <div className="right-panel">

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

@@ -81,34 +81,56 @@
   order: 2;
 }
 
-.measurement-container {
+.viewmode-container {
+  display: flex;
   order: 3;
+  padding: 0;
 }
 
-.print-container {
+.upload-container {
   order: 4;
 }
 
-.basemap-container {
+.info-container {
   order: 5;
 }
 
-.info-container {
+.hotspot-container {
   order: 6;
 }
 
-.bookmark-container {
+.analysis-container {
   order: 7;
 }
 
-.upload-container {
+.tools-container {
   order: 8;
 }
 
-.viewmode-container {
-  display: flex;
+.basemap-container {
   order: 9;
-  padding: 0;
+}
+
+.measurement-container {
+  order: 10;
+}
+
+.swipe-container {
+  order: 11;
+}
+
+.bookmark-container {
+  order: 12;
+  box-shadow: none !important;
+}
+
+.print-container {
+  order: 13;
+}
+
+.error-report-container {
+  order: 14;
+  box-shadow: none !important;
 }
 
 .viewmode-floating-container {
@@ -175,6 +197,20 @@
   margin: 0;
 }
 
+.analysis-group {
+  position: relative;
+  right: 3rem !important;
+  bottom: 8.6rem !important;
+  display: none;
+}
+
+.tools-group {
+  position: relative;
+  right: 3rem !important;
+  bottom: 10.5rem !important;
+  display: none;
+}
+
 /* Measure */
 .measurement-panel {
   margin-top: -1rem;
@@ -1940,6 +1976,9 @@ div.map-container.popup-block {
 */
 
 /*Swipe*/
+.swipe-container {
+  box-shadow: none !important;
+}
 
 .swipe-container .esri-button {
   border: none;