janis/osm-routing-angular
1
0
Fork 0
mirror of https://github.com/DerTyp7/osm-routing-angular.git synced 2025-10-29 12:32:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

cleaned up

Browse Source
This commit is contained in:
Janis Meister
2022-03-09 12:28:59 +01:00
parent 03f904b632
commit 27c01c9ca6
9 changed files with 99 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/app/interfaces/openLayersGeoJSON.ts
View File

@@ -1,29 +1,29 @@
interface OpenLayersGeometry {
coordinates: Array<Array<number>>;
type?: string;
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;
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;
type: string;
geometry: OpenLayersGeometry;
id: number;
properties: OpenLayersProperties;
}
export interface OpenLayersGeoJSON {
type: string;
features: Array<OpenLayersFeature>;
geometry: OpenLayersGeometry;
properties: OpenLayersProperties;
type: string;
features: Array<OpenLayersFeature>;
geometry: OpenLayersGeometry;
properties: OpenLayersProperties;
}

5
src/app/interfaces/routeResponse.ts
View File

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

4
src/app/interfaces/searchResponse.ts
View File

@@ -1,8 +1,8 @@
export interface SearchWay{
export interface SearchWay {
id: number;
name: string;
}
export interface SearchResponse{
export interface SearchResponse {
ways: Array<SearchWay>;
}

6
src/app/map/map.component.css
View File

@@ -1,6 +1,4 @@
#map {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}

4
src/app/map/map.component.spec.ts
View File

@@ -8,9 +8,9 @@ describe('MapComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ MapComponent ]
declarations: [MapComponent]
})
.compileComponents();
.compileComponents();
});
beforeEach(() => {

30
src/app/map/map.component.ts
View File

@@ -12,7 +12,7 @@ import LineString from 'ol/geom/LineString';
import { Feature } from 'ol';
import Geometry from 'ol/geom/Geometry';
import { RouteResponse } from '../interfaces/routeResponse';
import {Stroke, Style} from 'ol/style';
import { Stroke, Style } from 'ol/style';
@Component({
selector: 'app-map',
@@ -58,7 +58,7 @@ export class MapComponent implements AfterViewInit {
setTimeout(() => this.map.updateSize(), 200);
}
drawPath(routeResponse: RouteResponse): 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(routeResponse);
@@ -67,25 +67,25 @@ export class MapComponent implements AfterViewInit {
const lineString: LineString = new LineString(fCoordinates);
const feature: Feature<Geometry> = new Feature({ geometry: lineString });
feature.setStyle(this.lineStyle);
const vectorSource = new VectorSource({ features: [ feature ]});
const vectorSource = new VectorSource({ features: [feature] });
const vectorLayer = new VectorLayer({ source: vectorSource });
this.map.removeLayer(this.map.getLayers().item(1))
this.map.addLayer(vectorLayer);
this.map.getView().setCenter(fCoordinates[0])
this.map.getView().setZoom(13);
// this.features = new GeoJSON().readFeatures(new openLayersGeoJSON())
// 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);*/
/*
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);*/
}
}

49
src/app/search/search.component.html
View File

@@ -1,25 +1,44 @@
<div class="searchField">
<div class="autocomplete">
<input #inputFrom (click)="getValue(inputFrom.value, true)" (input)="getValue(inputFrom.value, true)" type="text" name="inputFrom" id="inputFrom" placeholder="From" value="{{ inputFromValue }}">
<div class="autocomplete-items autocomplete-items-from">
<div class="autocomplete">
<input
#inputFrom
(click)="getValue(inputFrom.value, true)"
(input)="getValue(inputFrom.value, true)"
type="text"
name="inputFrom"
id="inputFrom"
placeholder="From"
value="{{ inputFromValue }}"
/>
<div class="autocomplete-items autocomplete-items-from">
<div *ngFor="let item of searchItemsFrom" (click)="select(true, item)">
<label>{{ item.name }}</label>
</div>
</div>
</div>
</div>
</div>
<div class="autocomplete" id="autocompleteTo">
<input #inputTo (click)="getValue(inputTo.value, false)" (input)="getValue(inputTo.value, false)" type="text" name="inputTo" id="inputTo" placeholder="To" value="{{ inputToValue }}">
<div #inputautocompleteList class="autocomplete-items autocomplete-items-to">
<div class="autocomplete" id="autocompleteTo">
<input
#inputTo
(click)="getValue(inputTo.value, false)"
(input)="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 searchItemsTo" (click)="select(false, item)">
<label>{{ item.name }}</label>
</div>
</div>
</div>
</div>
</div>
</div>
<button *ngIf="!isSearching" class="routeBtn" (click)="getRoute()">Route</button>
<img *ngIf="isSearching"src="/assets/images/loading.gif" style="margin-top:15px; margin-left:10px;width:25px;height: 25px;" />
<ng-container *ngIfElse="isSearching" else routeBtn>
<img src="/assets/images/loading.gif" style="margin-top: 15px; margin-left: 10px; width: 25px; height: 25px" />
</ng-container>
<ng-template #routeBtn>
<button class="routeBtn" (click)="getRoute()">Route</button>
</ng-template>

4
src/app/search/search.component.spec.ts
View File

@@ -8,9 +8,9 @@ describe('SearchComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ SearchComponent ]
declarations: [SearchComponent]
})
.compileComponents();
.compileComponents();
});
beforeEach(() => {

44
src/app/search/search.component.ts
View File

@@ -29,12 +29,12 @@ export class SearchComponent {
private pythonBackendService: PythonBackendService,
) { }
select(isFrom: boolean, item: SearchWay): void{
if(isFrom){
select(isFrom: boolean, item: SearchWay): void {
if (isFrom) {
this.selectedSearchWayFrom = item;
this.inputFromValue = item.name;
this.searchItemsFrom = [];
}else{
} else {
this.selectedSearchWayTo = item;
this.inputToValue = item.name;
this.searchItemsTo = [];
@@ -50,31 +50,31 @@ export class SearchComponent {
value = value.trim();
this.pythonBackendService.sendSearchQueryRequest(value, "10")
.subscribe((response: SearchResponse) => response.ways?.forEach(way =>{
if(isFrom){
this.searchItemsFrom.push(way);
this.selectedSearchWayFrom = way;
}else{
this.searchItemsTo.push(way);
this.selectedSearchWayTo = way;
}
}));
this.pythonBackendService.sendSearchQueryRequest(value, "10") // "10" -> limit of search results
.subscribe((response: SearchResponse) => response.ways?.forEach(way => {
if (isFrom) {
this.searchItemsFrom.push(way);
this.selectedSearchWayFrom = way;
} else {
this.searchItemsTo.push(way);
this.selectedSearchWayTo = way;
}
}));
}
getRoute(): void{
if(this.selectedSearchWayFrom && this.selectedSearchWayTo)
this.isSearching = true;
getRoute(): void {
if (this.selectedSearchWayFrom && this.selectedSearchWayTo)
this.isSearching = true;
this.pythonBackendService.sendRouteQueryRequest(this.selectedSearchWayFrom.id.toString(), this.selectedSearchWayTo.id.toString())
.pipe(catchError(err =>{
.pipe(catchError(err => {
console.error(err);
return of({nodes:[]});
return of({ nodes: [] });
}))
.subscribe(
(response: RouteResponse) => {
this.emitter.emit(response);
this.isSearching = false;
});
this.emitter.emit(response);
this.isSearching = false;
});
}
}