Added user position

angular.json

@@ -36,6 +36,7 @@
               "./node_modules/leaflet/dist/leaflet.js",
               "./node_modules/leaflet-polylinedecorator/dist/leaflet.polylineDecorator.js",
               "./node_modules/leaflet-openweathermap/leaflet-openweathermap.js",
+              "./node_modules/leaflet-rotatedmarker/leaflet.rotatedMarker.js",
               "./node_modules/esri-leaflet/dist/esri-leaflet.js"
             ]
           },

package.json

@@ -34,6 +34,7 @@
     "leaflet": "^1.5.1",
     "leaflet-openweathermap": "^1.0.0",
     "leaflet-polylinedecorator": "^1.6.0",
+    "leaflet-rotatedmarker": "^0.2.0",
     "rxjs": "~6.4.0",
     "tslib": "^1.9.0",
     "zone.js": "~0.9.1"

src/app/components/calibrate/calibrate.component.ts

@@ -1,6 +1,6 @@
 import {Component} from "@angular/core";
 import {MatBottomSheetRef} from "@angular/material";
-import {PhysicsService} from "../../services/physics/physics.service";
+import {PhysicsService} from "../../services/physics.service";
 
 @Component({
     selector: 'calibrate',

src/app/services/map.service.ts

@@ -92,10 +92,15 @@ export class MapService {
         if(this.weatherLayer) this.weatherLayer.addTo(this.map);
     }
 
-    newMarker(latlng: LatLng) {
-        let marker = L.marker(latlng).addTo(this.map);
+    newMarker(latlng: LatLng, opts: any={}) {
+        let marker = L.marker(latlng, opts).addTo(this.map);
         this.markers.push(marker);
-        marker.on('click', () => { if(this.deleteMode) this.delete(marker); });
+        marker.on('click', () => {
+            if(!opts.noDelete && this.deleteMode) {
+                this.delete(marker);
+            } else {
+
+            }});
         return marker;
     }
 

src/app/services/physics.service.ts

@@ -1,6 +1,6 @@
 import {EventEmitter, Injectable} from '@angular/core';
 import {BehaviorSubject, combineLatest} from "rxjs";
-import {PermissionsService} from "../../components/permissions/permissions.service";
+import {PermissionsService} from "../components/permissions/permissions.service";
 
 @Injectable({
     providedIn: 'root'

src/app/views/map/map.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from "@angular/core";
-import {PhysicsService} from "../../services/physics/physics.service";
+import {PhysicsService} from "../../services/physics.service";
 import {filter, skip, take} from "rxjs/operators";
 import {MatBottomSheet, MatSnackBar} from "@angular/material";
 import {CalibrateComponent} from "../../components/calibrate/calibrate.component";
@@ -19,6 +19,7 @@ export class MapComponent implements OnInit {
     map: MapService;
     markers = [];
     position;
+    positionMarker;
 
 
     drawColor = '#d82b00';
@@ -42,13 +43,12 @@ export class MapComponent implements OnInit {
 
     ngOnInit() {
         this.map = new MapService('map');
+        let positionIcon = L.icon({iconUrl: '/assets/images/arrow.png'});
         this.physicsService.info.pipe(filter(coord => !!coord)).subscribe(pos => {
             if(!this.position) this.center({lat: pos.latitude, lng: pos.longitude});
+            if(this.positionMarker) this.map.delete(this.positionMarker);
+            this.positionMarker = this.map.newMarker({lat: pos.latitude, lng: pos.longitude}, {icon: positionIcon, rotationAngle: pos.heading, rotationOrigin: 'center center'});
             this.position = pos;
-            if(this.position.heading != null) {
-                let marker: HTMLElement = document.querySelector('img[src*="arrow.png"]');
-                if(marker) marker.style.transform = `rotate(${this.position.heading}deg)`
-            }
         });
 
         this.physicsService.requireCalibration.subscribe(() => {