added http module (REST)

src/app/app.component.html

@@ -1,7 +1,7 @@
 <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">
+    <input #inputFrom (change)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputFrom" id="inputFrom" placeholder="From">
+    <input #inputTo (change)="getValue(inputFrom.value, inputTo.value)"type="text" name="inputTo" id="inputTo" placeholder="To">
   </div>
   <p>{{title}}</p>
 </header>

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<Nom[]>("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);
   }
 }
 

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/nom.ts

@@ -0,0 +1,4 @@
+
+export interface Nom {
+    boundingbox: Array<string>;
+}