feat(context-menu): add context-meny and reverse geolocate (#323)

* Added an action bar mode for context menu

* add search source for coordinates

* linked context menu with coordinates research

demo/src/app/common/action/action.component.html

@@ -14,5 +14,21 @@
   </igo-actionbar>
 
 </mat-card>
+<p></p>
+
+<mat-card [igoContextMenu]= actionbarMenu>
+  <mat-card-subtitle>Common</mat-card-subtitle>
+  <mat-card-title>Action context-menu</mat-card-title>
+  <div></div>
+</mat-card>
 
 
+
+<ng-template #actionbarMenu>
+  <igo-actionbar
+    [store]="store"
+    [withIcon]="true"
+    [horizontal]="true"
+    [mode]="'context'">
+  </igo-actionbar>
+</ng-template>

demo/src/app/common/action/action.component.ts

@@ -1,19 +1,15 @@
-import {
-  Component,
-  OnInit,
-  OnDestroy
-} from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 
 import { Media, MediaOrientation, MediaService } from '@igo2/core';
 import { ActionStore, ActionbarMode } from '@igo2/common';
+import { Overlay } from '@angular/cdk/overlay';
 
 @Component({
   selector: 'app-action',
   templateUrl: './action.component.html',
   styleUrls: ['./action.component.scss']
 })
 export class AppActionComponent implements OnInit, OnDestroy {
-
   public store = new ActionStore([]);
 
   private added = false;
@@ -27,7 +23,7 @@ export class AppActionComponent implements OnInit, OnDestroy {
     return ActionbarMode.Overlay;
   }
 
-  constructor(private mediaService: MediaService) {}
+  constructor(private mediaService: MediaService, public overlay: Overlay) {}
 
   ngOnInit() {
     const added = () => this.added === true;
@@ -42,7 +38,7 @@ export class AppActionComponent implements OnInit, OnDestroy {
           alert('Add!');
           this.added = true;
           this.store.updateActionsAvailability();
-        },
+        }
       },
       {
         id: 'edit',
@@ -74,5 +70,4 @@ export class AppActionComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     this.store.destroy();
   }
-
 }

demo/src/app/common/action/action.module.ts

@@ -1,20 +1,19 @@
 import { NgModule } from '@angular/core';
 import { MatButtonModule, MatCardModule } from '@angular/material';
 
-import { IgoActionModule } from '@igo2/common';
+import { IgoActionModule, IgoContextMenuModule } from '@igo2/common';
 
 import { AppActionComponent } from './action.component';
 import { AppActionRoutingModule } from './action-routing.module';
 
 @NgModule({
-  declarations: [
-    AppActionComponent
-  ],
+  declarations: [AppActionComponent],
   imports: [
     AppActionRoutingModule,
     MatButtonModule,
     MatCardModule,
-    IgoActionModule
+    IgoActionModule,
+    IgoContextMenuModule
   ],
   exports: [AppActionComponent]
 })

demo/src/app/geo/search/search.component.html

@@ -10,7 +10,7 @@
     <hr>
   </mat-card-content>
 
-  <igo-map-browser [map]="map" [view]="view" igoOverlay>
+  <igo-map-browser #mapBrowser [map]="map" [view]="view" igoOverlay [igoContextMenu]=actionbarMenu (menuPosition)="onContextMenuOpen($event)">
     <igo-zoom-button [map]="map" color="primary"></igo-zoom-button>
   </igo-map-browser>
 
@@ -26,6 +26,20 @@
       (resultFocus)="onResultFocus($event)"
       (resultSelect)="onResultSelect($event)">
     </igo-search-results>
+
+  </igo-panel>
+
+  <igo-panel *ngIf="selectedFeature" title="Details">
+    <igo-feature-details [feature]="selectedFeature"></igo-feature-details>
   </igo-panel>
 
 </mat-card>
+
+<ng-template #actionbarMenu>
+  <igo-actionbar
+    [store]="store"
+    [withIcon]="false"
+    [horizontal]="true"
+    [mode]="'context'">
+  </igo-actionbar>
+</ng-template>

demo/src/app/geo/search/search.component.ts

