Openlayers added

ui/src/app/wegbeschreibung/wegbeschreibung.component.css

@@ -0,0 +1,4 @@
+#beschreibung {
+    height: 400px;
+    width: 100%;
+}

ui/src/app/wegbeschreibung/wegbeschreibung.component.html

@@ -0,0 +1,2 @@
+<p>wegbeschreibung works!</p>
+<div id="beschreibung" ></div>

ui/src/app/wegbeschreibung/wegbeschreibung.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WegbeschreibungComponent } from './wegbeschreibung.component';
+
+describe('WegbeschreibungComponent', () => {
+  let component: WegbeschreibungComponent;
+  let fixture: ComponentFixture<WegbeschreibungComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WegbeschreibungComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WegbeschreibungComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ui/src/app/wegbeschreibung/wegbeschreibung.component.ts

@@ -0,0 +1,45 @@
+
+import { AfterViewInit,Component, OnInit } from '@angular/core';
+import Map from 'ol/Map';
+import View from 'ol/View';
+import VectorLayer from 'ol/layer/Vector';
+import Style from 'ol/style/Style';
+import Icon from 'ol/style/Icon';
+import OSM from 'ol/source/OSM';
+import * as olProj from 'ol/proj';
+import TileLayer from 'ol/layer/Tile';
+
+
+
+@Component({
+  selector: 'app-wegbeschreibung',
+  templateUrl: './wegbeschreibung.component.html',
+  styleUrls: ['./wegbeschreibung.component.css']
+})
+export class WegbeschreibungComponent implements OnInit {
+
+  Map!: Map;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.Map = new Map({
+      target: 'beschreibung',
+      layers: [
+        new TileLayer ({
+          source: new OSM()
+        })
+      ],
+      view: new View({
+        center: olProj.fromLonLat([7.0785,51.4614]),
+        zoom: 5
+      })
+    });
+  }
+  
+
+ 
+
+}
+
+