added sidebar with route information

src/app/app.component.css

@@ -1,10 +1,9 @@
 header{
-    background-color: rgb(37, 37, 37);
-    height: 50px;
-    font-size: 15pt;
-    color:white;
-    font-weight: bold;
-
+  background-color: rgb(37, 37, 37);
+  height: 50px;
+  font-size: 15pt;
+  color:white;
+  font-weight: bold;
 }
 
 header p{
@@ -18,3 +17,42 @@ header p{
     width: 100%;
     height: 100%;
 }
+
+.osrm-route-container{
+  position: absolute;
+  right: 0;
+  width:300px;
+  margin-top: 50px;
+  background-color: rgba(27, 27, 27, 0.801);
+  top:0;
+  bottom: 0;
+  color: white;
+}
+
+.osrm-route-container h4{
+  text-align: center;
+  line-height: 30px;
+  letter-spacing: 1px;
+  padding-top: 0px;
+  margin-top: 2px;
+}
+
+.route-list{
+  width: 100%;
+  display: block;
+  font-weight: bold;
+  text-align: left;
+}
+
+.route-list div{
+  width: 100%;
+  display: block;
+  border-top: 1px solid rgba(255, 255, 255, 0.418);
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.route-list div p{
+  display: inline-block;
+  padding-left: 40px;
+}

src/app/app.component.html

@@ -3,4 +3,15 @@
   <p>{{title}}</p>
 </header>
 
-<div id="map" class="map"></div>
+<div id="map" class="map"></div>
+
+<div class="osrm-route-container">
+  <h4>Your Route Steps</h4>
+
+  <div class="route-list">
+    <div *ngFor="let step of this.routeSteps">
+      <p>{{step.maneuver?.type }} {{step.maneuver?.modifier }}</p>
+    </div>
+  </div>
+</div>
+

src/app/app.component.ts

@@ -9,7 +9,7 @@ import ZoomToExtent from 'ol/control/ZoomToExtent';
 import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
 import LineString from 'ol/geom/LineString';
-import { Osrm } from './interfaces/osrm';
+import { Osrm, OsrmStep } from './interfaces/osrm';
 import { Feature } from 'ol';
 import Geometry from 'ol/geom/Geometry';
 
@@ -22,6 +22,7 @@ import Geometry from 'ol/geom/Geometry';
 export class AppComponent implements AfterViewInit {
   title = "Street Map";
   map: Map;
+  routeSteps: Array<OsrmStep> = []
 
   constructor() { }
 
@@ -66,8 +67,11 @@ export class AppComponent implements AfterViewInit {
     const lineString: LineString = new LineString(f_coordinates);
     const feature: Feature<Geometry> = new Feature({ geometry: lineString });
     const vectorSource = new VectorSource({ features: [ feature ]});
-    console.log(feature.getGeometry());
-    const vectorLayer = new VectorLayer({ source: vectorSource });
+
+    const vectorLayer = new VectorLayer({
+
+      source: vectorSource,
+    });
     this.map.addLayer(vectorLayer);
 
    // this.features = new GeoJSON().readFeatures(new openLayersGeoJSON())
@@ -83,5 +87,14 @@ export class AppComponent implements AfterViewInit {
 
     this.map.addLayer(this.vectorLayer);*/
   }
+
+  updateSidebar(osrm: Osrm): void{
+    console.log("updateSidebar")
+    if(osrm.routes[0].legs[0].steps){
+      this.routeSteps = osrm.routes[0].legs[0].steps;
+    }
+    console.log(this.routeSteps)
+  }
+
 }
 

src/app/app.module.ts

@@ -3,13 +3,11 @@ import { BrowserModule } from '@angular/platform-browser';
 import {HttpClientModule} from '@angular/common/http';
 import { AppComponent } from './app.component';
 import { SearchComponent } from './search/search.component';
-import { OsrmComponent } from './osrm/osrm.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     SearchComponent,
-    OsrmComponent,
   ],
   imports: [
     BrowserModule,

src/app/interfaces/osrm.ts

@@ -1,25 +1,47 @@
 interface OsrmWaypoint{
-    hint?: string;
-    distance?: number;
-    location?: Array<number>;
-    name?: string;
+  hint?: string;
+  distance?: number;
+  location?: Array<number>;
+  name?: string;
+}
+
+interface OsrmManeuver{
+  type?: string;
+  modifier?: string;
+}
+
+export interface OsrmStep{
+  driving_side?: string;
+  duration?: number;
+  distance?: number;
+  name?: string;
+  maneuver?: OsrmManeuver;
+}
+
+interface OsrmLeg{
+steps?: Array<OsrmStep>;
+weight?: number;
+distance?: number;
+summary?: string;
+duration?: number;
 }
 
 interface OsrmGeometry{
-    type: GeometryType;
-    coordinates?: Array<Array<number>>;
+  type: GeometryType;
+  coordinates?: Array<Array<number>>;
 }
 
 enum GeometryType {
-    LINE_STRING = "LineString"
+  LINE_STRING = "LineString"
 }
 
 interface OsrmRoute{
-    geometry: OsrmGeometry;
+  legs: Array<OsrmLeg>;
+  geometry: OsrmGeometry;
 }
 
 export interface Osrm{
-    code?: string;
-    waypoints?: Array<OsrmWaypoint>;
-    routes: Array<OsrmRoute>;
-}
+  code?: string;
+  waypoints?: Array<OsrmWaypoint>;
+  routes: Array<OsrmRoute>;
+}

src/app/osrm/osrm.component.html

@@ -1 +0,0 @@
-<p>osrm works!</p>

src/app/osrm/osrm.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { OsrmComponent } from './osrm.component';
-
-describe('OsrmComponent', () => {
-  let component: OsrmComponent;
-  let fixture: ComponentFixture<OsrmComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ OsrmComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(OsrmComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/osrm/osrm.component.ts

@@ -1,16 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-osrm',
-  templateUrl: './osrm.component.html',
-  styleUrls: ['./osrm.component.css']
-})
-
-export class OsrmComponent implements OnInit {
-
-  constructor() { }
-
-
-  ngOnInit(): void {
-  }
-}

src/app/search/search.component.ts

@@ -6,6 +6,8 @@ import { PhotonService } from '../photon.service';
 import { OsrmService } from '../osrm.service';
 import { Osrm } from '../interfaces/osrm';
 import { AppComponent } from '../app.component';
+
+
 @Component({
   selector: 'app-search',
   templateUrl: './search.component.html',
@@ -36,7 +38,7 @@ export class SearchComponent{
     private nominatimService: NominatimService,
     private photonService: PhotonService,
     private osrmService: OsrmService,
-    private appComponent: AppComponent
+    private appComponent: AppComponent,
     ) { }
 
   selectPhoton(isFrom: boolean, p: Photon): void{
@@ -106,10 +108,9 @@ export class SearchComponent{
   }
 
   getRoute(): void{
-
     this.osrmService.sendQueryRequest(this.longFrom, this.latFrom, this.longTo, this.latTo)
     .subscribe((response: Osrm) => {
-      console.log(response);
+      this.appComponent.updateSidebar(response);
       this.appComponent.drawPath(response);
     }
     );

src/styles.css

@@ -14,9 +14,10 @@ body {
     top:0;
     bottom:0;
     right:0;
-    left:0; 
+    left:0;
+    overflow: hidden;
 }
 
 button{
     outline: 0;
-}
+}