From ccdea326317b998230fda8a293e9ee0f048ada0c Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Wed, 12 Jan 2022 14:49:33 +0100 Subject: [PATCH 1/4] added http module (REST) --- src/app/app.component.html | 4 ++-- src/app/app.component.ts | 26 ++++++++++++++++++++++---- src/app/app.module.ts | 5 +++-- src/app/interfaces/nom.ts | 4 ++++ 4 files changed, 31 insertions(+), 8 deletions(-) create mode 100644 src/app/interfaces/nom.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 3714cce..cc47a56 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,7 +1,7 @@
- - + +

{{title}}

diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 0543b87..3f46199 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,11 +1,18 @@ -import { Component, OnInit, AfterViewInit } from '@angular/core'; +import { Component, OnInit, AfterViewInit, NgModule } from '@angular/core'; import { defaults as defaultControls } from 'ol/control'; +import { fromLonLat } from 'ol/proj'; +import { Observable, throwError } from 'rxjs'; +import { map } from 'rxjs/operators'; +import { BrowserModule } from '@angular/platform-browser'; +import { HttpClient } from '@angular/common/http'; 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 { Nom } from './interfaces/nom'; + @Component({ @@ -14,12 +21,22 @@ import ZoomToExtent from 'ol/control/ZoomToExtent'; styleUrls: ['./app.component.css', '../../node_modules/ol/ol.css'] }) -export class AppComponent implements AfterViewInit { +export class AppComponent implements AfterViewInit, OnInit { title = "Street Map"; map: Map; + + constructor(private http: HttpClient) { } + + getValue(valueFrom:string, valueTo:string){ console.log("From " + valueFrom + " to " + valueTo); + this.http.get("https://nominatim.openstreetmap.org/search.php?format=jsonv2&q=" + valueFrom) + .subscribe((response: Nom[]) => console.log(response)) + } + + ngOnInit() { + } ngAfterViewInit() { @@ -33,7 +50,8 @@ export class AppComponent implements AfterViewInit { }) ], view: new View({ - center: [813079.7791264898, 5929220.284081122], + projection: 'EPSG:3857', + center: fromLonLat([8, 52]), zoom: 2 }), controls: defaultControls().extend([ @@ -45,7 +63,7 @@ export class AppComponent implements AfterViewInit { }) ]) }); - + setTimeout(() => this.map.updateSize(), 200); } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 0a062ae..1be550e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; - +import {HttpClientModule} from '@angular/common/http'; import { AppComponent } from './app.component'; @NgModule({ @@ -8,7 +8,8 @@ import { AppComponent } from './app.component'; AppComponent, ], imports: [ - BrowserModule + BrowserModule, + HttpClientModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/interfaces/nom.ts b/src/app/interfaces/nom.ts new file mode 100644 index 0000000..6b5e6ab --- /dev/null +++ b/src/app/interfaces/nom.ts @@ -0,0 +1,4 @@ + +export interface Nom { + boundingbox: Array; +} From 2e17198e92d2f62b16ad4a651ecfd0fbc7429903 Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Thu, 13 Jan 2022 09:56:35 +0100 Subject: [PATCH 2/4] added nominatim interface --- src/app/app.component.ts | 6 +++--- src/app/interfaces/nom.ts | 4 ---- src/app/interfaces/nominatim.ts | 16 ++++++++++++++++ 3 files changed, 19 insertions(+), 7 deletions(-) delete mode 100644 src/app/interfaces/nom.ts create mode 100644 src/app/interfaces/nominatim.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 3f46199..0cd8cd5 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -11,7 +11,7 @@ import View from 'ol/View'; import TileLayer from 'ol/layer/Tile'; import XYZ from 'ol/source/XYZ'; import ZoomToExtent from 'ol/control/ZoomToExtent'; -import { Nom } from './interfaces/nom'; +import { Nominatim } from './interfaces/nominatim'; @@ -31,8 +31,8 @@ export class AppComponent implements AfterViewInit, OnInit { getValue(valueFrom:string, valueTo:string){ console.log("From " + valueFrom + " to " + valueTo); - this.http.get("https://nominatim.openstreetmap.org/search.php?format=jsonv2&q=" + valueFrom) - .subscribe((response: Nom[]) => console.log(response)) + this.http.get("https://nominatim.openstreetmap.org/search.php?format=jsonv2&q=" + valueFrom) + .subscribe((response: Nominatim) => console.log(response)) } ngOnInit() { diff --git a/src/app/interfaces/nom.ts b/src/app/interfaces/nom.ts deleted file mode 100644 index 6b5e6ab..0000000 --- a/src/app/interfaces/nom.ts +++ /dev/null @@ -1,4 +0,0 @@ - -export interface Nom { - boundingbox: Array; -} diff --git a/src/app/interfaces/nominatim.ts b/src/app/interfaces/nominatim.ts new file mode 100644 index 0000000..382c543 --- /dev/null +++ b/src/app/interfaces/nominatim.ts @@ -0,0 +1,16 @@ + +export interface Nominatim { + boundingbox: Array; + category: string; + display_name: string; + icon: string; + importance: number; + lat: string; + licence: string; + lon: string; + osm_id: number; + osm_type: string; + place_id: number; + place_rank: number; + type: string; +} From 5a5cea1b0e0655d4e026f7d8aade2a431d5196da Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Thu, 13 Jan 2022 11:22:32 +0100 Subject: [PATCH 3/4] added nominatim.service.ts --- src/app/app.component.ts | 25 ++++++++++--------------- src/app/interfaces/nominatim.ts | 2 +- src/app/nominatim.service.spec.ts | 16 ++++++++++++++++ src/app/nominatim.service.ts | 18 ++++++++++++++++++ 4 files changed, 45 insertions(+), 16 deletions(-) create mode 100644 src/app/nominatim.service.spec.ts create mode 100644 src/app/nominatim.service.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 0cd8cd5..d602db1 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,19 +1,14 @@ -import { Component, OnInit, AfterViewInit, NgModule } from '@angular/core'; +import { Component, OnInit, AfterViewInit } from '@angular/core'; +import { Nominatim } from './interfaces/nominatim'; +import { NominatimService } from './nominatim.service'; + import { defaults as defaultControls } from 'ol/control'; import { fromLonLat } from 'ol/proj'; -import { Observable, throwError } from 'rxjs'; -import { map } from 'rxjs/operators'; -import { BrowserModule } from '@angular/platform-browser'; -import { HttpClient } from '@angular/common/http'; - 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 { Nominatim } from './interfaces/nominatim'; - - @Component({ selector: 'app-root', @@ -25,14 +20,14 @@ export class AppComponent implements AfterViewInit, OnInit { title = "Street Map"; map: Map; - - constructor(private http: HttpClient) { } + constructor(private nominatimService: NominatimService) { } - - getValue(valueFrom:string, valueTo:string){ + // 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.http.get("https://nominatim.openstreetmap.org/search.php?format=jsonv2&q=" + valueFrom) - .subscribe((response: Nominatim) => console.log(response)) + + this.nominatimService.sendQueryRequest(valueFrom) + .subscribe((response: Nominatim[]) => console.log(response)); } ngOnInit() { diff --git a/src/app/interfaces/nominatim.ts b/src/app/interfaces/nominatim.ts index 382c543..a4661d1 100644 --- a/src/app/interfaces/nominatim.ts +++ b/src/app/interfaces/nominatim.ts @@ -1,4 +1,4 @@ - +// Nominatim JSON object to TypeScript interface export interface Nominatim { boundingbox: Array; category: string; diff --git a/src/app/nominatim.service.spec.ts b/src/app/nominatim.service.spec.ts new file mode 100644 index 0000000..ccd4b26 --- /dev/null +++ b/src/app/nominatim.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { NominatimService } from './nominatim.service'; + +describe('NominatimService', () => { + let service: NominatimService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(NominatimService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/nominatim.service.ts b/src/app/nominatim.service.ts new file mode 100644 index 0000000..c230c35 --- /dev/null +++ b/src/app/nominatim.service.ts @@ -0,0 +1,18 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Nominatim } from './interfaces/nominatim'; +import { Observable } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) + +// communicates with Nominatim (https://nominatim.org/) +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 { + return this.http.get("https://nominatim.openstreetmap.org/search.php?format=jsonv2&q=" + q); + } +} \ No newline at end of file From b0215df6c58f0ec87fc04799270baed70a86fa67 Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Thu, 13 Jan 2022 12:09:38 +0100 Subject: [PATCH 4/4] added html autocompletelist --- src/app/app.component.css | 38 ++++++++++++++++++++++++++++++++++++++ src/app/app.component.html | 9 +++++++-- src/app/app.component.ts | 10 +++++++++- 3 files changed, 54 insertions(+), 3 deletions(-) diff --git a/src/app/app.component.css b/src/app/app.component.css index 749b76b..5378f67 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -32,6 +32,44 @@ header p{ padding: 5px; } +.autocomplete { + position: relative; + display: inline-block; + color: black; + } + +.autocomplete-items { + position: absolute; + border: 1px solid #d4d4d4; + border-bottom: none; + border-top: none; + z-index: 99; + /*position the autocomplete items to be the same width as the container:*/ + top: 100%; + left: 0; + right: 0; +} + + .autocomplete-items div { + padding: 10px; + cursor: pointer; + background-color: #fff; + border-bottom: 1px solid #d4d4d4; +} + + /*when hovering an item:*/ + .autocomplete-items div:hover { + background-color: #e9e9e9; +} + + /*when navigating through the items using the arrow keys:*/ + .autocomplete-active { + background-color: DodgerBlue !important; + color: #ffffff; +} + + + #map{ width: 100%; height: 100%; diff --git a/src/app/app.component.html b/src/app/app.component.html index cc47a56..e4963ba 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,7 +1,12 @@
- - +
+ +
+
test
+
+
+

{{title}}

diff --git a/src/app/app.component.ts b/src/app/app.component.ts index d602db1..a779e2b 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, AfterViewInit } from '@angular/core'; +import { Component, OnInit, AfterViewInit, ElementRef, ViewChild} from '@angular/core'; import { Nominatim } from './interfaces/nominatim'; import { NominatimService } from './nominatim.service'; @@ -20,14 +20,22 @@ export class AppComponent implements AfterViewInit, OnInit { title = "Street Map"; map: Map; + @ViewChild("inputautocompleteList") autocompleteList: ElementRef; + + constructor(private nominatimService: NominatimService) { } + 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() {