add link to wiki in toolbar

* adjust margin and size of map-frame
* add link to gitlab wiki

projects/project-3/frontend/.gitignore

@@ -7,6 +7,10 @@
 # Only exists if Bazel was run
 /bazel-out
 
+# exclude generated css-files
+/src/app/map/*.css.map
+/src/app/map/*.css
+
 # dependencies
 /node_modules
 

projects/project-3/frontend/src/app/app.module.ts

@@ -1,12 +1,14 @@
-import { BrowserModule } from '@angular/platform-browser';
+import {BrowserModule} from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {NgModule} from '@angular/core';
 
-import { AppRoutingModule } from './app-routing.module';
+import {AppRoutingModule} from './app-routing.module';
-import { AppComponent } from './app.component';
+import {AppComponent} from './app.component';
-import { MapComponent } from './map/map.component';
+import {MapComponent} from './map/map.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {FlexLayoutModule} from '@angular/flex-layout';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
 
 @NgModule({
   declarations: [
@@ -18,9 +20,12 @@ import {FlexLayoutModule} from '@angular/flex-layout';
     AppRoutingModule,
     BrowserAnimationsModule,
     MatToolbarModule,
+    MatIconModule,
+    MatButtonModule,
     FlexLayoutModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

projects/project-3/frontend/src/app/map/map.component.css

@@ -1,18 +1,20 @@
-.mat-toolbar {
+.toolbar-spacer {
-  display: flex;
+  flex: 1 1 auto;
 }
 
 .map-container {
-  margin: 30px;
+  margin: 0;
-  height: 100%;
+  height: 95%;
 }
 
 .map-frame {
-  height: 90%;
+  height: 100%;
+  width: 100%;
 }
 
 #map {
   height: 100%;
+  width: 100%;
 }
 
 /*# sourceMappingURL=map.component.css.map */

projects/project-3/frontend/src/app/map/map.component.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["map.component.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE","file":"map.component.css"}
+{"version":3,"sourceRoot":"","sources":["map.component.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA","file":"map.component.css"}

projects/project-3/frontend/src/app/map/map.component.html

@@ -1,10 +1,19 @@
-<mat-toolbar class="mat-toolbar" color="primary">
+<div class="myApp">
-  <span>My Application</span>
+  <mat-toolbar class="mat-toolbar" color="primary">
-</mat-toolbar>
+    <span>Bike Stations in London</span>
+    <span class="toolbar-spacer"></span>
+    <a class="button-wiki" color="primary"
+       href="https://gitlab.com/marcel.schwarz/geovisualisierung/-/wikis/Projektarbeit%203" mat-flat-button
+       target="_blank">
+      <mat-icon>library_books</mat-icon>
+      Wiki</a>
+  </mat-toolbar>
 
-<div class="map-container">
+  <div class="map-container">
-  <div class="map-frame">
+    <div class="map-frame">
-    <div id="map"></div>
+      <div id="map"></div>
+    </div>
   </div>
 </div>
 
+

projects/project-3/frontend/src/app/map/map.component.scss

@@ -1,16 +1,28 @@
+.myApp {
+  margin: 0;
+  height: 100vh;
+  width: 100vw;
+}
+
+.toolbar-spacer {
+  flex: 1 1 auto;
+}
+
 .mat-toolbar {
-  display: flex;
+  height: 4%
 }
 
 .map-container {
-  margin: 30px;
+  margin: 10px;
-  height: 100%;
+  height: 94%;
 }
 
 .map-frame {
-  height: 90%;
+  height: 100%;
+  width: 100%;
 }
 
 #map {
   height: 100%;
+  width: 100%;
 }

projects/project-3/frontend/src/app/map/map.component.ts

@@ -8,7 +8,6 @@ import {MapService} from '../service/map.service';
   styleUrls: ['./map.component.scss']
 })
 export class MapComponent implements AfterViewInit {
-  private map;
 
   constructor(private service: MapService) {
   }