Implement copassheading

projects/common-map/src/fm-map/components/map/map.component.ts

@@ -18,6 +18,7 @@ import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component
 import { IMetaData } from '../meta-data-modal/meta-data-modal.component';
 import { StateSerializerService } from '../../services/state-serializer.service';
 import { GeolocationService} from '../../services/geolocation.service';
+import {DeviceOrientationService} from '../../services/device-orientation.service';
 
 // AppCommon
 import { ResumableFileUploadService, ItemTypeService } from '@farmmaps/common';
@@ -69,6 +70,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   public menuVisible$: Observable<boolean>;
   public query$: Observable<IQueryState>;
   public position$: Observable<Position>;
+  public compassHeading$: Observable<number>;
   public baseLayersCollapsed:boolean = true;
   public overlayLayersCollapsed: boolean = true;
   public extent$: Observable<Extent>;
@@ -82,7 +84,8 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     public itemTypeService: ItemTypeService, 
     private location: Location, 
     private geolocationService: GeolocationService,
-    private zone: NgZone) {
+    private zone: NgZone,
+    private deviceorientationService:DeviceOrientationService) {
   }
 
   @HostListener('document:keyup', ['$event'])
@@ -143,6 +146,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     this.selectedItemLayer$ = this.store.select(mapReducers.selectGetSelectedItemLayer);
     this.period$ = this.store.select(mapReducers.selectGetPeriod);
     this.position$ = this.geolocationService.getCurrentPosition();
+    this.compassHeading$ = this.deviceorientationService.getCurrentCompassHeading();
 
     this.mapState$.pipe(withLatestFrom(this.queryState$)).subscribe((state) => {
       this.replaceUrl(state[0], state[1], true);