@eeacms/volto-arcgis-block 0.1.424 → 0.1.425

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.425](https://github.com/eea/volto-arcgis-block/compare/0.1.424...0.1.425) - 4 February 2026
+
 ### [0.1.424](https://github.com/eea/volto-arcgis-block/compare/0.1.423...0.1.424) - 29 January 2026
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/MapViewer.jsx

@@ -20,6 +20,7 @@ import BasemapWidget from './BasemapWidget';
 import MeasurementWidget from './MeasurementWidget';
 import PrintWidget from './PrintWidget';
 import SwipeWidget from './SwipeWidget';
+import SearchWidget from './SearchWidget';
 import AreaWidget from './AreaWidget';
 import ScaleWidget from './ScaleWidget';
 import LegendWidget from './LegendWidget';
@@ -914,6 +915,10 @@ class MapViewer extends React.Component {
         />
       );
   }
+  renderSearch() {
+    if (this.props.mapviewer_config.Download) return;
+    if (this.view) return <SearchWidget view={this.view} mapViewer={this} />;
+  }
 
   renderArea() {
     if (this.props.mapviewer_config.Download) return;
@@ -1054,6 +1059,7 @@ class MapViewer extends React.Component {
             {this.renderMeasurement()}
             {this.renderPrint()}
             {this.renderSwipe()}
+            {this.renderSearch()}
             {this.renderArea()}
             {this.renderPan()}
             {this.renderScale()}

package/src/components/MapViewer/SearchWidget.jsx

@@ -0,0 +1,56 @@
+import React, { createRef } from 'react';
+//import "@arcgis/core/assets/esri/css/main.css";
+//import "./css/ArcgisMap.css";
+import { loadModules } from 'esri-loader';
+var Search;
+
+class SearchWidget extends React.Component {
+  /**
+   * Creator of the Measurement 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 };
+  }
+
+  loader() {
+    return loadModules(['esri/widgets/Search']).then(([_Search]) => {
+      Search = _Search;
+    });
+  }
+
+  /**
+   * This method is executed after the rener method is executed
+   */
+  async componentDidMount() {
+    await this.loader();
+    if (!this.container.current) return;
+    this.props.view.when(() => {
+      this.props.view.ui.add(this.container.current, 'top-left');
+      this.search = new Search({
+        view: this.props.view,
+        locationEnabled: false,
+      });
+      this.props.view.ui.add(this.search);
+    });
+  }
+
+  /**
+   * This method renders the component
+   * @returns jsx
+   */
+  render() {
+    return (
+      <>
+        <div ref={this.container} className="search-container"></div>
+      </>
+    );
+  }
+}
+
+export default SearchWidget;

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

@@ -728,9 +728,34 @@ div.upload-container
 
 .map-left-menu-container {
   display: flex;
+  padding-top: 1.5rem;
   box-shadow: none !important;
 }
 
+.esri-search {
+  width: 30.3rem !important;
+  margin-top: 0.4rem;
+  margin-left: 1rem;
+}
+
+.esri-widget--button.esri-search__clear-button {
+  background-color: white !important;
+  color: black !important;
+}
+
+.esri-widget--button.esri-search__clear-button:hover {
+  background-color: white !important;
+  color: black !important;
+}
+
+.esri-search__input {
+  height: 100% !important;
+}
+
+.esri-search__input:focus {
+  outline: 2px solid black !important;
+}
+
 .map-menu .ccl-fieldset {
   box-sizing: border-box;
   padding: 0;