More styling

src/app/geolocation/geolocation.service.ts

@@ -15,20 +15,20 @@ export class GeolocationService implements OnDestroy {
             this.watchRegistrationID = navigator.geolocation.watchPosition(pos => this.location.next(pos.coords), (error) => {
                 switch(error.code) {
                     case error.PERMISSION_DENIED:
-                        snackBar.open('Geolocation permission denied', null, {horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
+                        snackBar.open('Geolocation permission denied', null, {duration: 3000, horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
                         break;
                     case error.POSITION_UNAVAILABLE:
-                        snackBar.open('Geolocation unavailable', null, {horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
+                        snackBar.open('Geolocation unavailable', null, {duration: 3000, horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
                         break;
                     case error.TIMEOUT:
-                        snackBar.open('Geolocation timeout', null, {horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
+                        snackBar.open('Geolocation timeout', null, {duration: 3000, horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
                         break;
                     default:
-                        snackBar.open('Geolocation experienced an unknown error', null, {horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
+                        snackBar.open('Geolocation experienced an unknown error', null, {duration: 3000, horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
                 }
             });
         } else {
-            snackBar.open('Geolocation is not supported', null, {horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
+            snackBar.open('Geolocation is not supported', null, {duration: 3000, horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
         }
     }
 

src/app/map/map.component.html

@@ -1,7 +1,10 @@
 <mat-toolbar>
-    <img src="/assets/images/logo.png" height="35px" width="auto"> <small class="ml-2 text-muted">{{version}}</small>
+    <button mat-icon-button routerLink="/">
+        <img src="/assets/images/logo.png" height="35px" width="auto">
+    </button>
+    <small class="ml-1 text-muted">{{version}}</small>
     <div class="ml-auto">
-        <button mat-icon-button><mat-icon>room</mat-icon></button> <!-- Add Marker -->
+        <button mat-icon-button (click)="mode = 'marker'"><mat-icon>room</mat-icon></button> <!-- Add Marker -->
         <button mat-icon-button><mat-icon>create</mat-icon></button> <!-- Create shape -->
         <button mat-icon-button><mat-icon>straighten</mat-icon></button> <!-- Measure distance -->
         <button mat-icon-button [matMenuTriggerFor]="mapStyle"><mat-icon>layers</mat-icon></button>
@@ -15,19 +18,20 @@
         <button mat-icon-button><mat-icon>perm_identity</mat-icon></button>
     </div>
 </mat-toolbar>
-<agm-map class="map" [mapTypeId]="style" [zoomControl]="false" [streetViewControl]="false" (mapReady)="mapReady($event)" gestureHandling="greedy">
+<agm-map class="map" [mapTypeId]="style" [zoomControl]="false" [streetViewControl]="false" (mapReady)="mapReady($event)" gestureHandling="greedy" (mapClick)="clicked('single', $event)">
     <ng-container *ngIf="position">
-        <agm-marker *ngIf="!position.heading" [markerClickable]="false" [latitude]="position.latitude" [longitude]="position.longitude" [iconUrl]="{url: '/assets/dot.png', anchor: {x: 11, y: 10}}"></agm-marker>
+        <agm-marker *ngIf="!position.heading" [markerClickable]="false" [latitude]="position.latitude" [longitude]="position.longitude" [iconUrl]="{url: '/assets/images/dot.png', anchor: {x: 11, y: 10}}"></agm-marker>
-        <agm-marker *ngIf="position.heading" [markerClickable]="false" [latitude]="position.latitude" [longitude]="position.longitude" [iconUrl]="{url: '/assets/arrow.png', anchor: {x: 11, y: 13}, rotation: position.heading}"></agm-marker>
+        <agm-marker *ngIf="position.heading" [markerClickable]="false" [latitude]="position.latitude" [longitude]="position.longitude" [iconUrl]="{url: '/assets/images/arrow.png', anchor: {x: 11, y: 13}, rotation: position.heading}"></agm-marker>
         <agm-circle [latitude]="position.latitude" [longitude]="position.longitude" [radius]="position.accuracy" fillColor="#5C95F2"></agm-circle>
     </ng-container>
+    <agm-marker *ngFor="let m of markers" [latitude]="m.latitude" [longitude]="m.longitude"></agm-marker>
 </agm-map>
 <div class="info p-2">
     <span *ngIf="!position" class="text-danger">No GPS</span>
     <div *ngIf="position" class="text-white">
         Heading:
         <span *ngIf="!position.heading" class="text-danger">No Heading</span>
-        <span *ngIf="position.altitude">{{position.heading}}°</span>
+        <span *ngIf="position.altitude">{{position.heading | number : '0.0'}}°</span>
         <br>
         Latitude: {{position.latitude | number : '0.0-5'}}
         <br>

src/app/map/map.component.scss

@@ -1,3 +1,7 @@
+mat-toolbar {
+  height: 40px !important;
+}
+
 .info {
   background-color: #00000050;
   position: fixed;
@@ -14,13 +18,7 @@
 }
 
 .map {
-  @media only screen and (max-width: 600px) {
+  height: calc(100vh - 40px);
-    height: calc(100vh - 56px);
-  }
-
-  @media only screen and (min-width: 601px) {
-    height: calc(100vh - 64px);
-  }
 }
 
 .selected {

src/app/map/map.component.ts

@@ -10,8 +10,10 @@ import {version} from "../../../package.json";
 })
 export class MapComponent {
     mapApi: any;
+    markers = [];
+    mode: 'marker';
     position: any;
-    style = 'terrain';
+    style: 'satellite' | 'terrain' | 'roadmap' | 'hybrid' = 'terrain';
     version = version;
 
     constructor(public geolocation: GeolocationService) {
@@ -32,4 +34,11 @@ export class MapComponent {
         if(!pos) pos = this.position;
         this.mapApi.setCenter({lat: pos.latitude, lng: pos.longitude});
     }
+
+    clicked(type: 'single' | 'double' | 'right', event) {
+        if(this.mode == 'marker') {
+            this.markers.push({latitude: event.coords.lat, longitude: event.coords.lng});
+            this.mode = null;
+        }
+    }
 }

src/styles.scss

@@ -6,3 +6,15 @@
 
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+// Remove google maps branding
+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;
+}