Implement copassheading

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

@@ -16,7 +16,8 @@
   menuVisible:menuVisible$|async,
   searchCollapsed:searchCollapsed$|async,
   clearEnabled:clearEnabled$|async,
-  period:period$|async
+  period:period$|async,
+  compassHeading:compassHeading$|async
 } as state">
   <aol-map #map (moveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" [ngClass]="{'panel-visible':state.panelVisible}" class="map">  
     <div>
@@ -34,7 +35,7 @@
     <aol-layer-vector>
       <fm-map-item-source-vector [features]="state.features" (onFeaturesSelected)="handleFeaturesSelected($event)" [selectedFeature]="state.selectedFeature" [selectedItem]="state.selectedItem"></fm-map-item-source-vector>
     </aol-layer-vector>
-    <fm-map-gps-location [position]="state.position" [headingTolerance]="20" [showHeading]="true"></fm-map-gps-location>
+    <fm-map-gps-location [position]="state.position" [headingTolerance]="20" [showHeading]="true" [heading]="state.compassHeading"></fm-map-gps-location>
     <div class="control-container">
   <!--    <switch2d3d></switch2d3d>-->
       <fm-map-pan-to-location [position]="state.position" [mapState]="state.mapState" [animate]="true"></fm-map-pan-to-location>

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);