Merge branch 'origin/NominatimService' into 'master'

Origin/nominatim service

See merge request streetmap1/ts-streetmap!1

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%;

src/app/app.component.html

@@ -1,7 +1,12 @@
 <header>
   <div class="searchField">
-    <input #inputFrom (keyup)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputFrom" id="inputFrom" placeholder="From">
-    <input #inputTo (keyup)="getValue(inputFrom.value, inputTo.value)"type="text" name="inputTo" id="inputTo" placeholder="To">
+	<div class="autocomplete">
+	  	<input #inputFrom (keyup)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputFrom" id="inputFrom" placeholder="From">
+		 	<div #inputautocompleteList class="autocomplete-items">
+				<div>test<input type="hidden" value="test"></div>
+			</div>
+	</div>
+	<input #inputTo (keyup)="getValue(inputFrom.value, inputTo.value)"type="text" name="inputTo" id="inputTo" placeholder="To">
   </div>
   <p>{{title}}</p>
 </header>

src/app/app.component.ts

@@ -1,25 +1,45 @@
-import { Component, OnInit, AfterViewInit } from '@angular/core';
-import { defaults as defaultControls } from 'ol/control';
+import { Component, OnInit, AfterViewInit, ElementRef, ViewChild} 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 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';
 
-
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   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;
 
-  getValue(valueFrom:string, valueTo:string){
+  @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() {
+    
   }
 
   ngAfterViewInit() {
@@ -33,7 +53,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 +66,7 @@ export class AppComponent implements AfterViewInit {
         })
       ])
     });
-
+    setTimeout(() => this.map.updateSize(), 200);
   }
 }
 

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]

src/app/interfaces/nominatim.ts

@@ -0,0 +1,16 @@
+// Nominatim JSON object to TypeScript interface
+export interface Nominatim {
+    boundingbox: Array<string>;
+    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;
+}

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();
+  });
+});

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<Nominatim[]> { 
+    return this.http.get<Nominatim[]>("https://nominatim.openstreetmap.org/search.php?format=jsonv2&q=" + q);
+  }
+}