Everything but user location & drawings are saving

package.json

@@ -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",

src/app/components/toolbar/toolbar.component.ts

@@ -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);
                 });
             }
 

src/app/models/mapSymbol.ts

@@ -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[];

src/app/services/map.service.ts

@@ -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]});
+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]});
+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 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;
+        let circle = L.circle(c.latlng, Object.assign({}, c)).addTo(this.map);
-        if(!c.color) c.color = '#ff4141';
+        if(c.label) circle.bindTooltip(c.label, {permanent: true, direction: 'center'});
-        let circle = L.circle(c.latlng, c).addTo(this.map);
+        circle.on('click', e => this.click.next({latlng: {lat: e.latlng.lat, lng: e.latlng.lng}, symbol: c, item: circle}));
-        circle.symbol = c;
+        if(!c.noDelete) this.circles.push(circle);
-        circle.on('click', e => this.click.next({event: e, symbol: circle}));
         return circle;
     }
 
     newMarker(m: Marker) {
-        if(!m.icon) m.icon = MARKER;
+        let marker = L.marker(m.latlng, Object.assign({}, m, {icon: m.icon ? this.getIcon(m.icon) : MARKER})).addTo(this.map);
-        let marker = L.marker(m.latlng, m).addTo(this.map);
         if(m.label) marker.bindTooltip(m.label, {permanent: true, direction: 'bottom'});
-        marker.symbol = m;
+        marker.on('click', e => this.click.next({latlng: {lat: e.latlng.lat, lng: e.latlng.lng}, symbol: m, item: marker}));
-        marker.on('click', e => this.click.next({event: e, symbol: marker}));
+        if(!m.noDelete) this.markers.push(marker);
         return marker;
     }
 
     newMeasurement(m: Measurement) {
-        if(!m.color) m.color = '#ff4141';
+        let line = L.polyline([m.latlng, m.latlng2], Object.assign({}, m));
-        if(!m.weight) m.weight = 8;
-        let line = L.polyline([m.latlng, m.latlng2], 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);
+        let group = new L.LayerGroup([line, decoration]).addTo(this.map);
-        group.symbol = m;
+        if(!m.noDelete) this.measurements.push(group);
-        line.on('click', e => this.click.next({event: e, symbol: 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], Object.assign({}, r)).addTo(this.map);
-        let rect = new L.Rectangle([r.latlng, r.latlng2], r).addTo(this.map);
+        if(r.label) rect.bindTooltip(r.label, {permanent: true, direction: 'center'});
-        rect.symbol = r;
+        rect.on('click', e => this.click.next({latlng: {lat: e.latlng.lat, lng: e.latlng.lng}, symbol: r, item: rect}));
-        rect.on('click', e => this.click.next({event: e, symbol: 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));

src/app/services/physics.service.ts

@@ -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

src/app/services/sync.service.ts

@@ -1,12 +1,18 @@
 import {Injectable} from "@angular/core";
-import {AngularFirestore, AngularFirestoreCollection, DocumentSnapshot} from "@angular/fire/firestore";
+import {AngularFirestore, AngularFirestoreCollection} from "@angular/fire/firestore";
-import {map} from "rxjs/operators";
+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) => {
+        if(this.mapSub) {
-            return Object.assign({}, snap.data, {delete: snap.ref.delete, set: snap.ref.set, update: snap.ref.update});
+            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);
+        }
     }
 }

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

@@ -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;
+    sub: Subscription;
-    measuringSubscription: 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: 'Circle', icon: 'panorama_fish_eye', toggle: true, onEnabled: this.startCircle, onDisabled: this.unsub},
-        {name: 'Square', icon: 'crop_square', toggle: true, click: () => this.addRectangle()},
+        {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: 'Measure', icon: 'straighten', toggle: true, onEnabled: this.startMeasuring, onDisabled: () => this.unsub},
-        {name: 'Delete', icon: 'delete', toggle: true},
+        {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
+        // Handle opening symbols
-        this.map.click.pipe(filter(e => !!e && e.symbol)).subscribe(e => {
+        this.map.click.pipe(filter(e => !!e && e.item)).subscribe(e => {
-            let symbol = e.symbol.symbol;
+            if(e.item instanceof L.Marker) {
-            if(this.menu[6].enabled) {
+                if(e.symbol.noSelect) return;
-                if(!!symbol && symbol.noDelete) return;
-                return this.map.delete(e.symbol);
-            } else if(e.symbol instanceof L.Marker) {
-                if(symbol.noSelect) return;
                 /*this.bottomSheet.open(MarkerComponent, {data: e.symbol, hasBackdrop: false, disableClose: true});*/
-            } else if(e.symbol instanceof L.Circle) {
+            } else if(e.item instanceof L.Circle) {
-                if(symbol.noSelect) return;
+                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.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.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', {
+            this.snackBar.open('Compass requires calibration', 'calibrate', {duration: 5000, panelClass: 'bg-warning,text-white'})
-                duration: 5000,
+                .onAction().subscribe(() => this.startCalibrating());
-                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;
-        }
-    }
 }