Everything but user location & drawings are saving
This commit is contained in:
parent
ac01076973
commit
1ef1655ccb
@ -26,6 +26,7 @@
|
||||
"@angular/router": "~8.0.1",
|
||||
"@angular/service-worker": "~8.0.1",
|
||||
"@types/leaflet": "^1.5.1",
|
||||
"@types/lodash": "^4.14.138",
|
||||
"bootstrap-scss": "^4.3.1",
|
||||
"classlist.js": "^1.1.20150312",
|
||||
"esri-leaflet": "^2.3.0",
|
||||
@ -36,6 +37,7 @@
|
||||
"leaflet-openweathermap": "^1.0.0",
|
||||
"leaflet-polylinedecorator": "^1.6.0",
|
||||
"leaflet-rotatedmarker": "^0.2.0",
|
||||
"lodash": "^4.17.15",
|
||||
"ng-click-outside": "^5.0.0",
|
||||
"ngx-color-picker": "^8.1.0",
|
||||
"rxjs": "~6.4.0",
|
||||
|
||||
@ -33,7 +33,7 @@ export class ToolbarComponent implements OnInit, AfterViewInit {
|
||||
if (!item.individualToggle) {
|
||||
menu.filter(i => item.name != i.name && !i.individualToggle).forEach(item => {
|
||||
item.enabled = false;
|
||||
if (item.onDisabled) item.onDisabled();
|
||||
if (item.onDisabled) item.onDisabled(item);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -3,6 +3,13 @@ export interface LatLng {
|
||||
lng: number;
|
||||
}
|
||||
|
||||
export interface MapData {
|
||||
circles?: Circle[];
|
||||
markers?: Marker[];
|
||||
measurements?: Measurement[];
|
||||
rectangles?: Rectangle[];
|
||||
}
|
||||
|
||||
export interface MapSymbol {
|
||||
symbol?: any;
|
||||
latlng?: LatLng | LatLng[];
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import {BehaviorSubject} from "rxjs";
|
||||
import {latLngDistance} from "../utils";
|
||||
import {environment} from "../../environments/environment";
|
||||
import {Circle, LatLng, Marker, Measurement, Rectangle} from "../models/mapSymbol";
|
||||
import {Circle, LatLng, MapSymbol, Marker, Measurement, Rectangle} from "../models/mapSymbol";
|
||||
|
||||
declare const L;
|
||||
|
||||
@ -19,28 +19,39 @@ export enum WeatherLayers {
|
||||
TEMP_NEW
|
||||
}
|
||||
|
||||
export const ARROW = L.icon({iconUrl: '/assets/images/arrow.png', iconSize: [40, 45], iconAnchor: [20, 23]});
|
||||
export const MARKER = L.icon({iconUrl: '/assets/images/marker.png', iconSize: [40, 55], iconAnchor: [20, 55]});
|
||||
export const MEASURE = L.icon({iconUrl: '/assets/images/measure.png', iconSize: [75, 50], iconAnchor: [25, 25]});
|
||||
const ARROW = L.icon({iconUrl: '/assets/images/arrow.png', iconSize: [40, 45], iconAnchor: [20, 23]});
|
||||
const MARKER = L.icon({iconUrl: '/assets/images/marker.png', iconSize: [40, 55], iconAnchor: [20, 55]});
|
||||
const MEASURE = L.icon({iconUrl: '/assets/images/measure.png', iconSize: [75, 50], iconAnchor: [25, 25]});
|
||||
|
||||
export class MapService {
|
||||
private circles = [];
|
||||
private drawListener;
|
||||
private markers = [];
|
||||
private measurements = [];
|
||||
private mapLayer;
|
||||
private rectangles = [];
|
||||
private weatherLayer;
|
||||
|
||||
click = new BehaviorSubject<{event: any, symbol?: any}>(null);
|
||||
click = new BehaviorSubject<{latlng: LatLng, symbol?: MapSymbol, item?: any}>(null);
|
||||
drawingColor = '#ff4141';
|
||||
drawingWeight = 10;
|
||||
map;
|
||||
|
||||
constructor(private elementId: string) {
|
||||
this.map = L.map(elementId, {attributionControl: false, editable: true, tap: true, zoomControl: false, maxBoundsViscosity: 1, doubleClickZoom: false}).setView({lat: 0, lng: 0}, 10);
|
||||
this.map.on('click', (e) => this.click.next({event: e}));
|
||||
this.map.on('click', (e) => this.click.next({latlng: {lat: e.latlng.lat, lng: e.latlng.lng}}));
|
||||
this.setMapLayer();
|
||||
}
|
||||
|
||||
this.map.on('editable:drag', e => console.log(e));
|
||||
private getIcon(name: string) {
|
||||
switch(name) {
|
||||
case 'arrow':
|
||||
return ARROW;
|
||||
case 'measure':
|
||||
return MEASURE;
|
||||
default:
|
||||
return MARKER;
|
||||
}
|
||||
}
|
||||
|
||||
centerOn(latlng: LatLng, zoom=14) {
|
||||
@ -50,14 +61,18 @@ export class MapService {
|
||||
delete(...symbols) {
|
||||
symbols.forEach(s => {
|
||||
this.map.removeLayer(s);
|
||||
this.circles = this.circles.filter(c => c != c);
|
||||
this.markers = this.markers.filter(m => m != s);
|
||||
this.measurements = this.markers.filter(m => m != s);
|
||||
this.measurements = this.measurements.filter(m => m != s);
|
||||
this.rectangles = this.rectangles.filter(r => r != s);
|
||||
});
|
||||
}
|
||||
|
||||
deleteAll() {
|
||||
this.circles.forEach(c => this.delete(c));
|
||||
this.markers.forEach(m => this.delete(m));
|
||||
this.measurements.forEach(m => this.delete(m.line, m.decoration));
|
||||
this.measurements.forEach(m => this.delete(m));
|
||||
this.rectangles.forEach(r => this.delete(r));
|
||||
}
|
||||
|
||||
lock(unlock?: boolean) {
|
||||
@ -118,44 +133,41 @@ export class MapService {
|
||||
}
|
||||
|
||||
newCircle(c: Circle) {
|
||||
if(!c.radius) c.radius = 500;
|
||||
if(!c.color) c.color = '#ff4141';
|
||||
let circle = L.circle(c.latlng, c).addTo(this.map);
|
||||
circle.symbol = c;
|
||||
circle.on('click', e => this.click.next({event: e, symbol: circle}));
|
||||
let circle = L.circle(c.latlng, Object.assign({}, c)).addTo(this.map);
|
||||
if(c.label) circle.bindTooltip(c.label, {permanent: true, direction: 'center'});
|
||||
circle.on('click', e => this.click.next({latlng: {lat: e.latlng.lat, lng: e.latlng.lng}, symbol: c, item: circle}));
|
||||
if(!c.noDelete) this.circles.push(circle);
|
||||
return circle;
|
||||
}
|
||||
|
||||
newMarker(m: Marker) {
|
||||
if(!m.icon) m.icon = MARKER;
|
||||
let marker = L.marker(m.latlng, m).addTo(this.map);
|
||||
let marker = L.marker(m.latlng, Object.assign({}, m, {icon: m.icon ? this.getIcon(m.icon) : MARKER})).addTo(this.map);
|
||||
if(m.label) marker.bindTooltip(m.label, {permanent: true, direction: 'bottom'});
|
||||
marker.symbol = m;
|
||||
marker.on('click', e => this.click.next({event: e, symbol: marker}));
|
||||
marker.on('click', e => this.click.next({latlng: {lat: e.latlng.lat, lng: e.latlng.lng}, symbol: m, item: marker}));
|
||||
if(!m.noDelete) this.markers.push(marker);
|
||||
return marker;
|
||||
}
|
||||
|
||||
newMeasurement(m: Measurement) {
|
||||
if(!m.color) m.color = '#ff4141';
|
||||
if(!m.weight) m.weight = 8;
|
||||
let line = L.polyline([m.latlng, m.latlng2], m);
|
||||
let line = L.polyline([m.latlng, m.latlng2], Object.assign({}, m));
|
||||
let decoration = L.polylineDecorator(line, {patterns: [
|
||||
{offset: '100%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 10, polygon: false, headAngle: 180, pathOptions: m})},
|
||||
{offset: '-100%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 10, polygon: false, headAngle: 180, pathOptions: m})}
|
||||
]});
|
||||
let group = L.layerGroup([line, decoration]).addTo(this.map);
|
||||
group.symbol = m;
|
||||
line.on('click', e => this.click.next({event: e, symbol: group}));
|
||||
let group = new L.LayerGroup([line, decoration]).addTo(this.map);
|
||||
if(!m.noDelete) this.measurements.push(group);
|
||||
|
||||
let distance = latLngDistance(m.latlng, m.latlng2);
|
||||
line.bindPopup(`${distance > 1000 ? Math.round(distance / 100) / 10 : Math.round(distance)} ${distance > 1000 ? 'k' : ''}m`, {autoClose: false, closeOnClick: false}).openPopup();
|
||||
line.on('click', e => this.click.next({latlng: {lat: e.latlng.lat, lng: e.latlng.lng}, symbol: m, item: group}));
|
||||
return group;
|
||||
}
|
||||
|
||||
newRectangle(r: Rectangle) {
|
||||
if(!r.color) r.color = '#ff4141';
|
||||
let rect = new L.Rectangle([r.latlng, r.latlng2], r).addTo(this.map);
|
||||
rect.symbol = r;
|
||||
rect.on('click', e => this.click.next({event: e, symbol: rect}));
|
||||
let rect = new L.Rectangle([r.latlng, r.latlng2], Object.assign({}, r)).addTo(this.map);
|
||||
if(r.label) rect.bindTooltip(r.label, {permanent: true, direction: 'center'});
|
||||
rect.on('click', e => this.click.next({latlng: {lat: e.latlng.lat, lng: e.latlng.lng}, symbol: r, item: rect}));
|
||||
if(!r.noDelete) this.rectangles.push(rect);
|
||||
return rect;
|
||||
}
|
||||
|
||||
@ -163,7 +175,7 @@ export class MapService {
|
||||
this.lock();
|
||||
this.drawListener = e => {
|
||||
let poly = L.polyline([e.latlng], {interactive: true, color: this.drawingColor, weight: this.drawingWeight}).addTo(this.map);
|
||||
poly.on('click', e => this.click.next({event: e, symbol: poly}));
|
||||
poly.on('click', e => this.click.next({latlng: {lat: e.latlng.lat, lng: e.latlng.lng}, item: poly}));
|
||||
let pushLine = e => poly.addLatLng(e.latlng);
|
||||
this.map.on('touchmove', pushLine);
|
||||
this.map.on('touchend', () => this.map.off('touchmove', pushLine));
|
||||
|
||||
@ -18,9 +18,6 @@ export class PhysicsService {
|
||||
|
||||
constructor(permissionsService: PermissionsService) {
|
||||
|
||||
navigator.geolocation.watchPosition(e => console.log(e), err => console.error(err));
|
||||
window.addEventListener('devicemotion', e => console.log(e));
|
||||
|
||||
permissionsService.requestPermission('geolocation', 'gps_fixed', 'Can we use your location?').then(granted => {
|
||||
if(granted) {
|
||||
// Gather physical data
|
||||
|
||||
@ -1,12 +1,18 @@
|
||||
import {Injectable} from "@angular/core";
|
||||
import {AngularFirestore, AngularFirestoreCollection, DocumentSnapshot} from "@angular/fire/firestore";
|
||||
import {map} from "rxjs/operators";
|
||||
import {AngularFirestore, AngularFirestoreCollection} from "@angular/fire/firestore";
|
||||
import {BehaviorSubject, Subscription} from "rxjs";
|
||||
import {Circle, MapData, Marker, Measurement, Rectangle} from "../models/mapSymbol";
|
||||
import * as _ from 'lodash';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class SyncService {
|
||||
private code: string;
|
||||
private collection: AngularFirestoreCollection;
|
||||
private mapSub: Subscription;
|
||||
|
||||
mapSymbols = new BehaviorSubject<MapData>(null);
|
||||
|
||||
constructor(private db: AngularFirestore) {
|
||||
this.collection = this.db.collection('Maps');
|
||||
@ -16,9 +22,55 @@ export class SyncService {
|
||||
return (await this.collection.doc(mapCode).ref.get()).exists;
|
||||
}
|
||||
|
||||
addCircle(circle: Circle) {
|
||||
let map = this.mapSymbols.value;
|
||||
if(!map.circles) map.circles = [];
|
||||
map.circles.push(circle);
|
||||
this.save();
|
||||
}
|
||||
|
||||
addMarker(marker: Marker) {
|
||||
let map = this.mapSymbols.value;
|
||||
if(!map.markers) map.markers = [];
|
||||
map.markers.push(marker);
|
||||
this.save();
|
||||
}
|
||||
|
||||
addMeasurement(measurement: Measurement) {
|
||||
let map = this.mapSymbols.value;
|
||||
if(!map.measurements) map.measurements = [];
|
||||
map.measurements.push(measurement);
|
||||
this.save();
|
||||
}
|
||||
|
||||
addRectangle(rect: Rectangle) {
|
||||
let map = this.mapSymbols.value;
|
||||
if(!map.rectangles) map.rectangles = [];
|
||||
map.rectangles.push(rect);
|
||||
this.save();
|
||||
}
|
||||
|
||||
delete(...symbols) {
|
||||
let map = this.mapSymbols.value;
|
||||
if(map.circles) symbols.forEach(s => map.circles = map.circles.filter(c => !_.isEqual(s, c)));
|
||||
if(map.markers) symbols.forEach(s => map.markers = map.markers.filter(m => !_.isEqual(s, m)));
|
||||
if(map.measurements) symbols.forEach(s => map.measurements = map.measurements.filter(m => !_.isEqual(s, m)));
|
||||
if(map.rectangles) symbols.forEach(s => map.rectangles = map.rectangles.filter(r => !_.isEqual(s, r)));
|
||||
this.save();
|
||||
}
|
||||
|
||||
load(mapCode: string) {
|
||||
return this.collection.doc(mapCode).snapshotChanges().pipe(map((snap: any) => {
|
||||
return Object.assign({}, snap.data, {delete: snap.ref.delete, set: snap.ref.set, update: snap.ref.update});
|
||||
}))
|
||||
if(this.mapSub) {
|
||||
this.mapSub.unsubscribe();
|
||||
this.mapSub = null;
|
||||
}
|
||||
this.code = mapCode;
|
||||
this.mapSub = this.collection.doc(this.code).valueChanges().subscribe(newMap => this.mapSymbols.next(Object.assign({}, newMap)));
|
||||
}
|
||||
|
||||
save() {
|
||||
if(this.code && this.mapSymbols.value) {
|
||||
this.collection.doc(this.code).set(this.mapSymbols.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,17 +1,18 @@
|
||||
import {Component, OnInit} from "@angular/core";
|
||||
import {Component, isDevMode, OnInit} from "@angular/core";
|
||||
import {PhysicsService} from "../../services/physics.service";
|
||||
import {filter, skip, take} from "rxjs/operators";
|
||||
import {filter, finalize, skip, take} from "rxjs/operators";
|
||||
import {MatBottomSheet, MatSnackBar} from "@angular/material";
|
||||
import {CalibrateComponent} from "../../components/calibrate/calibrate.component";
|
||||
import {ToolbarItem} from "../../models/toolbarItem";
|
||||
import {flyInRight, flyOutRight} from "../../animations";
|
||||
import {ARROW, MapLayers, MapService, MEASURE, WeatherLayers} from "../../services/map.service";
|
||||
import {MapLayers, MapService, WeatherLayers} from "../../services/map.service";
|
||||
import {Subscription} from "rxjs";
|
||||
import {MatBottomSheetRef} from "@angular/material/bottom-sheet";
|
||||
import {copyToClipboard} from "../../utils";
|
||||
import {ActivatedRoute} from "@angular/router";
|
||||
import {DimensionsDialogComponent} from "../../components/dimensionsDialog/dimensionsDialog.component";
|
||||
import {MatDialog} from "@angular/material/dialog";
|
||||
import {SyncService} from "../../services/sync.service";
|
||||
import {MapData, Marker} from "../../models/mapSymbol";
|
||||
|
||||
declare const L;
|
||||
|
||||
@ -22,7 +23,6 @@ declare const L;
|
||||
animations: [flyInRight, flyOutRight]
|
||||
})
|
||||
export class MapComponent implements OnInit {
|
||||
calibration: MatBottomSheetRef;
|
||||
code: string;
|
||||
drawColor = '#ff4141';
|
||||
isNaN = isNaN;
|
||||
@ -31,17 +31,78 @@ export class MapComponent implements OnInit {
|
||||
positionMarker = {arrow: null, circle: null};
|
||||
shareDialog = false;
|
||||
showPalette = false;
|
||||
lastMeasuringPoint;
|
||||
measuringSubscription: Subscription;
|
||||
sub: Subscription;
|
||||
|
||||
startCalibrating = () => {
|
||||
let calibration = this.bottomSheet.open(CalibrateComponent, {hasBackdrop: false, disableClose: true});
|
||||
this.sub = calibration.afterDismissed().pipe(finalize(() => calibration.dismiss())).subscribe();
|
||||
};
|
||||
|
||||
startCircle = menuItem => {
|
||||
this.sub = this.map.click.pipe(skip(1), take(1)).subscribe(async e => {
|
||||
let dimensions = await this.dialog.open(DimensionsDialogComponent, {data: ['Radius (m)'], disableClose: true, panelClass: 'pb-0'}).afterClosed().toPromise();
|
||||
menuItem.enabled = false;
|
||||
let circle = {latlng: e.latlng, radius: dimensions[0] || 500, color: '#ff4141'};
|
||||
this.syncService.addCircle(circle);
|
||||
});
|
||||
};
|
||||
|
||||
startDelete = () => {
|
||||
this.sub = this.map.click.pipe(skip(1), filter(e => !!e.symbol)).subscribe(e => {
|
||||
if(!!e.symbol && e.symbol.noDelete) return;
|
||||
this.syncService.delete(e.symbol)
|
||||
});
|
||||
};
|
||||
|
||||
startMarker = menuItem => {
|
||||
this.sub = this.map.click.pipe(skip(1), take(1)).subscribe(e => {
|
||||
menuItem.enabled = false;
|
||||
let marker: Marker = {latlng: e.latlng, color: '#ff4141'};
|
||||
this.syncService.addMarker(marker);
|
||||
});
|
||||
};
|
||||
|
||||
startMeasuring = menuItem => {
|
||||
let lastPoint;
|
||||
this.sub = this.map.click.pipe(skip(1), take(2), finalize(() => this.map.delete(lastPoint))).subscribe(e => {
|
||||
if(lastPoint) {
|
||||
menuItem.enabled = false;
|
||||
let measurement = {latlng: {lat: lastPoint.getLatLng().lat, lng: lastPoint.getLatLng().lng}, latlng2: e.latlng, color: '#ff4141', weight: 8};
|
||||
this.syncService.addMeasurement(measurement);
|
||||
return this.map.delete(lastPoint);
|
||||
}
|
||||
lastPoint = this.map.newMarker({latlng: e.latlng, color: '#ff4141'});
|
||||
})
|
||||
};
|
||||
|
||||
startRectangle = menuItem => {
|
||||
let lastPoint;
|
||||
this.sub = this.map.click.pipe(skip(1), take(2), finalize(() => this.map.delete(lastPoint))).subscribe(e => {
|
||||
if(lastPoint) {
|
||||
menuItem.enabled = false;
|
||||
let rect = {latlng: {lat: lastPoint.getLatLng().lat, lng: lastPoint.getLatLng().lng}, latlng2: e.latlng, color: '#ff4141'};
|
||||
this.syncService.addRectangle(rect);
|
||||
return this.map.delete(lastPoint);
|
||||
}
|
||||
lastPoint = this.map.newMarker({latlng: e.latlng, color: '#ff4141'});
|
||||
})
|
||||
};
|
||||
|
||||
unsub = () => {
|
||||
if(this.sub) {
|
||||
this.sub.unsubscribe();
|
||||
this.sub = null;
|
||||
}
|
||||
};
|
||||
|
||||
menu: ToolbarItem[] = [
|
||||
{name: 'Marker', icon: 'room', toggle: true, click: () => this.addMarker()},
|
||||
{name: 'Marker', icon: 'room', toggle: true, onEnabled: this.startMarker, onDisabled: this.unsub},
|
||||
{name: 'Draw', icon: 'create', toggle: true, onEnabled: () => this.startDrawing(), onDisabled: () => this.stopDrawing()},
|
||||
{name: 'Circle', icon: 'panorama_fish_eye', toggle: true, click: () => this.addCircle()},
|
||||
{name: 'Square', icon: 'crop_square', toggle: true, click: () => this.addRectangle()},
|
||||
{name: 'Circle', icon: 'panorama_fish_eye', toggle: true, onEnabled: this.startCircle, onDisabled: this.unsub},
|
||||
{name: 'Square', icon: 'crop_square', toggle: true, onEnabled: this.startRectangle, onDisabled: this.unsub},
|
||||
{name: 'Polygon', icon: 'details', toggle: true},
|
||||
{name: 'Measure', icon: 'straighten', toggle: true, onEnabled: () => this.startMeasuring(), onDisabled: () => this.stopMeasuring()},
|
||||
{name: 'Delete', icon: 'delete', toggle: true},
|
||||
{name: 'Measure', icon: 'straighten', toggle: true, onEnabled: this.startMeasuring, onDisabled: () => this.unsub},
|
||||
{name: 'Delete', icon: 'delete', toggle: true, onEnabled: this.startDelete, onDisabled: this.unsub},
|
||||
{name: 'Map Style', icon: 'terrain', subMenu: [
|
||||
{name: 'ESRI:Topographic', toggle: true, click: () => this.map.setMapLayer(MapLayers.ESRI_TOPOGRAPHIC)},
|
||||
{name: 'ESRI:Satellite', toggle: true, click: () => this.map.setMapLayer(MapLayers.ESRI_IMAGERY)},
|
||||
@ -54,33 +115,40 @@ export class MapComponent implements OnInit {
|
||||
{name: 'Sea Level Pressure', toggle: true, click: () => this.map.setWeatherLayer(WeatherLayers.SEA_LEVEL_PRESSURE)},
|
||||
{name: 'Clouds', toggle: true, click: () => this.map.setWeatherLayer(WeatherLayers.CLOUDS_NEW)},
|
||||
]},
|
||||
{name: 'Calibrate', icon: 'explore', toggle: true, onEnabled: () => this.startCalibrating(), onDisabled: () => this.stopCalibrating()},
|
||||
{name: 'Calibrate', icon: 'explore', toggle: true, onEnabled: this.startCalibrating, onDisabled: this.unsub},
|
||||
{name: 'Share', icon: 'share', toggle: true, onEnabled: () => this.share(), onDisabled: () => this.shareDialog = false},
|
||||
{name: 'Messages', icon: 'chat', hidden: true},
|
||||
{name: 'Identity', icon: 'perm_identity', hidden: true},
|
||||
{name: 'Settings', icon: 'settings', hidden: true}
|
||||
{name: 'Settings', icon: 'settings', hidden: true},
|
||||
{name: 'delete all', icon: 'cancel', click: () => this.map.deleteAll(), hidden: !isDevMode()}
|
||||
];
|
||||
|
||||
constructor(public physicsService: PhysicsService, private snackBar: MatSnackBar, private bottomSheet: MatBottomSheet, private dialog: MatDialog, private route: ActivatedRoute) {
|
||||
constructor(public physicsService: PhysicsService, private syncService: SyncService, private snackBar: MatSnackBar, private bottomSheet: MatBottomSheet, private dialog: MatDialog, private route: ActivatedRoute) {
|
||||
this.route.params.subscribe(params => {
|
||||
this.code = params['code'];
|
||||
this.syncService.load(this.code);
|
||||
|
||||
// Handle drawing the map after updates
|
||||
this.syncService.mapSymbols.pipe(filter(s => !!s)).subscribe((map: MapData) => {
|
||||
this.map.deleteAll();
|
||||
if(map.circles) map.circles.forEach(c => this.map.newCircle(c));
|
||||
if(map.markers) map.markers.forEach(m => this.map.newMarker(m));
|
||||
if(map.measurements) map.measurements.forEach(m => this.map.newMeasurement(m));
|
||||
if(map.rectangles) map.rectangles.forEach(r => this.map.newRectangle(r));
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.map = new MapService('map');
|
||||
|
||||
// Handle click actions
|
||||
this.map.click.pipe(filter(e => !!e && e.symbol)).subscribe(e => {
|
||||
let symbol = e.symbol.symbol;
|
||||
if(this.menu[6].enabled) {
|
||||
if(!!symbol && symbol.noDelete) return;
|
||||
return this.map.delete(e.symbol);
|
||||
} else if(e.symbol instanceof L.Marker) {
|
||||
if(symbol.noSelect) return;
|
||||
// Handle opening symbols
|
||||
this.map.click.pipe(filter(e => !!e && e.item)).subscribe(e => {
|
||||
if(e.item instanceof L.Marker) {
|
||||
if(e.symbol.noSelect) return;
|
||||
/*this.bottomSheet.open(MarkerComponent, {data: e.symbol, hasBackdrop: false, disableClose: true});*/
|
||||
} else if(e.symbol instanceof L.Circle) {
|
||||
if(symbol.noSelect) return;
|
||||
} else if(e.item instanceof L.Circle) {
|
||||
if(e.symbol.noSelect) return;
|
||||
/*this.bottomSheet.open(CircleComponent, {data: e.symbol, hasBackdrop: false, disableClose: true}).afterDismissed().subscribe(c => {
|
||||
let circle = c['_symbol'];
|
||||
this.map.delete(c);
|
||||
@ -89,52 +157,23 @@ export class MapComponent implements OnInit {
|
||||
}
|
||||
});
|
||||
|
||||
// Display location
|
||||
this.physicsService.info.pipe(filter(coord => !!coord)).subscribe(pos => {
|
||||
if(!this.position) this.center({lat: pos.latitude, lng: pos.longitude});
|
||||
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({latlng: {lat: pos.latitude, lng: pos.longitude}, noSelect: true, noDelete: true, icon: ARROW, rotationAngle: pos.heading, rotationOrigin: 'center'});
|
||||
this.positionMarker.circle = this.map.newCircle({latlng: {lat: pos.latitude, lng: pos.longitude}, color: '#2873d8', radius: pos.accuracy, interactive: false});
|
||||
this.positionMarker.arrow = this.map.newMarker({latlng: {lat: pos.latitude, lng: pos.longitude}, noSelect: true, noDelete: true, icon: 'arrow', rotationAngle: pos.heading, rotationOrigin: 'center'});
|
||||
this.positionMarker.circle = this.map.newCircle({latlng: {lat: pos.latitude, lng: pos.longitude}, color: '#2873d8', noSelect: true, noDelete: true, radius: pos.accuracy, interactive: false});
|
||||
this.position = pos;
|
||||
});
|
||||
|
||||
// Calibration popup
|
||||
this.physicsService.requireCalibration.subscribe(() => {
|
||||
this.snackBar.open('Compass requires calibration', 'calibrate', {
|
||||
duration: 5000,
|
||||
panelClass: 'bg-warning,text-white'
|
||||
}).onAction().subscribe(() => this.startCalibrating());
|
||||
this.snackBar.open('Compass requires calibration', 'calibrate', {duration: 5000, panelClass: 'bg-warning,text-white'})
|
||||
.onAction().subscribe(() => this.startCalibrating());
|
||||
});
|
||||
}
|
||||
|
||||
addCircle() {
|
||||
this.map.click.pipe(skip(1), take(1), filter(() => this.menu[2].enabled)).subscribe(async e => {
|
||||
let dimensions = await this.dialog.open(DimensionsDialogComponent, {data: ['Radius (m)'], disableClose: true, panelClass: 'pb-0'}).afterClosed().toPromise();
|
||||
this.menu[2].enabled = false;
|
||||
this.map.newCircle({latlng: e.event.latlng, radius: dimensions[0]});
|
||||
});
|
||||
}
|
||||
|
||||
addMarker() {
|
||||
this.map.click.pipe(skip(1), take(1), filter(() => this.menu[0].enabled)).subscribe(e => {
|
||||
this.menu[0].enabled = false;
|
||||
this.map.newMarker({latlng: e.event.latlng});
|
||||
});
|
||||
}
|
||||
|
||||
addRectangle() {
|
||||
let lastPoint;
|
||||
this.map.click.pipe(skip(1), take(2)).subscribe(e => {
|
||||
if(lastPoint) {
|
||||
this.menu[3].enabled = false;
|
||||
console.log({latlng: lastPoint.getLatLng(), latlng2: e.event.latlng});
|
||||
this.map.newRectangle({latlng: lastPoint.getLatLng(), latlng2: e.event.latlng});
|
||||
this.map.delete(lastPoint);
|
||||
return;
|
||||
}
|
||||
lastPoint = this.map.newMarker({latlng: e.event.latlng});
|
||||
})
|
||||
}
|
||||
|
||||
center(pos?) {
|
||||
if(!pos) pos = {lat: this.position.latitude, lng: this.position.longitude};
|
||||
this.map.centerOn(pos);
|
||||
@ -156,50 +195,13 @@ export class MapComponent implements OnInit {
|
||||
}
|
||||
}
|
||||
|
||||
startCalibrating() {
|
||||
this.menu[9].enabled = true;
|
||||
this.calibration = this.bottomSheet.open(CalibrateComponent, {
|
||||
hasBackdrop: false,
|
||||
disableClose: true
|
||||
});
|
||||
this.calibration.afterDismissed().subscribe(() => {
|
||||
this.menu[9].enabled = false;
|
||||
this.calibration = null;
|
||||
});
|
||||
}
|
||||
|
||||
startDrawing() {
|
||||
this.showPalette = true;
|
||||
this.map.startDrawing();
|
||||
}
|
||||
|
||||
startMeasuring() {
|
||||
this.measuringSubscription = this.map.click.pipe(skip(1)).subscribe(e => {
|
||||
if(this.lastMeasuringPoint) {
|
||||
this.map.newMeasurement({latlng: this.lastMeasuringPoint.getLatLng(), latlng2: e.event.latlng});
|
||||
this.map.delete(this.lastMeasuringPoint);
|
||||
}
|
||||
this.lastMeasuringPoint = this.map.newMarker({latlng: e.event.latlng, icon: MEASURE});
|
||||
})
|
||||
}
|
||||
|
||||
stopCalibrating() {
|
||||
if(this.calibration) this.calibration.dismiss();
|
||||
}
|
||||
|
||||
stopDrawing() {
|
||||
this.showPalette = false;
|
||||
this.map.stopDrawing()
|
||||
}
|
||||
|
||||
stopMeasuring() {
|
||||
if(this.measuringSubscription) {
|
||||
this.measuringSubscription.unsubscribe();
|
||||
this.measuringSubscription = null;
|
||||
}
|
||||
if(this.lastMeasuringPoint) {
|
||||
this.map.delete(this.lastMeasuringPoint);
|
||||
this.lastMeasuringPoint = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user