Updated angular version to latest

.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = tab
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.github/workflows/functions.yaml

@@ -4,6 +4,7 @@ run-name: Build Functions
 on:
     push:
         paths:
+            - 'firebase/**'
             - 'functions/**'
 
 jobs:

.github/workflows/website.yaml

@@ -4,6 +4,7 @@ run-name: Build Website
 on:
     push:
         paths-ignore:
+            - 'firebase/**'
             - 'functions/**'
 
 jobs:
@@ -45,3 +46,12 @@ jobs:
                 uses: ztimson/actions/tag@develop
                 with:
                     tag: ${{env.VERSION}}
+
+    publish:
+        name: Build & Push Dockerfile
+        needs: build
+        uses: ztimson/actions/.github/workflows/docker.yaml@develop
+        with:
+            name: ztimson/map-alliance
+            repository: ${{github.server_url}}/${{github.repository}}.git
+            pass: ${{secrets.DEPLOY_TOKEN}}

Dockerfile

@@ -0,0 +1,22 @@
+FROM node as build
+
+# Variables
+ARG NODE_ENV=prod
+ARG NODE_OPTIONS="--max_old_space_size=4096"
+ENV NG_CLI_ANALYTICS=ci \
+    NODE_ENV=${NODE_ENV} \
+    NODE_OPTIONS=${NODE_OPTIONS}
+
+# Setup
+WORKDIR /app
+COPY . .
+
+# Install & build
+RUN if [ ! -d "dist" ]; then npm ci && npm run build; fi
+
+# Use Nginx to serve
+FROM nginx:1.20-alpine
+COPY --from=build /app/dist/browser /usr/share/nginx/html
+COPY docker/robots.txt /usr/share/nginx/html/robots.txt
+COPY docker/nginx.conf /etc/nginx/nginx.conf
+EXPOSE 80

angular.json

@@ -3,7 +3,7 @@
 	"version": 1,
 	"newProjectRoot": "projects",
 	"projects": {
-    "MapAlliance": {
+		"proj": {
 			"projectType": "application",
 			"schematics": {
 				"@schematics/angular:component": {
@@ -15,17 +15,18 @@
 			"prefix": "app",
 			"architect": {
 				"build": {
-          "builder": "@angular-devkit/build-angular:browser",
+					"builder": "@angular-devkit/build-angular:application",
 					"options": {
-            "outputPath": "dist/MapAlliance",
+						"outputPath": "dist",
 						"index": "src/index.html",
-            "main": "src/main.ts",
+						"browser": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+						"polyfills": ["zone.js"],
 						"tsConfig": "tsconfig.json",
-            "aot": false,
+						"inlineStyleLanguage": "scss",
 						"assets": [
 							"src/assets",
-              "src/manifest.webmanifest"
+							"src/manifest.json"
+
 						],
 						"styles": [
 							"./node_modules/bootstrap-scss/bootstrap.scss",
@@ -46,46 +47,41 @@
 					},
 					"configurations": {
 						"production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "extractCss": true,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
 							"budgets": [
 								{
 									"type": "initial",
-                  "maximumWarning": "2mb",
+									"maximumWarning": "500kb",
-                  "maximumError": "5mb"
+									"maximumError": "2mb"
+								},
+								{
+									"type": "anyComponentStyle",
+									"maximumWarning": "2kb",
+									"maximumError": "4kb"
 								}
 							],
-              "serviceWorker": true,
+							"outputHashing": "all"
-              "ngswConfigPath": "ngsw-config.json"
+						},
-            }
+						"development": {
+							"optimization": false,
+							"extractLicenses": false,
+							"sourceMap": true
 						}
 					},
+					"defaultConfiguration": "production"
+				},
 				"serve": {
 					"builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "MapAlliance:build"
-          },
 					"configurations": {
 						"production": {
-              "browserTarget": "MapAlliance:build:production"
+							"buildTarget": "proj:build:production"
-            }
+						},
-          }
+						"development": {
-        }
+							"buildTarget": "proj:build:development"
-      }
 						}
 					},
-  "defaultProject": "MapAlliance"
+					"defaultConfiguration": "development"
+				}
+			}
+		}
+	}
 }

browserslist

@@ -1,12 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-> 0.5%
-last 2 versions
-Firefox ESR
-not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.

docker/nginx.conf

@@ -0,0 +1,31 @@
+worker_processes  auto;
+pid /var/run/nginx.pid;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+  include       mime.types;
+  default_type  application/octet-stream;
+
+  gzip on;
+  gzip_proxied any;
+  gzip_types text/plain text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript application/json application/x-font-woff;
+  gzip_vary on;
+  gzip_disable "MSIE [1-6]\.(?!.*SV1)";
+
+  sendfile off;
+  keepalive_timeout 65;
+
+  server {
+    listen 80;
+    index index.html;
+    root /usr/share/nginx/html;
+    autoindex off;
+
+    location / {
+      try_files $uri$args $uri$args/ /index.html;
+    }
+  }
+}

docker/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Allow: /

firebase.json

@@ -1,10 +1,10 @@
 {
   "hosting": {
-    "public": "dist/MapAlliance",
+    "public": "dist/browser",
     "ignore": [
+      ".*",
       "firebase.json",
-      "**/.*",
+      "node_modules"
-      "**/node_modules/**"
     ],
     "rewrites": [
       {
@@ -14,12 +14,11 @@
     ]
   },
   "firestore": {
-    "rules": "firestore.rules",
+    "rules": "firebase/firestore.rules",
-    "indexes": "firestore.indexes.json"
+    "indexes": "firebase/firestore.indexes.json"
   },
   "functions": {
     "predeploy": [
-      "npm --prefix \"$RESOURCE_DIR\" run lint",
       "npm --prefix \"$RESOURCE_DIR\" run build"
     ]
   }

package.json

@@ -1,36 +1,31 @@
 {
 	"name": "map-alliance",
-  "version": "1.7.8",
+	"version": "2.0.0",
 	"scripts": {
-    "ng": "ng",
+		"start": "ng serve",
-    "start": "ng serve --host 0.0.0.0",
 		"build": "ng build",
-    "test": "ng test",
+		"watch": "ng build --watch --configuration development",
-    "lint": "ng lint",
-    "e2e": "ng e2e",
 		"deploy": "firebase deploy --only hosting --token \"${FIREBASE_TOKEN}\""
 	},
 	"private": true,
 	"dependencies": {
-    "@angular/animations": "~9.1.11",
+		"@angular/cdk": "^17.0.0",
-    "@angular/cdk": "^9.2.4",
+		"@angular/animations": "^17.0.0",
-    "@angular/common": "~9.1.11",
+		"@angular/common": "^17.0.0",
-    "@angular/compiler": "~9.1.11",
+		"@angular/compiler": "^17.0.0",
-    "@angular/core": "~9.1.11",
+		"@angular/core": "^17.0.0",
-    "@angular/fire": "^5.2.1",
+		"@angular/fire": "^17.0.0",
-    "@angular/forms": "~9.1.11",
+		"@angular/forms": "^17.0.0",
-    "@angular/material": "^9.2.4",
+		"@angular/material": "^17.0.0",
-    "@angular/platform-browser": "~9.1.11",
+		"@angular/platform-browser": "^17.0.0",
-    "@angular/platform-browser-dynamic": "~9.1.11",
+		"@angular/platform-browser-dynamic": "^17.0.0",
-    "@angular/pwa": "^0.800.4",
+		"@angular/pwa": "^17.0.0",
-    "@angular/router": "~9.1.11",
+		"@angular/router": "^17.0.0",
-    "@angular/service-worker": "~9.1.11",
+		"@angular/service-worker": "^17.0.0",
-    "@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",
-    "firebase": "^6.3.0",
+		"firebase": "^10.7.0",
 		"hammerjs": "^2.0.8",
 		"jquery": "^3.4.1",
 		"leaflet": "^1.5.1",
@@ -39,26 +34,19 @@
 		"leaflet-polylinedecorator": "^1.6.0",
 		"leaflet-rotatedmarker": "^0.2.0",
 		"leaflet.gridlayer.googlemutant": "^0.8.0",
-    "lodash": "^4.17.15",
+		"ng-click-outside": "^9.0.0",
-    "momentjs": "^2.0.0",
+		"ngx-color-picker": "^16.0.0",
-    "ng-click-outside": "^5.0.0",
+		"rxjs": "~7.8.0",
-    "ngx-color-picker": "^8.1.0",
+		"tslib": "^2.3.0",
-    "rxjs": "~6.5.5",
+		"zone.js": "~0.14.2"
-    "ts-md5": "^1.2.5",
-    "tslib": "^1.13.0",
-    "web-animations-js": "^2.3.2",
-    "whatwg-fetch": "^3.0.0",
-    "zone.js": "~0.10.3"
 	},
 	"devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.8",
+		"@angular-devkit/build-angular": "^17.0.6",
-    "@angular/cli": "~9.1.8",
+		"@angular/cli": "^17.0.0",
-    "@angular/compiler-cli": "~9.1.11",
+		"@angular/compiler-cli": "^17.0.0",
-    "@angular/language-service": "~9.1.11",
+		"@types/leaflet": "^1.5.1",
-    "@types/node": "~8.9.4",
+		"@types/lodash": "^4.14.138",
-    "firebase-tools": "^7.0.2",
+		"firebase-tools": "^12.0.0",
-    "ts-node": "~7.0.0",
+		"typescript": "~5.2.2"
-    "tslint": "~5.15.0",
-    "typescript": "~3.8.3"
 	}
 }

src/app/app.component.ts

@@ -8,7 +8,14 @@ import {SwUpdate} from "@angular/service-worker";
 })
 export class AppComponent {
     constructor(private snackbar: MatSnackBar, private update: SwUpdate) {
-        update.available.subscribe(() => snackbar.open('Update Available!! 🚀', 'Reload').onAction().subscribe(async () => update.activateUpdate()))
+		// Check for updates
-        update.activated.subscribe(() => window.location.reload());
+		(async () => {
+			if(await update.checkForUpdate())
+				snackbar.open('Update Available!! 🚀', 'Reload')
+					.onAction().subscribe(async () => {
+						await update.activateUpdate();
+						location.reload();
+				})
+		})();
     }
 }

