Felix/track current trajectory

package.json

@@ -38,7 +38,9 @@
     "cordova-plugin-device": "^2.0.3",
     "cordova-plugin-local-notification": "git+https://github.com/timkellypa/cordova-plugin-local-notifications.git",
     "leaflet": "^1.7.1",
+    "mapbox-gl": "^1.13.0",
     "moment": "^2.29.0",
+    "ngx-mapbox-gl": "^4.8.1",
     "rxjs": "~6.5.5",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.3"
@@ -54,6 +56,7 @@
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/leaflet": "^1.5.17",
+    "@types/mapbox-gl": "1.12.7",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
     "gpx-parse": "^0.10.4",

src/app/shared-services/db/sqlite.service.ts

@@ -126,9 +126,16 @@ export class SqliteService {
       message,
     } = await this.db.run({
       statement: 'INSERT OR REPLACE INTO points VALUES (?,?,?,?,?)',
-      values: [trajectoryId, time.toISOString(), ...p.latLng, p.accuracy],
+      // IDK why but with iOS simulator it was not possible to run this without .toFixed()
+      values: [
+        trajectoryId,
+        time.toISOString(),
+        p.latLng[0].toFixed(8),
+        p.latLng[1].toFixed(8),
+        p.accuracy,
+      ],
     })
-    if (changes === -1) throw new Error(`couldnt insert trajectory: ${message}`)
+    if (changes === -1) throw new Error(`couldnt insert point: ${message}`)
 
     // update durationDays of trajectory
     const {

src/app/tracking/tracking.module.ts

@@ -6,6 +6,8 @@ import { IonicModule } from '@ionic/angular'
 import { TrackingPageRoutingModule } from './tracking-routing.module'
 import { TrackingPage } from './tracking.page'
 import { SharedUiModule } from '../shared-ui/shared-ui.module'
+import { NgxMapboxGLModule } from 'ngx-mapbox-gl'
+import { environment } from 'src/environments/environment'
 
 @NgModule({
   imports: [
@@ -14,6 +16,9 @@ import { SharedUiModule } from '../shared-ui/shared-ui.module'
     IonicModule,
     TrackingPageRoutingModule,
     SharedUiModule,
+    NgxMapboxGLModule.withConfig({
+      accessToken: environment.mapboxAccessToken, // Optional, can also be set per map (accessToken input of mgl-map)
+    }),
   ],
   declarations: [TrackingPage],
 })

src/app/tracking/tracking.page.html

@@ -1,7 +1,7 @@
 <ion-header>
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
+      <ion-back-button defaultHref="/"></ion-back-button>
     </ion-buttons>
     <ion-title>Tracking</ion-title>
   </ion-toolbar>
@@ -29,5 +29,26 @@
       </ion-col>
     </ion-row>
   </ion-grid>
-  <div style="white-space: pre-wrap">{{eventText}}</div>
+  <ion-card>
+    <mgl-map
+      [style]="'mapbox://styles/mapbox/light-v9'"
+      [zoom]="[12]"
+      [center]="center"
+      (load)="onMapLoad($event)"
+    >
+      <mgl-geojson-source id="coordinates">
+        <mgl-feature [geometry]="geometry"> </mgl-feature>
+      </mgl-geojson-source>
+      <mgl-layer
+        id="coordinates"
+        type="circle"
+        source="coordinates"
+        [paint]="{
+          'circle-color': '#3880ff',
+          'circle-radius': 4
+        }"
+      >
+      </mgl-layer>
+    </mgl-map>
+  </ion-card>
 </ion-content>

src/app/tracking/tracking.page.scss

@@ -0,0 +1,3 @@
+mgl-map {
+  height: 300px;
+}

src/app/tracking/tracking.page.ts

@@ -1,7 +1,10 @@
 import { Component, Input, NgZone, OnDestroy, OnInit } from '@angular/core'
 import { Platform } from '@ionic/angular'
+import { LngLatLike } from 'mapbox-gl'
 import { Subscription } from 'rxjs'
