feat(geo): add new option to reverse long lat coord (#1159)

* feat(geo): add new option ti change coord format * solve lint error * delete comments and add local text fr,en for the new search option * rename variable name and add translate to menu option * improve the code and reverce latlong from coordinates file * reverse UTM MTM data * solve lint error * change spelling reverce for reverse * reverse coord format lonlat latlon * feat(search-bar): adjust reverse coord status change * solve typo and class name * add reverse coord feature to the lib * sove lint * remove reverse coord for projection coordinates --------- Co-authored-by: Philippe Lafreniere <[email protected]> Co-authored-by: Pierre-Étienne Lord <[email protected]>
infra-geo-ouverte · Mar 15, 2023 · a3ef8b8 · a3ef8b8
1 parent 5b2cf96
commit a3ef8b8
Show file tree

Hide file tree

Showing 14 changed files with 109 additions and 27 deletions.
diff --git a/demo/src/app/geo/search/search.component.html b/demo/src/app/geo/search/search.component.html
@@ -33,7 +33,9 @@
       (searchTermChange)="onSearchTermChange($event)"
       (search)="onSearch($event)"
       (clearFeature)="removeFeatureFromMap()"
-      (searchSettingsChange)="onSearchSettingsChange()">
+      (searchSettingsChange)="onSearchSettingsChange()"
+      [reverseSearchCoordsFormatEnabled]="igoReverseSearchCoordsFormatEnabled"
+      (reverseSearchCoordsFormatStatus)="onReverseCoordsFormatStatusChange($event)">
     </igo-search-bar>
 
     <igo-search-results

diff --git a/demo/src/app/geo/search/search.component.ts b/demo/src/app/geo/search/search.component.ts
@@ -8,7 +8,7 @@ import {
 } from '@angular/core';
 import * as proj from 'ol/proj';
 
-import { LanguageService, MediaService } from '@igo2/core';
+import { LanguageService, MediaService, StorageService } from '@igo2/core';
 import { EntityStore, ActionStore } from '@igo2/common';
 import {
   FEATURE,
@@ -71,14 +71,16 @@ export class AppSearchComponent implements OnInit, OnDestroy {
   }
 
   public selectedFeature: Feature;
+  public igoReverseSearchCoordsFormatEnabled: boolean;
 
   constructor(
     private languageService: LanguageService,
     private projectionService: ProjectionService,
     private mapService: MapService,
     private layerService: LayerService,
     private searchState: SearchState,
-    private mediaService: MediaService
+    private mediaService: MediaService,
+    private storageService: StorageService,
   ) {
     this.mapService.setMap(this.map);
 
@@ -93,14 +95,18 @@ export class AppSearchComponent implements OnInit, OnDestroy {
         this.osmLayer = layer;
         this.map.addLayer(layer);
       });
+
+      this.igoReverseSearchCoordsFormatEnabled =
+      this.storageService.get('reverseSearchCoordsFormatEnabled') as boolean || false;
   }
 
   onPointerSummaryStatusChange(value) {
     this.igoSearchPointerSummaryEnabled = value;
   }
 
-  onSearchTermChange(term = '') {
+  onSearchTermChange(term?: string) {
     this.term = term;
+    this.searchState.setSearchTerm(term);
     const termWithoutHashtag = term.replace(/(#[^\s]*)/g, '').trim();
     if (termWithoutHashtag.length < 2) {
       this.searchStore.clear();
@@ -117,6 +123,11 @@ export class AppSearchComponent implements OnInit, OnDestroy {
     this.searchStore.updateMany(newResults);
   }
 
+  onReverseCoordsFormatStatusChange(value) {
+    this.storageService.set('reverseSearchCoordsFormatEnabled', value);
+    this.igoReverseSearchCoordsFormatEnabled = value;
+  }
+
   onSearchSettingsChange() {
     this.settingsChange$.next(true);
   }
@@ -205,7 +216,8 @@ export class AppSearchComponent implements OnInit, OnDestroy {
 
   searchCoordinate(lonlat) {
     this.searchStore.clear();
-    this.term = lonlat.map((c) => c.toFixed(6)).join(', ');
+    this.term = (!this.igoReverseSearchCoordsFormatEnabled) ?
+    lonlat.map((c) => c.toFixed(6)).join(', ') : lonlat.reverse().map((c) => c.toFixed(6)).join(', ');
   }
 
   openGoogleMaps(lonlat) {

diff --git a/packages/geo/src/lib/map/shared/map.utils.ts b/packages/geo/src/lib/map/shared/map.utils.ts
@@ -488,6 +488,7 @@ export function roundCoordToString(coord: [number, number], decimal: number = 3)
  * and for the current UTM zone and MTM zone.
  * @param lonLat [number, number] array of the coordinate to transform.
  * @param projections  Projection[] Array of destination projection.
+ * @param reverseCoords To reverse coords from latLon to lonLat (search option)
  * @returns Returns an array of converted coordinates.
  */
 export function lonLatConversion(
@@ -543,9 +544,7 @@ export function lonLatConversion(
       code: projection.code,
       alias: projection.alias || projection.code,
       coord: rawCoord,
-      igo2CoordFormat: `${roundCoordTo(rawCoord).join(
-        ', '
-      )} ; ${numericEpsgCode}`
+      igo2CoordFormat: `${roundCoordTo(rawCoord).join(', ')} ; ${numericEpsgCode}`
     });
   });
 

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
@@ -41,6 +41,8 @@
       (pointerSummaryStatus)="pointerSummaryStatus.emit($event)"
       [searchResultsGeometryEnabled]="searchResultsGeometryEnabled"
       (searchResultsGeometryStatus)="searchResultsGeometryStatus.emit($event)"
+      [reverseSearchCoordsFormatEnabled]="reverseSearchCoordsFormatEnabled"
+      (reverseSearchCoordsFormatStatus)="reverseSearchCoordsFormatStatus.emit($event)"
       (searchSourceChange)="onSearchSettingsChange()">
     </igo-search-settings>
   </div>

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
@@ -112,6 +112,11 @@ export class SearchBarComponent implements OnInit, OnDestroy {
    */
    @Output() searchResultsGeometryStatus = new EventEmitter<boolean>();
 
+   /**
+   * Event emitted when the coords format setting is changed
+   */
+   @Output() reverseSearchCoordsFormatStatus = new EventEmitter<boolean>();
+
   /**
    * Search term
    */
@@ -138,6 +143,20 @@ export class SearchBarComponent implements OnInit, OnDestroy {
 
   @Input() pointerSummaryEnabled: boolean = false;
   @Input() searchResultsGeometryEnabled: boolean = false;
+
+  /**
+   * When reverse coordinates status change
+   */
+  @Input()
+  get reverseSearchCoordsFormatEnabled(): boolean {
+    return this._reverseSearchCoordsFormatEnabled;
+  }
+  set reverseSearchCoordsFormatEnabled(value: boolean) {
+    this._reverseSearchCoordsFormatEnabled = value;
+    this.setTerm(this.term, true);
+  }
+  private _reverseSearchCoordsFormatEnabled = false;
+
   /**
    * Whether a float label should be displayed
    */
@@ -323,14 +342,15 @@ export class SearchBarComponent implements OnInit, OnDestroy {
    * Send the term into the stream only if this component is not disabled
    * @param term Search term
    */
-  setTerm(term: string) {
+  setTerm(term: string, reverseCoordEvent?: boolean) {
+
     if (this.disabled) {
       return;
     }
 
     term = term || '';
 
-    if (term !== this.term) {
+    if (term !== this.term && !reverseCoordEvent) {
       this.term$.next(term);
     }
 

diff --git a/packages/geo/src/lib/search/search-results/search-results-item.component.ts b/packages/geo/src/lib/search/search-results/search-results-item.component.ts
@@ -77,8 +77,6 @@ export class SearchResultsItemComponent {
     return getEntityIcon(this.result);
   }
 
-  constructor() {}
-
   onZoomHandler() {
     const olFeature = this.format.readFeature(this.result.data, {
       dataProjection: this.result.data.projection,

diff --git a/packages/geo/src/lib/search/search-settings/search-settings.component.html b/packages/geo/src/lib/search/search-settings/search-settings.component.html
@@ -84,16 +84,23 @@
       <span *ngIf="hasPointerReverseSearchSource && !isTouchScreen">
         <mat-divider></mat-divider>
         <span class="pointer-summary-slide-toggle-container mat-typography">
-          <mat-slide-toggle class="pointer-summary-option" (change)="changePointerReverseSearch($event)" tooltip-position="below"
+          <mat-slide-toggle class="search-option" (change)="changePointerReverseSearch($event)" tooltip-position="below"
             matTooltipShowDelay="500" [matTooltip]="'igo.geo.search.pointerSearchSummary.tooltip' | translate"
             (click)="$event.stopPropagation()" [checked]="pointerSummaryEnabled" [labelPosition]="'after'">
             {{'igo.geo.search.pointerSearchSummary.title' | translate}}
           </mat-slide-toggle>
-          <mat-slide-toggle class="pointer-summary-option" (change)="changeSearchResultsGeometry($event)" tooltip-position="below"
+          <mat-slide-toggle class="search-option" (change)="changeSearchResultsGeometry($event)" tooltip-position="below"
             matTooltipShowDelay="500" [matTooltip]="'igo.geo.search.searchResultsGeometry.tooltip' | translate"
             (click)="$event.stopPropagation()" [checked]="searchResultsGeometryEnabled" [labelPosition]="'after'">
             {{'igo.geo.search.searchResultsGeometry.title' | translate}}
           </mat-slide-toggle>
+          <mat-slide-toggle class="search-option" (change)="reverseSearchCoordsFormat($event)" tooltip-position="below"
+            matTooltipShowDelay="500"
+            [matTooltip]="reverseSearchCoordsFormatEnabled ? ('igo.geo.search.reverseCoordFormat.tooltipLatLon' | translate)
+            : ('igo.geo.search.reverseCoordFormat.tooltipLonLat' | translate)"
+            (click)="$event.stopPropagation()" [checked]="reverseSearchCoordsFormatEnabled" [labelPosition]="'after'">
+            {{'igo.geo.search.reverseCoordFormat.title' | translate}}
+          </mat-slide-toggle>
         </span>
       </span>
   </mat-menu>

diff --git a/packages/geo/src/lib/search/search-settings/search-settings.component.scss b/packages/geo/src/lib/search/search-settings/search-settings.component.scss
@@ -33,7 +33,7 @@
   margin-right: $igo-margin;
 }
 
-.pointer-summary-option {
+.search-option {
   display: block;
   margin-right: 10px;
   margin-bottom: 15px;

diff --git a/packages/geo/src/lib/search/search-settings/search-settings.component.ts b/packages/geo/src/lib/search/search-settings/search-settings.component.ts
@@ -53,6 +53,7 @@ export class SearchSettingsComponent implements OnInit {
 
   @Input() pointerSummaryEnabled: boolean = false;
   @Input() searchResultsGeometryEnabled: boolean = false;
+  @Input() reverseSearchCoordsFormatEnabled: boolean = false;
 
   /**
    * Event emitted when the enabled search source changes
@@ -69,6 +70,11 @@ export class SearchSettingsComponent implements OnInit {
    */
   @Output() searchResultsGeometryStatus = new EventEmitter<boolean>();
 
+  /**
+   * Event emitted when the coords format is changed
+   */
+  @Output() reverseSearchCoordsFormatStatus = new EventEmitter<boolean>();
+
   @HostListener('document:keydown', ['$event'])
   handleKeyboardEvent(event: KeyboardEvent) {
     if (event.key === 'F2') {
@@ -251,4 +257,9 @@ export class SearchSettingsComponent implements OnInit {
     this.searchResultsGeometryEnabled = event.checked;
     this.searchResultsGeometryStatus.emit(this.searchResultsGeometryEnabled);
   }
+
+  reverseSearchCoordsFormat(event) {
+    this.reverseSearchCoordsFormatEnabled = event.checked;
+    this.reverseSearchCoordsFormatStatus.emit(this.reverseSearchCoordsFormatEnabled);
+  }
 }
diff --git a/packages/geo/src/lib/search/shared/search.service.ts b/packages/geo/src/lib/search/shared/search.service.ts
@@ -15,6 +15,7 @@ import {
   sourceCanReverseSearch,
   sourceCanReverseSearchAsSummary
 } from './search.utils';
+import { StorageService } from '@igo2/core';
 
 /**
  * This service perform researches in all the search sources enabled.
@@ -29,7 +30,8 @@ import {
 export class SearchService {
   constructor(
     private searchSourceService: SearchSourceService,
-    private mapService: MapService
+    private mapService: MapService,
+    private storageService: StorageService
   ) {}
 
   /**
@@ -92,7 +94,9 @@ export class SearchService {
     const sources = this.searchSourceService
       .getEnabledSources()
       .filter(reverseSourceFonction);
-    return this.reverseSearchSources(sources, lonLat, options || {});
+    const reverseSearchCoordsFormat = this.storageService.get('reverseSearchCoordsFormatEnabled') as boolean || false;
+
+    return this.reverseSearchSources(sources, lonLat, options || {}, reverseSearchCoordsFormat);
   }
 
   /**
@@ -124,13 +128,15 @@ export class SearchService {
   private reverseSearchSources(
     sources: SearchSource[],
     lonLat: [number, number],
-    options: ReverseSearchOptions
+    options: ReverseSearchOptions,
+    reverseSearchCoordsFormat: boolean
   ): Research[] {
     return sources.map((source: SearchSource) => {
       return {
         request: ((source as any) as ReverseSearch).reverseSearch(
           lonLat,
-          options
+          options,
+          reverseSearchCoordsFormat
         ),
         reverse: true,
         source

diff --git a/packages/geo/src/lib/search/shared/sources/coordinates.ts b/packages/geo/src/lib/search/shared/sources/coordinates.ts
@@ -83,19 +83,25 @@ export class CoordinatesReverseSearchSource extends SearchSource
   })
   reverseSearch(
     lonLat: [number, number],
-    options?: ReverseSearchOptions
+    options?: ReverseSearchOptions,
+    reverseSearchCoordsFormatEnabled?: boolean
   ): Observable<SearchResult<Feature>[]> {
-    return of([this.dataToResult(lonLat, options)]);
+    return of([this.dataToResult(lonLat, options, reverseSearchCoordsFormatEnabled)]);
   }
 
-  private dataToResult(data: [number, number], options: ReverseSearchOptions): SearchResult<Feature> {
+  private dataToResult(data: [number, number], options: ReverseSearchOptions,
+    reverseSearchCoordsFormatEnabled: boolean): SearchResult<Feature> {
+
     const dataDMS = convertDDToDMS(data);
     const convertedCoord = lonLatConversion(data, this.projections);
     const coords = convertedCoord.reduce((obj, item) => (
       obj[item.alias] = item.igo2CoordFormat, obj), {});
 
-    const roundedCoordString = roundCoordTo(data, 6).join(', ');
-    const roundedCoordStringDMS = dataDMS.join(', ');
+    const roundedCoordString = (!reverseSearchCoordsFormatEnabled) ?
+      roundCoordTo(data, 6).join(', ') : roundCoordTo(data, 6).reverse().join(', ');
+
+    const roundedCoordStringDMS = (!reverseSearchCoordsFormatEnabled) ?
+      dataDMS.join(', ') : dataDMS.reverse().join(', ');
 
     let geometry: FeatureGeometry = {
       type: 'Point',
@@ -124,10 +130,14 @@ export class CoordinatesReverseSearchSource extends SearchSource
       subtitleHtml += '<small>Confiance: ' + options.conf + '%</small>';
     }
 
-    const coordKey = this.languageService.translate.instant('igo.geo.search.coordinates.coord');
+    const coordKey = (!reverseSearchCoordsFormatEnabled) ?
+      this.languageService.translate.instant('igo.geo.search.coordinates.coord'):
+      this.languageService.translate.instant('igo.geo.search.coordinates.reversedCoord');
     properties[coordKey] = roundedCoordString;
 
-    const coordKeyDMS = this.languageService.translate.instant('igo.geo.search.coordinates.coordDMS');
+    const coordKeyDMS = (!reverseSearchCoordsFormatEnabled) ?
+     this.languageService.translate.instant('igo.geo.search.coordinates.coordDMS'):
+     this.languageService.translate.instant('igo.geo.search.coordinates.reversedCoordDMS');
     properties[coordKeyDMS] = roundedCoordStringDMS;
 
     return {

diff --git a/packages/geo/src/lib/search/shared/sources/source.ts b/packages/geo/src/lib/search/shared/sources/source.ts
@@ -252,6 +252,7 @@ export interface ReverseSearch {
    */
   reverseSearch(
     lonLat: [number, number],
-    options?: ReverseSearchOptions
+    options?: ReverseSearchOptions,
+    reverseSearchCoordsFormat?: boolean
   ): Observable<SearchResult[]>;
 }
diff --git a/packages/geo/src/locale/en.geo.json b/packages/geo/src/locale/en.geo.json
@@ -488,7 +488,9 @@
         "coordinates": {
           "name": "Coordinates",
           "coord": "Geographic (longitude, latitude)",
+          "reversedCoord": "Geographic (latitude, longitude)",
           "coordDMS": "Geographic (longitude, latitude) (DMS)",
+          "reversedCoordDMS": "Geographic (latitude, longitude) (DMS)",
           "radius": "Radius",
           "conf": "Confidence"
         },
@@ -504,6 +506,11 @@
           "title": "Show results geometries",
           "tooltip": "Hide/ show the results geometries "
         },
+        "reverseCoordFormat": {
+          "title": "Display data in latitude/longitude",
+          "tooltipLonLat": "Display data in latitude/longitude",
+          "tooltipLatLon": "Display data in longitude/latitude"
+        },
         "searchSources": {
           "selectAll": "Select All",
           "unselectAll": "Unselect All",

diff --git a/packages/geo/src/locale/fr.geo.json b/packages/geo/src/locale/fr.geo.json
@@ -487,7 +487,9 @@
         "coordinates": {
           "name": "Coordonnées",
           "coord": "Coordonnée (longitude, latitude)",
+          "reversedCoord": "Coordonnée (latitude, longitude)",
           "coordDMS": "Coordonnée (longitude, latitude) (DMS)",
+          "reversedCoordDMS": "Coordonnée (latitude, longitude) (DMS)",
           "radius": "Rayon",
           "conf": "Confiance"
         },
@@ -503,6 +505,11 @@
           "title": "Montrer tous les résultats",
           "tooltip": "Afficher/cacher la géométrie des résultats"
         },
+        "reverseCoordFormat": {
+          "title": "Afficher les données en latitude/longitude",
+          "tooltipLonLat": "Afficher les données en latitude/longitude.",
+          "tooltipLatLon": "Afficher les données en longitude/latitude."
+        },
         "searchSources": {
           "selectAll": "Tout sélectionner",
           "unselectAll": "Tout désélectionner",