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

updated search component

Browse Source
This commit is contained in:
Janis Meister
2022-01-21 13:54:27 +01:00
parent b32fa8055a
commit 7bbfd125b0
5 changed files with 52 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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<Photon>;
type?: string;
}
}

8
src/app/osrm.service.ts
View File

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

28
src/app/search/search.component.css
View File

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

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

@@ -1,15 +1,8 @@
<div class="searchField">
<div id="coordinates">
<input *ngIf="photonItemsFrom[0]" hidden id="longFromInput" value="{{ longFrom }}">
<input *ngIf="photonItemsFrom[0]" hidden id="latFromInput" value="{{ latFrom }}">
<input *ngIf="photonItemsTo[0]" hidden id="longToInput" value="{{ longTo}}">
<input *ngIf="photonItemsTo[0]" hidden id="latToInput" value="{{ latTo }}">
</div>
<div class="autocomplete">
<input #inputFrom (change)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputFrom" id="inputFrom" placeholder="From" value="{{ inputFromValue }}">
<div #inputautocompleteList class="autocomplete-items autocomplete-items-from">
<div *ngFor="let item of nominatimItemsFrom" >
{{ item.display_name }}
<input type="hidden" value="{{ item.display_name }}">
@@ -17,8 +10,17 @@
<div *ngFor="let item of photonItemsFrom"
(click)="selectPhoton(true, item)">
{{ item.properties.name }} {{item.properties.postcode}} {{item.properties.city}} {{item.properties.countrycode}}
</div>
<!--IF TYPE == STREET-->
<label *ngIf="item.properties.type == 'street'">
{{ item.properties.name }} {{item.properties.housenumber}}<br>
{{item.properties.postcode}} {{item.properties.city}} {{item.properties.country}}
</label>
<label *ngIf="item.properties.type != 'street'">
{{ item.properties.name }} <br>
{{item.properties.street}} {{item.properties.housenumber}} {{item.properties.postcode}} {{item.properties.city}} {{item.properties.countrycode}}
</label>
</div>
</div>
</div>
@@ -33,11 +35,20 @@
<div *ngFor="let item of photonItemsTo"
(click)="selectPhoton(false, item)">
{{ item.properties.name }} {{item.properties.postcode}} {{item.properties.city}} {{item.properties.countrycode}}
<input type="hidden" value="{{ item.properties?.name }}">
<!--IF TYPE == STREET-->
<label *ngIf="item.properties.type == 'street'">
{{ item.properties.name }} {{item.properties.housenumber}}<br>
{{item.properties.postcode}} {{item.properties.city}} {{item.properties.country}}
</label>
<label *ngIf="item.properties.type != 'street'">
{{ item.properties.name }} <br>
{{item.properties.street}} {{item.properties.housenumber}} {{item.properties.postcode}} {{item.properties.city}} {{item.properties.countrycode}}
</label>
</div>
</div>
</div>
</div>
<button class="routeBtn" (click)="getRoute()">Route</button>
<button class="routeBtn" (click)="getRoute()">Route</button>

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

@@ -46,6 +46,10 @@ export class SearchComponent{
this.latFrom = <number> p.geometry?.coordinates[1];
this.inputFromValue = <string> p.properties.name
if(p.properties.housenumber){
this.inputFromValue += " " + p.properties.housenumber;
}
if(p.properties.postcode){
this.inputFromValue += " " + p.properties.postcode;
}