From a019278d3844278ee5b7acec3eaf36a8c6f9402e Mon Sep 17 00:00:00 2001 From: ztimson Date: Fri, 23 Aug 2019 15:22:17 -0400 Subject: [PATCH] Added accuracy circle --- src/app/services/map.service.ts | 21 +++++++++++++++++++-- src/app/views/map/map.component.ts | 11 ++++++----- src/assets/images/arrow.png | Bin 737 -> 2982 bytes 3 files changed, 25 insertions(+), 7 deletions(-) diff --git a/src/app/services/map.service.ts b/src/app/services/map.service.ts index a8c8133..034cca2 100644 --- a/src/app/services/map.service.ts +++ b/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; } diff --git a/src/app/views/map/map.component.ts b/src/app/views/map/map.component.ts index b7506aa..54104cb 100644 --- a/src/app/views/map/map.component.ts +++ b/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); - this.positionMarker = this.map.newMarker({lat: pos.latitude, lng: pos.longitude}, {icon: positionIcon, rotationAngle: pos.heading, rotationOrigin: 'center center'}); + if(this.positionMarker.arrow) this.map.delete(this.positionMarker.arrow); + 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; }); diff --git a/src/assets/images/arrow.png b/src/assets/images/arrow.png index 01cef52d0ef43be3d457af9e8fe9b21b56e8ce60..41a6fb96b881c42d0eae95e68421bb72d2265611 100644 GIT binary patch delta 2973 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