Pointer move

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

@@ -8,14 +8,30 @@
     See the <a href="https://github.com/infra-geo-ouverte/igo2-lib/tree/master/demo/src/app/geo/search">code of this example</a><br>
     See search section of the <a href="https://github.com/infra-geo-ouverte/igo2-lib/tree/master/demo/src/environments"> environment config</a>
     <hr>
+    <br>
+    <span *ngIf="isTouchScreen" title="Details">
+      You can trigger the seach by coordinate by holding the CRTL key down while moving your cursor (on desktop). Don't
+      forget to focus on map before.
+      <br>
+      <br>
+      F2 activate/desactivate the pointer location.
+    </span>
   </mat-card-content>
 
-  <igo-map-browser #mapBrowser [map]="map" [view]="view" igoOverlay [igoContextMenu]=actionbarMenu (menuPosition)="onContextMenuOpen($event)">
+  <igo-map-browser #mapBrowser [map]="map" [view]="view" igoOverlay [igoContextMenu]=actionbarMenu
+
+    igoSearchPointerSummary
+    [igoSearchPointerSummaryDelay]="500"
+    [igoSearchPointerSummaryEnabled]="igoSearchPointerSummaryEnabled"
+
+    (menuPosition)="onContextMenuOpen($event)" igoPointerPositionByKey [pointerPositionByKeyDelay]="500"
+    [pointerPositionByKeyCode]="17" (pointerPositionByKeyCoord)="onPointerSearch($event)">
     <igo-zoom-button [map]="map" color="primary"></igo-zoom-button>
   </igo-map-browser>
 
   <igo-panel title="Search">
     <igo-search-bar
+      (pointerSummaryEnabled)="onPointerSummaryEnabledChange($event)"
       [searchSettings]="true"
       (change)="onSearchTermChange($event)"
       (search)="onSearch($event)"

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

@@ -7,7 +7,7 @@ import {
 } from '@angular/core';
 import * as proj from 'ol/proj';
 
