From 42043fd7b549b390ce60841c6cd6b0dea9fbf298 Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Fri, 14 Jan 2022 13:25:46 +0100 Subject: [PATCH 01/14] generated osrm service --- src/app/osrm.service.spec.ts | 16 ++++++++++++++++ src/app/osrm.service.ts | 11 +++++++++++ 2 files changed, 27 insertions(+) create mode 100644 src/app/osrm.service.spec.ts create mode 100644 src/app/osrm.service.ts diff --git a/src/app/osrm.service.spec.ts b/src/app/osrm.service.spec.ts new file mode 100644 index 0000000..833485d --- /dev/null +++ b/src/app/osrm.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { OsrmService } from './osrm.service'; + +describe('OsrmService', () => { + let service: OsrmService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(OsrmService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/osrm.service.ts b/src/app/osrm.service.ts new file mode 100644 index 0000000..ab5e0ec --- /dev/null +++ b/src/app/osrm.service.ts @@ -0,0 +1,11 @@ +import { Injectable } from '@angular/core'; + +@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 { + + constructor() { } +} From 9f69b555db97e0ead77162a1bd05369ca29f6851 Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Wed, 19 Jan 2022 13:38:49 +0100 Subject: [PATCH 02/14] osrm service, ol geojson interface, ol service --- src/app/app.component.ts | 52 +++++++++++++------------ src/app/app.module.ts | 2 + src/app/interfaces/openLayersGeoJSON.ts | 29 ++++++++++++++ src/app/interfaces/osrm.ts | 20 ++++++++++ src/app/open-layers.service.spec.ts | 16 ++++++++ src/app/open-layers.service.ts | 11 ++++++ src/app/osrm.service.ts | 14 +++++-- src/app/osrm/osrm.component.css | 0 src/app/osrm/osrm.component.html | 1 + src/app/osrm/osrm.component.spec.ts | 25 ++++++++++++ src/app/osrm/osrm.component.ts | 16 ++++++++ src/app/photon.service.ts | 2 +- src/app/search/search.component.css | 27 +++++++++++++ src/app/search/search.component.html | 3 +- src/app/search/search.component.ts | 21 +++++++--- src/styles.css | 4 ++ 16 files changed, 208 insertions(+), 35 deletions(-) create mode 100644 src/app/interfaces/openLayersGeoJSON.ts create mode 100644 src/app/interfaces/osrm.ts create mode 100644 src/app/open-layers.service.spec.ts create mode 100644 src/app/open-layers.service.ts create mode 100644 src/app/osrm/osrm.component.css create mode 100644 src/app/osrm/osrm.component.html create mode 100644 src/app/osrm/osrm.component.spec.ts create mode 100644 src/app/osrm/osrm.component.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index dc78066..7874672 100644 --- a/src/app/app.component.ts +++ b/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); + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6ce9c83..50a8305 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/interfaces/openLayersGeoJSON.ts b/src/app/interfaces/openLayersGeoJSON.ts new file mode 100644 index 0000000..b3d1dbf --- /dev/null +++ b/src/app/interfaces/openLayersGeoJSON.ts @@ -0,0 +1,29 @@ +interface OpenLayersGeometry{ + coordinates: Array>; + 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; + geometry: OpenLayersGeometry; + properties: OpenLayersProperties; +} \ No newline at end of file diff --git a/src/app/interfaces/osrm.ts b/src/app/interfaces/osrm.ts new file mode 100644 index 0000000..4aa9ac9 --- /dev/null +++ b/src/app/interfaces/osrm.ts @@ -0,0 +1,20 @@ +interface OsrmWaypoint{ + hint?: string; + distance?: number; + location?: Array; + name?: string; +} + +interface OsrmGeometry{ + coordinates?: Array>; +} + +interface OsrmRoute{ + geometry?: OsrmGeometry; +} + +export interface Osrm{ + code?: string; + waypoints?: Array; + routes?: Array; +} \ No newline at end of file diff --git a/src/app/open-layers.service.spec.ts b/src/app/open-layers.service.spec.ts new file mode 100644 index 0000000..4639485 --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/open-layers.service.ts b/src/app/open-layers.service.ts new file mode 100644 index 0000000..d2f5bc7 --- /dev/null +++ b/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() { } + +} diff --git a/src/app/osrm.service.ts b/src/app/osrm.service.ts index ab5e0ec..e6507a2 100644 --- a/src/app/osrm.service.ts +++ b/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 { + console.log("http://router.project-osrm.org/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&steps=true&geometries=geojson") + return this.http.get("http://router.project-osrm.org/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&steps=true&geometries=geojson"); + } +} \ No newline at end of file diff --git a/src/app/osrm/osrm.component.css b/src/app/osrm/osrm.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/osrm/osrm.component.html b/src/app/osrm/osrm.component.html new file mode 100644 index 0000000..0978384 --- /dev/null +++ b/src/app/osrm/osrm.component.html @@ -0,0 +1 @@ +

osrm works!

