janis/street-map-typescript
1
0
Fork 0
mirror of https://github.com/DerTyp7/street-map-typescript.git synced 2025-10-29 12:52:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

clean up

Browse Source
This commit is contained in:
Janis Meister
2022-01-26 11:51:04 +01:00
parent 33aa62ae09
commit 8a98e9dbe6
10 changed files with 190 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/app/app.component.css
View File

@@ -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;
}

12
src/app/app.component.html
View File

@@ -3,15 +3,5 @@
<p>{{title}}</p>
</header>
<div id="map" class="map"></div>
<div class="osrm-route-container">
<h4>Your Route Steps</h4>
<div class="route-list">
<div *ngFor="let step of this.routeSteps">
<p>{{step.maneuver?.type }} {{step.maneuver?.modifier }} on {{step.name }}</p>
</div>
</div>
</div>
<app-map #mapRef ></app-map>

92
src/app/app.component.ts
View File

@@ -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<OsrmStep> = []
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<Array<number>> = []
coordinates.forEach(coordinate =>
{
f_coordinates.push(transform(coordinate, 'EPSG:4326', 'EPSG:3857'))
}
);
const lineString: LineString = new LineString(f_coordinates);
const feature: Feature<Geometry> = 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)
}
}

2
src/app/app.module.ts
View File

@@ -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,

45
src/app/map/map.component.css Normal file
View File

@@ -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;
}

11
src/app/map/map.component.html Normal file
View File

@@ -0,0 +1,11 @@
<div id="map" class="map"></div>
<div class="osrm-route-container">
<h4>Your Route Steps</h4>
<div class="route-list">
<div *ngFor="let step of this.routeSteps">
<p>{{step.maneuver?.type }} {{step.maneuver?.modifier }} on {{step.name }}</p>
</div>
</div>
</div>

25
src/app/map/map.component.spec.ts Normal file
View File

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

97
src/app/map/map.component.ts Normal file
View File

@@ -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<OsrmStep> = []
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<Array<number>> = []
coordinates.forEach(coordinate =>
{
f_coordinates.push(transform(coordinate, 'EPSG:4326', 'EPSG:3857'))
}
);
const lineString: LineString = new LineString(f_coordinates);
const feature: Feature<Geometry> = 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)
}
}

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

@@ -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);
}
);
}

1
src/app/services/osrm.service.ts
View File

@@ -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<Osrm> {
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<Osrm>("https://routing.openstreetmap.de/routed-bike/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&alternatives=false&steps=true&geometries=geojson");
}