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 01cef52..41a6fb9 100644 Binary files a/src/assets/images/arrow.png and b/src/assets/images/arrow.png differ