Added locations

src/app/adjectives.ts

@@ -0,0 +1,19 @@
+export const Adjectives = [
+    'strict',
+    'poor',
+    'old',
+    'hot',
+    'huge',
+    'scared',
+    'large',
+    'tall',
+    'antique',
+    'complete',
+    'offbeat',
+    'selective',
+    'unknown',
+    'unwilling',
+    'lively',
+    'nebulous',
+    'deranged'
+];

src/app/models/mapSymbol.ts

@@ -5,7 +5,7 @@ export interface LatLng {
 
 export interface MapData {
     circles?: Circle[];
-    locations?: {latlng: LatLng, name: string}[];
+    locations?: Marker[];
     markers?: Marker[];
     measurements?: Measurement[];
     polygons?: Polygon[];

src/app/nounes.ts

@@ -0,0 +1,52 @@
+export const Nouns = [
+    'area',
+    'book',
+    'business',
+    'case',
+    'child',
+    'company',
+    'country',
+    'day',
+    'eye',
+    'fact',
+    'family',
+    'government',
+    'group',
+    'hand',
+    'home',
+    'job',
+    'life',
+    'lot',
+    'man',
+    'money',
+    'month',
+    'mother',
+    'Mr',
+    'night',
+    'number',
+    'part',
+    'people',
+    'place',
+    'point',
+    'problem',
+    'program',
+    'question',
+    'right',
+    'room',
+    'school',
+    'state',
+    'story',
+    'student',
+    'study',
+    'system',
+    'thing',
+    'time',
+    'water',
+    'way',
+    'week',
+    'woman',
+    'word',
+    'work',
+    'world',
+    'year',
+];

src/app/services/sync.service.ts

@@ -12,9 +12,10 @@ export class SyncService {
     private changed = false;
     private collection: AngularFirestoreCollection;
     private mapSub: Subscription;
+    private name: string;
     private saveRate = 5_000;
 
-    mapSymbols = new BehaviorSubject<MapData>(null);
+    mapSymbols = new BehaviorSubject<MapData>({});
 
     constructor(private db: AngularFirestore) {
         this.collection = this.db.collection('Maps');
@@ -48,6 +49,18 @@ export class SyncService {
         this.changed = true;
     }
 
+    addMyLocation(location: Marker) {
+        let map = this.mapSymbols.value;
+        if(!map.locations) map.locations = [];
+        let markForSave = this.name == null;
+        this.name = location.label;
+        map.locations = map.locations.filter(l => l.label != location.label);
+        map.locations.push(location);
+        this.mapSymbols.next(map);
+        this.changed = true;
+        if(markForSave) this.save();
+    }
+
     addPolygon(polygon: Polygon) {
         let map = this.mapSymbols.value;
         if(!map.polygons) map.polygons = [];
@@ -75,6 +88,7 @@ export class SyncService {
     delete(...symbols) {
         let map = this.mapSymbols.value;
         if(map.circles) symbols.forEach(s => map.circles = map.circles.filter(c => !_.isEqual(s, c)));
+        if(map.locations) symbols.forEach(s => map.locations = map.locations.filter(m => !_.isEqual(s, m)));
         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.polygons) symbols.forEach(s => map.polygons = map.polygons.filter(p => !_.isEqual(s , p)));
@@ -98,6 +112,14 @@ export class SyncService {
         setInterval(() => this.save(), this.saveRate);
     }
 
+    removeMyLocation() {
+        let map = this.mapSymbols.value;
+        if(map.locations) map.locations = map.locations.filter(l => l.label != this.name);
+        this.name = null;
+        this.changed = true;
+        this.save();
+    }
+
     save() {
         if(this.code && this.mapSymbols.value && this.changed) {
             this.collection.doc(this.code).set(this.mapSymbols.value);

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

@@ -1,4 +1,4 @@
-import {Component, isDevMode, OnInit} from "@angular/core";
+import {Component, HostListener, isDevMode, OnDestroy, OnInit} from "@angular/core";
 import {PhysicsService} from "../../services/physics.service";
 import {filter, finalize, flatMap, skip, take} from "rxjs/operators";
 import {MatBottomSheet, MatSnackBar} from "@angular/material";
@@ -13,6 +13,8 @@ import {DimensionsDialogComponent} from "../../components/dimensionsDialog/dimen
 import {MatDialog} from "@angular/material/dialog";
 import {SyncService} from "../../services/sync.service";
 import {MapData, Marker} from "../../models/mapSymbol";
+import {Adjectives} from "../../adjectives";
+import {Nouns} from "../../nounes";
 
 declare const L;
 
@@ -22,11 +24,12 @@ declare const L;
     styleUrls: ['map.component.scss'],
     animations: [flyInRight, flyOutRight]
 })
-export class MapComponent implements OnInit {
+export class MapComponent implements OnDestroy, OnInit {
     code: string;
     drawColor = '#ff4141';
     isNaN = isNaN;
     map: MapService;
+    name: string;
     polygon: any;
     position;
     positionMarker = {arrow: null, circle: null};
@@ -198,13 +201,20 @@ export class MapComponent implements OnInit {
         })
     }
 
+    @HostListener('window:beforeunload', ['$event'])
+    ngOnDestroy(): void {
+        this.syncService.removeMyLocation();
+    }
+
     ngOnInit() {
+        this.name = Adjectives[Math.round(Math.random() * Adjectives.length)] + ' ' + Nouns[Math.round(Math.random() * Nouns.length)];
         this.map = new MapService('map');
 
         // 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.locations) map.locations.filter(l => l.label != this.name).forEach(l => this.map.newMarker(l));
             if (map.markers) map.markers.forEach(m => this.map.newMarker(m));
             if (map.measurements) map.measurements.forEach(m => this.map.newMeasurement(m));
             if (map.polygons) map.polygons.forEach(p => this.map.newPolygon(p));
@@ -227,11 +237,14 @@ 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.syncService.addMyLocation({latlng: {lat: pos.latitude, lng: pos.longitude}, label: this.name});
             this.positionMarker.arrow = this.map.newMarker({
                 latlng: {lat: pos.latitude, lng: pos.longitude},
                 noSelect: true,