src/app/app.module.ts

@@ -1,27 +1,24 @@
 import {NgModule} from "@angular/core";
-import {AppRouting} from './app.routing';
+import {FormsModule} from "@angular/forms";
-import {AppComponent} from './app.component';
+import {BrowserModule} from "@angular/platform-browser";
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+import {ServiceWorkerModule} from "@angular/service-worker";
+import {ClickOutsideModule} from "ng-click-outside";
+import {ColorPickerModule} from "ngx-color-picker";
 import {environment} from '../environments/environment';
-import {MapComponent} from "./views/map/map.component";
+import {AppRouting} from './app.routing';
-import {HomeComponent} from "./views/home/home.component";
-import {MaterialModule} from "./material.module";
 import {CalibrateComponent} from "./components/calibrate/calibrate.component";
-import {PermissionsComponent} from "./components/permissions/permissions.component";
-import {ToolbarComponent} from "./components/toolbar/toolbar.component";
-import {PaletteComponent} from "./components/palette/palette.component"
 import {ColorPickerDialogComponent} from "./components/colorPickerDialog/colorPickerDialog.component";
 import {DimensionsDialogComponent} from "./components/dimensionsDialog/dimensionsDialog.component";
 import {EditSymbolComponent} from "./components/editSymbol/editSymbol.component";
-import {AngularFireModule} from "@angular/fire";
+import {PaletteComponent} from "./components/palette/palette.component";
-import {AngularFirestoreModule} from "@angular/fire/firestore";
+import {PermissionsComponent} from "./components/permissions/permissions.component";
-import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
-import {BrowserModule} from "@angular/platform-browser";
-import {ClickOutsideModule} from "ng-click-outside";
-import {ColorPickerModule} from "ngx-color-picker";
-import {FormsModule} from "@angular/forms";
-import {ServiceWorkerModule} from "@angular/service-worker";
 import {StarrySkyComponent} from "./components/starrySky/starrySky.component";
-import {AngularFireAuthModule} from "@angular/fire/auth";
+import {ToolbarComponent} from "./components/toolbar/toolbar.component";
+import {MaterialModule} from "./material.module";
+import {AppComponent} from './app.component';
+import {HomeComponent} from "./views/home/home.component";
+import {MapComponent} from "./views/map/map.component";
 
 @NgModule({
 	declarations: [
@@ -38,21 +35,15 @@ import {AngularFireAuthModule} from "@angular/fire/auth";
 		ToolbarComponent
 	],
 	imports: [
-        AngularFireModule.initializeApp(environment.firebaseConfig),
-        AngularFirestoreModule.enablePersistence(),
-        AngularFireAuthModule,
 		AppRouting,
 		BrowserAnimationsModule,
 		BrowserModule,
+		FormsModule,
 		ClickOutsideModule,
 		ColorPickerModule,
-        FormsModule,
 		MaterialModule,
 		ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),
 	],
-    providers: [],
-    entryComponents: [CalibrateComponent, ColorPickerDialogComponent, DimensionsDialogComponent, EditSymbolComponent, PermissionsComponent],
 	bootstrap: [AppComponent]
 })
-export class AppModule {
+export class AppModule { }
-}

src/app/components/calibrate/calibrate.component.html

@@ -1,4 +1,4 @@
-<div>
+<div class="pt-2">
 	<mat-button-toggle-group class="mb-2" (change)="physicsService.mode = $event.value">
 		<mat-button-toggle value="gps" [checked]="physicsService.mode == 'gps'">GPS</mat-button-toggle>
 		<mat-button-toggle value="orientation" [checked]="physicsService.mode == 'orientation'">Compass</mat-button-toggle>
@@ -20,7 +20,9 @@
 			</div>
 		</div>
 		<div>
-            <mat-slider class="w-100" [max]="180" [min]="-180" [step]="1" [tickInterval]="90" [thumbLabel]="true" [ngModel]="calibration" (input)="calibration = $event.value"></mat-slider>
+			<mat-slider style="width: 96%" [min]="-180" [max]="180" [step]="1" color="accent" showTickMarks discrete>
+				<input [(ngModel)]="calibration" matSliderThumb>
+			</mat-slider>
 		</div>
 	</div>
 	<mat-divider class="mb-1"></mat-divider>

src/app/components/calibrate/calibrate.component.ts

@@ -1,7 +1,7 @@
 import {Component} from "@angular/core";
 import {MatBottomSheetRef} from "@angular/material/bottom-sheet";
 import {PhysicsService} from "../../services/physics.service";
