Added accuracy circle

src/app/services/map.service.ts

@@ -19,6 +19,9 @@ export enum WeatherLayers {
     TEMP_NEW
 }
 
+export const ARROW = L.icon({iconUrl: '/assets/images/arrow.png', iconSize: [50, 55], iconAnchor: [25, 28]});
+export const MARKER = L.icon({iconUrl: '/assets/images/marker.png', iconSize: [40, 55], iconAnchor: [20, 55]});
+
 export class MapService {
     private drawListener;
     private markers = [];
@@ -92,8 +95,21 @@ export class MapService {
         if(this.weatherLayer) this.weatherLayer.addTo(this.map);
     }
 
+    newCircle(latlng: LatLng, radius: number, opts: any={}) {
+        opts.radius = radius;
+        let circle = L.circle(latlng, opts).addTo(this.map);
+        circle.on('click', () => {
+            if(!opts.noDelete && this.deleteMode) {
+                this.delete(circle);
+            } else {
+
+            }
+        });
+        return circle;
+    }
+
     newMarker(latlng: LatLng, opts: any={}) {
-        if(!opts.icon) opts.icon = L.icon({iconUrl: '/assets/images/marker.png', iconSize: [40, 55], iconAnchor: [20, 55]});
+        if(!opts.icon) opts.icon = MARKER;
         let marker = L.marker(latlng, opts).addTo(this.map);
         this.markers.push(marker);
         marker.on('click', () => {
@@ -101,7 +117,8 @@ export class MapService {
                 this.delete(marker);
             } else {
 
-            }});
+            }
+        });
         return marker;
     }
 

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

@@ -5,7 +5,7 @@ import {MatBottomSheet, MatSnackBar} from "@angular/material";
 import {CalibrateComponent} from "../../components/calibrate/calibrate.component";
 import {ToolbarItem} from "../../components/toolbar/toolbarItem";
 import {flyInRight, flyOutRight} from "../../animations";
-import {MapService} from "../../services/map.service";
+import {ARROW, MapService} from "../../services/map.service";
 
 declare const L;
 
@@ -19,7 +19,7 @@ export class MapComponent implements OnInit {
     map: MapService;
     markers = [];
     position;
-    positionMarker;
+    positionMarker = {arrow: null, circle: null};
 
 
     drawColor = '#d82b00';
@@ -43,11 +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);
+            if(this.positionMarker.arrow) this.map.delete(this.positionMarker.arrow);
-            this.positionMarker = this.map.newMarker({lat: pos.latitude, lng: pos.longitude}, {icon: positionIcon, rotationAngle: pos.heading, rotationOrigin: 'center center'});
+            if(this.positionMarker.circle) this.map.delete(this.positionMarker.circle);
+            this.positionMarker.arrow = this.map.newMarker({lat: pos.latitude, lng: pos.longitude}, {noDelete: true, icon: ARROW, rotationAngle: pos.heading, rotationOrigin: 'center'});
+            this.positionMarker.circle = this.map.newCircle({lat: pos.latitude, lng: pos.longitude}, pos.accuracy, {interactive: false});
             this.position = pos;
         });