Added maps

package.json

@@ -1,9 +1,9 @@
 {
   "name": "map-alliance",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --host 0.0.0.0",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",

src/app/app.component.html

@@ -1,4 +1 @@
-<mat-toolbar>
-    Map Alliance
-</mat-toolbar>
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,12 +1,7 @@
 import { Component } from '@angular/core';
-import {GeolocationService} from "./geolocation/geolocation.service";
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html'
 })
-export class AppComponent {
+export class AppComponent { }
-  constructor(private geolocation: GeolocationService) {
-    geolocation.location.subscribe(pos => console.log(pos));
-  }
-}

src/app/app.module.ts

@@ -7,10 +7,13 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {ServiceWorkerModule} from '@angular/service-worker';
 import {environment} from '../environments/environment';
 import {FormsModule} from "@angular/forms";
-import {MatSnackBarModule, MatToolbarModule} from "@angular/material";
 import {MapComponent} from "./map/map.component";
 import {NotFoundComponent} from "./404/404.component";
 import {HomeComponent} from "./home/home.component";
+import {AgmCoreModule} from "@agm/core";
+import {MaterialModule} from "./material.module";
+
+
 
 @NgModule({
     declarations: [
@@ -20,13 +23,13 @@ import {HomeComponent} from "./home/home.component";
         NotFoundComponent,
     ],
     imports: [
-        BrowserModule,
+        AgmCoreModule.forRoot({apiKey: 'AIzaSyDFtvCY6nH_HUoTBNf_5b-E8nRweSLYtxE'}),
         AppRouting,
         BrowserAnimationsModule,
+        BrowserModule,
         FormsModule,
-        MatSnackBarModule,
+        MaterialModule,
         ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),
-        MatToolbarModule
     ],
     providers: [],
     bootstrap: [AppComponent]

src/app/map/map.component.html

@@ -1 +1,45 @@
-<h1>Map</h1>
+<mat-toolbar>
+    Map Alliance <small class="ml-2 text-muted">{{version}}</small>
+    <div class="ml-auto">
+        <button mat-icon-button><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>
+        <mat-menu #mapStyle="matMenu">
+            <button mat-menu-item (click)="style = 'satellite'" [ngClass]="{'selected': style == 'satellite'}">Satellite</button>
+            <button mat-menu-item (click)="style = 'terrain'" [ngClass]="{'selected': style == 'terrain'}">Terrain</button>
+            <button mat-menu-item (click)="style = 'roadmap'" [ngClass]="{'selected': style == 'roadmap'}">Road</button>
+            <button mat-menu-item (click)="style = 'hybrid'" [ngClass]="{'selected': style == 'hybrid'}">Hybrid</button>
+        </mat-menu>
+        <button mat-icon-button><mat-icon>chat</mat-icon></button> <!-- Group chat -->
+        <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)">
+    <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/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-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>
+        <br>
+        Latitude: {{position.latitude | number : '0.0-5'}}
+        <br>
+        Longitude: {{position.longitude | number : '0.0-5'}}
+        <br>
+        Altitude:
+        <span *ngIf="!position.altitude" class="text-danger">No Altitude</span>
+        <span *ngIf="position.altitude">{{position.altitude}}</span>
+        <br>
+        Speed:
+        <span *ngIf="!position.speed" class="text-danger">No Speed</span>
+        <span *ngIf="position.speed">{{position.speed * 60 * 60 / 1000 | number : '1.1'}} km/h</span>
+    </div>
+</div>
+<button mat-fab class="gps" (click)="center()"><mat-icon>gps_fixed</mat-icon></button>

src/app/map/map.component.scss

@@ -0,0 +1,22 @@
+.info {
+  background-color: #00000050;
+  position: fixed;
+  z-index: 100;
+  bottom: 15px;
+  left: 15px;
+}
+
+.gps {
+  position: fixed;
+  z-index: 100;
+  bottom: 15px;
+  right: 15px;
+}
+
+.map {
+  height: calc(100vh - 64px);
+}
+
+.selected {
+  background-color: #cccccc;
+}

src/app/map/map.component.ts

@@ -1,9 +1,35 @@
 import {Component} from "@angular/core";
+import {GeolocationService} from "../geolocation/geolocation.service";
+import {filter} from "rxjs/operators";
+import {version} from "../../../package.json";
 
 @Component({
     selector: 'map',
-    templateUrl: 'map.component.html'
+    templateUrl: 'map.component.html',
+    styleUrls: ['map.component.scss']
 })
 export class MapComponent {
+    mapApi: any;
+    position: any;
+    style = 'terrain';
+    version = version;
 
+    constructor(public geolocation: GeolocationService) {
+        geolocation.location.pipe(filter(coord => !!coord)).subscribe(pos => {
+            if(this.mapApi) {
+                console.log(pos);
+                if(!this.position) this.center(pos);
+                this.position = pos;
+            }
+        });
+    }
+
+    mapReady(map) {
+        this.mapApi = map;
+    }
+
+    center(pos?) {
+        if(!pos) pos = this.position;
+        this.mapApi.setCenter({lat: pos.latitude, lng: pos.longitude});
+    }
 }

src/app/material.module.ts

@@ -0,0 +1,23 @@
+import {
+    MatBottomSheetModule,
+    MatButtonModule,
+    MatIconModule, MatMenuModule,
+    MatSnackBarModule,
+    MatToolbarModule
+} from "@angular/material";
+import {NgModule} from "@angular/core";
+
+export const materialModules = [
+    MatBottomSheetModule,
+    MatButtonModule,
+    MatIconModule,
+    MatMenuModule,
+    MatSnackBarModule,
+    MatToolbarModule,
+];
+
+@NgModule({
+    imports: materialModules,
+    exports: materialModules
+})
+export class MaterialModule { }

src/styles.scss

@@ -1,4 +1,8 @@
 @import '~bootstrap-scss/bootstrap.scss';
 
+:focus {
+  outline: none !important;
+}
+
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

tsconfig.app.json

@@ -2,6 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
+    "resolveJsonModule": true,
     "types": []
   },
   "include": [