Basic Visualization

src/app/app.component.ts

@@ -1,7 +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';
+import { RouteResponse } from './interfaces/routeResponse';
 
 
 @Component({
@@ -16,9 +16,9 @@ export class AppComponent {
   @ViewChild('mapRef') mapCompopnent!: MapComponent;
   @ViewChild('routeListRef') routeListCompopnent!: RouteListComponent;
 
-  onSearchResponse($event: Osrm): void {
+  onSearchResponse($event: RouteResponse): void {
 		this.mapCompopnent.drawPath($event);
-    this.routeListCompopnent.updateSidebar($event);
+    //this.routeListCompopnent.updateSidebar($event);
 	}
 
 }

src/app/interfaces/nominatim.ts

@@ -1,18 +0,0 @@
-/**
- * Nominatim JSON object to TypeScript interface
- */
-export interface Nominatim {
-    boundingbox?: Array<string>;
-    category?: string;
-    display_name?: string;
-    icon?: string;
-    importance?: number;
-    lat?: string;
-    licence?: string;
-    lon?: string;
-    osm_id?: number;
-    osm_type?: string;
-    place_id?: number;
-    place_rank?: number;
-    type?: string;
-}

src/app/interfaces/osrm.ts

@@ -1,47 +0,0 @@
-interface OsrmWaypoint {
-  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>>;
-}
-
-enum GeometryType {
-  LINE_STRING = "LineString"
-}
-
-interface OsrmRoute {
-  legs: Array<OsrmLeg>;
-  geometry: OsrmGeometry;
-}
-
-export interface Osrm {
-  code?: string;
-  waypoints?: Array<OsrmWaypoint>;
-  routes: Array<OsrmRoute>;
-}

src/app/interfaces/osrmRequest.ts

@@ -1,6 +0,0 @@
-export interface osrmRequest{
-  longFrom: number;
-  latFrom: number;
-  longTo: number;
-  latTo: number;
-}

src/app/interfaces/routeResponse.ts

@@ -0,0 +1,9 @@
+
+interface ResponseNode{
+  lat: number;
+  lon: number;
+}
+
+export interface RouteResponse{
+  nodes: Array<ResponseNode>;
+}

src/app/map/map.component.ts

@@ -9,9 +9,9 @@ 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, OsrmStep } from '../interfaces/osrm';
 import { Feature } from 'ol';
 import Geometry from 'ol/geom/Geometry';
+import { RouteResponse } from '../interfaces/routeResponse';
 
 @Component({
   selector: 'app-map',
@@ -49,12 +49,13 @@ export class MapComponent implements AfterViewInit {
     setTimeout(() => this.map.updateSize(), 200);
   }
 
-  drawPath(osrm: Osrm): void{
+  drawPath(routeResponse: RouteResponse): void{
     // https://routing.openstreetmap.de/routed-bike/route/v1/driving/8.6042708,53.5151533;13.6887164,51.0491468?overview=false&alternatives=true&steps=true
-    console.log(osrm);
+    console.log(routeResponse);
 
-    const coordinates = osrm.routes[0].geometry.coordinates || [];
+    const nodes = routeResponse.nodes || [];
-    const fCoordinates: number[][] = coordinates.map(coordinate => (transform(coordinate, 'EPSG:4326', 'EPSG:3857')));
+
+    const fCoordinates: number[][] = nodes.map(node => (transform([node.lon, node.lat], 'EPSG:4326', 'EPSG:3857')));
     const lineString: LineString = new LineString(fCoordinates);
     const feature: Feature<Geometry> = new Feature({ geometry: lineString });
     const vectorSource = new VectorSource({ features: [ feature ]});

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

@@ -2,17 +2,18 @@
   <h4>Your Route Steps</h4>
 
   <div class="route-list">
+    <!--
     <div *ngFor="let step of this.routeSteps" class="route-list-item" >
-      <!--Fork-->
+      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-->
+      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>
 </div>
 

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

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { Osrm, OsrmStep } from '../interfaces/osrm';
 
 @Component({
   selector: 'app-route-list',
@@ -7,7 +6,8 @@ import { Osrm, OsrmStep } from '../interfaces/osrm';
   styleUrls: ['./route-list.component.css']
 })
 export class RouteListComponent {
-
+  routeSteps = []
+  /*
   routeSteps: Array<OsrmStep> = [];
 
   updateSidebar(osrm: Osrm): void{
@@ -15,6 +15,6 @@ export class RouteListComponent {
     if (osrm.routes[0].legs[0].steps) {
       this.routeSteps = osrm.routes[0].legs[0].steps;
     }
-  }
+  }*/
 
 }

src/app/search/search.component.html

@@ -4,11 +4,6 @@
 	  	<input #inputFrom (click)="getValue(inputFrom.value, true)" (change)="getValue(inputFrom.value, true)" type="text" name="inputFrom" id="inputFrom" placeholder="From" value="{{ inputFromValue }}">
 		  <div #inputautocompleteList class="autocomplete-items autocomplete-items-from">
 
-			<div *ngFor="let item of nominatimItemsFrom" >
-				{{ item.display_name }}
-				<input type="hidden" value="{{ item.display_name }}">
-			</div>
-
       <!-- PHOTON -->
 			<div *ngFor="let item of photonItemsFrom"
 			(click)="selectPhoton(true, item);" >
@@ -30,11 +25,6 @@
 		<input #inputTo (click)="getValue(inputTo.value, false)" (change)="getValue(inputTo.value, false)" type="text" name="inputTo" id="inputTo" placeholder="To" value="{{ inputToValue }}">
 		<div #inputautocompleteList class="autocomplete-items autocomplete-items-to">
 
-			<div *ngFor="let item of nominatimItemsTo" >
-				{{ item.display_name }}
-				<input type="hidden" value="{{ item.display_name }}">
-			</div>
-
 			<div *ngFor="let item of photonItemsTo"
 			(click)="selectPhoton(false, item)">
         <!--IF TYPE == STREET-->

src/app/search/search.component.ts

@@ -1,11 +1,9 @@
 import { Component, ElementRef, Output, ViewChild } from '@angular/core';
-import { Nominatim } from '../interfaces/nominatim';
-import { NominatimService } from '../services/nominatim.service';
 import { Photon, PhotonFeatureCollection } from '../interfaces/photon';
 import { PhotonService } from '../services/photon.service';
-import { OsrmService } from '../services/osrm.service';
-import { Osrm } from '../interfaces/osrm';
 import { EventEmitter } from '@angular/core';
+import { PythonBackendService } from '../services/python-backend.service';
+import { RouteResponse } from '../interfaces/routeResponse';
 
 @Component({
   selector: 'app-search',
@@ -14,11 +12,10 @@ import { EventEmitter } from '@angular/core';
 })
 export class SearchComponent {
 
-  @Output() emitter = new EventEmitter<Osrm>();
+  @Output() emitter = new EventEmitter<RouteResponse>();
   @ViewChild("inputautocompleteList") autocompleteList: ElementRef;
 
-  nominatimItemsFrom: Nominatim[] = [];
+
-  nominatimItemsTo: Nominatim[] = [];
 
   photonItemsFrom: Photon[] = [];
   photonItemsTo: Photon[] = [];
@@ -35,9 +32,8 @@ export class SearchComponent {
   selectedPhotonTo: Photon;
 
   constructor(
-    private nominatimService: NominatimService,
     private photonService: PhotonService,
-    private osrmService: OsrmService,
+    private pythonBackendService: PythonBackendService,
   ) { }
 
   getFormattedPhotonValue(p: Photon): string{
@@ -115,8 +111,8 @@ export class SearchComponent {
   }
 
   getRoute(): void{
-    this.osrmService.sendQueryRequest("https://routing.openstreetmap.de/routed-bike/route/v1/driving/" + this.longFrom + "," + this.latFrom + ";" + this.longTo + "," + this.latTo)
+    this.pythonBackendService.sendQueryRequest(this.latFrom.toString(), this.longFrom.toString(), this.latTo.toString(), this.longTo.toString())
-      .subscribe((response: Osrm) => {
+      .subscribe((response: RouteResponse) => {
         this.emitter.emit(response);
         /*
         this.mapComponent.updateSidebar(response);

src/app/services/nominatim.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { NominatimService } from './nominatim.service';
-
-describe('NominatimService', () => {
-  let service: NominatimService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(NominatimService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

src/app/services/nominatim.service.ts

@@ -1,23 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Nominatim } from '../interfaces/nominatim';
-import { Observable } from 'rxjs';
-
-/**
- * communicates with Nominatim (https://nominatim.org/)
- */
-@Injectable({
-  providedIn: 'root'
-})
-export class NominatimService{
-
-  constructor(private http: HttpClient) { }
-
-  /**
-   * sends a query request to Nominatim and gets response (https://nominatim.org/release-docs/develop/api/Search/)
-   */
-  sendQueryRequest(queryString: string): Observable<Nominatim[]> {
-    return this.http.get<Nominatim[]>("https://nominatim.openstreetmap.org/search.php?format=jsonv2&q=" + queryString);
-  }
-
-}

src/app/services/open-layers.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { OpenLayersService } from './open-layers.service';
-
-describe('OpenLayersService', () => {
-  let service: OpenLayersService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(OpenLayersService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

src/app/services/open-layers.service.ts

@@ -1,11 +0,0 @@
-import { Injectable } from '@angular/core';
-import { OpenLayersGeoJSON } from './interfaces/openlayersGeojson';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class OpenLayersService {
-
-  constructor() { }
-
-}

src/app/services/osrm.service.ts

@@ -1,25 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { Osrm } from '../interfaces/osrm';
-
-/**
- * http://router.project-osrm.org/route/v1/driving/13.388860,52.517037;13.397634,52.529407;13.428555,52.523219?overview=false&steps=true&geometries=geojson
- */
-@Injectable({
-  providedIn: 'root'
-})
-export class OsrmService{
-
-  reqParam: string = "?overview=full&alternatives=false&steps=true&geometries=geojson";
-  constructor(private http: HttpClient) { }
-
-  /**
-   * sends a query request to Osrm and gets response (http://project-osrm.org/docs/v5.24.0/api/?language=cURL#table-service)
-   */
-  sendQueryRequest(url: string): Observable<Osrm> {
-    console.log(url + this.reqParam);
-    return this.http.get<Osrm>(url + this.reqParam);
-  }
-
-}

src/app/services/python-backend.service.spec.ts

@@ -1,13 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 
-import { OsrmService } from './osrm.service';
+import { PythonBackendService } from './python-backend.service';
 
-describe('OsrmService', () => {
+describe('PythonBackendService', () => {
-  let service: OsrmService;
+  let service: PythonBackendService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
-    service = TestBed.inject(OsrmService);
+    service = TestBed.inject(PythonBackendService);
   });
 
   it('should be created', () => {

src/app/services/python-backend.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { RouteResponse } from '../interfaces/routeResponse';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PythonBackendService {
+  url: string = "http://127.0.0.1:5555/getRouteByCoordinates/"
+
+  constructor(private http: HttpClient) { }
+
+  /**
+   * sends a query request to Osrm and gets response (http://project-osrm.org/docs/v5.24.0/api/?language=cURL#table-service)
+   */
+  sendQueryRequest(fromWayLat: string, fromWayLon: string, toWayLat: string, toWayLon: string): Observable<RouteResponse> {
+    console.log(this.url + fromWayLat + "/" + fromWayLon + "/" + toWayLat + "/" + toWayLon);
+    return this.http.get<RouteResponse>(this.url + fromWayLat + "/" + fromWayLon + "/" + toWayLat + "/" + toWayLon);
+  }
+}