osrm service, ol geojson interface, ol service

src/app/app.component.ts

@@ -1,13 +1,22 @@
-import { Component, AfterViewInit, ElementRef, ViewChild} from '@angular/core';
+import { Component, AfterViewInit} from '@angular/core';
 
 
 import { defaults as defaultControls } from 'ol/control';
+import GeoJSON from 'ol/format/GeoJSON';
+import { OpenLayersGeoJSON } from './interfaces/openlayersGeojson';
 import { fromLonLat } from 'ol/proj';
 import Map from 'ol/Map';
 import View from 'ol/View';
 import TileLayer from 'ol/layer/Tile';
 import XYZ from 'ol/source/XYZ';
 import ZoomToExtent from 'ol/control/ZoomToExtent';
+import Layer from 'ol/layer/Layer';
+import VectorLayer from 'ol/layer/Vector';
+import Draw from 'ol/interaction/Draw';
+import VectorSource from 'ol/source/Vector';
+import { wrapX } from 'ol/extent';
+import LineString from 'ol/geom/LineString';
+import { Osrm } from './interfaces/osrm';
 
 @Component({
   selector: 'app-root',
@@ -18,33 +27,11 @@ import ZoomToExtent from 'ol/control/ZoomToExtent';
 export class AppComponent implements AfterViewInit {
   title = "Street Map";
   map: Map;
-
-  @ViewChild("inputautocompleteList") autocompleteList: ElementRef;
-
+  vectorLayer = new VectorLayer;
+  features: GeoJSON;
 
   constructor() { }
   
-  updateAutoCompleteList(): void{
-    this.autocompleteList.nativeElement.innerHTML = "Fsd";
-  }
-
-  // Gets called in "app.component.html" when an input changes its value
-  getValue(valueFrom:string, valueTo:string): void{
-    console.log("From " + valueFrom + " to " + valueTo);
-
-    /*
-    this.nominatimService.sendQueryRequest(valueFrom)
-    .subscribe((response: Nominatim[]) => console.log(response));*/
-
-    
-
-    
-  }
-
-  ngOnInit() {
-    
-  }
-
   ngAfterViewInit() {
     this.map = new Map({
       target: 'map',
@@ -71,5 +58,20 @@ export class AppComponent implements AfterViewInit {
     });
     setTimeout(() => this.map.updateSize(), 200);
   }
+
+  drawPath(): void{
+
+   // this.features = new GeoJSON().readFeatures(new openLayersGeoJSON())
+
+    this.vectorLayer = new VectorLayer({
+      background: '#1a2b39',
+      source: new VectorSource({
+        url: 'http://router.project-osrm.org/route/v1/driving/-1.8744130630953275,52.45318441573963;-1.879401971863028,52.451059431849615;-1.8783612747652496,52.44962092302177;-1.882395317123648,52.44969938835112;-1.8824275036318268,52.452046744809195;-1.8794663448793851,52.45332825709778;-1.8898840446932288,52.454230523991356?overview=full&steps=true&geometries=geojson',
+        format: new GeoJSON({dataProjection: 'EPSG:4326', featureProjection: "EPSG:3857" }),
+      })
+    });
+
+    this.map.addLayer(this.vectorLayer);
+  }
 }
 

src/app/app.module.ts

@@ -3,11 +3,13 @@ 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/openLayersGeoJSON.ts

@@ -0,0 +1,29 @@
+interface OpenLayersGeometry{
+    coordinates: Array<Array<number>>;
+    type?: string;
+}
+
+interface OpenLayersProperties{
+    ECO_NAME?: string;
+    BIOME_NAME?: string;
+    REALM?: string;
+    NNH?: string;
+    NNH_NAME?: string;
+    COLOR?: string;
+    COLOR_BIO?: string;
+    COLOR_NNH?: string;
+}
+
+interface OpenLayersFeature{
+    type: string;
+    geometry: OpenLayersGeometry;
+    id: number;
+    properties: OpenLayersProperties;
+}
+
+export interface OpenLayersGeoJSON{
+    type: string;
+    features: Array<OpenLayersFeature>;
+    geometry: OpenLayersGeometry;
+    properties: OpenLayersProperties;
+}

src/app/interfaces/osrm.ts

@@ -0,0 +1,20 @@
+interface OsrmWaypoint{
+    hint?: string;
+    distance?: number;
+    location?: Array<number>;
+    name?: string;
+}
+
+interface OsrmGeometry{
+    coordinates?: Array<Array<number>>;
+}
+
+interface OsrmRoute{
+    geometry?: OsrmGeometry;
+}
+
+export interface Osrm{
+    code?: string;
+    waypoints?: Array<OsrmWaypoint>;
+    routes?: Array<OsrmRoute>;
+}

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

@@ -0,0 +1,16 @@
+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/open-layers.service.ts

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

src/app/osrm.service.ts

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

src/app/osrm/osrm.component.html

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

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,16 @@
+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/photon.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Photon, PhotonFeatureCollection } from './interfaces/photon';
+import { PhotonFeatureCollection } from './interfaces/photon';
 import { Observable } from 'rxjs';
 
 @Injectable({

src/app/search/search.component.css

@@ -64,4 +64,31 @@
   .autocomplete-active {
     background-color: DodgerBlue !important; 
     color: #ffffff; 
+}
+
+button{
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  border-radius: 0;
+  border: 0;
+  background-color: transparent;
+  color: white;
+  font-size: 13pt;
+  font-weight: bold;    
+}
+
+.routeBtn{
+  background-color: #28a745;
+  margin-top: 9px;
+  margin-left: 10px;
+  border-radius: 3px;
+  transition: 0.1s;
+  transition-timing-function: linear;
+  cursor:pointer;
+}
+
+.routeBtn:hover{
+  background-color: #55c56f;
 }

src/app/search/search.component.html

@@ -39,4 +39,5 @@
 
 		</div>
 	</div>
-</div>
+</div>
+<button class="routeBtn" (click)="getRoute()">Route</button>

src/app/search/search.component.ts

@@ -3,14 +3,16 @@ import { Nominatim } from '../interfaces/nominatim';
 import { NominatimService } from '../nominatim.service';
 import { Photon, PhotonFeatureCollection } from '../interfaces/photon';
 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',
   styleUrls: ['./search.component.css']
 })
 
-export class SearchComponent implements OnInit {
+export class SearchComponent{
   @ViewChild("inputautocompleteList") autocompleteList: ElementRef;
 
   nominatimItemsFrom: Nominatim[] = [];
@@ -30,7 +32,12 @@ export class SearchComponent implements OnInit {
   selectedPhotonFrom: Photon;
   selectedPhotonTo: Photon;
 
-  constructor(private nominatimService: NominatimService, private photonService: PhotonService) { }
+  constructor(
+    private nominatimService: NominatimService,
+    private photonService: PhotonService,
+    private osrmService: OsrmService,
+    private appComponent: AppComponent
+    ) { }
 
   selectPhoton(isFrom: boolean, p: Photon): void{
     if(isFrom){
@@ -88,7 +95,11 @@ export class SearchComponent implements OnInit {
       this.latTo = <number>this.photonItemsTo[0].geometry?.coordinates![1];
     }));
   }
-  ngOnInit(): void {
-  }
 
+  getRoute(): void{
+    console.log("getroute");
+    this.osrmService.sendQueryRequest(this.longFrom, this.latFrom, this.longTo, this.latFrom)
+    .subscribe((response: Osrm) => console.log(response)  );
+    this.appComponent.drawPath();
+  }
 }

src/styles.css

@@ -16,3 +16,7 @@ body {
     right:0;
     left:0; 
 }
+
+button{
+    outline: 0;
+}