feat(magnifying glass): use the magnifying glass to find the first choice to see on the map

packages/geo/src/lib/search/search-bar/search-bar.component.html

@@ -15,28 +15,33 @@
           : undefined
       "
       [value]="term$ | async"
+      (keydown.enter)="selectFirstElement()"
       (keyup)="onKeyup($event)"
       (touchend)="onKeyup($event)"
     />
+  </mat-form-field>
+
     <button
       *ngIf="(empty$ | async) === false"
       mat-icon-button
       matSuffix
       [color]="color"
       (click)="onClearButtonClick()"
-      [matTooltip]="'igo.geo.search.clearSearch' | translate"
-    >
+      [matTooltip]="'igo.geo.search.clearSearch' | translate">
       <mat-icon svgIcon="close"></mat-icon>
     </button>
-  </mat-form-field>
 
-  <mat-divider *ngIf="withDivider" [vertical]="true"></mat-divider>
-
-  <div class="search-bar-buttons">
-    <button *ngIf="showSearchButton" mat-icon-button [color]="color">
+    <mat-divider *ngIf="withDivider" [vertical]="true"></mat-divider>
+    <div class="search-bar-buttons">
+
+    <button *ngIf="showSearchButton" mat-icon-button [color]="color"
+    (click)="selectFirstElement()"
+    [matTooltip]="'igo.geo.search.search'|translate">
       <mat-icon svgIcon="magnify"></mat-icon>
     </button>
 
+
+
     <igo-search-selector
       *ngIf="searchSelector"
       [searchTypes]="searchTypes"

packages/geo/src/lib/search/search-bar/search-bar.component.scss

@@ -49,6 +49,8 @@ mat-divider {
 .search-bar-buttons {
   position: relative;
   display: inline-flex;
+  align-items: center;
+
   & > button:nth-child(2)::before {
     content: '';
     border-right: 1px solid #ddd;

packages/geo/src/lib/search/search-bar/search-bar.component.ts

@@ -20,6 +20,9 @@ import { ConfigService } from '@igo2/core';
 import { BehaviorSubject, Subscription, timer } from 'rxjs';
 import { debounce, distinctUntilChanged } from 'rxjs/operators';
 
+import { FEATURE, Feature, FeatureMotion } from '../../feature';
+import { LAYER, LayerOptions, LayerService } from '../../layer';
+import { IgoMap } from '../../map';
 import { SearchSourceService } from '../shared/search-source.service';
 import { SEARCH_TYPES } from '../shared/search.enums';
 import { Research, SearchResult } from '../shared/search.interfaces';
@@ -120,6 +123,11 @@ export class SearchBarComponent implements OnInit, OnDestroy {
    */
   @Output() reverseSearchCoordsFormatStatus = new EventEmitter<boolean>();
 
+  /**
+   * Map to add layer
+   */
+  @Input() map: IgoMap;
+
   /**
    * Search term
    */
@@ -253,7 +261,8 @@ export class SearchBarComponent implements OnInit, OnDestroy {
   constructor(
     private configService: ConfigService,
     private searchService: SearchService,
-    private searchSourceService: SearchSourceService
+    private searchSourceService: SearchSourceService,
+    private layerService: LayerService
   ) {}
 
   /**
@@ -485,4 +494,51 @@ export class SearchBarComponent implements OnInit, OnDestroy {
       this.store.updateMany(newResults);
     }
   }
+
+  /**
+   * When the user clicks on the magnifying glass and
+   * this find the first object on the map
+   */
+  selectFirstElement() {
+    const results = this.store.all();
+    if (results.length === 0) {
+      return;
+    }
+
+    // find the highest result score
+    const result = results.reduce(
+      (highest, current) =>
+        current.meta.score > highest.meta.score ? current : highest,
+      results[0]
+    );
+
+    this.store.state.update(result, { focused: true, selected: true }, true);
+
+    if (this.map) {
+      this.handleMap(this.map, result);
+    }
+  }
+
+  private handleMap(
+    map: IgoMap,
+    result: SearchResult<Record<string, any>>
+  ): void {
+    const { dataType } = result.meta;
+
+    if (dataType === FEATURE) {
+      const feature = (result as SearchResult<Feature>).data;
+      map.searchResultsOverlay.setFeatures(
+        [feature] satisfies Feature[],
+        FeatureMotion.Default
+      );
+    } else if (dataType === LAYER) {
+      const layerOptions = (result as SearchResult<LayerOptions>).data;
+      if (layerOptions.sourceOptions.optionsFromApi === undefined) {
+        layerOptions.sourceOptions.optionsFromApi = true;
+      }
+      this.layerService.createAsyncLayer(layerOptions).subscribe((layer) => {
+        map.addLayer(layer);
+      });
+    }
+  }
 }

packages/geo/src/lib/search/search-results/search-results-add-button.component.ts

@@ -125,13 +125,13 @@ export class SearchResultAddButtonComponent implements OnInit, OnDestroy {
         this.isMobile = true;
       }
     });
-    if (this.layer.meta.dataType === 'Layer') {
-      this.added =
-        this.map.layers.findIndex(
-          (lay) => lay.id === this.layer.data.sourceOptions.id
-        ) !== -1;
-    }
     this.layers$$ = this.map.layers$.subscribe(() => {
+      if (this.layer.meta.dataType === 'Layer') {
+        this.added =
+          this.map.layers.findIndex(
+            (lay) => lay.id === this.layer.data.sourceOptions.id
+          ) !== -1;
+      }
       this.isVisible();
     });
     this.resolution$$ = this.map.viewController.resolution$.subscribe(

packages/geo/src/locale/en.geo.json

@@ -448,6 +448,7 @@
         "layer.placeholder": "Search for a layer",
         "ichercheReverse.name": "Search by coordinates",
         "clearSearch": "Clear search",
+        "search":"Search",
         "addToLayer": "Add to layer",
         "ilayer": {
           "name": "Layers",

packages/geo/src/locale/fr.geo.json

@@ -448,6 +448,7 @@
         "layer.placeholder": "Rechercher une couche de données.",
         "ichercheReverse.name": "Recherche par coordonnées",
         "clearSearch": "Effacer la recherche",
+        "search": "Faire une recherche",
         "addToLayer": "Ajouter à une couche",
         "ilayer": {
           "name": "Couches",

projects/demo/src/app/geo/search/search.module.ts

@@ -5,7 +5,7 @@ import {
   IgoContextMenuModule,
   IgoPanelModule
 } from '@igo2/common';
-import { IgoMessageModule } from '@igo2/core';
+import { IgoMessageModule, IgoLanguageModule } from '@igo2/core';
 import {
   IgoFeatureModule,
   IgoMapModule,
@@ -38,6 +38,7 @@ import { AppSearchComponent } from './search.component';
     IgoAppSearchModule,
     IgoActionbarModule,
     IgoContextMenuModule,
+    IgoLanguageModule,
     IgoFeatureModule
   ],
   exports: [AppSearchComponent],