Rotation button 1.0.0-alpha.1

demo/src/app/context/context/context.component.html

@@ -16,7 +16,7 @@
     [map]="map">
     <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" color="primary"></igo-rotation-button>
+    <igo-rotation-button [map]="map" [showIfNoRotation]="true" color="primary"></igo-rotation-button>
   </igo-map-browser>
 
   <igo-panel title="Contexts list">

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

@@ -12,7 +12,7 @@
   <igo-map-browser [map]="map" [view]="view">
     <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" color="primary"></igo-rotation-button>
+    <igo-rotation-button [map]="map" [showIfNoRotation]="false" color="primary"></igo-rotation-button>
   </igo-map-browser>
 
   <igo-routing-form [map]="map"></igo-routing-form>

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

@@ -18,7 +18,7 @@
   <igo-map-browser [map]="map" [view]="view">
     <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" color="primary"></igo-rotation-button>
+    <igo-rotation-button [map]="map" [showIfNoRotation]="false" color="primary"></igo-rotation-button>
   </igo-map-browser>
 
   <igo-print [map]="map"></igo-print>

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

@@ -12,7 +12,7 @@
   <igo-map-browser [map]="map" [view]="view">
     <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" color="primary"></igo-rotation-button>
+    <igo-rotation-button [map]="map" [showIfNoRotation]="true" color="primary"></igo-rotation-button>
   </igo-map-browser>
 
 </mat-card>

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

@@ -1,10 +1,17 @@
-<div class="igo-rotation-button-container">
-  <button
-    *ngIf="map.viewController.getRotation() !== 0" 
-    mat-icon-button 
-    [matTooltip]="'igo.geo.mapButtons.resetRotation' | translate"
-    matTooltipPosition="left" 
-    [color]="color" 
+<div *ngIf="rotated && !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>
+
+<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>

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

@@ -1,3 +1,4 @@
+@import '../../../../../core/src/style/partial/media';
 @import '../../../../../core/src/style/partial/core.variables';
 
 .igo-rotation-button-container {
@@ -11,4 +12,9 @@
 button,
 :host >>> button .mat-button-ripple-round {
   border-radius: 0;
+  &:disabled {
+    @include mobile {
+      display: none;
+    }
+  }
 }

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

@@ -17,6 +17,15 @@ export class RotationButtonComponent {
   }
   private _map: IgoMap;
 
+  @Input()
+  get showIfNoRotation(): boolean {
+    return this._showIfNoRotation;
+  }
+  set showIfNoRotation(value: boolean) {
+    this._showIfNoRotation = value;
+  }
+  private _showIfNoRotation: boolean;
+
   @Input()
   get color(): string {
     return this._color;
@@ -26,6 +35,10 @@ export class RotationButtonComponent {
   }
   private _color: string;
 
+  get rotated(): boolean {
+    return this.map.viewController.getRotation() !== 0;
+  }
+
   constructor() {}
 
   rotationStyle(radians): {} {

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

@@ -225,7 +225,7 @@ export class MapViewController extends MapController {
    * Reset the view rotation to 0
    */
   resetRotation() {
-    this.olView.setRotation(0);
+    this.olView.animate({rotation: 0});
   }
 
   /**

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

@@ -121,7 +121,8 @@
         "geolocate": "Geolocate",
         "zoomIn": "Zoom in ({{zoom}})",
         "zoomOut": "Zoom out ({{zoom}})",
-        "resetRotation": "Set map to north"
+        "resetRotation": "Set map to north",
+        "tipRotation": "Hold Alt and SHIFT while dragging on map to rotate the map."
       },
       "metadata": {
         "show": "Show metadata"

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

@@ -121,7 +121,8 @@
         "geolocate": "Positionnement GPS",
         "zoomIn": "Zoomer ({{zoom}})",
         "zoomOut": "Dézoomer ({{zoom}})",
-        "resetRotation": "Réinitialiser la carte vers le nord"
+        "resetRotation": "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"
       },
       "metadata": {
         "show": "Montrer les métadonnées"