added some sidebar icons

src/app/app.component.html

@@ -4,3 +4,4 @@
 </header>
 
 <app-map #mapRef></app-map>
+<app-route-list #routeListRef></app-route-list>

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component, ViewChild, } from '@angular/core';
 import { Osrm } from './interfaces/osrm';
 import { MapComponent } from './map/map.component';
+import { RouteListComponent } from './route-list/route-list.component';
 
 
 @Component({
@@ -14,10 +15,11 @@ import { MapComponent } from './map/map.component';
 export class AppComponent {
   title = "Street Map";
   @ViewChild('mapRef') mapCompopnent!: MapComponent;
+  @ViewChild('routeListRef') routeListCompopnent!: RouteListComponent;
 
   onSearchResponse($event: Osrm): void {
 		this.mapCompopnent.drawPath($event);
-    this.mapCompopnent.updateSidebar($event);
+    this.routeListCompopnent.updateSidebar($event);
 	}
 }
 

src/app/app.module.ts

@@ -4,12 +4,14 @@ import {HttpClientModule} from '@angular/common/http';
 import { AppComponent } from './app.component';
 import { SearchComponent } from './search/search.component';
 import { MapComponent } from './map/map.component';
+import { RouteListComponent } from './route-list/route-list.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     SearchComponent,
     MapComponent,
+    RouteListComponent,
   ],
   imports: [
     BrowserModule,

src/app/map/map.component.css

@@ -4,42 +4,3 @@
   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;
-text-transform: capitalize;
-padding-left: 40px;
-}

src/app/map/map.component.html

@@ -1,11 +1 @@
 <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 }} on {{step.name }}</p>
-    </div>
-  </div>
-</div>

src/app/map/map.component.ts

