configurable Search plugin layout menu

web/client/components/mapcontrols/search/SearchBar.jsx

@@ -25,14 +25,17 @@ import tooltip from '../../misc/enhancers/tooltip';
 
 const TDiv = tooltip('div');
 
-const SearchServicesContainer = ({activeTool, searchIcon, services = [], selectedService = -1, onServiceSelect = () => {}}) => {
+const SearchServicesContainer = ({activeTool, searchIcon, bottomMenuServices, services = [], selectedService = -1, onServiceSelect = () => {}}) => {
+    const menuClassName = `search-services-submenus ${bottomMenuServices ? "search-services-submenus-bottom" : ""}`;
     return (
         <>
+            { !bottomMenuServices &&
             <MenuItem className="trigger-item" active={activeTool === "addressSearch"} onClick={() => onServiceSelect(-1)}>
                 <Glyphicon glyph={searchIcon}/>
                 <Message msgId="search.addressSearch"/>
             </MenuItem>
-            <div className="search-services-submenus">
+            }
+            <div className={menuClassName}>
                 <TDiv tooltipPosition="left" tooltipId="search.searchOnAllServices" className={`search-services-item all-services-item ${activeTool === "addressSearch" && selectedService === -1 ? "active" : ""}`}  onClick={() => onServiceSelect(-1)}>
                     <Glyphicon glyph={searchIcon}/>
                     <Message msgId="search.addressSearch"/>
@@ -59,10 +62,12 @@ const SearchServicesContainer = ({activeTool, searchIcon, services = [], selecte
     );
 };
 
-const SearchServicesSelectorMenu = ({activeTool, searchIcon, services = [], selectedService = -1, onServiceSelect = () => {}}) => {
+const SearchServicesSelectorMenu = ({activeTool, searchIcon, bottomMenuServices = false, services = [], selectedService = -1, onServiceSelect = () => {}}) => {
+
     if (services.length === 0) {
         return null;
     }
+
     if (services.length === 1) {
         return (
             <MenuItem active={activeTool === "addressSearch"} onClick={() => onServiceSelect(-1)}>
@@ -76,6 +81,7 @@ const SearchServicesSelectorMenu = ({activeTool, searchIcon, services = [], sele
         activeTool={activeTool}
         searchIcon={searchIcon}
         services={services}
+        bottomMenuServices={bottomMenuServices}
         selectedService={selectedService}
         onServiceSelect={onServiceSelect}
     />);
@@ -183,6 +189,7 @@ export default ({
                     onChangeActiveSearchTool("addressSearch");
                     return;
                 }}
+                bottomMenuServices={searchOptions?.bottomMenuServices}
                 services={searchOptions?.services}
             />
         );
@@ -220,6 +227,12 @@ export default ({
         }
     }
 
+    // Move custom services at bottom menu
+    if (searchOptions?.bottomMenuServices && showAddressSearchOption && searchMenuOptions.length > 1) {
+        const [topmenu, ...rest] = searchMenuOptions;
+        searchMenuOptions = [...rest, topmenu];
+    }
+
     const getConfigButtons = () => {
         if (showOptions) {
             if (activeTool === "coordinatesSearch") {

web/client/components/mapcontrols/search/__tests__/SearchBar-test.jsx

@@ -1,5 +1,5 @@
 /**
- * Copyright 2015, GeoSolutions Sas.
+ * Copyright 2025, GeoSolutions Sas.
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
@@ -69,6 +69,16 @@ describe("test the SearchBar", () => {
         expect(searchServicesSubMenus[1].innerHTML).toContain("nominatim");
         expect(searchServicesSubMenus[2].innerHTML).toContain("test");
     });
+    it("test option bottomMenuServices", () => {
+        const searchOptions = {
+            bottomMenuServices: true,
+            services: [{type: "Nominatim"}, { type: "wfs", name: "test"}]
+        };
+        ReactDOM.render(<SearchBar searchOptions={searchOptions} />, document.getElementById("container"));
+        const container = document.getElementById('container');
+        const submenusBottom = container.querySelectorAll('.search-services-submenus-bottom');
+        expect(submenusBottom.length).toBe(1);
+    });
     it('test onSearch with multiple services', () => {
         const actions = {
             onSearch: () => {},

web/client/plugins/Search.jsx

@@ -157,6 +157,7 @@ const SearchResultList = connect(selector, {
  * @prop {object} cfg.maxResults number of max items present in the result list
  * @prop {object} cfg.resultsStyle custom style for search results
  * @prop {bool} cfg.fitResultsToMapSize true by default, fits the result list to the mapSize (can be disabled, for custom uses)
+ * @prop {bool} cfg.searchOptions.bottomMenuServices false by default, shows the services in the bottom of the search menu
  * @prop {searchService[]} cfg.searchOptions.services a list of services to perform search.
  * @prop {object} cfg.coordinateSearchOptions options for the coordinate search
  * @prop {number} [cfg.coordinateSearchOptions.maxZoomLevel=12] the max zoom level for the coordinate search

web/client/themes/default/less/searchbar.less

@@ -28,7 +28,8 @@
         .background-color-var(@theme-vars[main-hover-bg]);
     }
 
-    .search-services-submenus {
+    .search-services-submenus,
+    .search-services-submenus.search-services-submenus-bottom {
         .search-services-item {
             &:hover {
                 .background-color-var(@theme-vars[main-hover-bg]);
@@ -176,26 +177,40 @@
     text-overflow: ellipsis;
 }
 
+.search-services-item {
+    cursor: pointer;
+}
+
 /* Search services submenu */
-.search-services-submenus{
+.search-services-submenus {
+    // Default positioning
+    // Default positioning
     position: absolute;
     right: 100%;
     top: 0;
+    visibility: hidden;
+
+    &.search-services-submenus-bottom {
+        position: static;
+        right: auto;
+        top: auto;
+        visibility: visible;
+        opacity: 1;
+        padding-left: 10px;
+    }
     min-width: 280px;
     max-width: 300px;
     background: white;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     opacity: 0;
-    visibility: hidden;
     transition: opacity 0.2s ease, visibility 0.2s ease;
     z-index: 1000;
     max-height: 400px;
     overflow: auto;
     .search-services-item {
-        &.all-services-item{
+        &.all-services-item {
             padding-left: 5px;
         }
-        cursor: pointer;
         padding: 3px 5px;
         &:not(.all-services-item) {
             .search-services-item-icon{
@@ -205,6 +220,7 @@
     }
 }
 
+
 .trigger-item:hover + .search-services-submenus,
 .search-services-submenus:hover {
     opacity: 1;