diff --git a/src/app/osrm/osrm.component.spec.ts b/src/app/osrm/osrm.component.spec.ts new file mode 100644 index 0000000..b4a0751 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ OsrmComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(OsrmComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/osrm/osrm.component.ts b/src/app/osrm/osrm.component.ts new file mode 100644 index 0000000..030faeb --- /dev/null +++ b/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 { + } +} diff --git a/src/app/photon.service.ts b/src/app/photon.service.ts index 42aa3b1..705fadc 100644 --- a/src/app/photon.service.ts +++ b/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({ diff --git a/src/app/search/search.component.css b/src/app/search/search.component.css index f39611f..5efcbad 100644 --- a/src/app/search/search.component.css +++ b/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; } \ No newline at end of file diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html index d512acb..9318092 100644 --- a/src/app/search/search.component.html +++ b/src/app/search/search.component.html @@ -39,4 +39,5 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts index 2310d5f..6aa580a 100644 --- a/src/app/search/search.component.ts +++ b/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 = 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(); + } } diff --git a/src/styles.css b/src/styles.css index a7dd6ba..c5a586b 100644 --- a/src/styles.css +++ b/src/styles.css @@ -16,3 +16,7 @@ body { right:0; left:0; } + +button{ + outline: 0; +} \ No newline at end of file From 32ead5bcc67ab70b7da89d49deafe228ecf64a67 Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Wed, 19 Jan 2022 14:53:08 +0100 Subject: [PATCH 03/14] line is now "incorrectly" showed on map --- src/app/app.component.ts | 27 ++++++++++++++++++++++----- src/app/interfaces/osrm.ts | 9 +++++++-- src/app/search/search.component.ts | 7 +++++-- 3 files changed, 34 insertions(+), 9 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 7874672..372106a 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -4,7 +4,7 @@ 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 { fromLonLat, transform } from 'ol/proj'; import Map from 'ol/Map'; import View from 'ol/View'; import TileLayer from 'ol/layer/Tile'; @@ -17,6 +17,8 @@ import VectorSource from 'ol/source/Vector'; import { wrapX } from 'ol/extent'; import LineString from 'ol/geom/LineString'; import { Osrm } from './interfaces/osrm'; +import { Feature } from 'ol'; +import Geometry from 'ol/geom/Geometry'; @Component({ selector: 'app-root', @@ -27,8 +29,6 @@ import { Osrm } from './interfaces/osrm'; export class AppComponent implements AfterViewInit { title = "Street Map"; map: Map; - vectorLayer = new VectorLayer; - features: GeoJSON; constructor() { } @@ -59,10 +59,27 @@ export class AppComponent implements AfterViewInit { setTimeout(() => this.map.updateSize(), 200); } - drawPath(): void{ + drawPath(osrm: Osrm): void{ + console.log(osrm) //https://routing.openstreetmap.de/routed-bike/route/v1/driving/8.6042708,53.5151533;13.6887164,51.0491468?overview=false&alternatives=true&steps=true + + const coordinates = osrm.routes[0].geometry.coordinates || []; + const f_coordinates: Array> = [] + coordinates.forEach(coordinate => + { + f_coordinates.push(transform(coordinate, 'EPSG:4326', 'EPSG:3857')) + } + ); + + const lineString: LineString = new LineString(f_coordinates); + const feature: Feature = new Feature({ geometry: lineString }); + const vectorSource = new VectorSource({ features: [ feature ]}); + console.log(feature.getGeometry()); + const vectorLayer = new VectorLayer({ source: vectorSource }); + this.map.addLayer(vectorLayer); // this.features = new GeoJSON().readFeatures(new openLayersGeoJSON()) + /* this.vectorLayer = new VectorLayer({ background: '#1a2b39', source: new VectorSource({ @@ -71,7 +88,7 @@ export class AppComponent implements AfterViewInit { }) }); - this.map.addLayer(this.vectorLayer); + this.map.addLayer(this.vectorLayer);*/ } } diff --git a/src/app/interfaces/osrm.ts b/src/app/interfaces/osrm.ts index 4aa9ac9..6ed2f5b 100644 --- a/src/app/interfaces/osrm.ts +++ b/src/app/interfaces/osrm.ts @@ -6,15 +6,20 @@ interface OsrmWaypoint{ } interface OsrmGeometry{ + type: GeometryType; coordinates?: Array>; } +enum GeometryType { + LINE_STRING = "LineString" +} + interface OsrmRoute{ - geometry?: OsrmGeometry; + geometry: OsrmGeometry; } export interface Osrm{ code?: string; waypoints?: Array; - routes?: Array; + routes: Array; } \ No newline at end of file diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts index 6aa580a..f5b02d3 100644 --- a/src/app/search/search.component.ts +++ b/src/app/search/search.component.ts @@ -99,7 +99,10 @@ export class SearchComponent{ 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(); + .subscribe((response: Osrm) => { + console.log(response); + this.appComponent.drawPath(response); + } + ); } } From 239409f643eae981577c6e7760e1be562bd77a3a Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Fri, 21 Jan 2022 10:47:41 +0100 Subject: [PATCH 04/14] added Debug Messages --- src/app/osrm.service.ts | 7 ++++--- src/app/search/search.component.ts | 9 +++++++-- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/app/osrm.service.ts b/src/app/osrm.service.ts index e6507a2..ade266f 100644 --- a/src/app/osrm.service.ts +++ b/src/app/osrm.service.ts @@ -7,13 +7,14 @@ import { Osrm } from './interfaces/osrm'; 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 +// 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 export class OsrmService{ 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(longFrom: number, latFrom: number, longTo: number, latTo: number): Observable { - console.log("http://router.project-osrm.org/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&steps=true&geometries=geojson") - return this.http.get("http://router.project-osrm.org/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&steps=true&geometries=geojson"); + console.log(longTo) + console.log("https://routing.openstreetmap.de/routed-bike/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&steps=true&alternatives=true&geometries=geojson") + return this.http.get("https://routing.openstreetmap.de/routed-bike/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&steps=true&alternatives=true&geometries=geojson"); } } \ No newline at end of file diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts index f5b02d3..0578e00 100644 --- a/src/app/search/search.component.ts +++ b/src/app/search/search.component.ts @@ -68,7 +68,7 @@ export class SearchComponent{ // 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.updateAutoCompleteList([{display_name: 'Hallo'}, {display_name: 'Test2'}], [{display_name: 'Halload'}, {display_name: 'Test4'}]); /* @@ -86,14 +86,19 @@ export class SearchComponent{ this.photonItemsFrom.push(feature); this.longFrom = this.photonItemsFrom[0].geometry?.coordinates![0]; this.latFrom = this.photonItemsFrom[0].geometry?.coordinates![1]; + console.log("longFrom: " + this.longFrom) + console.log("latFrom: " + this.latFrom) })); this.photonService.sendQueryRequest(valueTo) .subscribe((response: PhotonFeatureCollection) => response.features?.forEach(feature => { this.photonItemsTo.push(feature); this.longTo = this.photonItemsTo[0].geometry?.coordinates![0]; - this.latTo = this.photonItemsTo[0].geometry?.coordinates![1]; + this.latTo = this.photonItemsTo[0].geometry?.coordinates![1] + console.log("LongTo: " + this.longTo) + console.log("LatTo: " + this.latTo) })); + } getRoute(): void{ From b32fa8055a95b2b7418f123cb0c6584036ebedfc Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Fri, 21 Jan 2022 10:49:42 +0100 Subject: [PATCH 05/14] clean up --- src/app/app.component.ts | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 372106a..1b736c5 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,20 +1,13 @@ 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, transform } 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'; import { Feature } from 'ol'; @@ -31,7 +24,7 @@ export class AppComponent implements AfterViewInit { map: Map; constructor() { } - + ngAfterViewInit() { this.map = new Map({ target: 'map', @@ -61,7 +54,7 @@ export class AppComponent implements AfterViewInit { drawPath(osrm: Osrm): void{ console.log(osrm) //https://routing.openstreetmap.de/routed-bike/route/v1/driving/8.6042708,53.5151533;13.6887164,51.0491468?overview=false&alternatives=true&steps=true - + const coordinates = osrm.routes[0].geometry.coordinates || []; const f_coordinates: Array> = [] coordinates.forEach(coordinate => From 7bbfd125b0fbfccb054bd6a0e3b4d5e020130f7b Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Fri, 21 Jan 2022 13:54:27 +0100 Subject: [PATCH 06/14] updated search component --- src/app/interfaces/photon.ts | 5 +++- src/app/osrm.service.ts | 8 +++--- src/app/search/search.component.css | 28 ++++++++++++--------- src/app/search/search.component.html | 37 ++++++++++++++++++---------- src/app/search/search.component.ts | 4 +++ 5 files changed, 52 insertions(+), 30 deletions(-) diff --git a/src/app/interfaces/photon.ts b/src/app/interfaces/photon.ts index 301025f..652c545 100644 --- a/src/app/interfaces/photon.ts +++ b/src/app/interfaces/photon.ts @@ -15,6 +15,9 @@ interface PhotonProperties{ type?: string; postcode?: string; city?: string; + housenumber?: number; + street?: string; + state?: string; } export interface Photon{ @@ -26,4 +29,4 @@ export interface Photon{ export interface PhotonFeatureCollection{ features?: Array; type?: string; -} \ No newline at end of file +} diff --git a/src/app/osrm.service.ts b/src/app/osrm.service.ts index ade266f..f6b6a01 100644 --- a/src/app/osrm.service.ts +++ b/src/app/osrm.service.ts @@ -12,9 +12,9 @@ export class OsrmService{ 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(longFrom: number, latFrom: number, longTo: number, latTo: number): Observable { + sendQueryRequest(longFrom: number, latFrom: number, longTo: number, latTo: number): Observable { console.log(longTo) - console.log("https://routing.openstreetmap.de/routed-bike/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&steps=true&alternatives=true&geometries=geojson") - return this.http.get("https://routing.openstreetmap.de/routed-bike/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&steps=true&alternatives=true&geometries=geojson"); + console.log("https://routing.openstreetmap.de/routed-bike/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&alternatives=false&steps=true&geometries=geojson") + return this.http.get("https://routing.openstreetmap.de/routed-bike/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&alternatives=false&steps=true&geometries=geojson"); } -} \ No newline at end of file +} diff --git a/src/app/search/search.component.css b/src/app/search/search.component.css index 5efcbad..6b2ddd5 100644 --- a/src/app/search/search.component.css +++ b/src/app/search/search.component.css @@ -22,6 +22,7 @@ font-weight: bold; font-family: 'Roboto'; padding: 5px; + width: 350px; } .autocomplete { @@ -29,7 +30,7 @@ display: inline-block; color: black; } - + .autocomplete-items { visibility: visible; /* without debugging it should be display:none */ position: absolute; @@ -41,29 +42,32 @@ top: 100%; left: 0; right: 0; - width: 210px; + width: 350px; margin-left: 30px; margin-top: 5px; } - + .autocomplete-items div { padding: 10px; font-weight: normal; font-size: 11pt; cursor: pointer; - background-color: #fff; - border-bottom: 1px solid #d4d4d4; + background-color: #fff; + border-bottom: 1px solid #d4d4d4; +} + +.autocomplete-items div label{ + cursor: pointer; } - /*when hovering an item:*/ .autocomplete-items div:hover { - background-color: #e9e9e9; + background-color: #e9e9e9; } - + /*when navigating through the items using the arrow keys:*/ .autocomplete-active { - background-color: DodgerBlue !important; - color: #ffffff; + background-color: DodgerBlue !important; + color: #ffffff; } button{ @@ -76,7 +80,7 @@ button{ background-color: transparent; color: white; font-size: 13pt; - font-weight: bold; + font-weight: bold; } .routeBtn{ @@ -91,4 +95,4 @@ button{ .routeBtn:hover{ background-color: #55c56f; -} \ No newline at end of file +} diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html index 9318092..29eb8e8 100644 --- a/src/app/search/search.component.html +++ b/src/app/search/search.component.html @@ -1,15 +1,8 @@
-
- - - - - -
- +
{{ item.display_name }} @@ -17,8 +10,17 @@
- {{ item.properties.name }} {{item.properties.postcode}} {{item.properties.city}} {{item.properties.countrycode}} -
+ + + + +
@@ -33,11 +35,20 @@
- {{ item.properties.name }} {{item.properties.postcode}} {{item.properties.city}} {{item.properties.countrycode}} - + + + + +
- \ No newline at end of file + diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts index 0578e00..b296ab4 100644 --- a/src/app/search/search.component.ts +++ b/src/app/search/search.component.ts @@ -46,6 +46,10 @@ export class SearchComponent{ this.latFrom = p.geometry?.coordinates[1]; this.inputFromValue = p.properties.name + if(p.properties.housenumber){ + this.inputFromValue += " " + p.properties.housenumber; + } + if(p.properties.postcode){ this.inputFromValue += " " + p.properties.postcode; } From 428e746f251ba2a4b0dac0cd84ce444862905a16 Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Wed, 26 Jan 2022 09:52:11 +0100 Subject: [PATCH 07/14] fixed route --- src/app/osrm.service.ts | 2 +- src/app/photon.service.ts | 6 +++--- src/app/search/search.component.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/osrm.service.ts b/src/app/osrm.service.ts index f6b6a01..cc7d6f2 100644 --- a/src/app/osrm.service.ts +++ b/src/app/osrm.service.ts @@ -13,7 +13,7 @@ export class OsrmService{ // 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 { - console.log(longTo) + console.log(latTo) console.log("https://routing.openstreetmap.de/routed-bike/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&alternatives=false&steps=true&geometries=geojson") return this.http.get("https://routing.openstreetmap.de/routed-bike/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&alternatives=false&steps=true&geometries=geojson"); } diff --git a/src/app/photon.service.ts b/src/app/photon.service.ts index 705fadc..6b8f366 100644 --- a/src/app/photon.service.ts +++ b/src/app/photon.service.ts @@ -12,7 +12,7 @@ export class PhotonService{ constructor(private http: HttpClient) { } // sends a query request to Photon and gets response (https://photon.komoot.io/) - sendQueryRequest(q: string): Observable { - return this.http.get("https://photon.komoot.io/api/?q=" + q + "&limit=10"); + sendQueryRequest(q: string): Observable { + return this.http.get("https://photon.komoot.io/api/?q=" + q + "&limit=10&zoom=12"); } -} \ No newline at end of file +} diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts index b296ab4..eaef405 100644 --- a/src/app/search/search.component.ts +++ b/src/app/search/search.component.ts @@ -106,8 +106,8 @@ export class SearchComponent{ } getRoute(): void{ - console.log("getroute"); - this.osrmService.sendQueryRequest(this.longFrom, this.latFrom, this.longTo, this.latFrom) + + this.osrmService.sendQueryRequest(this.longFrom, this.latFrom, this.longTo, this.latTo) .subscribe((response: Osrm) => { console.log(response); this.appComponent.drawPath(response); From 6f8c33e45edf1d54ea18f0cb2b11f7705014f7b0 Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Wed, 26 Jan 2022 11:22:32 +0100 Subject: [PATCH 08/14] added sidebar with route information --- src/app/app.component.css | 50 +++++++++++++++++++++++++---- src/app/app.component.html | 13 +++++++- src/app/app.component.ts | 19 +++++++++-- src/app/app.module.ts | 2 -- src/app/interfaces/osrm.ts | 46 +++++++++++++++++++------- src/app/osrm/osrm.component.css | 0 src/app/osrm/osrm.component.html | 1 - src/app/osrm/osrm.component.spec.ts | 25 --------------- src/app/osrm/osrm.component.ts | 16 --------- src/app/search/search.component.ts | 7 ++-- src/styles.css | 5 +-- 11 files changed, 113 insertions(+), 71 deletions(-) delete mode 100644 src/app/osrm/osrm.component.css delete mode 100644 src/app/osrm/osrm.component.html delete mode 100644 src/app/osrm/osrm.component.spec.ts delete mode 100644 src/app/osrm/osrm.component.ts diff --git a/src/app/app.component.css b/src/app/app.component.css index d28069b..5073e54 100644 --- a/src/app/app.component.css +++ b/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; +} diff --git a/src/app/app.component.html b/src/app/app.component.html index b78cf35..ae52aa1 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -3,4 +3,15 @@

{{title}}

-
\ No newline at end of file +
+ +
+

Your Route Steps

+ +
+
+

{{step.maneuver?.type }} {{step.maneuver?.modifier }}

+
+
+
+ diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 1b736c5..e433691 100644 --- a/src/app/app.component.ts +++ b/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 = [] constructor() { } @@ -66,8 +67,11 @@ export class AppComponent implements AfterViewInit { const lineString: LineString = new LineString(f_coordinates); const feature: Feature = 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) + } + } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 50a8305..6ce9c83 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/interfaces/osrm.ts b/src/app/interfaces/osrm.ts index 6ed2f5b..7fd8114 100644 --- a/src/app/interfaces/osrm.ts +++ b/src/app/interfaces/osrm.ts @@ -1,25 +1,47 @@ interface OsrmWaypoint{ - hint?: string; - distance?: number; - location?: Array; - name?: string; + hint?: string; + distance?: number; + location?: Array; + 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; +weight?: number; +distance?: number; +summary?: string; +duration?: number; } interface OsrmGeometry{ - type: GeometryType; - coordinates?: Array>; + type: GeometryType; + coordinates?: Array>; } enum GeometryType { - LINE_STRING = "LineString" + LINE_STRING = "LineString" } interface OsrmRoute{ - geometry: OsrmGeometry; + legs: Array; + geometry: OsrmGeometry; } export interface Osrm{ - code?: string; - waypoints?: Array; - routes: Array; -} \ No newline at end of file + code?: string; + waypoints?: Array; + routes: Array; +} diff --git a/src/app/osrm/osrm.component.css b/src/app/osrm/osrm.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/osrm/osrm.component.html b/src/app/osrm/osrm.component.html deleted file mode 100644 index 0978384..0000000 --- a/src/app/osrm/osrm.component.html +++ /dev/null @@ -1 +0,0 @@ -

osrm works!

diff --git a/src/app/osrm/osrm.component.spec.ts b/src/app/osrm/osrm.component.spec.ts deleted file mode 100644 index b4a0751..0000000 --- a/src/app/osrm/osrm.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { OsrmComponent } from './osrm.component'; - -describe('OsrmComponent', () => { - let component: OsrmComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ OsrmComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(OsrmComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/osrm/osrm.component.ts b/src/app/osrm/osrm.component.ts deleted file mode 100644 index 030faeb..0000000 --- a/src/app/osrm/osrm.component.ts +++ /dev/null @@ -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 { - } -} diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts index eaef405..d5801f4 100644 --- a/src/app/search/search.component.ts +++ b/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); } ); diff --git a/src/styles.css b/src/styles.css index c5a586b..6b98590 100644 --- a/src/styles.css +++ b/src/styles.css @@ -14,9 +14,10 @@ body { top:0; bottom:0; right:0; - left:0; + left:0; + overflow: hidden; } button{ outline: 0; -} \ No newline at end of file +} From 519da1dd605e5cada32f9d158847e53de7beb1ce Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Wed, 26 Jan 2022 11:34:08 +0100 Subject: [PATCH 09/14] updated css --- src/app/app.component.css | 1 + src/app/app.component.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/app.component.css b/src/app/app.component.css index 5073e54..3139443 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -54,5 +54,6 @@ header p{ .route-list div p{ display: inline-block; + text-transform: capitalize; padding-left: 40px; } diff --git a/src/app/app.component.html b/src/app/app.component.html index ae52aa1..b38fcf1 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -10,7 +10,7 @@
-

{{step.maneuver?.type }} {{step.maneuver?.modifier }}

+

{{step.maneuver?.type }} {{step.maneuver?.modifier }} on {{step.name }}

From 33aa62ae09e1703e8be79c54934e9420ce1d112d Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Wed, 26 Jan 2022 11:38:47 +0100 Subject: [PATCH 10/14] moved serives into subfolder services --- src/app/search/search.component.ts | 7 ++++--- src/app/{ => services}/nominatim.service.spec.ts | 0 src/app/{ => services}/nominatim.service.ts | 6 +++--- src/app/{ => services}/open-layers.service.spec.ts | 0 src/app/{ => services}/open-layers.service.ts | 0 src/app/{ => services}/osrm.service.spec.ts | 0 src/app/{ => services}/osrm.service.ts | 2 +- src/app/{ => services}/photon.service.spec.ts | 0 src/app/{ => services}/photon.service.ts | 2 +- 9 files changed, 9 insertions(+), 8 deletions(-) rename src/app/{ => services}/nominatim.service.spec.ts (100%) rename src/app/{ => services}/nominatim.service.ts (82%) rename src/app/{ => services}/open-layers.service.spec.ts (100%) rename src/app/{ => services}/open-layers.service.ts (100%) rename src/app/{ => services}/osrm.service.spec.ts (100%) rename src/app/{ => services}/osrm.service.ts (96%) rename src/app/{ => services}/photon.service.spec.ts (100%) rename src/app/{ => services}/photon.service.ts (89%) diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts index d5801f4..0def0e0 100644 --- a/src/app/search/search.component.ts +++ b/src/app/search/search.component.ts @@ -1,13 +1,14 @@ import { Component, OnInit, ElementRef, ViewChild} from '@angular/core'; import { Nominatim } from '../interfaces/nominatim'; -import { NominatimService } from '../nominatim.service'; +import { NominatimService } from '../services/nominatim.service'; import { Photon, PhotonFeatureCollection } from '../interfaces/photon'; -import { PhotonService } from '../photon.service'; -import { OsrmService } from '../osrm.service'; +import { PhotonService } from '../services/photon.service'; +import { OsrmService } from '../services/osrm.service'; import { Osrm } from '../interfaces/osrm'; import { AppComponent } from '../app.component'; + @Component({ selector: 'app-search', templateUrl: './search.component.html', diff --git a/src/app/nominatim.service.spec.ts b/src/app/services/nominatim.service.spec.ts similarity index 100% rename from src/app/nominatim.service.spec.ts rename to src/app/services/nominatim.service.spec.ts diff --git a/src/app/nominatim.service.ts b/src/app/services/nominatim.service.ts similarity index 82% rename from src/app/nominatim.service.ts rename to src/app/services/nominatim.service.ts index c230c35..319b62c 100644 --- a/src/app/nominatim.service.ts +++ b/src/app/services/nominatim.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; -import { Nominatim } from './interfaces/nominatim'; +import { Nominatim } from '../interfaces/nominatim'; import { Observable } from 'rxjs'; @Injectable({ @@ -12,7 +12,7 @@ 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(q: string): Observable { + sendQueryRequest(q: string): Observable { return this.http.get("https://nominatim.openstreetmap.org/search.php?format=jsonv2&q=" + q); } -} \ No newline at end of file +} diff --git a/src/app/open-layers.service.spec.ts b/src/app/services/open-layers.service.spec.ts similarity index 100% rename from src/app/open-layers.service.spec.ts rename to src/app/services/open-layers.service.spec.ts diff --git a/src/app/open-layers.service.ts b/src/app/services/open-layers.service.ts similarity index 100% rename from src/app/open-layers.service.ts rename to src/app/services/open-layers.service.ts diff --git a/src/app/osrm.service.spec.ts b/src/app/services/osrm.service.spec.ts similarity index 100% rename from src/app/osrm.service.spec.ts rename to src/app/services/osrm.service.spec.ts diff --git a/src/app/osrm.service.ts b/src/app/services/osrm.service.ts similarity index 96% rename from src/app/osrm.service.ts rename to src/app/services/osrm.service.ts index cc7d6f2..2b58545 100644 --- a/src/app/osrm.service.ts +++ b/src/app/services/osrm.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; -import { Osrm } from './interfaces/osrm'; +import { Osrm } from '../interfaces/osrm'; @Injectable({ providedIn: 'root' diff --git a/src/app/photon.service.spec.ts b/src/app/services/photon.service.spec.ts similarity index 100% rename from src/app/photon.service.spec.ts rename to src/app/services/photon.service.spec.ts diff --git a/src/app/photon.service.ts b/src/app/services/photon.service.ts similarity index 89% rename from src/app/photon.service.ts rename to src/app/services/photon.service.ts index 6b8f366..3e0a3f5 100644 --- a/src/app/photon.service.ts +++ b/src/app/services/photon.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; -import { PhotonFeatureCollection } from './interfaces/photon'; +import { PhotonFeatureCollection } from '../interfaces/photon'; import { Observable } from 'rxjs'; @Injectable({ From 8a98e9dbe6c7bb4758a1848baf54da67c52932f4 Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Wed, 26 Jan 2022 11:51:04 +0100 Subject: [PATCH 11/14] clean up --- src/app/app.component.css | 45 -------------- src/app/app.component.html | 12 +--- src/app/app.component.ts | 92 +--------------------------- src/app/app.module.ts | 2 + src/app/map/map.component.css | 45 ++++++++++++++ src/app/map/map.component.html | 11 ++++ src/app/map/map.component.spec.ts | 25 ++++++++ src/app/map/map.component.ts | 97 ++++++++++++++++++++++++++++++ src/app/search/search.component.ts | 11 ++-- src/app/services/osrm.service.ts | 1 - 10 files changed, 190 insertions(+), 151 deletions(-) create mode 100644 src/app/map/map.component.css create mode 100644 src/app/map/map.component.html create mode 100644 src/app/map/map.component.spec.ts create mode 100644 src/app/map/map.component.ts diff --git a/src/app/app.component.css b/src/app/app.component.css index 3139443..a985608 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -12,48 +12,3 @@ header p{ display:block; float:right; } - -#map{ - 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; - text-transform: capitalize; - padding-left: 40px; -} diff --git a/src/app/app.component.html b/src/app/app.component.html index b38fcf1..c164427 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -3,15 +3,5 @@

{{title}}

-
- -
-

Your Route Steps

- -
-
-

{{step.maneuver?.type }} {{step.maneuver?.modifier }} on {{step.name }}

-
-
-
+ diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e433691..170febc 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,17 +1,5 @@ -import { Component, AfterViewInit} from '@angular/core'; -import { defaults as defaultControls } from 'ol/control'; -import { fromLonLat, transform } 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 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 { Component, } from '@angular/core'; + @Component({ selector: 'app-root', @@ -19,82 +7,8 @@ import Geometry from 'ol/geom/Geometry'; styleUrls: ['./app.component.css', '../../node_modules/ol/ol.css'] }) -export class AppComponent implements AfterViewInit { +export class AppComponent { title = "Street Map"; - map: Map; - routeSteps: Array = [] - - constructor() { } - - ngAfterViewInit() { - this.map = new Map({ - target: 'map', - layers: [ - new TileLayer({ - source: new XYZ({ - url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png' - }) - }) - ], - view: new View({ - projection: 'EPSG:3857', - center: fromLonLat([8, 52]), - zoom: 2 - }), - controls: defaultControls().extend([ - new ZoomToExtent({ - extent: [ - 813079.7791264898, 5929220.284081122, - 848966.9639063801, 5936863.986909639 - ] - }) - ]) - }); - setTimeout(() => this.map.updateSize(), 200); - } - - drawPath(osrm: Osrm): void{ - console.log(osrm) //https://routing.openstreetmap.de/routed-bike/route/v1/driving/8.6042708,53.5151533;13.6887164,51.0491468?overview=false&alternatives=true&steps=true - - const coordinates = osrm.routes[0].geometry.coordinates || []; - const f_coordinates: Array> = [] - coordinates.forEach(coordinate => - { - f_coordinates.push(transform(coordinate, 'EPSG:4326', 'EPSG:3857')) - } - ); - - const lineString: LineString = new LineString(f_coordinates); - const feature: Feature = new Feature({ geometry: lineString }); - const vectorSource = new VectorSource({ features: [ feature ]}); - - const vectorLayer = new VectorLayer({ - - source: vectorSource, - }); - this.map.addLayer(vectorLayer); - - // 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);*/ - } - - 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) - } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6ce9c83..95733c0 100644 --- a/src/app/app.module.ts +++ b/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 { MapComponent } from './map/map.component'; @NgModule({ declarations: [ AppComponent, SearchComponent, + MapComponent, ], imports: [ BrowserModule, diff --git a/src/app/map/map.component.css b/src/app/map/map.component.css new file mode 100644 index 0000000..e3e09c9 --- /dev/null +++ b/src/app/map/map.component.css @@ -0,0 +1,45 @@ + +#map{ + 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; +text-transform: capitalize; +padding-left: 40px; +} diff --git a/src/app/map/map.component.html b/src/app/map/map.component.html new file mode 100644 index 0000000..b8d3699 --- /dev/null +++ b/src/app/map/map.component.html @@ -0,0 +1,11 @@ +
+ +
+

Your Route Steps

+ +
+
+

{{step.maneuver?.type }} {{step.maneuver?.modifier }} on {{step.name }}

+
+
+
diff --git a/src/app/map/map.component.spec.ts b/src/app/map/map.component.spec.ts new file mode 100644 index 0000000..f163147 --- /dev/null +++ b/src/app/map/map.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MapComponent } from './map.component'; + +describe('MapComponent', () => { + let component: MapComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MapComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(MapComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts new file mode 100644 index 0000000..0af3cc6 --- /dev/null +++ b/src/app/map/map.component.ts @@ -0,0 +1,97 @@ +import { Component, AfterViewInit } from '@angular/core'; +import { defaults as defaultControls } from 'ol/control'; +import { fromLonLat, transform } 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 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'; + +@Component({ + selector: 'app-map', + templateUrl: './map.component.html', + styleUrls: ['./map.component.css'] +}) +export class MapComponent implements AfterViewInit { + + constructor() { } + + map: Map; + routeSteps: Array = [] + + ngAfterViewInit() { + this.map = new Map({ + target: 'map', + layers: [ + new TileLayer({ + source: new XYZ({ + url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png' + }) + }) + ], + view: new View({ + projection: 'EPSG:3857', + center: fromLonLat([8, 52]), + zoom: 2 + }), + controls: defaultControls().extend([ + new ZoomToExtent({ + extent: [ + 813079.7791264898, 5929220.284081122, + 848966.9639063801, 5936863.986909639 + ] + }) + ]) + }); + setTimeout(() => this.map.updateSize(), 200); + } + + drawPath(osrm: Osrm): void{ + console.log(osrm) //https://routing.openstreetmap.de/routed-bike/route/v1/driving/8.6042708,53.5151533;13.6887164,51.0491468?overview=false&alternatives=true&steps=true + + const coordinates = osrm.routes[0].geometry.coordinates || []; + const f_coordinates: Array> = [] + coordinates.forEach(coordinate => + { + f_coordinates.push(transform(coordinate, 'EPSG:4326', 'EPSG:3857')) + } + ); + + const lineString: LineString = new LineString(f_coordinates); + const feature: Feature = new Feature({ geometry: lineString }); + const vectorSource = new VectorSource({ features: [ feature ]}); + + const vectorLayer = new VectorLayer({ + + source: vectorSource, + }); + this.map.addLayer(vectorLayer); + + // 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);*/ + } + + 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) + } +} diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts index 0def0e0..67bd2ae 100644 --- a/src/app/search/search.component.ts +++ b/src/app/search/search.component.ts @@ -1,11 +1,11 @@ -import { Component, OnInit, ElementRef, ViewChild} from '@angular/core'; +import { Component, ElementRef, 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 { AppComponent } from '../app.component'; +import { MapComponent } from '../map/map.component'; @@ -35,11 +35,12 @@ export class SearchComponent{ selectedPhotonFrom: Photon; selectedPhotonTo: Photon; + @ViewChild('mapRef') mapComponent!: MapComponent; + constructor( private nominatimService: NominatimService, private photonService: PhotonService, private osrmService: OsrmService, - private appComponent: AppComponent, ) { } selectPhoton(isFrom: boolean, p: Photon): void{ @@ -111,8 +112,8 @@ export class SearchComponent{ getRoute(): void{ this.osrmService.sendQueryRequest(this.longFrom, this.latFrom, this.longTo, this.latTo) .subscribe((response: Osrm) => { - this.appComponent.updateSidebar(response); - this.appComponent.drawPath(response); + this.mapComponent.updateSidebar(response); + this.mapComponent.drawPath(response); } ); } diff --git a/src/app/services/osrm.service.ts b/src/app/services/osrm.service.ts index 2b58545..fbdfadf 100644 --- a/src/app/services/osrm.service.ts +++ b/src/app/services/osrm.service.ts @@ -13,7 +13,6 @@ export class OsrmService{ // 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 { - console.log(latTo) console.log("https://routing.openstreetmap.de/routed-bike/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&alternatives=false&steps=true&geometries=geojson") return this.http.get("https://routing.openstreetmap.de/routed-bike/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&alternatives=false&steps=true&geometries=geojson"); } From b458c2c1b7f71c64b5a58158a9469c92a3f27d06 Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Wed, 26 Jan 2022 12:41:36 +0100 Subject: [PATCH 12/14] add event in osrm response --- src/app/app.component.html | 5 ++--- src/app/app.component.ts | 11 ++++++++++- src/app/search/search.component.ts | 8 ++++++-- 3 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index c164427..ff88d12 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,7 +1,6 @@
- +

{{title}}

- - + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 170febc..4767aac 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,6 @@ -import { Component, } from '@angular/core'; +import { Component, ViewChild, } from '@angular/core'; +import { Osrm } from './interfaces/osrm'; +import { MapComponent } from './map/map.component'; @Component({ @@ -7,8 +9,15 @@ import { Component, } from '@angular/core'; styleUrls: ['./app.component.css', '../../node_modules/ol/ol.css'] }) + + export class AppComponent { title = "Street Map"; + @ViewChild('mapRef') mapCompopnent!: MapComponent; + onSearchResponse($event: Osrm): void { + this.mapCompopnent.drawPath($event); + this.mapCompopnent.updateSidebar($event); + } } diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts index 67bd2ae..f9f015b 100644 --- a/src/app/search/search.component.ts +++ b/src/app/search/search.component.ts @@ -1,4 +1,4 @@ -import { Component, ElementRef, ViewChild} from '@angular/core'; +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'; @@ -6,6 +6,7 @@ import { PhotonService } from '../services/photon.service'; import { OsrmService } from '../services/osrm.service'; import { Osrm } from '../interfaces/osrm'; import { MapComponent } from '../map/map.component'; +import { EventEmitter } from '@angular/core'; @@ -35,7 +36,7 @@ export class SearchComponent{ selectedPhotonFrom: Photon; selectedPhotonTo: Photon; - @ViewChild('mapRef') mapComponent!: MapComponent; + @Output() emitter = new EventEmitter(); constructor( private nominatimService: NominatimService, @@ -112,8 +113,11 @@ export class SearchComponent{ getRoute(): void{ this.osrmService.sendQueryRequest(this.longFrom, this.latFrom, this.longTo, this.latTo) .subscribe((response: Osrm) => { + this.emitter.emit(response); + /* this.mapComponent.updateSidebar(response); this.mapComponent.drawPath(response); + */ } ); } From 07ecac249fb825301e0177e56452bb83b93bb473 Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Wed, 26 Jan 2022 13:37:19 +0100 Subject: [PATCH 13/14] clean up search component --- src/app/search/search.component.css | 10 +--- src/app/search/search.component.html | 8 ++- src/app/search/search.component.ts | 82 ++++++++++++++-------------- 3 files changed, 48 insertions(+), 52 deletions(-) diff --git a/src/app/search/search.component.css b/src/app/search/search.component.css index 6b2ddd5..33caa27 100644 --- a/src/app/search/search.component.css +++ b/src/app/search/search.component.css @@ -1,11 +1,3 @@ -#inputFrom:focus + .autocomplete-items-from{ - visibility:visible; -} - -#inputTo:focus + .autocomplete-items-to{ - visibility:visible; -} - .searchField{ display:block; float:left; @@ -32,7 +24,7 @@ } .autocomplete-items { - visibility: visible; /* without debugging it should be display:none */ + /*display: block; */ position: absolute; border: 1px solid #d4d4d4; border-bottom: none; diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html index 29eb8e8..f80e3b3 100644 --- a/src/app/search/search.component.html +++ b/src/app/search/search.component.html @@ -1,6 +1,7 @@ +
- +
@@ -8,8 +9,9 @@
+
+ (click)="selectPhoton(true, item);" >
- +
diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts index f9f015b..7ff608a 100644 --- a/src/app/search/search.component.ts +++ b/src/app/search/search.component.ts @@ -5,11 +5,8 @@ import { Photon, PhotonFeatureCollection } from '../interfaces/photon'; import { PhotonService } from '../services/photon.service'; import { OsrmService } from '../services/osrm.service'; import { Osrm } from '../interfaces/osrm'; -import { MapComponent } from '../map/map.component'; import { EventEmitter } from '@angular/core'; - - @Component({ selector: 'app-search', templateUrl: './search.component.html', @@ -42,41 +39,51 @@ export class SearchComponent{ private nominatimService: NominatimService, private photonService: PhotonService, private osrmService: OsrmService, - ) { } + ) { } + + getFormattedPhotonValue(p: Photon): string{ + let formatted: string = ""; + + if(p.properties.name){ + formatted += " " + p.properties.name; + } + if(p.properties.housenumber){ + formatted += " " + p.properties.housenumber; + } + if(p.properties.postcode){ + formatted += " " + p.properties.postcode; + } + if(p.properties.city){ + formatted += " " + p.properties.city; + } + if(p.properties.countrycode){ + formatted += " " + p.properties.countrycode; + } + + return formatted; + } + selectPhoton(isFrom: boolean, p: Photon): void{ if(isFrom){ this.selectedPhotonFrom = p; this.longFrom = p.geometry?.coordinates[0]; this.latFrom = p.geometry?.coordinates[1]; - this.inputFromValue = p.properties.name - - if(p.properties.housenumber){ - this.inputFromValue += " " + p.properties.housenumber; - } - - if(p.properties.postcode){ - this.inputFromValue += " " + p.properties.postcode; - } - - if(p.properties.city){ - this.inputFromValue += " " + p.properties.city; - } - - if(p.properties.countrycode){ - this.inputFromValue += " " + p.properties.countrycode; - } - + this.inputFromValue = p.properties.name; + this.inputFromValue = this.getFormattedPhotonValue(p); + this.photonItemsFrom = []; }else{ this.selectedPhotonTo = p; this.longTo = p.geometry?.coordinates[0]; this.latTo = p.geometry?.coordinates[1]; this.inputToValue = p.properties.name + " " + p.properties.countrycode; + this.inputToValue = this.getFormattedPhotonValue(p); + this.photonItemsTo = []; } + } // Gets called in "app.component.html" when an input changes its value - getValue(valueFrom:string, valueTo:string): void{ - console.log("From " + valueFrom + " to " + valueTo); + getValue(value:string, isFrom: boolean): void{ //this.updateAutoCompleteList([{display_name: 'Hallo'}, {display_name: 'Test2'}], [{display_name: 'Halload'}, {display_name: 'Test4'}]); @@ -87,27 +94,22 @@ export class SearchComponent{ this.nominatimService.sendQueryRequest(valueTo) .subscribe((response: Nominatim[]) => this.nominatimItemsTo = response); */ + this.photonItemsFrom = []; this.photonItemsTo = []; - this.photonService.sendQueryRequest(valueFrom) + this.photonService.sendQueryRequest(value) .subscribe((response: PhotonFeatureCollection) => response.features?.forEach(feature => { - this.photonItemsFrom.push(feature); - this.longFrom = this.photonItemsFrom[0].geometry?.coordinates![0]; - this.latFrom = this.photonItemsFrom[0].geometry?.coordinates![1]; - console.log("longFrom: " + this.longFrom) - console.log("latFrom: " + this.latFrom) + if(isFrom){ + this.photonItemsFrom.push(feature); + this.longFrom = this.photonItemsFrom[0].geometry?.coordinates![0]; + this.latFrom = this.photonItemsFrom[0].geometry?.coordinates![1]; + }else{ + this.photonItemsTo.push(feature); + this.longTo = this.photonItemsFrom[0].geometry?.coordinates![0]; + this.latTo = this.photonItemsFrom[0].geometry?.coordinates![1]; + } })); - - this.photonService.sendQueryRequest(valueTo) - .subscribe((response: PhotonFeatureCollection) => response.features?.forEach(feature => { - this.photonItemsTo.push(feature); - this.longTo = this.photonItemsTo[0].geometry?.coordinates![0]; - this.latTo = this.photonItemsTo[0].geometry?.coordinates![1] - console.log("LongTo: " + this.longTo) - console.log("LatTo: " + this.latTo) - })); - } getRoute(): void{ From d8a6781ae0f34c71795e2e37a0d892a3e8ed83d5 Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Wed, 26 Jan 2022 14:18:33 +0100 Subject: [PATCH 14/14] added some sidebar icons --- src/app/app.component.html | 1 + src/app/app.component.ts | 4 +- src/app/app.module.ts | 2 + src/app/map/map.component.css | 39 --------------- src/app/map/map.component.html | 10 ---- src/app/map/map.component.ts | 10 +--- src/app/route-list/route-list.component.css | 50 +++++++++++++++++++ src/app/route-list/route-list.component.html | 18 +++++++ .../route-list/route-list.component.spec.ts | 25 ++++++++++ src/app/route-list/route-list.component.ts | 22 ++++++++ src/assets/images/fork-slight left.svg | 15 ++++++ src/assets/images/fork-slight right.svg | 13 +++++ src/assets/images/left.svg | 11 ++++ src/assets/images/right.svg | 11 ++++ src/assets/images/slight left.svg | 11 ++++ src/assets/images/slight right.svg | 11 ++++ src/assets/images/straight.svg | 10 ++++ src/styles.css | 1 + 18 files changed, 205 insertions(+), 59 deletions(-) create mode 100644 src/app/route-list/route-list.component.css create mode 100644 src/app/route-list/route-list.component.html create mode 100644 src/app/route-list/route-list.component.spec.ts create mode 100644 src/app/route-list/route-list.component.ts create mode 100644 src/assets/images/fork-slight left.svg create mode 100644 src/assets/images/fork-slight right.svg create mode 100644 src/assets/images/left.svg create mode 100644 src/assets/images/right.svg create mode 100644 src/assets/images/slight left.svg create mode 100644 src/assets/images/slight right.svg create mode 100644 src/assets/images/straight.svg diff --git a/src/app/app.component.html b/src/app/app.component.html index ff88d12..60c0232 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -4,3 +4,4 @@ + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 4767aac..1d5362f 100644 --- a/src/app/app.component.ts +++ b/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); } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 95733c0..ec03a98 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/map/map.component.css b/src/app/map/map.component.css index e3e09c9..a6c22ec 100644 --- a/src/app/map/map.component.css +++ b/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; -} diff --git a/src/app/map/map.component.html b/src/app/map/map.component.html index b8d3699..4fa1fbc 100644 --- a/src/app/map/map.component.html +++ b/src/app/map/map.component.html @@ -1,11 +1 @@
- -
-

Your Route Steps

- -
-
-

{{step.maneuver?.type }} {{step.maneuver?.modifier }} on {{step.name }}

-
-
-
diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts index 0af3cc6..54cec78 100644 --- a/src/app/map/map.component.ts +++ b/src/app/map/map.component.ts @@ -23,7 +23,7 @@ export class MapComponent implements AfterViewInit { constructor() { } map: Map; - routeSteps: Array = [] + 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) - } } diff --git a/src/app/route-list/route-list.component.css b/src/app/route-list/route-list.component.css new file mode 100644 index 0000000..bf45830 --- /dev/null +++ b/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; + } diff --git a/src/app/route-list/route-list.component.html b/src/app/route-list/route-list.component.html new file mode 100644 index 0000000..0c98761 --- /dev/null +++ b/src/app/route-list/route-list.component.html @@ -0,0 +1,18 @@ +
+

Your Route Steps

+ +
+
+ +
+

{{step.maneuver?.type }} {{step.maneuver?.modifier }}
{{step.name }}

+
+ + +
+

{{step.maneuver?.type }} {{step.maneuver?.modifier }}
{{step.name }}

+
+
+
+
+ diff --git a/src/app/route-list/route-list.component.spec.ts b/src/app/route-list/route-list.component.spec.ts new file mode 100644 index 0000000..76e6d5e --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ RouteListComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RouteListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/route-list/route-list.component.ts b/src/app/route-list/route-list.component.ts new file mode 100644 index 0000000..537e288 --- /dev/null +++ b/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 = [] + 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; + } + } +} diff --git a/src/assets/images/fork-slight left.svg b/src/assets/images/fork-slight left.svg new file mode 100644 index 0000000..0dd7be8 --- /dev/null +++ b/src/assets/images/fork-slight left.svg @@ -0,0 +1,15 @@ + + + + + + + diff --git a/src/assets/images/fork-slight right.svg b/src/assets/images/fork-slight right.svg new file mode 100644 index 0000000..960930b --- /dev/null +++ b/src/assets/images/fork-slight right.svg @@ -0,0 +1,13 @@ + + + + + + + diff --git a/src/assets/images/left.svg b/src/assets/images/left.svg new file mode 100644 index 0000000..dfd6b81 --- /dev/null +++ b/src/assets/images/left.svg @@ -0,0 +1,11 @@ + + + + + + + diff --git a/src/assets/images/right.svg b/src/assets/images/right.svg new file mode 100644 index 0000000..cb235f8 --- /dev/null +++ b/src/assets/images/right.svg @@ -0,0 +1,11 @@ + + + + + + + diff --git a/src/assets/images/slight left.svg b/src/assets/images/slight left.svg new file mode 100644 index 0000000..d3987ae --- /dev/null +++ b/src/assets/images/slight left.svg @@ -0,0 +1,11 @@ + + + + + + + diff --git a/src/assets/images/slight right.svg b/src/assets/images/slight right.svg new file mode 100644 index 0000000..bd90e45 --- /dev/null +++ b/src/assets/images/slight right.svg @@ -0,0 +1,11 @@ + + + + + + + diff --git a/src/assets/images/straight.svg b/src/assets/images/straight.svg new file mode 100644 index 0000000..1d5ff60 --- /dev/null +++ b/src/assets/images/straight.svg @@ -0,0 +1,10 @@ + + + + + + + diff --git a/src/styles.css b/src/styles.css index 6b98590..a5be714 100644 --- a/src/styles.css +++ b/src/styles.css @@ -16,6 +16,7 @@ body { right:0; left:0; overflow: hidden; + background-color: rgb(37, 37, 37); } button{