@@ -23,7 +23,7 @@ export class MapComponent implements AfterViewInit {
   constructor() { }
 
   map: Map;
-  routeSteps: Array<OsrmStep> = []
+
 
   ngAfterViewInit() {
     this.map = new Map({
@@ -86,12 +86,4 @@ export class MapComponent 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/route-list/route-list.component.css

@@ -0,0 +1,50 @@
+.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;
+  overflow-y: scroll;
+  }
+
+  .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 .route-list-item{
+  width: 100%;
+  display: block;
+  border-top: 1px solid rgba(255, 255, 255, 0.418);
+  padding-top: 5px;
+  padding-bottom: 5px;
+
+  }
+
+  .route-list .route-list-item div{
+    width: 100%;
+    /*background-image: url('/assets/images/turn-left.svg');*/
+    background-repeat: no-repeat;
+    background-size: 35px 35px;
+    background-position:5px 10px;
+    }
+
+  .route-list .route-list-item div p{
+  display: inline-block;
+  text-transform: capitalize;
+  padding-left: 50px;
+  }

src/app/route-list/route-list.component.html

@@ -0,0 +1,18 @@
+<div class="osrm-route-container">
+  <h4>Your Route Steps</h4>
+
+  <div class="route-list">
+    <div *ngFor="let step of this.routeSteps" class="route-list-item" >
+      <!--Fork-->
+      <div *ngIf="step.maneuver?.type != 'fork'" style="background-image: url('/assets/images/{{step.maneuver?.modifier }}.svg');">
+        <p>{{step.maneuver?.type }} {{step.maneuver?.modifier }} <br> {{step.name }}</p>
+      </div>
+
+      <!--Not Fork-->
+      <div *ngIf="step.maneuver?.type == 'fork'" style="background-image: url('/assets/images/{{step.maneuver?.type }}-{{step.maneuver?.modifier }}.svg');">
+        <p>{{step.maneuver?.type }} {{step.maneuver?.modifier }} <br> {{step.name }}</p>
+      </div>
+    </div>
+  </div>
+</div>
+

src/app/route-list/route-list.component.spec.ts

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

src/app/route-list/route-list.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { Osrm, OsrmStep } from '../interfaces/osrm';
+
+@Component({
+  selector: 'app-route-list',
+  templateUrl: './route-list.component.html',
+  styleUrls: ['./route-list.component.css']
+})
+export class RouteListComponent implements OnInit {
+  routeSteps: Array<OsrmStep> = []
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  updateSidebar(osrm: Osrm): void{
+    console.log("updateSidebar")
+    if(osrm.routes[0].legs[0].steps){
+      this.routeSteps = osrm.routes[0].legs[0].steps;
+    }
+  }
+}

src/assets/images/fork-slight left.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<path fill="#fff" d="M454,122.1l7.8,3.6l22.2,25.6c3.8,4.3,3.3,10.9-1,14.7l-0.1,0.1l-70.3,59.3c-40.7,37.5-62.4,91.3-59.2,146.6l0.2,123.1
+		c0,5.6-4.5,10.1-10.1,10.1h-34.4c-5.6,0-10.1-4.5-10.1-10.1l0-118.7c-4.7-72.5,23.8-143.1,77.5-192l70.9-59.8L454,122.1 M454,115.3
+		c-4.1,0-8,1.4-11.1,4L372,179.1c-55.1,50.5-84.5,123.2-79.9,197.8v118.1c0,9.3,7.6,16.9,16.9,16.9h34.4c9.4,0,16.9-7.6,16.9-16.9v0
+		l-0.2-123.1c-3.2-53.3,17.6-105.2,56.8-141.4l70.2-59.3c7.3-6.1,8.2-17,2.1-24.3l-0.1-0.2L467,121.2
+		C463.8,117.4,459,115.3,454,115.3L454,115.3z M279.6,179.1l-83.9-70.8c-5.9-3.2-8.1-10.7-4.9-16.6c1.6-2.8,4.2-5,7.3-5.9
+		l100.6-46.1c6.3-3.8,8.3-11.9,4.5-18.1c-2.4-4-6.8-6.4-11.4-6.4L18.6,0l53.9,268.3c1,7.2,7.6,12.3,14.8,11.3
+		c4.6-0.6,8.6-3.6,10.4-8l31.3-106.2c0.9-6.7,7.1-11.3,13.8-10.3c3.2,0.5,6.1,2.2,8,4.8l83.6,70.5c39.2,36.3,60,88.2,56.8,141.4
+		L291.2,495c0,9.4,7.6,17,16.9,17h0h34.4c9.3,0,16.9-7.6,16.9-16.9V376.9C364.1,302.3,334.7,229.6,279.6,179.1z"/>
+</g>
+</svg>

src/assets/images/fork-slight right.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<path fill="#fff" d="M144.1,6.4c5.3,0,9.5,4.3,9.5,9.5v480.2c0,5.3-4.3,9.5-9.5,9.5h-32.2c-5.3,0-9.5-4.3-9.5-9.5V15.9c0-5.3,4.3-9.5,9.5-9.5
+		H144.1 M144.1,0h-32.2C103.1,0,96,7.1,96,15.9v480.2c0,8.8,7.1,15.9,15.9,15.9h32.2c8.8,0,15.9-7.1,15.9-15.9V15.9
+		C160,7.1,152.9,0,144.1,0z M96.5,385.4v110.8c0,8.8,7.1,15.9,15.9,15.9h32.2c8.8,0,15.9-7.1,15.9-15.9v0l-0.1-115.4
+		c-3-50,16.5-98.6,53.3-132.6l78.3-66.1c3.8-5.1,11-6.1,16-2.3c2.4,1.8,4,4.5,4.5,7.5l29.4,99.5c2.7,6.3,9.9,9.3,16.2,6.6
+		c4-1.7,6.9-5.4,7.5-9.8L416,32L159.8,46.4c-6.8-0.1-12.4,5.4-12.5,12.3c0,4.4,2.2,8.5,6,10.7l94.4,43.2c6.1,1.8,9.5,8.1,7.8,14.2
+		c-0.9,2.9-2.8,5.4-5.5,6.8L171.3,200C119.6,247.3,92.1,315.4,96.5,385.4z"/>
+</g>
+</svg>

src/assets/images/left.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<path fill="#fff" d="M287.8,127.8l0.3,0c106.2,1.2,191.7,87.9,191.4,194.1v126.1h-0.1l0.1,48c0,8.8-7.1,15.9-15.8,15.9h0h-32.2
+		c-8.8,0-15.9-7.1-15.9-15.9V322c0.3-71-56.5-129-127.5-130.2h-63.9c-6.2-1.3-12.3,2.6-13.6,8.7c-0.6,3-0.1,6.1,1.6,8.6l42.9,94.4
+		c2.1,6.5-1.4,13.5-7.9,15.6c-4.2,1.3-8.7,0.4-12-2.5L32.4,160.4L235.3,3.1c5.1-4.5,12.9-4,17.4,1.1c2.9,3.3,3.8,7.9,2.5,12
+		l-42.9,94.3c-3.4,5.3-1.9,12.4,3.4,15.8c2.6,1.6,5.7,2.2,8.6,1.5L287.8,127.8"/>
+</g>
+</svg>

src/assets/images/right.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<path fill="#fff" d="M223.8,191.8C152.8,193,96,251,96.3,322v174.2c0,8.8-7.1,15.9-15.9,15.9H48.3c-8.8,0-15.9-7.1-15.9-15.9v0l0.1-48.1h-0.1
+		V322c-0.2-106.3,85.2-192.9,191.4-194.1l0.3-0.1v0.1h63.5c6.2,1.3,12.3-2.6,13.6-8.7c0.7-3,0.1-6.1-1.5-8.6l-42.9-94.3
+		c-2.1-6.5,1.4-13.5,7.9-15.6c4.2-1.4,8.7-0.4,12,2.5l202.9,157.3L276.7,316.6c-5.1,4.5-12.9,4-17.4-1.1c-2.9-3.3-3.8-7.8-2.5-12
+		l42.9-94.3c3.4-5.3,1.9-12.4-3.4-15.8c-2.6-1.6-5.7-2.2-8.6-1.5H223.8z"/>
+</g>
+</svg>

src/assets/images/slight left.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<path fill="#fff"  d="M426.2,376.9v118.1c0,9.3-7.6,16.9-16.9,16.9h-34.4c-9.4,0-16.9-7.6-16.9-16.9v0l0.1-123.1c3.2-53.3-17.6-105.2-56.8-141.4
+		l-83.6-70.5c-4-5.4-11.7-6.5-17.1-2.5c-2.6,1.9-4.3,4.8-4.8,8l-31.3,106.2c-2.8,6.7-10.6,9.9-17.3,7c-4.3-1.8-7.3-5.8-7.9-10.4
+		L85.3,0l273.2,15.4c7.3-0.1,13.3,5.8,13.3,13.1c0,4.7-2.4,9-6.4,11.4L264.8,85.9c-6.5,1.9-10.2,8.7-8.3,15.2c0.9,3.1,3,5.7,5.9,7.3
+		l83.9,70.8C401.5,229.6,430.8,302.3,426.2,376.9z"/>
+</g>
+</svg>

src/assets/images/slight right.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<path fill="#fff" d="M165.7,179.1l83.9-70.8c5.9-3.2,8.1-10.7,4.9-16.6c-1.5-2.8-4.2-5-7.3-5.9L146.5,39.8c-6.2-3.8-8.3-11.9-4.5-18.1
+		c2.4-4,6.8-6.4,11.4-6.4L426.7,0l-54,268.3c-1,7.2-7.6,12.3-14.8,11.3c-4.6-0.6-8.6-3.6-10.4-8l-31.4-106.2
+		c-1-6.7-7.1-11.3-13.8-10.3c-3.2,0.5-6.1,2.2-8,4.8l-83.6,70.5c-39.2,36.3-60.1,88.2-56.8,141.4L154,495c0,9.4-7.6,17-16.9,17h0
+		h-34.3c-9.3,0-16.9-7.6-16.9-16.9V376.9C81.2,302.3,110.5,229.6,165.7,179.1z"/>
+</g>
+</svg>

src/assets/images/straight.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<path fill="#fff" d="M399.8,222.9l-94.5-43c-5.3-3.4-12.4-1.9-15.8,3.5c-1.6,2.5-2.2,5.7-1.5,8.6v303.9c0,8.9-7.2,16.1-16.1,16.1h-31.8
+		c-8.9,0-16.1-7.2-16.1-16.1V192c1.4-6.2-2.5-12.3-8.7-13.6c-3-0.7-6.1-0.1-8.6,1.5l-94.5,43c-6.5,2.1-13.5-1.4-15.6-7.9
+		c-1.4-4.2-0.4-8.7,2.5-12L256,0l156.9,203c4.5,5.1,4,12.9-1.1,17.5C408.6,223.3,404,224.3,399.8,222.9z"/>
+</g>
+</svg>

src/styles.css

@@ -16,6 +16,7 @@ body {
     right:0;
     left:0;
     overflow: hidden;
+    background-color: rgb(37, 37, 37);
 }
 
 button{