Rotation

packages/geo/src/lib/map/rotation-button/rotation-button.component.html

@@ -1,19 +1,9 @@
-<div *ngIf="rotated && !showIfNoRotation" class="igo-rotation-button-container"
-  [matTooltip]="rotated ? ('igo.geo.mapButtons.resetRotation' | translate): ('igo.geo.mapButtons.tipRotation' | translate)"
+<div *ngIf="((rotated$ | async) && !showIfNoRotation) || showIfNoRotation" class="igo-rotation-button-container"
+  [matTooltip]="(rotated$ | async) ? ('igo.geo.mapButtons.resetRotation' | translate: {azimuth: azimuthRounded, rotation: rotationRounded}): ('igo.geo.mapButtons.tipRotation' | translate)"
   matTooltipPosition="left">
-  <button mat-icon-button matTooltipPosition="left" [color]="color" [disabled]="!rotated"
+  <button mat-icon-button matTooltipPosition="left" [color]="color" [disabled]="(rotated$ | async) === false"
     (click)="map.viewController.resetRotation()">
-    <mat-icon [ngStyle]="rotationStyle(map.viewController.getRotation())" svgIcon="navigation">
+    <mat-icon [ngStyle]="currentStyle$ | async" svgIcon="navigation">
     </mat-icon>
   </button>
 </div>
-
-<div *ngIf="showIfNoRotation" class="igo-rotation-button-container"
-  [matTooltip]="rotated ? ('igo.geo.mapButtons.resetRotation' | translate): ('igo.geo.mapButtons.tipRotation' | translate)"
-  matTooltipPosition="left">
-  <button mat-icon-button matTooltipPosition="left" [color]="color" [disabled]="!rotated"
-    (click)="map.viewController.resetRotation()">
-    <mat-icon [ngStyle]="rotationStyle(map.viewController.getRotation())" svgIcon="navigation">
-    </mat-icon>
-  </button>
-</div>

packages/geo/src/lib/map/rotation-button/rotation-button.component.ts

@@ -1,4 +1,6 @@
-import { Component, Input } from '@angular/core';
+import { AfterContentInit, Component, Input } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { bearingToAzimuth } from '@turf/helpers';
 
 import { IgoMap } from '../shared/map';
 
@@ -7,44 +9,31 @@ import { IgoMap } from '../shared/map';
   templateUrl: './rotation-button.component.html',
   styleUrls: ['./rotation-button.component.scss']
 })
-export class RotationButtonComponent {
-  @Input()
-  get map(): IgoMap {
-    return this._map;
-  }
-  set map(value: IgoMap) {
-    this._map = value;
-  }
-  private _map: IgoMap;
-
-  @Input()
-  get showIfNoRotation(): boolean {
-    return this._showIfNoRotation;
-  }
-  set showIfNoRotation(value: boolean) {
-    this._showIfNoRotation = value;
-  }
-  private _showIfNoRotation: boolean;
+export class RotationButtonComponent implements AfterContentInit {
+  readonly rotated$ = new BehaviorSubject<boolean>(false);
+  public azimuthRounded: number = 0;
+  public rotationRounded: number = 0;
+  readonly currentStyle$ = new BehaviorSubject<{}>({
+    transform: 'rotate(0rad)'
+  });
 
-  @Input()
-  get color(): string {
-    return this._color;
-  }
-  set color(value: string) {
-    this._color = value;
-  }
-  private _color: string;
-
-  get rotated(): boolean {
-    return this.map.viewController.getRotation() !== 0;
-  }
+  @Input() map: IgoMap;
+  @Input() showIfNoRotation: boolean;
+  @Input() color: string;
 
-  constructor() {}
+  constructor() { }
 
-  rotationStyle(radians): {} {
-    const rotation = 'rotate(' + radians + 'rad)';
-    return {
-      transform: rotation
-    };
+  ngAfterContentInit() {
+    this.map.viewController.rotation$.subscribe(r => {
+      const radians = r || 0;
+      const deg = radians * 180 / Math.PI;
+      this.rotationRounded = Math.round(deg);
+      this.azimuthRounded = Math.round(bearingToAzimuth(deg * -1));
+      this.currentStyle$.next({
+        transform: 'rotate(' + radians + 'rad)'
+      });
+      this.rotated$.next(radians !== 0);
+    }
+    );
   }
 }

packages/geo/src/lib/map/shared/controllers/view.ts

@@ -14,6 +14,7 @@ import { MapExtent, MapViewState } from '../map.interface';
 import { getScaleFromResolution, viewStatesAreEqual } from '../map.utils';
 import { MapController } from './controller';
 import { EventsKey } from 'ol/events';
+import { ObjectEvent } from 'ol/Object';
 
 export interface MapViewControllerOptions {
   stateHistory: boolean;
@@ -23,6 +24,11 @@ export interface MapViewControllerOptions {
  * Controller to handle map view interactions
  */
 export class MapViewController extends MapController {
+  /**
+   * Observable of the current rotation in radians
+   */
+   readonly rotation$ = new BehaviorSubject<number>(0);
+
   /**
    * Observable of the current resolution
    */
@@ -129,6 +135,14 @@ export class MapViewController extends MapController {
       });
   }
 
+  monitorRotation() {
+    this.observerKeys.push(
+      this.olMap.getView().on('change:rotation', (evt: ObjectEvent) => {
+        this.rotation$.next(evt.target.getRotation());
+      }) as EventsKey
+      );
+  }
+
   /**
    * Teardown any observers
    */
@@ -254,7 +268,7 @@ export class MapViewController extends MapController {
 
   /**
    * Return the current view rotation
-   * @returns Rotation angle in degrees
+   * @returns Rotation angle in radians
    */
   getRotation(): number {
     return this.olView.getRotation();

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

@@ -149,6 +149,7 @@ export class IgoMap {
           }
         }
       });
+      this.viewController.monitorRotation();
   });
   this.propertyChange$.pipe(skipWhile((pc) => !pc)).subscribe(p => handleLayerPropertyChange(this, p.event, p.layer));
   }

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

@@ -279,7 +279,7 @@
         "online": "Online mode",
         "zoomIn": "Zoom in ({{zoom}})",
         "zoomOut": "Zoom out ({{zoom}})",
-        "resetRotation": "Set map to north",
+        "resetRotation": "Azimuth: {{azimuth}}°N. Rotation: {{rotation}}°. Set map to north",
         "tipRotation": "Hold Alt and SHIFT while dragging on map to rotate the map.",
         "preventSreenLock": "Prevent the screen to enter in lock mode.",
         "letScreenLock": "Allow the screen to enter in lock mode."

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

@@ -278,7 +278,7 @@
         "online": "Passer en mode en ligne",
         "zoomIn": "Zoomer ({{zoom}})",
         "zoomOut": "Dézoomer ({{zoom}})",
-        "resetRotation": "Réinitialiser la carte vers le nord",
+				"resetRotation": "Azimut: {{azimuth}}°N. Rotation: {{rotation}}°. Réinitialiser la carte vers le nord",
         "tipRotation": "Maintenez les touches Alt et Majuscule (shift) tout en cliquant sur la carte pour faire pivoter la carte",
         "preventSreenLock": "Prévient l'écran d'entrer en mode verrouillé.",
         "letScreenLock": "Permet l'écran d'entrer en mode verrouillé."