#579 adding work from home, have directions

example working here. Need to clean it up and implement it porperly.
SwapnilShahGit · Apr 13, 2017 · a068dac · a068dac
1 parent 6829305
commit a068dac
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 3 deletions.
diff --git a/Spore/front/src/app/app.module.ts b/Spore/front/src/app/app.module.ts
@@ -30,7 +30,7 @@ import { CoursesPageComponent } from './components/courses-page/courses-page.com
 import { CustomColourPickerComponent } from './components/colour-picker/colour-picker.component';
 import { MapPageComponent } from './components/map-page/map-page.component';
 import { AgmCoreModule } from 'angular2-google-maps/core';
-import { GMapsService } from '../meta/googleMapService';
+import { GMapsService, DirectionsMapDirective } from '../meta/googleMapService';
 import { TasksComponent } from './components/tasks/tasks.component';
 
 /*
@@ -83,7 +83,8 @@ type StoreType = {
     CoursesPageComponent,
     CustomColourPickerComponent,
     MapPageComponent,
-    TasksComponent
+    TasksComponent,
+    DirectionsMapDirective
   ],
   imports: [ // import Angular's modules
     BrowserModule,

diff --git a/Spore/front/src/app/components/map-page/map-page.component.html b/Spore/front/src/app/components/map-page/map-page.component.html
@@ -22,6 +22,7 @@
         </sebm-google-map-marker>
       </div>
       <sebm-google-map-marker [latitude]="pointsOfInterest[0].lat" [longitude]="pointsOfInterest[0].lng"></sebm-google-map-marker>
+      <sebm-google-map-directions [origin]="origin" [destination]="destination"></sebm-google-map-directions>
     </sebm-google-map>
   </div>
 

diff --git a/Spore/front/src/app/components/map-page/map-page.component.ts b/Spore/front/src/app/components/map-page/map-page.component.ts
@@ -25,6 +25,9 @@ export class MapPageComponent implements OnDestroy {
   private lng: number = undefined;
   private ngUnsubscribe: Subject<void> = new Subject<void>();
 
+  private origin = { longitude: 4.333, lattitude: -1.2222 };  // its a example aleatory position
+  private destination = { longitude: 22.311, lattitude: -0.123 };  // its a example aleatory position
+
   constructor(
     private googleMapService: GMapsService,
     private zone: NgZone

diff --git a/Spore/front/src/meta/googleMapService.ts b/Spore/front/src/meta/googleMapService.ts
@@ -1,4 +1,4 @@
-import { Injectable, NgZone } from '@angular/core';
+import { Injectable, NgZone, Directive, Input, OnInit } from '@angular/core';
 import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core';
 import { MapsAPILoader } from 'angular2-google-maps/core';
 import { Observable, Observer } from 'rxjs';
@@ -125,3 +125,39 @@ export class GMapsService extends GoogleMapsAPIWrapper {
       });
     }
 }
+
+@Directive({
+  selector: 'sebm-google-map-directions'
+})
+export class DirectionsMapDirective implements OnInit {
+
+  @Input()
+  origin;
+
+  @Input()
+  destination;
+
+  constructor (
+    private gmapsApi: GoogleMapsAPIWrapper
+  ) {}
+
+  public ngOnInit() {
+    var x = this.origin;
+    this.gmapsApi.getNativeMap().then(map => {
+      var directionsService = new google.maps.DirectionsService;
+      var directionsDisplay = new google.maps.DirectionsRenderer;
+      directionsDisplay.setMap(map);
+      directionsService.route({
+          origin: 'Toronto ON',
+          destination: 'Oakville ON',
+          travelMode: 'DRIVING'
+        }, function(response, status) {
+          if (status === 'OK') {
+            directionsDisplay.setDirections(response);
+          } else {
+            console.log('Directions request failed due to ' + status);
+          }
+      });
+    });
+  }
+}