ztimson/map-alliance
ztimson/map-alliance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Activity

rotate marker I think

Browse Source
This commit is contained in:
Zakary Timson 2019-07-09 19:20:50 -04:00
parent 161de22a15
commit e518c8e383
3 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/map/map.component.html
View File

@ -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)"> <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"> <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/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> <agm-circle [latitude]="position.latitude" [longitude]="position.longitude" [radius]="position.accuracy" fillColor="#5C95F2"></agm-circle>
</ng-container> </ng-container>
<agm-marker *ngFor="let m of markers" [latitude]="m.latitude" [longitude]="m.longitude"></agm-marker> <agm-marker *ngFor="let m of markers" [latitude]="m.latitude" [longitude]="m.longitude"></agm-marker>

11
src/app/map/map.component.ts
View File

@ -1,6 +1,6 @@
import {Component} from "@angular/core"; import {Component} from "@angular/core";
import {PhysicsService} from "../physics/physics.service"; 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 {BreakpointObserver, Breakpoints} from "@angular/cdk/layout";
import {MatBottomSheet, MatSnackBar} from "@angular/material"; import {MatBottomSheet, MatSnackBar} from "@angular/material";
import {CalibtrateComponent} from "./calibrate/calibtrate.component"; 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) { constructor(private bpObserver: BreakpointObserver, public physicsService: PhysicsService, private snackBar: MatSnackBar, private bottomSheet: MatBottomSheet) {
bpObserver.observe([Breakpoints.Handset]).subscribe(results => this.mobile = results.matches); 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.mapApi) {
if(!this.position) this.center(pos); if(!this.position) this.center(pos);
this.position = 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)`
}
} }
}); });

2
src/app/physics/physics.service.ts
View File

@ -38,7 +38,7 @@ export class PhysicsService {
}); });
// Combine data into one nice package // 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; if(!data[0]) return;
let info = { let info = {