-import { LanguageService } from '@igo2/core';
+import { LanguageService, MediaService } from '@igo2/core';
 import { EntityStore, ActionStore } from '@igo2/common';
 import {
   FEATURE,
@@ -34,6 +34,8 @@ import { SearchState } from '@igo2/integration';
 export class AppSearchComponent implements OnInit, OnDestroy {
   public store = new ActionStore([]);
 
+  public igoSearchPointerSummaryEnabled: boolean = false;
+
   public map = new IgoMap({
     overlay: true,
     controls: {
@@ -59,6 +61,10 @@ export class AppSearchComponent implements OnInit, OnDestroy {
     return this.searchState.store;
   }
 
+  get isTouchScreen(): boolean {
+    return this.mediaService.isTouchScreen();
+  }
+
   public selectedFeature: Feature;
 
   constructor(
@@ -67,7 +73,8 @@ export class AppSearchComponent implements OnInit, OnDestroy {
     private mapService: MapService,
     private layerService: LayerService,
     private searchState: SearchState,
-    private searchService: SearchService
+    private searchService: SearchService,
+    private mediaService: MediaService
   ) {
     this.mapService.setMap(this.map);
 
@@ -84,6 +91,10 @@ export class AppSearchComponent implements OnInit, OnDestroy {
       });
   }
 
+  onPointerSummaryEnabledChange(value) {
+    this.igoSearchPointerSummaryEnabled = value;
+  }
+
   onSearchTermChange(term?: string) {
     if (term === undefined || term === '') {
       this.searchStore.clear();
@@ -183,6 +194,11 @@ export class AppSearchComponent implements OnInit, OnDestroy {
     return position;
   }
 
+  onPointerSearch(event) {
+    this.lonlat = event;
+    this.onSearchCoordinate();
+  }
+
   onSearchCoordinate() {
     this.searchStore.clear();
     const results = this.searchService.reverseSearch(this.lonlat);

demo/src/app/geo/simple-map/simple-map.component.html

@@ -9,10 +9,15 @@
     <hr>
   </mat-card-content>
 
-  <igo-map-browser [map]="map" [view]="view">
+  <igo-map-browser [map]="map" [view]="view"
+  igoPointerPosition
+  [pointerPositionDelay]="pointerCoordDelay"
+  (pointerPositionCoord)="onPointerMove($event)">
     <igo-zoom-button [map]="map" color="primary"></igo-zoom-button>
     <igo-geolocate-button [map]="map" color="primary"></igo-geolocate-button>
     <igo-rotation-button [map]="map" [showIfNoRotation]="true" color="primary"></igo-rotation-button>
   </igo-map-browser>
 
 </mat-card>
+
+<p *ngIf="!isTouchScreen">{{pointerCoord}}</p>

demo/src/app/geo/simple-map/simple-map.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import { LanguageService } from '@igo2/core';
+import { LanguageService, MediaService } from '@igo2/core';
 import { IgoMap, DataSourceService, LayerService } from '@igo2/geo';
 
 @Component({
@@ -9,6 +9,8 @@ import { IgoMap, DataSourceService, LayerService } from '@igo2/geo';
   styleUrls: ['./simple-map.component.scss']
 })
 export class AppSimpleMapComponent {
+  public pointerCoord;
+  public pointerCoordDelay: number = 0;
   public map = new IgoMap({
     controls: {
       attribution: {
@@ -24,10 +26,19 @@ export class AppSimpleMapComponent {
     rotation: 0.75
   };
 
+  get media() {
+    return this.mediaService.getMedia();
+  }
+
+  get isTouchScreen() {
+    return this.mediaService.isTouchScreen();
+  }
+
   constructor(
     private languageService: LanguageService,
     private dataSourceService: DataSourceService,
-    private layerService: LayerService
+    private layerService: LayerService,
+    private mediaService: MediaService
   ) {
     this.dataSourceService
       .createAsyncDataSource({
@@ -42,4 +53,8 @@ export class AppSimpleMapComponent {
         );
       });
   }
+
+  onPointerMove(event) {
+    this.pointerCoord = event;
+  }
 }

demo/src/app/geo/simple-map/simple-map.module.ts

@@ -5,10 +5,12 @@ import { IgoMapModule } from '@igo2/geo';
 
 import { AppSimpleMapComponent } from './simple-map.component';
 import { AppSimpleMapRoutingModule } from './simple-map-routing.module';
+import { CommonModule } from '@angular/common';
 
 @NgModule({
   declarations: [AppSimpleMapComponent],
   imports: [
+    CommonModule,
     AppSimpleMapRoutingModule,
     MatCardModule,
     MatButtonModule,

demo/src/environments/environment.prod.ts

@@ -73,7 +73,11 @@ export const environment: Environment = {
           limit: '8'
         }
       },
+      coordinatesreverse: {
+        showInPointerSummary: true
+      },
       icherchereverse: {
+        showInPointerSummary: true,
         searchUrl: 'https://geoegl.msp.gouv.qc.ca/apis/terrapi',
         order: 3,
         enabled: true

demo/src/environments/environment.ts

@@ -81,7 +81,11 @@ export const environment: Environment = {
           limit: '8'
         }
       },
+      coordinatesreverse: {
+        showInPointerSummary: true
+      },
       icherchereverse: {
+        showInPointerSummary: true,
         searchUrl: '/apis/terrapi',
         order: 3,
         enabled: true

packages/geo/src/lib/map/map.module.ts

@@ -17,6 +17,8 @@ import { RotationButtonComponent } from './rotation-button/rotation-button.compo
 import { BaseLayersSwitcherComponent } from './baselayers-switcher/baselayers-switcher.component';
 import { MiniBaseMapComponent } from './baselayers-switcher/mini-basemap.component';
 import { MapOfflineDirective } from './shared/mapOffline.directive';
+import { PointerPositionDirective } from './shared/map-pointer-position.directive';
+import { PointerPositionByKeyDirective } from './shared/map-pointer-position-by-key.directive';
 
 @NgModule({
   imports: [
@@ -34,7 +36,9 @@ import { MapOfflineDirective } from './shared/mapOffline.directive';
     RotationButtonComponent,
     BaseLayersSwitcherComponent,
     MiniBaseMapComponent,
-    MapOfflineDirective
+    MapOfflineDirective,
+    PointerPositionDirective,
+    PointerPositionByKeyDirective
   ],
   declarations: [
     MapBrowserComponent,
@@ -43,7 +47,9 @@ import { MapOfflineDirective } from './shared/mapOffline.directive';
     RotationButtonComponent,
     BaseLayersSwitcherComponent,
     MiniBaseMapComponent,
-    MapOfflineDirective
+    MapOfflineDirective,
+    PointerPositionDirective,
+    PointerPositionByKeyDirective
   ]
 })
 export class IgoMapModule {}

packages/geo/src/lib/map/shared/index.ts

@@ -4,6 +4,8 @@ export * from './map.interface';
 export * from './map.service';
 export * from './map.utils';
 export * from './mapOffline.directive';
+export * from './map-pointer-position.directive';
+export * from './map-pointer-position-by-key.directive';
 export * from './projection.interfaces';
 export * from './projection.service';
 export * from './controllers';