-import {collapse, expand} from "../../animations";
+import {collapse, expand} from "../../utils/animations";
 
 @Component({
 	selector: 'calibrate',
@@ -11,6 +11,7 @@ import {collapse, expand} from "../../animations";
 export class CalibrateComponent {
 	private _calibration = 0;
 	get calibration() { return this._calibration; }
+
 	set calibration(c: number) {
 		this._calibration = c;
 		this.physicsService.calibrate.next(c);
@@ -24,8 +25,12 @@ export class CalibrateComponent {
 		this.bottomSheetRef.dismiss();
 	}
 
+	setCalibration(target: any) {
+		this.calibration = target.value;
+	}
+
 	setN() {
-        let currentHeading = Math.round(this.physicsService.orientation.value.alpha);
+		let currentHeading = Math.round(this.physicsService.orientation.value.alpha ?? 0);
 		if(currentHeading > 0) {
 			this.calibration = currentHeading > 180 ? currentHeading - 360 : currentHeading;
 		} else {

src/app/components/dimensionsDialog/dimensionsDialog.component.html

@@ -1,7 +1,7 @@
 <div>
-    <form id="dimensionsForm" class="d-flex align-items-center" (ngSubmit)="close()">
+    <form id="dimensionsForm" class="d-flex align-items-center pt-4 px-4 pb-0" (ngSubmit)="close()">
         <ng-container *ngFor="let d of dimensions; let i = index">
-            <div class="flex-shrink-0 mx-2" *ngIf="i != 0">X</div>
+            <div class="flex-shrink-0 mb-2 mx-2" *ngIf="i != 0">X</div>
             <div class="flex-shrink-1">
                 <mat-form-field class='w-100' appearance="fill">
                     <mat-label>{{d}}</mat-label>

src/app/components/dimensionsDialog/dimensionsDialog.component.scss

@@ -1,3 +1,3 @@
-::ng-deep .mat-form-field-infix {
+.mat-form-field-infix {
   width: auto !important;
 }

src/app/components/starrySky/starrySky.component.scss

@@ -1,7 +1,7 @@
 @function stars ($n) {
-  $value: '#{random(2000)}px #{random(2000)}px #FFF';
+	$value: '#{random(4000)}px #{random(4000)}px #ffffff';
 	@for $i from 2 through $n {
-    $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF';
+		$value: '#{$value} , #{random(4000)}px #{random(4000)}px #ffffff';
 	}
 	@return unquote($value)
 }
@@ -22,7 +22,7 @@
 	background-color: white;
 	animation: shoot 20s linear infinite;
 	animation-delay: 1s;
-  transform: rotate(-30deg);
+	transform: rotate(-40deg);
 }
 
 .stars {
@@ -32,21 +32,21 @@
 	&.foreground {
 		width: 1px;
 		height: 1px;
-    box-shadow: stars(1000);
+		box-shadow: stars(4000);
 		animation: spin 200s linear infinite;
 	}
 
 	&.midground {
 		width: 2px;
 		height: 2px;
-    box-shadow: stars(750);
+		box-shadow: stars(2000);
 		animation: spin 300s linear infinite;
 	}
 
 	&.background {
 		width: 4px;
 		height: 4px;
-    box-shadow: stars(500);
+		box-shadow: stars(1000);
 		animation: spin 350s linear infinite;
 	}
 }

src/app/components/toolbar/toolbar.component.html

@@ -1,6 +1,6 @@
 <mat-toolbar id="toolbar">
-    <button mat-icon-button routerLink="/">
+    <button mat-icon-button class="p-0" routerLink="/">
-        <img src="/assets/images/logo.png" height="35px" width="auto">
+        <img src="/assets/images/logo.png" style="height: 36px; width: 36px">
     </button>
     <small class="ml-1">{{version}}</small>
     <mat-progress-spinner *ngIf="(status | async) == 'staving'" color="primary" class="text-muted pl-2"></mat-progress-spinner>

src/app/components/toolbar/toolbar.component.scss

@@ -1,3 +1,22 @@
+.mat-toolbar {
+	position: absolute;
+	height: 45px !important;
+	z-index: 5000;
+	color: rgba(255, 255, 255, 0.54);
+	background-color: rgba(0, 0, 0, 0.8);
+
 	.selected {
 		background-color: rgba(70, 70, 70, 0.8);
 	}
+
+	.mat-mdc-icon-button {
+		height: 40px;
+		width: 40px;
+		padding: 8px;
+
+		&:hover {
+			background-color: rgba(90, 90, 90, 0.8) !important;
+		}
+	}
+}
+

src/app/models/map.ts

@@ -1,2 +1 @@
-export interface Map {
+export interface Map { }
-}

src/app/models/user.ts

@@ -1,6 +1,6 @@
-import {User as FirebaseUser} from "firebase"
+import {User as FirebaseUser} from '@angular/fire/auth'
-import {AngularFirestoreDocument} from '@angular/fire/firestore';
+import {DocumentReference} from '@angular/fire/firestore';
 
 export interface User extends FirebaseUser {
-    ref?: AngularFirestoreDocument;
+    ref?: DocumentReference;
 }

src/app/services/auth.service.ts

@@ -1,11 +1,9 @@
-import {Injectable} from "@angular/core";
+import {Injectable} from '@angular/core';
-import {BehaviorSubject, from} from "rxjs";
+import {BehaviorSubject} from 'rxjs';
-import {AngularFirestore} from "@angular/fire/firestore";
+import {Router} from '@angular/router';
-import {AngularFireAuth} from "@angular/fire/auth";
-import {auth} from 'firebase';
-import {Router} from "@angular/router";
-import {flatMap, map, skip} from 'rxjs/operators';
 import {User} from '../models/user';
+import {getAuth, FacebookAuthProvider, GoogleAuthProvider, signInWithPopup} from 'firebase/auth';
+import {collection, getFirestore, doc, getDoc} from 'firebase/firestore';
 
 @Injectable({
 	providedIn: 'root'
@@ -14,33 +12,43 @@ export class AuthService {
 	readonly collection = 'Users';
 
 	authenticated = false;
-    user = new BehaviorSubject<User>(null);
+	user = new BehaviorSubject<User | false>(null);
 
-    constructor(private afAuth: AngularFireAuth, private router: Router, private db: AngularFirestore) {
+	private get auth() { return getAuth(); }
-        this.user.subscribe(user => {
+	private get db() { return getFirestore(); }
-            this.authenticated = user instanceof Object
+
-        });
+	constructor(private router: Router) {
-        this.afAuth.user.pipe(
+		this.user.subscribe(user => this.authenticated = user instanceof Object);
-            flatMap((user: any) => {
+		this.whoAmI();
-                if(!user) return from([false]);
-                let ref = this.db.collection(this.collection).doc(user.uid);
-                return ref.valueChanges().pipe(map(dbUser => Object.assign({ref: ref}, user, dbUser)))
-            })
-        ).subscribe(user => this.user.next(<User>user));
 	}
 
 	async loginWithGoogle() {
-        this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
+		const result = await signInWithPopup(this.auth, new GoogleAuthProvider());
-        return this.user.pipe(skip(1));
+		this.user.next(result.user);
+		return result.user;
 	}
 
 	async loginWithFacebook() {
-        this.afAuth.auth.signInWithPopup(new auth.FacebookAuthProvider());
+		const result = await signInWithPopup(this.auth, new FacebookAuthProvider());
-        return this.user.pipe(skip(1));
+		this.user.next(result.user);
+		return result.user;
 	}
 
 	async logout() {
-        await this.afAuth.auth.signOut();
+		await this.auth.signOut();
+		this.user.next(false);
 		return this.router.navigate(['/']);
 	}
+
+	async whoAmI() {
+		await this.auth.authStateReady();
+		const user = this.auth.currentUser || false;
+		if(!!user) {
+			const ref = doc(collection(this.db, this.collection), user.uid);
+			const data = await getDoc(ref);
+			Object.assign(user, {ref, ...data});
+		}
+		this.user.next(user);
+		return user;
+	}
 }

src/app/services/map.service.ts

@@ -1,5 +1,5 @@
 import {BehaviorSubject} from "rxjs";
-import {latLngDistance} from "../utils";
+import {latLngDistance} from "../utils/misc";
 import {environment} from "../../environments/environment";
 import {Circle, LatLng, MapSymbol, Marker, Measurement, Polygon, Polyline, Rectangle} from "../models/mapSymbol";
 
@@ -39,8 +39,6 @@ function buildMarker(color?: string) {
 	return L.divIcon({className: "my-custom-pin", iconAnchor: [0, 24], labelAnchor: [-6, 0], popupAnchor: [0, -36], html: `<span style="${markerHtmlStyles}" />`});
 }
 
-
-
 const ARROW = L.icon({iconUrl: '/assets/images/arrow.png', iconSize: [40, 45], iconAnchor: [20, 23]});
 const DOT = L.icon({iconUrl: '/assets/images/dot.png', iconSize: [25, 25], iconAnchor: [13, 13]});
 const MARKER = buildMarker();
@@ -48,24 +46,24 @@ const MARKER = buildMarker();
 export class MapService {
 	private readonly map;
 
-    private circles = [];
+	private circles: L.Circle[] = [];
-    private markers = [];
+	private markers: L.Marker[] = [];
-    private measurements = [];
+	private measurements: any[] = [];
-    private mapLayer;
+	private mapLayer!: any;
-    private polygons = [];
+	private polygons: L.Polygon[] = [];
-    private polylines = [];
+	private polylines: L.Polyline[] = [];
-    private rectangles = [];
+	private rectangles: L.Rectangle[] = [];
-    private weatherLayer;
+	private weatherLayer?: any;
 
-    click = new BehaviorSubject<{latlng: LatLng, symbol?: MapSymbol, item?: any}>(null);
+	click = new BehaviorSubject<{latlng: LatLng, symbol?: MapSymbol, item?: any} | null>(null);
-    touch = new BehaviorSubject<{type: string, latlng: LatLng}>(null);
+	touch = new BehaviorSubject<{type: string, latlng: LatLng} | null>(null);
 
 	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 = L.map(this.elementId, {attributionControl: false, editable: true, tap: true, zoomControl: false, maxBoundsViscosity: 1, doubleClickZoom: false}).setView({lat: 0, lng: 0}, 2);
 		this.map.on('click', (e) => this.click.next({latlng: {lat: e.latlng.lat, lng: e.latlng.lng}}));
-        this.map.on('touchstart', (e) => this.touch.next({type: 'start', latlng: {lat: e.latlng.lat, lng: e.latlng.lng}}));
+		this.map.on('mousedown touchstart', (e) => this.touch.next({type: 'start', latlng: {lat: e.latlng.lat, lng: e.latlng.lng}}));
-        this.map.on('touchmove', (e) => this.touch.next({type: 'move', latlng: {lat: e.latlng.lat, lng: e.latlng.lng}}));
+		this.map.on('mousemove touchmove', (e) => this.touch.next({type: 'move', latlng: {lat: e.latlng.lat, lng: e.latlng.lng}}));
-        this.map.on('touchend', (e) => this.touch.next({type: 'end', latlng: {lat: e.latlng.lat, lng: e.latlng.lng}}));
+		this.map.on('mouseup touchend', (e) => this.touch.next({type: 'end', latlng: {lat: e.latlng.lat, lng: e.latlng.lng}}));
 		this.setMapLayer();
 	}
 
@@ -120,7 +118,7 @@ export class MapService {
 	}
 
 	newCircle(c: Circle) {
-        let circle = L.circle(c.latlng, Object.assign({color: '#e9403d', autoPan: false}, c)).addTo(this.map);
+		const circle = L.circle(c.latlng, Object.assign({color: '#e9403d', autoPan: false}, 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);

src/app/services/physics.service.ts

@@ -1,12 +1,13 @@
 import {EventEmitter, Injectable} from '@angular/core';
 import {BehaviorSubject, combineLatest} from "rxjs";
 import {PermissionsService} from "../components/permissions/permissions.service";
+import {Position} from '../models/mapSymbol';
 
 @Injectable({
 	providedIn: 'root'
 })
 export class PhysicsService {
-    private _mode: string;
+	private _mode!: string;
 	get mode() { return this._mode; }
 	set mode(mode: string) {
 		this._mode = mode;
@@ -17,10 +18,10 @@ export class PhysicsService {
 	requireCalibration = new EventEmitter();
 	calibrate = new BehaviorSubject<number>(Infinity);
 
-    info = new BehaviorSubject(null);
+	info = new BehaviorSubject<any>(null);
-    motion = new BehaviorSubject<DeviceMotionEvent>(null);
+	motion = new BehaviorSubject<DeviceMotionEvent | null>(null);
-    orientation = new BehaviorSubject<DeviceOrientationEvent>(null);
+	orientation = new BehaviorSubject<DeviceOrientationEvent | null>(null);
-    position = new BehaviorSubject<Position>(null);
+	position = new BehaviorSubject<Position | null>(null);
 
 	constructor(permissionsService: PermissionsService) {
 		this.mode = localStorage.getItem('headingMode');
@@ -29,10 +30,10 @@ export class PhysicsService {
 				// Gather physical data
 				window.addEventListener('devicemotion', motion => this.motion.next(motion));
 				window.addEventListener('deviceorientation', orientation => this.orientation.next(orientation));
-                navigator.geolocation.watchPosition(position => this.position.next(position));
+				navigator.geolocation.watchPosition(position => this.position.next(<any>position));
 
 				// Combine data into one nice package
-                combineLatest(this.position, this.orientation, this.calibrate).subscribe(data => {
+				combineLatest(this.position, this.orientation, this.calibrate).subscribe((data: any) => {
 					if(!data[0]) return;
 
 					let info = {
@@ -52,7 +53,7 @@ export class PhysicsService {
 							this.requireCalibration.emit();
 						}
 
-                        info.heading = -(data[1] ? data[1].alpha : 0) + (data[2] == Infinity ? 0 : data[2]);
+						info.heading = -Number(data[1] ? data[1].alpha : 0) + Number(data[2] == Infinity ? 0 : data[2]);
 						if(info.heading < 0) info.heading += 360;
 						if(info.heading >= 360) info.heading -= 360;
 					}

src/app/services/sync.service.ts

@@ -1,9 +1,9 @@
 import {Injectable} from "@angular/core";
-import {AngularFirestore, AngularFirestoreDocument} from "@angular/fire/firestore";
+import {onSnapshot, setDoc, collection, getFirestore, doc, DocumentReference, getDoc} from 'firebase/firestore';
-import {BehaviorSubject, combineLatest, Subscription} from "rxjs";
+import {BehaviorSubject, Subscription} from "rxjs";
 import {Circle, MapData, MapSymbol, Marker, Measurement, Polygon, Polyline, Position, Rectangle} from "../models/mapSymbol";
-import {Md5} from 'ts-md5';
+import {filter} from "rxjs/operators";
-import {filter, map} from "rxjs/operators";
+import {randomStringBuilder} from '../utils/string';
 
 export const LOCATION_COLLECTION = 'Users';
 export const MAP_COLLECTION = 'Maps';
@@ -12,21 +12,24 @@ export const MAP_COLLECTION = 'Maps';
 	providedIn: 'root'
 })
 export class SyncService {
-    private location;
+	private location?: any;
 	private locationChanged = false;
-    private locationDoc: AngularFirestoreDocument;
+	private locationDoc?: DocumentReference | null;
-    private mapCode: string;
+	private locationSub?: Function;
-    private mapDoc: AngularFirestoreDocument;
+	private mapCode?: string | null;
+	private mapDoc?: DocumentReference | null;
 	private mapChanged = false;
-    private mapSub: Subscription;
+	private mapSub?: Subscription | null;
-    private saveInterval: number;
+	private saveInterval?: any;
-    private username: string;
+	private username?: string | null;
 
 	freeze = new BehaviorSubject<boolean>(false);
 	mapData = new BehaviorSubject<MapData>({});
-    status = new BehaviorSubject<string>(null);
+	status = new BehaviorSubject<string | null>(null);
 
-    constructor(private db: AngularFirestore) {
+	get db() { return getFirestore(); }
+
+	constructor() {
 		// Handle prompting the user before exit if there are changes
 		this.status.pipe(filter(s => !s)).subscribe(() => window.onbeforeunload = () => this.unload());
 		this.status.pipe(filter(s => !!s)).subscribe(() => {
@@ -43,7 +46,7 @@ export class SyncService {
 		let map = this.mapData.value;
 		if(!map[key]) map[key] = {};
 		s.updated = new Date().getTime();
-        if(!s.id) s.id = Md5.hashStr(s.updated.toString()).toString();
+		if(!s.id) s.id = randomStringBuilder(32, true, true);
 		map[key][s.id] = s;
 		this.mapData.next(map);
 		this.mapChanged = true;
@@ -51,7 +54,8 @@ export class SyncService {
 	}
 
 	async exists(mapCode: string) {
-        return (await this.db.collection(MAP_COLLECTION).doc(mapCode).ref.get()).exists;
+		const value = await getDoc(doc(collection(this.db, MAP_COLLECTION), mapCode));
+		return value.exists();
 	}
 
 	addCircle(circle: Circle) {
@@ -66,12 +70,13 @@ export class SyncService {
 		this.addMapSymbol(measurement, 'measurements');
 	}
 
-    addMyLocation(location: Position) {
+	async addMyLocation(location: Position) {
 		location.timestamp = new Date();
 		let markForSave = this.location == null;
 		this.locationChanged = true;
 		this.location = location;
-        if(markForSave) return this.save(false, true);
+		if(markForSave)
+			await this.save(false, true);
 	}
 
 	addPolygon(polygon: Polygon) {
@@ -100,33 +105,27 @@ export class SyncService {
 	load(mapCode: string, username: string) {
 		this.mapCode = mapCode;
 		this.username = username.replace(/\s/g, '');
-        this.mapDoc = this.db.collection(MAP_COLLECTION).doc(mapCode);
+		this.mapDoc = doc(collection(this.db, MAP_COLLECTION), mapCode);
-        this.locationDoc = this.mapDoc.collection(LOCATION_COLLECTION).doc(username);
+		this.locationDoc = doc(collection(this.db, LOCATION_COLLECTION), username);
 
-        this.mapDoc.valueChanges().subscribe(() => this.status.next(null));
+		onSnapshot(this.mapDoc, map => {
-        this.mapSub = combineLatest(this.mapDoc.valueChanges(), this.mapDoc.collection(LOCATION_COLLECTION, ref => {
+			this.status.next(null);
-            let aMinuteAgo = new Date();
+			const data = this.mergeMaps( map.data() || {}, this.mapData.value);
-            aMinuteAgo.setMinutes(aMinuteAgo.getMinutes() - 1);
+			if(this.locationSub) this.locationSub();
-            return ref.where('timestamp', '>=', aMinuteAgo);
+			this.locationSub = onSnapshot(collection(this.mapDoc, LOCATION_COLLECTION), docs => {
-        }).snapshotChanges(), this.freeze)
+				docs.forEach(doc => {
-            .pipe(map(data => {
+					const d: any = doc.data();
-                let oldMap = this.mapData.value;
+					if(d.timestamp.seconds * 1000 > (new Date().getTime() - 60000 * 3))
-                if(data[2]) return;
+						data.locations[doc.id] = <any>{id: doc.id, ...doc.data()}
-                let newMap = data[0] || {};
-                let mergedMap = this.mergeMaps(newMap, oldMap);
-
-                let locations = data[1].map(doc => ({id: doc.payload.doc.id, data: <Marker>doc.payload.doc.data()}));
-                locations.filter(l => l.id != username).forEach(l => {
-                    mergedMap.locations[l.id] = l.data;
 				});
-
+				this.mapData.next(data);
-                return mergedMap;
+			})
-            })).subscribe((mapData: MapData) => {
+			this.mapData.next(data);
-                if(!mapData) return;
-                this.mapData.next(mapData);
 			if(this.saveInterval) clearInterval(this.saveInterval);
-                this.saveInterval = setInterval(() => this.save(), (mapData.locations && Object.keys(mapData.locations).length > 0) ? 5_000 : 30_000);
+			const hasUserLocations = Object.keys(this.mapData.value?.locations)?.length > 0 || false;
+			this.saveInterval = setInterval(() => this.save(), hasUserLocations ? 5_000 : 30_000);
 		});
+
 	}
 
 	mergeMaps(newMap: MapData, oldMap: MapData) {
@@ -154,17 +153,17 @@ export class SyncService {
 	}
 
 	save(map=true, location=true) {
-        let promises = [];
+		let promises: Promise<any>[] = [];
 
 		if(location && this.locationDoc && this.locationChanged) {
-            promises.push(this.locationDoc.set(this.location));
+			promises.push(setDoc(this.locationDoc, this.location));
 		}
 
 		if(map && this.mapDoc && this.mapChanged) {
 			this.status.next('saving');
 			let map = this.mapData.value;
 			delete map.locations;
-            promises.push(this.mapDoc.set(map));
+			promises.push(setDoc(this.mapDoc, map));
 			this.mapChanged = false;
 		}
 

src/app/utils/misc.ts

@@ -1,4 +1,4 @@
-import {LatLng} from "./models/mapSymbol";
+import {LatLng} from "../models/mapSymbol";
 
 export const R = 6_371; // Radius of the Earth
 

src/app/utils/string.ts

@@ -0,0 +1,136 @@
+/**
+ * String of all letters
+ *
+ */
+const LETTER_LIST = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+/**
+ * String of all numbers
+ *
+ */
+const NUMBER_LIST = '0123456789';
+
+/**
+ * String of all symbols
+ */
+const SYMBOL_LIST = '~`!@#$%^&*()_-+={[}]|\\:;"\'<,>.?/';
+
+/**
+ * String of all letters, numbers & symbols
+ */
+const CHAR_LIST = LETTER_LIST + NUMBER_LIST + SYMBOL_LIST;
+
+export function formatPhoneNumber(number: string) {
+	const parts = /(\+?1)?.*?(\d{3}).*?(\d{3}).*?(\d{4})/g.exec(number);
+	if(!parts) throw new Error(`Number cannot be parsed: ${number}`);
+	return `${parts[1] ?? ''} (${parts[2]}) ${parts[3]}-${parts[4]}`.trim();
+}
+
+/**
+ * Insert a string into another string at a given position
+ *
+ * @example
+ * ```
+ * console.log(insertAt('Hello world!', ' glorious', 5);
+ * // Output: Hello glorious world!
+ * ```
+ *
+ * @param {string} target - Parent string you want to modify
+ * @param {string} str - Value that will be injected to parent
+ * @param {number} index - Position to inject string at
+ * @returns {string} - New string
+ */
+export function insertAt(target: string, str: string, index: number): String {
+	return `${target.slice(0, index)}${str}${target.slice(index + 1)}`;
+}
+
+/**
+ * Generate a string of random characters.
+ *
+ * @example
+ * ```ts
+ * const random = randomString();
+ * const randomByte = randomString(8, "01")
+ * ```
+ *
+ * @param {number} length - length of generated string
+ * @param {string} pool - character pool to generate string from
+ * @return {string} generated string
+ */
+export function randomString(length: number, pool: string = CHAR_LIST): string {
+	return Array(length).fill(null).map(() => {
+		const n = ~~(Math.random() * pool.length);
+		return pool[n];
+	}).join('');
+}
+
+/**
+ * Generate a random string with fine control over letters, numbers & symbols
+ *
+ * @example
+ * ```ts
+ * const randomLetter = randomString(1, true);
+ * const randomChar = randomString(1, true, true, true);
+ * ```
+ *
+ * @param {number} length - length of generated string
+ * @param {boolean} letters - Add letters to pool
+ * @param {boolean} numbers - Add numbers to pool
+ * @param {boolean} symbols - Add symbols to pool
+ * @return {string} generated string
+ */
+export function randomStringBuilder(length: number, letters = false, numbers = false, symbols = false): string {
+	if(!letters && !numbers && !symbols) throw new Error('Must enable at least one: letters, numbers, symbols');
+	return Array(length).fill(null).map(() => {
+		let c;
+		do {
+			const type = ~~(Math.random() * 3);
+			if(letters && type == 0) {
+				c = LETTER_LIST[~~(Math.random() * LETTER_LIST.length)];
+			} else if(numbers && type == 1) {
+				c = NUMBER_LIST[~~(Math.random() * NUMBER_LIST.length)];
+			} else if(symbols && type == 2) {
+				c = SYMBOL_LIST[~~(Math.random() * SYMBOL_LIST.length)];
+			}
+		} while(!c);
+		return c;
+	}).join('');
+}
+
+/**
+ * Find all substrings that match a given pattern.
+ *
+ * Roughly based on `String.prototype.matchAll`.
+ *
+ * @param {string} value - String to search.
+ * @param {RegExp | string} regex - Regular expression to match.
+ * @return {RegExpExecArray[]} Found matches.
+ */
+export function matchAll(value: string, regex: RegExp | string): RegExpExecArray[] {
+	if(typeof regex === 'string') {
+		regex = new RegExp(regex, 'g');
+	}
+
+	// https://stackoverflow.com/a/60290199
+	if(!regex.global) {
+		throw new TypeError('Regular expression must be global.');
+	}
+
+	let ret: RegExpExecArray[] = [];
+	let match: RegExpExecArray | null;
+	while((match = regex.exec(value)) !== null) {
+		ret.push(match);
+	}
+
+	return ret;
+}
+
+/**
+ * Check if email is valid
+ *
+ * @param {string} email - Target
+ * @returns {boolean} - Follows format
+ */
+export function validateEmail(email: string) {
+	return /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email);
+}

src/app/views/home/home.component.html

@@ -1,28 +1,28 @@
 <div [@fadeIn] class="h-100 w-100">
     <stary-sky></stary-sky>
-    <div class="badge">
+	<div class="controls d-flex flex-column">
-        <img src="assets/images/logo.png" width="200px" height="auto">
+		<img src="assets/images/logo.png" class="mb-4 py-1" alt="logo" width="200px">
-    </div>
-    <div class="controls">
 		<div *ngIf="!authService.authenticated">
-            <!--<button mat-flat-button class="w-100 text-white mb-3" style="background-color: #3b5998" (click)="authService.loginWithFacebook()">
+			<!--<button mat-flat-button class="w-100 text-white mb-3 py-2" style="background-color: #3b5998" (click)="authService.loginWithFacebook()">
 				<img class="mr-2" src="/assets/images/facebook.png" height="18px" width="auto"> Facebook
 			</button>-->
-            <button mat-flat-button class="w-100 mb-1" style="background-color: #efe8e8" (click)="authService.loginWithGoogle()">
+			<button mat-flat-button class="w-100 mb-1 py-2" style="background-color: #efe8e8" (click)="authService.loginWithGoogle()">
 				<img class="mr-2" src="/assets/images/google.png" height="18px" width="auto"> Google
 			</button>
 		</div>
 		<div *ngIf="authService.authenticated">
-            <button mat-flat-button class="w-100 text-white mb-1" style="background-color: #dd0330" (click)="authService.logout()">
+			<button mat-flat-button class="w-100 text-white mb-1 py-2" style="background-color: #dd0330" (click)="authService.logout()">
 				<mat-icon>logout</mat-icon> Logout
 			</button>
 		</div>
-        <hr style="background-color: #FFFFFF90">
 		<div>
-            <button *ngIf="authService.authenticated" mat-flat-button class="w-100 mb-3" style="background-color: #efe8e8" (click)="new()">
+			<hr style="background-color: #FFFFFF90">
+		</div>
+		<div>
+			<button *ngIf="authService.authenticated" mat-flat-button class="w-100 mb-3 py-2" style="background-color: #efe8e8" (click)="new()">
 				<mat-icon>history</mat-icon> Recent
 			</button>
-            <button mat-flat-button class="w-100 text-white mb-3" style="background-color: #dd0330" (click)="new()">
+			<button mat-flat-button class="w-100 text-white mb-3 py-2" style="background-color: #dd0330" (click)="new()">
 				<mat-icon>add</mat-icon> New Map
 			</button>
 			<div class="w-100">
@@ -36,7 +36,7 @@
 			</div>
 		</div>
 	</div>
-    <span class="credits text-white">
+    <span class="credits text-white p-3">
         Created By <a href="https://zakscode.com" target="_blank">Zak Timson</a>
     </span>
 </div>

src/app/views/home/home.component.scss

@@ -1,23 +1,15 @@
-.badge {
-  position: absolute;
-  top: 15%;
-  left: 50%;
-  z-index: 5000;
-  transform: translateX(-50%);
-}
-
 .controls {
   position: absolute;
-  bottom: 15%;
+  top: 50%;
   left: 50%;
   width: 200px;
   z-index: 5000;
-  transform: translateX(-50%);
+  transform: translate(-50%, -50%);
 }
 
 .credits {
   position: absolute;
-  bottom: 2%;
+  bottom: 0;
-  right: 2%;
+  right: 0;
   z-index: 5000;
 }

src/app/views/home/home.component.ts

@@ -2,7 +2,8 @@ import {Component} from "@angular/core";
 import {Router} from "@angular/router";
 import {SyncService} from "../../services/sync.service";
 import {AuthService} from "../../services/auth.service";
-import {fadeIn} from "../../animations";
+import {fadeIn} from "../../utils/animations";
+import {randomStringBuilder} from '../../utils/string';
 
 const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
 
@@ -21,7 +22,7 @@ export class HomeComponent {
     async new() {
         let mapCode: string;
         do {
-            mapCode = Array(8).fill(0).map(() => chars[Math.floor(Math.random() * chars.length)]).join('');
+            mapCode = randomStringBuilder(8, true, true);
         } while (await this.syncService.exists(mapCode));
         return this.router.navigate(['/', mapCode]);
     }

src/app/views/map/map.component.scss

@@ -30,35 +30,3 @@
 	bottom: 15px;
 	right: 15px;
 }
-
-::ng-deep .mat-menu-panel {
-  background-color: rgba(0, 0, 0, 0.8) !important;
-
-  .mat-menu-item {
-    color: rgba(255, 255, 255, 0.54);
-
-    &:hover {
-      background-color: rgba(90, 90, 90, 0.8) !important;
-    }
-
-    .mat-icon-no-color {
-     color: rgba(255, 255, 255, 0.54)
-    }
-  }
-}
-
-::ng-deep .mat-toolbar {
-  position: absolute;
-  height: 45px !important;
-  z-index: 5000;
-  color: rgba(255, 255, 255, 0.54);
-  background-color: rgba(0, 0, 0, 0.8);
-
-  .selected {
-    background-color: rgba(75, 75, 75, 0.8);
-  }
-
-  .mat-icon-button:hover {
-    background-color: rgba(90, 90, 90, 0.8) !important;
-  }
-}

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

@@ -1,19 +1,20 @@
 import {Component, OnDestroy, OnInit} from "@angular/core";
+import {PermissionsService} from '../../components/permissions/permissions.service';
 import {PhysicsService} from "../../services/physics.service";
 import {filter, finalize, skip, take} from "rxjs/operators";
 import {CalibrateComponent} from "../../components/calibrate/calibrate.component";
 import {ToolbarItem} from "../../models/toolbarItem";
-import {flyInRight, flyOutRight} from "../../animations";
+import {flyInRight, flyOutRight} from "../../utils/animations";
 import {MapLayers, MapService, WeatherLayers} from "../../services/map.service";
 import {Subscription} from "rxjs";
-import {copyToClipboard, relativeLatLng} from "../../utils";
+import {copyToClipboard, relativeLatLng} from "../../utils/misc";
 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";
-import {Adjectives} from "../../adjectives";
+import {Adjectives} from "../../models/adjectives";
-import {Nouns} from "../../nounes";
+import {Nouns} from "../../models/nounes";
 import {EditSymbolComponent} from "../../components/editSymbol/editSymbol.component";
 import {MatSnackBar} from "@angular/material/snack-bar";
 import {MatBottomSheet} from "@angular/material/bottom-sheet";
@@ -34,7 +35,7 @@ export class MapComponent implements OnDestroy, OnInit {
     map: MapService;
     name: string;
     polygon: any;
-    position;
+    position?: {heading: number, altitude: number, speed: number, latitude: number, longitude: number};
     positionMarker = {arrow: null, circle: null};
     shareDialog = false;
     showPalette = false;
@@ -42,7 +43,7 @@ export class MapComponent implements OnDestroy, OnInit {
 
     menu: ToolbarItem[];
 
-    constructor(public physicsService: PhysicsService, public syncService: SyncService, private snackBar: MatSnackBar, private bottomSheet: MatBottomSheet, private dialog: MatDialog, private route: ActivatedRoute) {
+    constructor(public physicsService: PhysicsService, private permissionsService: PermissionsService, public syncService: SyncService, private snackBar: MatSnackBar, private bottomSheet: MatBottomSheet, private dialog: MatDialog, private route: ActivatedRoute) {
         this.name = localStorage.getItem('callSign');
         if(!this.name) {
             this.name = Adjectives[Math.floor(Math.random() * Adjectives.length)] + ' ' + Nouns[Math.floor(Math.random() * Nouns.length)];
@@ -75,7 +76,7 @@ export class MapComponent implements OnDestroy, 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.unsub},
+            {name: 'Calibrate', icon: 'explore', click: this.startCalibrating},
             {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},
@@ -99,7 +100,7 @@ export class MapComponent implements OnDestroy, OnInit {
         this.syncService.mapData.pipe(filter(s => !!s)).subscribe((map: MapData) => {
             this.map.deleteAll();
             if (map.circles) Object.values(map.circles).filter(c => !c.deleted).forEach(c => this.map.newCircle(c));
-            if (map.locations) Object.values(map.locations).forEach(l => this.map.newMarker(Object.assign(l, {icon: 'dot', noDeleteTool: true})));
+			if (map.locations) Object.values(map.locations).forEach(l => this.map.newMarker({...l, icon: 'dot', noDeleteTool: true}));
             if (map.markers) Object.values(map.markers).filter(m => !m.deleted).forEach(m => this.map.newMarker(m));
             if (map.measurements) Object.values(map.measurements).filter(m => !m.deleted).forEach(m => this.map.newMeasurement(m));
             if (map.polygons) Object.values(map.polygons).filter(p => !p.deleted).forEach(p => this.map.newPolygon(p));
@@ -146,7 +147,7 @@ export class MapComponent implements OnDestroy, OnInit {
         });
     }
 
-    center(pos?) {
+    center(pos?: any) {
         if (!pos) pos = {lat: this.position.latitude, lng: this.position.longitude};
         this.map.centerOn(pos);
     }
@@ -177,6 +178,12 @@ export class MapComponent implements OnDestroy, OnInit {
     }
 
     startCalibrating = (menuItem?) => {
+		if(this.calibration) {
+			if(this.sub) this.sub.unsubscribe();
+			this.calibration.dismiss();
+			this.sub = null;
+			this.calibration = null;
+		} else {
 			this.calibration = this.bottomSheet.open(CalibrateComponent, {hasBackdrop: false, disableClose: true});
 			this.sub = this.calibration.afterDismissed().pipe(finalize(() => {
 				menuItem.enabled = false;
@@ -185,6 +192,7 @@ export class MapComponent implements OnDestroy, OnInit {
 				this.calibration = null;
 				this.sub = null;
 			});
+		}
     };
 
     startCircle = menuItem => {

src/environments/environment.prod.ts

@@ -1,6 +1,6 @@
 export const environment = {
   bing: 'Ah3zXeKgjcCebkqxGBZ4zROLJ_NJm7djhArju4--__5Jg9p19VgCtPkLmv-FxS_C',
-  firebaseConfig: {
+  firebase: {
     apiKey: "AIzaSyDFtvCY6nH_HUoTBNf_5b-E8nRweSLYtxE",
     authDomain: "mapalliance-ab38a.firebaseapp.com",
     databaseURL: "https://mapalliance-ab38a.firebaseio.com",

src/environments/environment.ts

@@ -1,10 +1,6 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
   bing: 'Ah3zXeKgjcCebkqxGBZ4zROLJ_NJm7djhArju4--__5Jg9p19VgCtPkLmv-FxS_C',
-  firebaseConfig: {
+  firebase: {
     apiKey: "AIzaSyDFtvCY6nH_HUoTBNf_5b-E8nRweSLYtxE",
     authDomain: "mapalliance-ab38a.firebaseapp.com",
     databaseURL: "https://mapalliance-ab38a.firebaseio.com",
@@ -17,12 +13,3 @@ export const environment = {
   openWeather: 'e8391af54b6fc09dc82b019fc68b8409',
   production: false
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

src/index.html

@@ -4,6 +4,7 @@
 	<title>Map Alliance</title>
 	<base href="/">
 
+	<!-- Generic -->
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, user-scalable=no">
 	<meta name="theme-color" content="#000000">
@@ -24,13 +25,11 @@
 	<meta name="twitter:image" content="/assets/icons/icon-512x512.png">
 
 	<link rel="icon" type="image/x-icon" href="/assets/images/logo.png">
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons" rel="stylesheet">
+	<link rel="manifest" href="manifest.json">
-  <link rel="manifest" href="manifest.webmanifest">
 
 	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFtvCY6nH_HUoTBNf_5b-E8nRweSLYtxE" async defer></script>
 </head>
 <body>
 <app-root></app-root>
-  <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
 </html>

src/main.ts

@@ -1,61 +1,10 @@
-import 'hammerjs';
-import {enableProdMode} from '@angular/core';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
-
+import {initializeApp} from 'firebase/app';
+import 'hammerjs';
 import {AppModule} from './app/app.module';
 import {environment} from './environments/environment';
 
-if (environment.production) {
+initializeApp(environment.firebase);
-    enableProdMode();
-}
 
 platformBrowserDynamic().bootstrapModule(AppModule)
 	.catch(err => console.error(err));
-
-// leaflet ===========================================
-declare const L;
-
-// Touch support
-L.Map.mergeOptions({touchExtend: true});
-L.Map.TouchExtend = L.Handler.extend({
-    initialize: function (map) {
-        this._map = map;
-        this._container = map._container;
-        this._pane = map._panes.overlayPane;
-    },
-    addHooks: function () {
-        L.DomEvent.on(this._container, 'touchstart', this._onTouchStart, this);
-        L.DomEvent.on(this._container, 'touchend', this._onTouchEnd, this);
-        L.DomEvent.on(this._container, 'touchmove', this._onTouchMove, this);
-    },
-    removeHooks: function () {
-        L.DomEvent.off(this._container, 'touchstart', this._onTouchStart);
-        L.DomEvent.off(this._container, 'touchend', this._onTouchEnd);
-        L.DomEvent.off(this._container, 'touchmove', this._onTouchMove);
-    },
-    _eventWrapper: function(e) {
-        let containerPoint = this._map.mouseEventToContainerPoint(e);
-        let layerPoint = this._map.containerPointToLayerPoint(containerPoint);
-        let latlng = this._map.layerPointToLatLng(layerPoint);
-
-        return {
-            latlng: latlng,
-            layerPoint: layerPoint,
-            containerPoint: containerPoint,
-            originalEvent: e
-        }
-    },
-    _onTouchStart: function (e) {
-        if (!this._map._loaded) return;
-        this._map.fire('touchstart', this._eventWrapper(e));
-    },
-    _onTouchEnd: function (e) {
-        if (!this._map._loaded) return;
-        this._map.fire('touchend', this._eventWrapper(e));
-    },
-    _onTouchMove: function(e) {
-        if(!this._map._loaded) return;
-        this._map.fire('touchmove', this._eventWrapper(e));
-    }
-});
-L.Map.addInitHook('addHandler', 'touchExtend', L.Map.TouchExtend);

src/manifest.json

@@ -0,0 +1,51 @@
+{
+	"name": "Map Alliance",
+	"short_name": "Map Alliance",
+	"start_url": "/",
+	"scope": "/",
+	"display": "standalone",
+	"theme_color": "#000000",
+	"background_color": "#000000",
+	"icons": [
+		{
+			"src": "assets/icons/icon-72x72.png",
+			"sizes": "72x72",
+			"type": "image/png"
+		},
+		{
+			"src": "assets/icons/icon-96x96.png",
+			"sizes": "96x96",
+			"type": "image/png"
+		},
+		{
+			"src": "assets/icons/icon-128x128.png",
+			"sizes": "128x128",
+			"type": "image/png"
+		},
+		{
+			"src": "assets/icons/icon-144x144.png",
+			"sizes": "144x144",
+			"type": "image/png"
+		},
+		{
+			"src": "assets/icons/icon-152x152.png",
+			"sizes": "152x152",
+			"type": "image/png"
+		},
+		{
+			"src": "assets/icons/icon-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "assets/icons/icon-384x384.png",
+			"sizes": "384x384",
+			"type": "image/png"
+		},
+		{
+			"src": "assets/icons/icon-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	]
+}

src/manifest.webmanifest

@@ -1,51 +0,0 @@
-{
-  "name": "Map Alliance",
-  "short_name": "Map Alliance",
-  "theme_color": "#000000",
-  "background_color": "#000000",
-  "display": "standalone",
-  "scope": "/",
-  "start_url": "/",
-  "icons": [
-    {
-      "src": "assets/icons/icon-72x72.png",
-      "sizes": "72x72",
-      "type": "image/png"
-    },
-    {
-      "src": "assets/icons/icon-96x96.png",
-      "sizes": "96x96",
-      "type": "image/png"
-    },
-    {
-      "src": "assets/icons/icon-128x128.png",
-      "sizes": "128x128",
-      "type": "image/png"
-    },
-    {
-      "src": "assets/icons/icon-144x144.png",
-      "sizes": "144x144",
-      "type": "image/png"
-    },
-    {
-      "src": "assets/icons/icon-152x152.png",
-      "sizes": "152x152",
-      "type": "image/png"
-    },
-    {
-      "src": "assets/icons/icon-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "assets/icons/icon-384x384.png",
-      "sizes": "384x384",
-      "type": "image/png"
-    },
-    {
-      "src": "assets/icons/icon-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ]
-}

src/polyfills.ts

@@ -1,63 +0,0 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/guide/browser-support
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- * because those flags need to be set before `zone.js` being loaded, and webpack
- * will put import in the top of bundle, so user need to create a separate file
- * in this directory (for example: zone-flags.ts), and put the following flags
- * into that file, and then add the following code before importing zone.js.
- * import './zone-flags.ts';
- *
- * The flags allowed in zone-flags.ts are listed here.
- *
- * The following flags will work for all browsers.
- *
- * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
- *
- *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- *  with the following flag, it will bypass `zone.js` patch for IE/Edge
- *
- *  (window as any).__Zone_enable_cross_context_check = true;
- *
- */
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
-import 'whatwg-fetch'; // Run `npm install --save whatwg-fetch`
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */

src/styles.scss

@@ -1,14 +1,16 @@
-@import '../node_modules/@angular/material/theming';
+@use '@angular/material' as mat;
+@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons");
 
-@include mat-core();
+@include mat.core();
-
+$my-theme: mat.define-light-theme((
-$custom-theme-primary: mat-palette($mat-blue, 600);
+	color: (
-$custom-theme-accent: mat-palette($mat-red, 600);
+		primary: mat.define-palette(mat.$blue-palette, 600),
-$custom-theme-warn: mat-palette($mat-orange, 600);
+		accent: mat.define-palette(mat.$red-palette, 600),
-
+	),
-$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
+	typography: mat.define-typography-config(),
-
+	density: 0,
-@include angular-material-theme($custom-theme);
+));
+@include mat.all-component-themes($my-theme);
 
 :focus {
 	outline: none !important;
@@ -52,22 +54,29 @@ body {
 	}
 }
 
-a[href^="http://maps.google.com/maps"]{display:none !important}
-a[href^="https://maps.google.com/maps"]{display:none !important}
-
-.gmnoprint a, .gmnoprint span, .gm-style-cc {
-  display: none;
-}
-
-.gmnoprint div {
-  background: none !important;
-
-}
-
 .cdk-overlay-container {
 	z-index: 5500 !important;
 }
 
+.mat-mdc-menu-panel {
+	background-color: rgba(0, 0, 0, 0.8) !important;
+
+	.mat-mdc-menu-item {
+		color: rgba(255, 255, 255, 0.54);
+
+		&:hover {
+			background-color: rgba(90, 90, 90, 0.8) !important;
+		}
+
+		.mat-icon-no-color {
+			color: rgba(255, 255, 255, 0.54)
+		}
+	}
+}
+
+
+// Hide watermarks =============================================================
+
 .leaflet-tooltip {
 	background: rgba(0, 0, 0, 0.6) !important;
 	border-color: rgba(0, 0, 0, 0.6) !important;
@@ -76,12 +85,15 @@ a[href^="https://maps.google.com/maps"]{display:none !important}
 	&.leaflet-tooltip-right:before {
 		border-right-color: rgba(0, 0, 0, 0.6) !important;
 	}
+
 	&.leaflet-tooltip-bottom:before {
 		border-bottom-color: rgba(0, 0, 0, 0.6) !important;
 	}
+
 	&.leaflet-tooltip-top:before {
 		border-top-color: rgba(0, 0, 0, 0.6) !important;
 	}
+
 	&.leaflet-tooltip-left:before {
 		border-left-color: rgba(0, 0, 0, 0.6) !important;
 	}
@@ -99,3 +111,20 @@ a[href^="https://maps.google.com/maps"]{display:none !important}
 .leaflet-popup-tip {
 	background: rgba(0, 0, 0, 0.6) !important;
 }
+
+a[href^="http://maps.google.com/maps"] {
+	display: none !important
+}
+
+a[href^="https://maps.google.com/maps"] {
+	display: none !important
+}
+
+.gmnoprint a, .gmnoprint span, .gm-style-cc {
+	display: none;
+}
+
+.gmnoprint div {
+	background: none !important;
+
+}

tsconfig.json

@@ -1,30 +1,42 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
 	"compileOnSave": false,
 	"compilerOptions": {
-    "baseUrl": "./",
 		"outDir": "./out-tsc/app",
-    "resolveJsonModule": true,
+		"forceConsistentCasingInFileNames": true,
+		"strict": true,
+		"noImplicitOverride": true,
+		"noPropertyAccessFromIndexSignature": true,
+		"noImplicitReturns": true,
+		"noFallthroughCasesInSwitch": true,
+		"skipLibCheck": true,
+		"esModuleInterop": true,
 		"sourceMap": true,
+		"noImplicitAny": false,
 		"declaration": false,
-    "downlevelIteration": true,
-    "module": "esnext",
-    "moduleResolution": "node",
 		"experimentalDecorators": true,
+		"moduleResolution": "node",
 		"importHelpers": true,
-    "target": "es2015",
+		"target": "ES2022",
-    "typeRoots": [
+		"module": "ES2022",
-      "node_modules/@types"
+		"useDefineForClassFields": false,
-    ],
+		"strictNullChecks": false,
+		"resolveJsonModule": true,
 		"lib": [
-      "es2018",
+			"ES2022",
 			"dom"
+		]
+	},
+	"angularCompilerOptions": {
+		"enableI18nLegacyMessageIdFormat": false,
+		"strictInjectionParameters": true,
+		"strictInputAccessModifiers": true,
+		"strictTemplates": true
+	},
+	"files": [
+		"src/main.ts"
 	],
 	"include": [
-      "src/**/*.ts"
+		"src/**/*.d.ts"
-    ],
-    "exclude": [
-      "src/test.ts",
-      "src/**/*.spec.ts"
 	]
 }
-}