@@ -1,27 +1,41 @@
-import { Component } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  ViewChild
+} from '@angular/core';
+import * as proj from 'ol/proj';
 
 import { LanguageService } from '@igo2/core';
-import { EntityStore } from '@igo2/common';
+import { EntityStore, ActionStore } from '@igo2/common';
 import {
   FEATURE,
   Feature,
   FeatureMotion,
+  GoogleLinks,
   IgoMap,
   LayerService,
+  MapService,
   Layer,
   LAYER,
   LayerOptions,
   Research,
-  SearchResult
+  SearchResult,
+  SearchService
 } from '@igo2/geo';
 
+import { SearchState } from '@igo2/integration';
+
 @Component({
   selector: 'app-search',
   templateUrl: './search.component.html',
   styleUrls: ['./search.component.scss']
 })
-export class AppSearchComponent {
-  map = new IgoMap({
+export class AppSearchComponent implements OnInit, OnDestroy {
+  public store = new ActionStore([]);
+
+  public map = new IgoMap({
     overlay: true,
     controls: {
       attribution: {
@@ -30,19 +44,33 @@ export class AppSearchComponent {
     }
   });
 
-  view = {
+  public view = {
     center: [-73, 47.2],
     zoom: 7
   };
 
-  searchStore: EntityStore<SearchResult> = new EntityStore<SearchResult>([]);
+  public osmLayer: Layer;
+
+  @ViewChild('mapBrowser', { read: ElementRef }) mapBrowser: ElementRef;
+
+  public lonlat;
+  public mapProjection: string;
+
+  get searchStore(): EntityStore<SearchResult> {
+    return this.searchState.store;
+  }
 
-  osmLayer: Layer;
+  selectedFeature: Feature;
 
   constructor(
     private languageService: LanguageService,
-    private layerService: LayerService
+    private mapService: MapService,
+    private layerService: LayerService,
+    private searchState: SearchState,
+    private searchService: SearchService
   ) {
+    this.mapService.setMap(this.map);
+
     this.layerService
       .createAsyncLayer({
         title: 'OSM',
@@ -59,6 +87,7 @@ export class AppSearchComponent {
   onSearchTermChange(term?: string) {
     if (term === undefined || term === '') {
       this.searchStore.clear();
+      this.selectedFeature = undefined;
     }
   }
 
@@ -98,14 +127,14 @@ export class AppSearchComponent {
     if (result.meta.dataType !== FEATURE) {
       return undefined;
     }
-    const feature = (result as SearchResult<Feature>).data;
+    this.selectedFeature = (result as SearchResult<Feature>).data;
 
     // Somethimes features have no geometry. It happens with some GetFeatureInfo
-    if (feature.geometry === undefined) {
+    if (this.selectedFeature.geometry === undefined) {
       return;
     }
 
-    this.map.overlay.setFeatures([feature], FeatureMotion.Default);
+    this.map.overlay.setFeatures([this.selectedFeature], FeatureMotion.Default);
   }
 
   /**
@@ -125,4 +154,77 @@ export class AppSearchComponent {
       .createAsyncLayer(layerOptions)
       .subscribe(layer => this.map.addLayer(layer));
   }
+
+  ngOnInit() {
+    this.store.load([
+      {
+        id: 'coordinates',
+        title: 'coordinates',
+        handler: this.onSearchCoordinate.bind(this)
+      },
+      {
+        id: 'googleMaps',
+        title: 'googleMap',
+        handler: this.onOpenGoogleMaps.bind(this),
+        args: ['1']
+      },
+      {
+        id: 'googleStreetView',
+        title: 'googleStreetView',
+        handler: this.onOpenGoogleStreetView.bind(this)
+      }
+    ]);
+  }
+
+  ngOnDestroy() {
+    this.store.destroy();
+  }
+
+  onContextMenuOpen(event: { x: number; y: number }) {
+    const position = this.mapPosition(event);
+    const coord = this.mapService.getMap().ol.getCoordinateFromPixel(position);
+    this.mapProjection = this.mapService.getMap().projection;
+    this.lonlat = proj.transform(coord, this.mapProjection, 'EPSG:4326');
+  }
+
+  mapPosition(event: { x: number; y: number }) {
+    const contextmenuPoint = event;
+    contextmenuPoint.y =
+      contextmenuPoint.y -
+      this.mapBrowser.nativeElement.getBoundingClientRect().top +
+      window.scrollY;
+    contextmenuPoint.x =
+      contextmenuPoint.x -
+      this.mapBrowser.nativeElement.getBoundingClientRect().left +
+      window.scrollX;
+    const position = [contextmenuPoint.x, contextmenuPoint.y];
+    return position;
+  }
+
+  onSearchCoordinate() {
+    this.searchStore.clear();
+    const results = this.searchService.reverseSearch(this.lonlat);
+
+    for (const i in results) {
+      if (results.length > 0) {
+        results[i].request.subscribe((_results: SearchResult<Feature>[]) => {
+          this.onSearch({ research: results[i], results: _results });
+          /*if (_results[i].source.options.title === 'Coordinates') {
+            this.onResultSelect(_results[0]);
+          }*/
+          console.log(_results[0]);
+        });
+      }
+    }
+  }
+
+  onOpenGoogleMaps() {
+    window.open(GoogleLinks.getGoogleMapsLink(this.lonlat[0], this.lonlat[1]));
+  }
+
+  onOpenGoogleStreetView() {
+    window.open(
+      GoogleLinks.getGoogleStreetViewLink(this.lonlat[0], this.lonlat[1])
+    );
+  }
 }

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

@@ -8,13 +8,20 @@ import {
   MatTooltipModule
 } from '@angular/material';
 
-import { IgoPanelModule } from '@igo2/common';
 import {
+  IgoPanelModule,
+  IgoActionbarModule,
+  IgoContextMenuModule
+} from '@igo2/common';
+import {
+  IgoFeatureModule,
   IgoMapModule,
   IgoSearchModule,
   provideIChercheSearchSource,
   provideILayerSearchSource,
-  provideNominatimSearchSource
+  provideNominatimSearchSource,
+  provideIChercheReverseSearchSource,
+  provideCoordinatesReverseSearchSource
 } from '@igo2/geo';
 
 import { IgoAppSearchModule } from '@igo2/integration';
@@ -34,13 +41,18 @@ import { AppSearchRoutingModule } from './search-routing.module';
     IgoPanelModule,
     IgoMapModule,
     IgoSearchModule.forRoot(),
-    IgoAppSearchModule
+    IgoAppSearchModule,
+    IgoActionbarModule,
+    IgoContextMenuModule,
+    IgoFeatureModule
   ],
   exports: [AppSearchComponent],
   providers: [
+    provideCoordinatesReverseSearchSource(),
     provideIChercheSearchSource(),
     provideILayerSearchSource(),
-    provideNominatimSearchSource()
+    provideNominatimSearchSource(),
+    provideIChercheReverseSearchSource()
   ]
 })
 export class AppSearchModule {}

demo/src/environments/environment.ts

@@ -55,7 +55,7 @@ export const environment: Environment = {
     },
     searchSources: {
       nominatim: {
-        enabled: true
+        enabled: false
       },
       reseautq: {
         searchUrl: 'https://ws.mapserver.transports.gouv.qc.ca/swtq',
@@ -78,11 +78,14 @@ export const environment: Environment = {
         distance : 0.5
       },
       icherche: {
-        searchUrl: 'https://geoegl.msp.gouv.qc.ca/icherche/geocode',
-        locateUrl: 'https://geoegl.msp.gouv.qc.ca/icherche/xy',
+        searchUrl: '/icherche/geocode',
         zoomMaxOnSelect: 10,
         enabled: true
       },
+      icherchereverse: {
+        searchUrl: '/icherche/xy',
+        enabled: true
+      },
       datasource: {
         searchUrl: 'https://geoegl.msp.gouv.qc.ca/igo2/api/layers/search',
         enabled: false

demo/src/locale/en.json

@@ -1,5 +1,8 @@
 {
   "welcome": "Welcome to {{title}}",
   "About": "About",
-  "Salutation": "Salutation"
+  "Salutation": "Salutation",
+  "coordinates": "Show coordinates,",
+  "googleMap": "Show in Google maps",
+  "googleStreetView": "Show in Google Street view"
 }