+import { TrajectoryType } from '../model/trajectory'
 import { LocationService } from '../shared-services/location.service'
+import { TrajectoryService } from '../shared-services/trajectory.service'
 
 @Component({
   selector: 'app-tracking',
@@ -13,10 +16,21 @@ export class TrackingPage implements OnInit, OnDestroy {
 
   private locationServiceSubscription: Subscription
 
+  // properties for the mapbox map
+  geometry: any = {
+    type: 'MultiPoint',
+    coordinates: [
+      // coordinates will be pushed here
+    ],
+  }
+  // center of the map
+  center: LngLatLike
+
   constructor(
     private zone: NgZone,
     public platform: Platform,
-    private locationService: LocationService
+    private locationService: LocationService,
+    private trajectoryService: TrajectoryService
   ) {}
 
   ngOnInit() {
@@ -26,12 +40,32 @@ export class TrackingPage implements OnInit, OnDestroy {
         this.setState(state ? 'Running' : 'Stopped')
       }
     )
+
+    // subscribing to data of current track
+    this.trajectoryService
+      .getOne(TrajectoryType.USERTRACK, 'user')
+      .subscribe((trajecotry) => {
+        if (trajecotry.coordinates.length > 0) {
+          // mapbox is using lngLat coordinates ==> reverse() each pair
+          this.geometry.coordinates = trajecotry.coordinates.map((c) =>
+            c.reverse()
+          )
+          const lastCoord = this.geometry.coordinates[
+            this.geometry.coordinates.length - 1
+          ]
+          this.center = lastCoord
+        }
+      })
   }
 
   ngOnDestroy() {
     this.locationServiceSubscription.unsubscribe()
   }
 
+  onMapLoad(map) {
+    map.resize()
+  }
+
   toggleBackgroundGeoLocation() {
     this.locationService.start()
   }

src/environments/environment.prod.ts

@@ -1,3 +1,5 @@
 export const environment = {
-  production: true
+  production: true,
+  mapboxAccessToken: 'MAPBOX_ACCESS_TOKEN'
+
 };

src/environments/environment.ts

@@ -3,7 +3,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  mapboxAccessToken: 'MAPBOX_ACCESS_TOKEN'
 };
 
 /*

src/global.scss

@@ -10,20 +10,22 @@
  */
 
 /* Core CSS required for Ionic components to work properly */
-@import "~@ionic/angular/css/core.css";
+@import '~@ionic/angular/css/core.css';
 
 /* Basic CSS for apps built with Ionic */
-@import "~@ionic/angular/css/normalize.css";
-@import "~@ionic/angular/css/structure.css";
-@import "~@ionic/angular/css/typography.css";
+@import '~@ionic/angular/css/normalize.css';
+@import '~@ionic/angular/css/structure.css';
+@import '~@ionic/angular/css/typography.css';
 @import '~@ionic/angular/css/display.css';
 
 /* Optional CSS utils that can be commented out */
-@import "~@ionic/angular/css/padding.css";
-@import "~@ionic/angular/css/float-elements.css";
-@import "~@ionic/angular/css/text-alignment.css";
-@import "~@ionic/angular/css/text-transformation.css";
-@import "~@ionic/angular/css/flex-utils.css";
+@import '~@ionic/angular/css/padding.css';
+@import '~@ionic/angular/css/float-elements.css';
+@import '~@ionic/angular/css/text-alignment.css';
+@import '~@ionic/angular/css/text-transformation.css';
+@import '~@ionic/angular/css/flex-utils.css';
+
+@import '~mapbox-gl/dist/mapbox-gl.css';
 
 ion-modal.auto-height {
   &.bottom {
@@ -45,4 +47,4 @@ ion-modal.auto-height {
   }
 }
 
-@import "~leaflet/dist/leaflet.css"
+@import '~leaflet/dist/leaflet.css';

src/polyfills.ts

@@ -64,3 +64,6 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
+
+// see https://github.com/Wykks/ngx-mapbox-gl
+(window as any).global = window;