added basic map

src/app/app.component.ts

@@ -1,17 +1,51 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit } from '@angular/core';
+import { defaults as defaultControls } from 'ol/control';
+
+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 Feature from 'ol/Feature';
+import Polygon from 'ol/geom/Polygon';
+import Point from 'ol/geom/Point';
 
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css', '../../node_modules/ol/ol.css']
 })
 
-export class AppComponent implements OnInit{
-  title = 'Street Map';
+export class AppComponent implements AfterViewInit {
+  title = "Street Map";
+  map: Map;
+
+  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({
+        center: [813079.7791264898, 5929220.284081122],
+        zoom: 2
+      }),
+      controls: defaultControls().extend([
+        new ZoomToExtent({
+          extent: [
+            813079.7791264898, 5929220.284081122,
+            848966.9639063801, 5936863.986909639
+          ]
+        })
+      ])
+    });
 
-  ngOnInit(): void {
-    
   }
-
 }
+