From 8093275b71e5f7939ed0d8348832963053c1fca3 Mon Sep 17 00:00:00 2001 From: karengeo Date: Tue, 16 Jan 2024 13:53:16 -0500 Subject: [PATCH 01/12] feat(magnifying glass): insert magnifying glass in new version --- .../search-bar/search-bar.component.html | 19 +++++++---- .../search/search-bar/search-bar.component.ts | 33 +++++++++++++++++-- packages/geo/src/locale/en.geo.json | 1 + packages/geo/src/locale/fr.geo.json | 1 + 4 files changed, 45 insertions(+), 9 deletions(-) diff --git a/packages/geo/src/lib/search/search-bar/search-bar.component.html b/packages/geo/src/lib/search/search-bar/search-bar.component.html index 035abee2dc..1d1e3f36ed 100644 --- a/packages/geo/src/lib/search/search-bar/search-bar.component.html +++ b/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)" /> + + - - - -
- + + result.meta.score)); + + //Filter values who have the maxScore + const result = this.store.all().find(result => result.meta.score === maxScore); + //If the value has not a first maxScore it has to take the title + const coordInv=this.store.all().find(result => result.meta.title); + + //Function to reverse the value of the parameter + function reverseString(coordReInv) { + return coordReInv; + } + //Condition to evaluate if the result has a maxScore if not it is going to take the value of coordinate + if(result){ + this.store.state.update(result,{focused:true,selected:true},true); + }else{ + reverseString(coordInv); + this.store.state.update(coordInv,{focused:true,selected:true},true); + } + } } diff --git a/packages/geo/src/locale/en.geo.json b/packages/geo/src/locale/en.geo.json index c154d2c827..b74e076594 100644 --- a/packages/geo/src/locale/en.geo.json +++ b/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", diff --git a/packages/geo/src/locale/fr.geo.json b/packages/geo/src/locale/fr.geo.json index 3c84067e2e..b5f7848ca9 100644 --- a/packages/geo/src/locale/fr.geo.json +++ b/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", From 58ddf57e05bc64bf042f27343b5dd3d8bb0e50d3 Mon Sep 17 00:00:00 2001 From: karengeo Date: Wed, 17 Jan 2024 10:47:28 -0500 Subject: [PATCH 02/12] feat(magnifying glass): modifs to the glass --- .../geo/src/lib/search/search-bar/search-bar.component.ts | 7 +++++++ projects/demo/src/app/geo/search/search.component.html | 1 + projects/demo/src/app/geo/search/search.component.ts | 8 ++++++++ projects/demo/src/app/geo/search/search.module.ts | 3 ++- 4 files changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/geo/src/lib/search/search-bar/search-bar.component.ts b/packages/geo/src/lib/search/search-bar/search-bar.component.ts index edb3cb564d..a18a7f8c50 100644 --- a/packages/geo/src/lib/search/search-bar/search-bar.component.ts +++ b/packages/geo/src/lib/search/search-bar/search-bar.component.ts @@ -486,12 +486,18 @@ export class SearchBarComponent implements OnInit, OnDestroy { } } + /** + * Event emitted when the search settings changes + */ + @Output() selectElement = new EventEmitter(); + /** * When the user clicks on the magnifying glass and * this find the first object on the map otherwise the * coordinate it will be the second option to be focused in the map */ + selectFirstElement(){ //Find the max value of scores @@ -508,6 +514,7 @@ export class SearchBarComponent implements OnInit, OnDestroy { } //Condition to evaluate if the result has a maxScore if not it is going to take the value of coordinate if(result){ + this.selectElement.emit(result); this.store.state.update(result,{focused:true,selected:true},true); }else{ reverseString(coordInv); diff --git a/projects/demo/src/app/geo/search/search.component.html b/projects/demo/src/app/geo/search/search.component.html index 8d585c9578..0f54dc9e43 100644 --- a/projects/demo/src/app/geo/search/search.component.html +++ b/projects/demo/src/app/geo/search/search.component.html @@ -40,6 +40,7 @@ (reverseSearchCoordsFormatStatus)=" onReverseCoordsFormatStatusChange($event) " + (selectElement)="onSelectElement($event)" > diff --git a/projects/demo/src/app/geo/search/search.component.ts b/projects/demo/src/app/geo/search/search.component.ts index 2dd1d8d60a..29c9557054 100644 --- a/projects/demo/src/app/geo/search/search.component.ts +++ b/projects/demo/src/app/geo/search/search.component.ts @@ -134,6 +134,14 @@ export class AppSearchComponent implements OnInit, OnDestroy { this.settingsChange$.next(true); } + /** + * event to select element when the use of glass + */ + onSelectElement(event){ + console.log('onSelectelement event', event); + this.onResultFocus(event); + } + /** * Try to add a feature to the map when it's being focused * @internal diff --git a/projects/demo/src/app/geo/search/search.module.ts b/projects/demo/src/app/geo/search/search.module.ts index 13e019f71c..ee443f9587 100644 --- a/projects/demo/src/app/geo/search/search.module.ts +++ b/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], From a3bc176faf4a13b08ae2e6adf3021e75c9fc70ca Mon Sep 17 00:00:00 2001 From: karengeo Date: Thu, 18 Jan 2024 15:07:59 -0500 Subject: [PATCH 03/12] feat(magnifying glass):modifs with mistakes --- .../search/search-bar/search-bar.component.ts | 48 +++++++++++-------- .../src/app/geo/search/search.component.html | 1 + .../src/app/geo/search/search.component.ts | 11 +++-- 3 files changed, 35 insertions(+), 25 deletions(-) diff --git a/packages/geo/src/lib/search/search-bar/search-bar.component.ts b/packages/geo/src/lib/search/search-bar/search-bar.component.ts index a18a7f8c50..739393cd64 100644 --- a/packages/geo/src/lib/search/search-bar/search-bar.component.ts +++ b/packages/geo/src/lib/search/search-bar/search-bar.component.ts @@ -486,10 +486,10 @@ export class SearchBarComponent implements OnInit, OnDestroy { } } - /** + /** * Event emitted when the search settings changes */ - @Output() selectElement = new EventEmitter(); + @Output() selectElement = new EventEmitter(); /** * When the user clicks on the magnifying glass and @@ -497,28 +497,36 @@ export class SearchBarComponent implements OnInit, OnDestroy { * coordinate it will be the second option to be focused in the map */ + selectFirstElement() { + //Find the max value of scores + const maxScore = Math.max( + ...this.store.all().map((result) => result.meta.score) + ); - selectFirstElement(){ - - //Find the max value of scores - const maxScore = Math.max(...this.store.all().map(result => result.meta.score)); - - //Filter values who have the maxScore - const result = this.store.all().find(result => result.meta.score === maxScore); - //If the value has not a first maxScore it has to take the title - const coordInv=this.store.all().find(result => result.meta.title); + //Filter values who have the maxScore + const result = this.store + .all() + .find((result) => result.meta.score === maxScore); + //If the value has not a first maxScore it has to take the title + const coordInv = this.store.all().find((result) => result.meta.title); - //Function to reverse the value of the parameter - function reverseString(coordReInv) { - return coordReInv; + //Function to reverse the value of the parameter + function reverseString(coordReInv) { + return coordReInv; } //Condition to evaluate if the result has a maxScore if not it is going to take the value of coordinate - if(result){ - this.selectElement.emit(result); - this.store.state.update(result,{focused:true,selected:true},true); - }else{ + if (result) { + console.log('result dans la condition', result); + this.store.state.update(result, { focused: true, selected: true }, true); + } else { reverseString(coordInv); - this.store.state.update(coordInv,{focused:true,selected:true},true); - } + this.store.state.update( + coordInv, + { focused: true, selected: true }, + true + ); + } + this.selectElement.emit(result); + console.log('result dans selectElement', result); } } diff --git a/projects/demo/src/app/geo/search/search.component.html b/projects/demo/src/app/geo/search/search.component.html index 0f54dc9e43..2b735808c7 100644 --- a/projects/demo/src/app/geo/search/search.component.html +++ b/projects/demo/src/app/geo/search/search.component.html @@ -41,6 +41,7 @@ onReverseCoordsFormatStatusChange($event) " (selectElement)="onSelectElement($event)" + (keydown.enter)="onSelectElement($event)" > diff --git a/projects/demo/src/app/geo/search/search.component.ts b/projects/demo/src/app/geo/search/search.component.ts index 29c9557054..e0a909987a 100644 --- a/projects/demo/src/app/geo/search/search.component.ts +++ b/projects/demo/src/app/geo/search/search.component.ts @@ -135,12 +135,13 @@ export class AppSearchComponent implements OnInit, OnDestroy { } /** - * event to select element when the use of glass + * event to select element when the use of glass */ - onSelectElement(event){ - console.log('onSelectelement event', event); - this.onResultFocus(event); - } + onSelectElement(event) { + console.log('onSelectelement event recu', event); + this.onResultFocus(event); + console.log('onresultfocus to send dans la carte', event); + } /** * Try to add a feature to the map when it's being focused From ab5088f7967a31d70a8dffff486aecdcad85d914 Mon Sep 17 00:00:00 2001 From: karengeo Date: Mon, 22 Jan 2024 13:30:37 -0500 Subject: [PATCH 04/12] feat(magnifyng class):modifications selectFirstElement --- .../search/search-bar/search-bar.component.ts | 56 +++++++++---------- .../search-results.component.ts | 2 + 2 files changed, 30 insertions(+), 28 deletions(-) diff --git a/packages/geo/src/lib/search/search-bar/search-bar.component.ts b/packages/geo/src/lib/search/search-bar/search-bar.component.ts index 739393cd64..cab8f1d485 100644 --- a/packages/geo/src/lib/search/search-bar/search-bar.component.ts +++ b/packages/geo/src/lib/search/search-bar/search-bar.component.ts @@ -24,6 +24,9 @@ import { SearchSourceService } from '../shared/search-source.service'; import { SEARCH_TYPES } from '../shared/search.enums'; import { Research, SearchResult } from '../shared/search.interfaces'; import { SearchService } from '../shared/search.service'; +import { IgoMap } from '../../map'; +import { FEATURE, Feature, FeatureMotion } from '../../feature'; +import { LayerService } from '../../layer'; /** * Searchbar that triggers a research in all search sources enabled. @@ -119,7 +122,10 @@ export class SearchBarComponent implements OnInit, OnDestroy { * Event emitted when the coords format setting is changed */ @Output() reverseSearchCoordsFormatStatus = new EventEmitter(); - + /** + * test + */ + @Input() map : IgoMap ; /** * Search term */ @@ -253,7 +259,8 @@ export class SearchBarComponent implements OnInit, OnDestroy { constructor( private configService: ConfigService, private searchService: SearchService, - private searchSourceService: SearchSourceService + private searchSourceService: SearchSourceService, + private layerService:LayerService ) {} /** @@ -498,35 +505,28 @@ export class SearchBarComponent implements OnInit, OnDestroy { */ selectFirstElement() { - //Find the max value of scores - const maxScore = Math.max( - ...this.store.all().map((result) => result.meta.score) - ); - //Filter values who have the maxScore - const result = this.store - .all() - .find((result) => result.meta.score === maxScore); - //If the value has not a first maxScore it has to take the title - const coordInv = this.store.all().find((result) => result.meta.title); + // sort group of results by score (desc) + const results = this.store.all().sort((res1, res2) => { + return (res1.meta.score - res2.meta.score) * -1; + }); - //Function to reverse the value of the parameter - function reverseString(coordReInv) { - return coordReInv; - } //Condition to evaluate if the result has a maxScore if not it is going to take the value of coordinate - if (result) { - console.log('result dans la condition', result); + if (results) { + const result=results[0]; + //this.selectElement.emit(result[0]); this.store.state.update(result, { focused: true, selected: true }, true); - } else { - reverseString(coordInv); - this.store.state.update( - coordInv, - { focused: true, selected: true }, - true - ); + + if (result.meta.dataType === FEATURE) { + + this.map.searchResultsOverlay.setFeatures( + [result.data as Feature] satisfies Feature[], + FeatureMotion.Default + )}else { + this.layerService.createAsyncLayer(result.data).subscribe((layer) => { + this.map.addLayer(layer); + }) + } } - this.selectElement.emit(result); - console.log('result dans selectElement', result); - } } +} \ No newline at end of file diff --git a/packages/geo/src/lib/search/search-results/search-results.component.ts b/packages/geo/src/lib/search/search-results/search-results.component.ts index 6f0bfc1659..da43759b16 100644 --- a/packages/geo/src/lib/search/search-results/search-results.component.ts +++ b/packages/geo/src/lib/search/search-results/search-results.component.ts @@ -236,6 +236,8 @@ export class SearchResultsComponent implements OnInit, OnDestroy { ); }) ); + console.log('return this store ',this.store.stateView.all$() ); + } /** From f52d806f48389c12b90b6c1659c362d3182a0010 Mon Sep 17 00:00:00 2001 From: karengeo Date: Wed, 24 Jan 2024 17:19:51 -0500 Subject: [PATCH 05/12] feat(magnifying glass):use the magnifying glass to find the first choice to see in the map --- .../search/search-bar/search-bar.component.ts | 67 +++++++++---------- .../search-results-add-button.component.ts | 12 ++-- .../src/app/geo/search/search.component.html | 2 - .../src/app/geo/search/search.component.ts | 9 --- 4 files changed, 39 insertions(+), 51 deletions(-) diff --git a/packages/geo/src/lib/search/search-bar/search-bar.component.ts b/packages/geo/src/lib/search/search-bar/search-bar.component.ts index cab8f1d485..5c51b26ddf 100644 --- a/packages/geo/src/lib/search/search-bar/search-bar.component.ts +++ b/packages/geo/src/lib/search/search-bar/search-bar.component.ts @@ -20,13 +20,13 @@ 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'; import { SearchService } from '../shared/search.service'; -import { IgoMap } from '../../map'; -import { FEATURE, Feature, FeatureMotion } from '../../feature'; -import { LayerService } from '../../layer'; /** * Searchbar that triggers a research in all search sources enabled. @@ -85,7 +85,7 @@ export class SearchBarComponent implements OnInit, OnDestroy { * whether to show search button or not */ - public showSearchButton: boolean = true; + public showSearchButton: boolean = false; /** * List of available search types @@ -122,10 +122,10 @@ export class SearchBarComponent implements OnInit, OnDestroy { * Event emitted when the coords format setting is changed */ @Output() reverseSearchCoordsFormatStatus = new EventEmitter(); - /** + /** * test */ - @Input() map : IgoMap ; + @Input() map: IgoMap; /** * Search term */ @@ -260,7 +260,7 @@ export class SearchBarComponent implements OnInit, OnDestroy { private configService: ConfigService, private searchService: SearchService, private searchSourceService: SearchSourceService, - private layerService:LayerService + private layerService: LayerService ) {} /** @@ -285,7 +285,7 @@ export class SearchBarComponent implements OnInit, OnDestroy { const configValue = this.configService.getConfig( 'searchBar.showSearchButton' ); - this.showSearchButton = configValue !== undefined ? configValue : true; + this.showSearchButton = configValue !== undefined ? configValue : false; } /** @@ -493,40 +493,39 @@ export class SearchBarComponent implements OnInit, OnDestroy { } } - /** - * Event emitted when the search settings changes - */ - @Output() selectElement = new EventEmitter(); /** * When the user clicks on the magnifying glass and - * this find the first object on the map otherwise the - * coordinate it will be the second option to be focused in the map + * this find the first object on the map */ selectFirstElement() { + // look for the two highest score results + const results = this.store.all().sort((res1, res2) => { + return (res1.meta.score - res2.meta.score) * -1; + }); - // sort group of results by score (desc) - const results = this.store.all().sort((res1, res2) => { - return (res1.meta.score - res2.meta.score) * -1; - }); - - //Condition to evaluate if the result has a maxScore if not it is going to take the value of coordinate + //Condition to discriminate whether the search value corresponds to a feature or a layer, + // it is necessary to focus and display the layer on the map if (results) { - const result=results[0]; - //this.selectElement.emit(result[0]); + const result = results[0]; this.store.state.update(result, { focused: true, selected: true }, true); - - if (result.meta.dataType === FEATURE) { - - this.map.searchResultsOverlay.setFeatures( - [result.data as Feature] satisfies Feature[], - FeatureMotion.Default - )}else { - this.layerService.createAsyncLayer(result.data).subscribe((layer) => { - this.map.addLayer(layer); - }) - } + + if (result.meta.dataType === FEATURE) { + const feature = (result as SearchResult).data; + this.map.searchResultsOverlay.setFeatures( + [feature] satisfies Feature[], + FeatureMotion.Default + ); + } else if (result.meta.dataType === LAYER) { + const layerOptions = (result as SearchResult).data; + if (layerOptions.sourceOptions.optionsFromApi === undefined) { + layerOptions.sourceOptions.optionsFromApi = true; + } + this.layerService.createAsyncLayer(result.data).subscribe((layer) => { + this.map.addLayer(layer); + }); + } } + } } -} \ No newline at end of file diff --git a/packages/geo/src/lib/search/search-results/search-results-add-button.component.ts b/packages/geo/src/lib/search/search-results/search-results-add-button.component.ts index 6dac018005..c4f50171ac 100644 --- a/packages/geo/src/lib/search/search-results/search-results-add-button.component.ts +++ b/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( diff --git a/projects/demo/src/app/geo/search/search.component.html b/projects/demo/src/app/geo/search/search.component.html index 2b735808c7..8d585c9578 100644 --- a/projects/demo/src/app/geo/search/search.component.html +++ b/projects/demo/src/app/geo/search/search.component.html @@ -40,8 +40,6 @@ (reverseSearchCoordsFormatStatus)=" onReverseCoordsFormatStatusChange($event) " - (selectElement)="onSelectElement($event)" - (keydown.enter)="onSelectElement($event)" > diff --git a/projects/demo/src/app/geo/search/search.component.ts b/projects/demo/src/app/geo/search/search.component.ts index e0a909987a..2dd1d8d60a 100644 --- a/projects/demo/src/app/geo/search/search.component.ts +++ b/projects/demo/src/app/geo/search/search.component.ts @@ -134,15 +134,6 @@ export class AppSearchComponent implements OnInit, OnDestroy { this.settingsChange$.next(true); } - /** - * event to select element when the use of glass - */ - onSelectElement(event) { - console.log('onSelectelement event recu', event); - this.onResultFocus(event); - console.log('onresultfocus to send dans la carte', event); - } - /** * Try to add a feature to the map when it's being focused * @internal From 10db31bbfc539fab9a5a36f1d8b5940db1150b34 Mon Sep 17 00:00:00 2001 From: karengeo Date: Mon, 11 Mar 2024 15:09:14 -0400 Subject: [PATCH 06/12] fix(magnifying glass):validation sur la longueur du tableau --- .../geo/src/lib/search/search-bar/search-bar.component.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/geo/src/lib/search/search-bar/search-bar.component.ts b/packages/geo/src/lib/search/search-bar/search-bar.component.ts index 5c51b26ddf..92c7d2cdbb 100644 --- a/packages/geo/src/lib/search/search-bar/search-bar.component.ts +++ b/packages/geo/src/lib/search/search-bar/search-bar.component.ts @@ -493,7 +493,6 @@ export class SearchBarComponent implements OnInit, OnDestroy { } } - /** * When the user clicks on the magnifying glass and * this find the first object on the map @@ -505,9 +504,8 @@ export class SearchBarComponent implements OnInit, OnDestroy { return (res1.meta.score - res2.meta.score) * -1; }); - //Condition to discriminate whether the search value corresponds to a feature or a layer, - // it is necessary to focus and display the layer on the map - if (results) { + //Take the first element (feature or layer) to make a focus or view it on the map + if (results.length) { const result = results[0]; this.store.state.update(result, { focused: true, selected: true }, true); From aba0e078b249bc42585200f00bfb278546bc9ab2 Mon Sep 17 00:00:00 2001 From: aziz Date: Tue, 19 Nov 2024 16:47:46 +0100 Subject: [PATCH 07/12] perf: code improvement --- .../search/search-bar/search-bar.component.ts | 53 ++++++++++--------- 1 file changed, 29 insertions(+), 24 deletions(-) diff --git a/packages/geo/src/lib/search/search-bar/search-bar.component.ts b/packages/geo/src/lib/search/search-bar/search-bar.component.ts index 92c7d2cdbb..e0385ef8a9 100644 --- a/packages/geo/src/lib/search/search-bar/search-bar.component.ts +++ b/packages/geo/src/lib/search/search-bar/search-bar.component.ts @@ -122,10 +122,12 @@ export class SearchBarComponent implements OnInit, OnDestroy { * Event emitted when the coords format setting is changed */ @Output() reverseSearchCoordsFormatStatus = new EventEmitter(); + /** - * test + * Map to add layer */ @Input() map: IgoMap; + /** * Search term */ @@ -499,31 +501,34 @@ export class SearchBarComponent implements OnInit, OnDestroy { */ selectFirstElement() { - // look for the two highest score results - const results = this.store.all().sort((res1, res2) => { - return (res1.meta.score - res2.meta.score) * -1; - }); + const results = this.store.all(); + // find the highest result score + const result = results.reduce( + (max: SearchResult, result) => + result.meta.score > max.meta.score ? result : max, + results[0] + ); - //Take the first element (feature or layer) to make a focus or view it on the map - if (results.length) { - const result = results[0]; - this.store.state.update(result, { focused: true, selected: true }, true); - - if (result.meta.dataType === FEATURE) { - const feature = (result as SearchResult).data; - this.map.searchResultsOverlay.setFeatures( - [feature] satisfies Feature[], - FeatureMotion.Default - ); - } else if (result.meta.dataType === LAYER) { - const layerOptions = (result as SearchResult).data; - if (layerOptions.sourceOptions.optionsFromApi === undefined) { - layerOptions.sourceOptions.optionsFromApi = true; - } - this.layerService.createAsyncLayer(result.data).subscribe((layer) => { - this.map.addLayer(layer); - }); + if (!result) { + return; + } + + this.store.state.update(result, { focused: true, selected: true }, true); + + if (result.meta.dataType === FEATURE) { + const feature = (result as SearchResult).data; + this.map.searchResultsOverlay.setFeatures( + [feature] satisfies Feature[], + FeatureMotion.Default + ); + } else if (result.meta.dataType === LAYER) { + const layerOptions = (result as SearchResult).data; + if (layerOptions.sourceOptions.optionsFromApi === undefined) { + layerOptions.sourceOptions.optionsFromApi = true; } + this.layerService.createAsyncLayer(layerOptions).subscribe((layer) => { + this.map.addLayer(layer); + }); } } } From 27bea569ccfbb91ea66f0238d249580555a1f4e5 Mon Sep 17 00:00:00 2001 From: aziz Date: Thu, 21 Nov 2024 14:58:58 +0100 Subject: [PATCH 08/12] style: remove console log --- .../src/lib/search/search-results/search-results.component.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/geo/src/lib/search/search-results/search-results.component.ts b/packages/geo/src/lib/search/search-results/search-results.component.ts index da43759b16..6f0bfc1659 100644 --- a/packages/geo/src/lib/search/search-results/search-results.component.ts +++ b/packages/geo/src/lib/search/search-results/search-results.component.ts @@ -236,8 +236,6 @@ export class SearchResultsComponent implements OnInit, OnDestroy { ); }) ); - console.log('return this store ',this.store.stateView.all$() ); - } /** From 59e1d6bebaaf219dee320e09e720eaee6dac6a79 Mon Sep 17 00:00:00 2001 From: aziz Date: Thu, 21 Nov 2024 18:07:01 +0100 Subject: [PATCH 09/12] fix: handle map if exist --- .../search/search-bar/search-bar.component.ts | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/packages/geo/src/lib/search/search-bar/search-bar.component.ts b/packages/geo/src/lib/search/search-bar/search-bar.component.ts index e0385ef8a9..38b6dfee3f 100644 --- a/packages/geo/src/lib/search/search-bar/search-bar.component.ts +++ b/packages/geo/src/lib/search/search-bar/search-bar.component.ts @@ -499,14 +499,11 @@ export class SearchBarComponent implements OnInit, OnDestroy { * When the user clicks on the magnifying glass and * this find the first object on the map */ - selectFirstElement() { const results = this.store.all(); // find the highest result score - const result = results.reduce( - (max: SearchResult, result) => - result.meta.score > max.meta.score ? result : max, - results[0] + const result = results.reduce((highest: SearchResult, current) => + current.meta.score > highest.meta.score ? current : highest ); if (!result) { @@ -515,19 +512,30 @@ export class SearchBarComponent implements OnInit, OnDestroy { this.store.state.update(result, { focused: true, selected: true }, true); - if (result.meta.dataType === FEATURE) { + if (this.map) { + this.handleMap(this.map, result); + } + } + + private handleMap( + map: IgoMap, + result: SearchResult> + ): void { + const { dataType } = result.meta; + + if (dataType === FEATURE) { const feature = (result as SearchResult).data; - this.map.searchResultsOverlay.setFeatures( + map.searchResultsOverlay.setFeatures( [feature] satisfies Feature[], FeatureMotion.Default ); - } else if (result.meta.dataType === LAYER) { + } else if (dataType === LAYER) { const layerOptions = (result as SearchResult).data; if (layerOptions.sourceOptions.optionsFromApi === undefined) { layerOptions.sourceOptions.optionsFromApi = true; } this.layerService.createAsyncLayer(layerOptions).subscribe((layer) => { - this.map.addLayer(layer); + map.addLayer(layer); }); } } From 754da188d91a1148f35f7efad56bea6fcaa5f0a7 Mon Sep 17 00:00:00 2001 From: karengeo Date: Tue, 16 Jan 2024 13:53:16 -0500 Subject: [PATCH 10/12] feat(geo): search-bar add the magnifying glass --- .../search-bar/search-bar.component.html | 19 ++++--- .../search-bar/search-bar.component.scss | 2 + .../search/search-bar/search-bar.component.ts | 49 ++++++++++++++++++- .../search-results-add-button.component.ts | 12 ++--- packages/geo/src/locale/en.geo.json | 1 + packages/geo/src/locale/fr.geo.json | 1 + .../demo/src/app/geo/search/search.module.ts | 3 +- 7 files changed, 72 insertions(+), 15 deletions(-) diff --git a/packages/geo/src/lib/search/search-bar/search-bar.component.html b/packages/geo/src/lib/search/search-bar/search-bar.component.html index 035abee2dc..1d1e3f36ed 100644 --- a/packages/geo/src/lib/search/search-bar/search-bar.component.html +++ b/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)" /> + + - - - -
- + + button:nth-child(2)::before { content: ''; border-right: 1px solid #ddd; diff --git a/packages/geo/src/lib/search/search-bar/search-bar.component.ts b/packages/geo/src/lib/search/search-bar/search-bar.component.ts index ac9082d620..ba1779f266 100644 --- a/packages/geo/src/lib/search/search-bar/search-bar.component.ts +++ b/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(); + /** + * 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,42 @@ export class SearchBarComponent implements OnInit, OnDestroy { this.store.updateMany(newResults); } } + + selectFirstElement() { + const results = this.store.all(); + // find the highest result score + const result = results.reduce((highest: SearchResult, current) => + current.meta.score > highest.meta.score ? current : highest + ); + + if (!result) { + return; + } + + this.store.state.update(result, { focused: true, selected: true }, true); + + if (this.map) { + this.handleMap(this.map, result); + } + } + + private handleMap( + map: IgoMap, + result: SearchResult> + ): void { + const { dataType } = result.meta; + + if (dataType === FEATURE) { + const feature = (result as SearchResult).data; + map.searchResultsOverlay.setFeatures([feature], FeatureMotion.Default); + } else if (dataType === LAYER) { + const layerOptions = result.data as LayerOptions; + if (layerOptions.sourceOptions.optionsFromApi === undefined) { + layerOptions.sourceOptions.optionsFromApi = true; + } + this.layerService.createAsyncLayer(layerOptions).subscribe((layer) => { + map.addLayer(layer); + }); + } + } } diff --git a/packages/geo/src/lib/search/search-results/search-results-add-button.component.ts b/packages/geo/src/lib/search/search-results/search-results-add-button.component.ts index 6dac018005..c4f50171ac 100644 --- a/packages/geo/src/lib/search/search-results/search-results-add-button.component.ts +++ b/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( diff --git a/packages/geo/src/locale/en.geo.json b/packages/geo/src/locale/en.geo.json index c154d2c827..b74e076594 100644 --- a/packages/geo/src/locale/en.geo.json +++ b/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", diff --git a/packages/geo/src/locale/fr.geo.json b/packages/geo/src/locale/fr.geo.json index 3c84067e2e..b5f7848ca9 100644 --- a/packages/geo/src/locale/fr.geo.json +++ b/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", diff --git a/projects/demo/src/app/geo/search/search.module.ts b/projects/demo/src/app/geo/search/search.module.ts index 13e019f71c..ee443f9587 100644 --- a/projects/demo/src/app/geo/search/search.module.ts +++ b/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], From a0fcf94c013d981212bca7974bdbb666a08fa3b1 Mon Sep 17 00:00:00 2001 From: aziz Date: Mon, 2 Dec 2024 16:09:26 +0100 Subject: [PATCH 11/12] fix(geo): check the result before analysis --- .../src/lib/search/search-bar/search-bar.component.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/geo/src/lib/search/search-bar/search-bar.component.ts b/packages/geo/src/lib/search/search-bar/search-bar.component.ts index 38b6dfee3f..2e04a648b3 100644 --- a/packages/geo/src/lib/search/search-bar/search-bar.component.ts +++ b/packages/geo/src/lib/search/search-bar/search-bar.component.ts @@ -501,9 +501,15 @@ export class SearchBarComponent implements OnInit, OnDestroy { */ selectFirstElement() { const results = this.store.all(); + if (results.length === 0) { + return; + } + // find the highest result score - const result = results.reduce((highest: SearchResult, current) => - current.meta.score > highest.meta.score ? current : highest + const result = results.reduce( + (highest, current) => + current.meta.score > highest.meta.score ? current : highest, + results[0] ); if (!result) { From 2ef34bf2a6ab93c747d5d86dabf0cd62f9327646 Mon Sep 17 00:00:00 2001 From: aziz Date: Mon, 2 Dec 2024 16:18:08 +0100 Subject: [PATCH 12/12] wip --- .../geo/src/lib/search/search-bar/search-bar.component.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/geo/src/lib/search/search-bar/search-bar.component.ts b/packages/geo/src/lib/search/search-bar/search-bar.component.ts index 2e04a648b3..6ef37d972d 100644 --- a/packages/geo/src/lib/search/search-bar/search-bar.component.ts +++ b/packages/geo/src/lib/search/search-bar/search-bar.component.ts @@ -512,10 +512,6 @@ export class SearchBarComponent implements OnInit, OnDestroy { results[0] ); - if (!result) { - return; - } - this.store.state.update(result, { focused: true, selected: true }, true); if (this.map) {