From e518c8e383f190441721bf2fbeee54b5fba65e60 Mon Sep 17 00:00:00 2001
From: ztimson <zaktimson@gmail.com>
Date: Tue, 9 Jul 2019 19:20:50 -0400
Subject: [PATCH] rotate marker I think

---
 src/app/map/map.component.html     |  2 +-
 src/app/map/map.component.ts       | 11 +++++++++--
 src/app/physics/physics.service.ts |  2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/app/map/map.component.html b/src/app/map/map.component.html
index 1f102de..e3697e4 100644
--- a/src/app/map/map.component.html
+++ b/src/app/map/map.component.html
@@ -23,7 +23,7 @@
 <agm-map class="map" [mapTypeId]="style" [zoomControl]="false" [streetViewControl]="false" [disableDoubleClickZoom]="true" (mapReady)="mapReady($event)" gestureHandling="greedy" (mapClick)="clicked('single', $event)">
     <ng-container *ngIf="position">
         <agm-marker *ngIf="!position.heading" [markerClickable]="false" [latitude]="position.latitude" [longitude]="position.longitude" [iconUrl]="{url: '/assets/images/dot.png', anchor: {x: 11, y: 10}}"></agm-marker>
-        <agm-marker *ngIf="position.heading" [markerClickable]="false" [latitude]="position.latitude" [longitude]="position.longitude" [iconUrl]="{url: '/assets/images/arrow.png', anchor: {x: 11, y: 13}, rotation: position.heading}"></agm-marker>
+        <agm-marker *ngIf="position.heading" [markerClickable]="false" [latitude]="position.latitude" [longitude]="position.longitude" [iconUrl]="{url: '/assets/images/arrow.png', anchor: {x: 11, y: 13}, rotation: 90}"></agm-marker>
         <agm-circle [latitude]="position.latitude" [longitude]="position.longitude" [radius]="position.accuracy" fillColor="#5C95F2"></agm-circle>
     </ng-container>
     <agm-marker *ngFor="let m of markers" [latitude]="m.latitude" [longitude]="m.longitude"></agm-marker>
diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts
index 04fc305..69c589f 100644
--- a/src/app/map/map.component.ts
+++ b/src/app/map/map.component.ts
@@ -1,6 +1,6 @@
 import {Component} from "@angular/core";
 import {PhysicsService} from "../physics/physics.service";
-import {filter, map} from "rxjs/operators";
+import {debounceTime, filter, map} from "rxjs/operators";
 import {BreakpointObserver, Breakpoints} from "@angular/cdk/layout";
 import {MatBottomSheet, MatSnackBar} from "@angular/material";
 import {CalibtrateComponent} from "./calibrate/calibtrate.component";
@@ -27,10 +27,17 @@ export class MapComponent {
 
     constructor(private bpObserver: BreakpointObserver, public physicsService: PhysicsService, private snackBar: MatSnackBar, private bottomSheet: MatBottomSheet) {
         bpObserver.observe([Breakpoints.Handset]).subscribe(results => this.mobile = results.matches);
-        physicsService.info.pipe(filter(coord => !!coord)).subscribe(pos => {
+        physicsService.info.pipe(filter(coord => !!coord), debounceTime(50)).subscribe(pos => {
             if(this.mapApi) {
                 if(!this.position) this.center(pos);
                 this.position = pos;
+
+                this.position.heading = 45;
+
+                if(this.position.heading) {
+                    let marker: HTMLElement = document.querySelector('img[src*="arrow.png"]');
+                    if(marker) marker.style.transform = `rotate(${this.position.heading}deg)`
+                }
             }
         });
 
diff --git a/src/app/physics/physics.service.ts b/src/app/physics/physics.service.ts
index 66307c7..0a0c308 100644
--- a/src/app/physics/physics.service.ts
+++ b/src/app/physics/physics.service.ts
@@ -38,7 +38,7 @@ export class PhysicsService {
         });
 
         // Combine data into one nice package
-        combineLatest(this.position, this.orientation.pipe(debounceTime(200)), this.speed).subscribe(data => {
+        combineLatest(this.position, this.orientation, this.speed).subscribe(data => {
             if(!data[0]) return;
 
             let info = {