Openlayers added

ui/src/app/app-routing.module.ts

@@ -4,13 +4,15 @@ import { BesucherComponent } from './besucher/besucher.component';
 import { ContactComponent } from './contact/contact.component';
 import { HomeComponent } from './home/home.component';
 import { LocationComponent } from './location/location.component';
+import { WegbeschreibungComponent } from './wegbeschreibung/wegbeschreibung.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/home',pathMatch:'full'},
   { path: 'home', component: HomeComponent},
   { path: 'client',component: BesucherComponent},
   { path: 'unserfest',component: LocationComponent},
-  { path:'contact', component: ContactComponent}
+  { path:'contact', component: ContactComponent},
+  {path:'wegbeschreibung', component: WegbeschreibungComponent}
 ];
 
 @NgModule({

ui/src/app/app.module.ts

@@ -5,6 +5,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { MatSliderModule } from '@angular/material/slider'
 import { MatRadioModule } from '@angular/material/radio'
 
+
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.component';
@@ -16,6 +17,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { LocationComponent } from './location/location.component';
 import { ContactComponent } from './contact/contact.component';
 import { DisclaimerComponent } from './disclaimer/disclaimer.component';
+import { WegbeschreibungComponent } from './wegbeschreibung/wegbeschreibung.component';
 
 @NgModule({
   declarations: [
@@ -26,7 +28,8 @@ import { DisclaimerComponent } from './disclaimer/disclaimer.component';
     NavbarComponent,
     LocationComponent,
     ContactComponent,
-    DisclaimerComponent
+    DisclaimerComponent,
+    WegbeschreibungComponent
   ],
   imports: [
     BrowserModule,

ui/src/app/location/location.component.html

@@ -13,13 +13,13 @@
     Hauptstraße 433<br />
     26683 Ramsloh<br />
     um 19 Uhr auf diesen Tag anstoßen.<br />
-    <a href="#">Wegbeschreibung</a>
+    <a routerLink="/wegbeschreibung">Wegbeschreibung</a>
 </p>
 
 <p>
     Die Standesamtliche Trauung<br />
     findet um 13 Uhr in der<br />Mühle Scharrel statt.<br />
-    <a href="#">Wegbeschreibung</a>
+    <a routerLink="/wegbeschreibung">Wegbeschreibung</a>
 </p>
 
 <p>

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

ui/src/styles.css

@@ -1,5 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
 @import "~typeface-josefin-sans/index.css";
+@import "~ol/ol.css";
 html {
     width: 100%;