diff --git a/package.json b/package.json index 03eea80..5b85722 100644 --- a/package.json +++ b/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", diff --git a/src/app/app.component.html b/src/app/app.component.html index 4919839..0680b43 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1 @@ - - Map Alliance - diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 69f85bc..d0198ee 100644 --- a/src/app/app.component.ts +++ b/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 { - constructor(private geolocation: GeolocationService) { - geolocation.location.subscribe(pos => console.log(pos)); - } -} +export class AppComponent { } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index afc93db..a0322f0 100644 --- a/src/app/app.module.ts +++ b/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] diff --git a/src/app/map/map.component.html b/src/app/map/map.component.html index 15e01ac..5b00506 100644 --- a/src/app/map/map.component.html +++ b/src/app/map/map.component.html @@ -1 +1,45 @@ -

Map

+ + Map Alliance {{version}} +
+ + + + + + + + + + + + +
+ + + + + + + + +
+ No GPS +
+ Heading: + No Heading + {{position.heading}}° +
+ Latitude: {{position.latitude | number : '0.0-5'}} +
+ Longitude: {{position.longitude | number : '0.0-5'}} +
+ Altitude: + No Altitude + {{position.altitude}} +
+ Speed: + No Speed + {{position.speed * 60 * 60 / 1000 | number : '1.1'}} km/h +
+
+ diff --git a/src/app/map/map.component.scss b/src/app/map/map.component.scss new file mode 100644 index 0000000..fa348b9 --- /dev/null +++ b/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; +} diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts index 60a52af..114f916 100644 --- a/src/app/map/map.component.ts +++ b/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}); + } } diff --git a/src/app/material.module.ts b/src/app/material.module.ts new file mode 100644 index 0000000..afe3975 --- /dev/null +++ b/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 { } diff --git a/src/styles.scss b/src/styles.scss index 86ff49e..306f22c 100644 --- a/src/styles.scss +++ b/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; } diff --git a/tsconfig.app.json b/tsconfig.app.json index 31f8397..798ed33 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -2,6 +2,7 @@ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", + "resolveJsonModule": true, "types": [] }, "include": [