fix(rotation): add rotation button (#261)

* feat(map) acces to view rotation

* feat(map) rotation button to reset view  rotation (if map rotated)

* feat(demo) map rotation & rotation button

* refactor(radio-button) Cleaning component

* refactor(igo-rotation-button) Placement on top

* feat(rotation-button) Provide rotation to button. Pointing to "north"

* refactor(rotation-button) rotationClass to rotationStyle

* refactor(rotation-button) degree to radians

* Update rotation-button.component.ts

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

@@ -20,6 +20,7 @@
     (query)="handleQueryResults($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" color="primary"></igo-rotation-button>
   </igo-map-browser>
 
   <igo-panel title="Contexts list">

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

@@ -12,6 +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-map-browser>
 
   <igo-routing-form [map]="map"></igo-routing-form>

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

@@ -18,6 +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-map-browser>
 
   <igo-print [map]="map"></igo-print>

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

@@ -12,6 +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-map-browser>
 
 </mat-card>

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

@@ -20,7 +20,8 @@ export class AppSimpleMapComponent {
 
   public view = {
     center: [-73, 47.2],
-    zoom: 6
+    zoom: 6,
+    rotation: 0.75
   };
 
   constructor(

projects/geo/src/lib/map/index.ts

@@ -4,3 +4,4 @@ export * from './map-browser';
 export * from './zoom-button';
 export * from './geolocate-button';
 export * from './baselayers-switcher';
+export * from './rotation-button';

projects/geo/src/lib/map/map-browser/map-browser.component.scss

@@ -30,6 +30,15 @@
   }
 }
 
+:host >>> igo-rotation-button {
+  position: absolute;
+  top: calc(#{$igo-icon-size} + 5px + #{$igo-margin});
+  right: $igo-margin;
+  @include mobile {
+    top: calc(#{$igo-icon-size} + 5px + #{$igo-margin});
+  }
+}
+
 :host >>> igo-user-button {
   position: absolute;
   bottom: $igo-margin;

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

@@ -14,6 +14,7 @@ import { MapBrowserBindingDirective } from './map-browser/map-browser-binding.di
 import { MapBrowserComponent } from './map-browser/map-browser.component';
 import { ZoomButtonComponent } from './zoom-button/zoom-button.component';
 import { GeolocateButtonComponent } from './geolocate-button/geolocate-button.component';
+import { RotationButtonComponent } from './rotation-button/rotation-button.component';
 import { BaseLayersSwitcherComponent } from './baselayers-switcher/baselayers-switcher.component';
 import { MiniBaseMapComponent } from './baselayers-switcher/mini-basemap.component';
 
@@ -31,6 +32,7 @@ import { MiniBaseMapComponent } from './baselayers-switcher/mini-basemap.compone
     MapBrowserBindingDirective,
     ZoomButtonComponent,
     GeolocateButtonComponent,
+    RotationButtonComponent,
     BaseLayersSwitcherComponent,
     MiniBaseMapComponent
   ],
@@ -39,6 +41,7 @@ import { MiniBaseMapComponent } from './baselayers-switcher/mini-basemap.compone
     MapBrowserBindingDirective,
     ZoomButtonComponent,
     GeolocateButtonComponent,
+    RotationButtonComponent,
     BaseLayersSwitcherComponent,
     MiniBaseMapComponent
   ]

projects/geo/src/lib/map/rotation-button/index.ts

@@ -0,0 +1 @@
+export * from './rotation-button.component';

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

@@ -0,0 +1,13 @@
+<div class="igo-rotation-button-container">
+  <button
+    *ngIf="map.getRotation() !== 0" 
+    mat-icon-button 
+    [matTooltip]="'igo.geo.mapButtons.resetRotation' | translate"
+    matTooltipPosition="left" 
+    [color]="color" 
+    (click)="map.resetRotation()">
+    <mat-icon [ngStyle]="rotationStyle(map.getRotation())">
+      navigation
+    </mat-icon>
+  </button>
+</div>

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

@@ -0,0 +1,14 @@
+@import '../../../../../core/src/style/partial/core.variables';
+
+.igo-rotation-button-container {
+  width: $igo-icon-size;
+  background-color: #fff;
+  &:hover {
+    background-color: #efefef;
+  }
+}
+
+button,
+:host >>> button .mat-button-ripple-round {
+  border-radius: 0;
+}

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

@@ -0,0 +1,37 @@
+import { Component, Input } from '@angular/core';
+
+import { IgoMap } from '../shared/map';
+
+@Component({
+  selector: 'igo-rotation-button',
+  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 color(): string {
+    return this._color;
+  }
+  set color(value: string) {
+    this._color = value;
+  }
+  private _color: string;
+
+  constructor() {}
+
+  rotationStyle(radians): {} {
+    const rotation = 'rotate(' + radians + 'rad)';
+    return {
+      'transform': rotation
+    };
+  }
+}

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

@@ -181,6 +181,14 @@ export class IgoMap {
     return ext;
   }
 
+  resetRotation() {
+    this.ol.getView().setRotation(0);
+  }
+
+  getRotation() {
+    return this.ol.getView().getRotation();
+  }
+
   getZoom(): number {
     return Math.round(this.ol.getView().getZoom());
   }

projects/geo/src/locale/en.geo.json

@@ -102,7 +102,8 @@
         "baselayerSwitcher": "Change base layer",
         "geolocate": "Geolocate",
         "zoomIn": "Zoom in ({{zoom}})",
-        "zoomOut": "Zoom out ({{zoom}})"
+        "zoomOut": "Zoom out ({{zoom}})",
+        "resetRotation": "Set map to north"
       },
       "metadata": {
         "show": "Show metadata"

projects/geo/src/locale/fr.geo.json

@@ -103,7 +103,8 @@
         "baselayerSwitcher": "Changer le fond de carte",
         "geolocate": "Positionnement GPS",
         "zoomIn": "Zoomer ({{zoom}})",
-        "zoomOut": "Dézoomer ({{zoom}})"
+        "zoomOut": "Dézoomer ({{zoom}})",
+        "resetRotation": "Réinitialiser la carte vers le nord"
       },
       "metadata": {
         "show": "Montrer les métadonnées"