test map component

src/app/app.component.html

@@ -82,6 +82,8 @@
 <div [ngClass]="theme" class="container">
   <div class="main">
     <router-outlet></router-outlet>
+    <button mat-fab class="map-button" color="primary" aria-label="map button" (click)="sampleMap.hidden = !sampleMap.hidden"><mat-icon>map</mat-icon></button>
+    @if (!sampleMap.hidden) {<map class="map"></map>}
     <div class="mobile-buffer">&nbsp;</div>
   </div>
 </div>

src/app/app.component.scss

@@ -24,6 +24,17 @@
     flex-grow: 1;
 }
 
+.container > .main > .map-button {
+    position: absolute;
+    bottom: 20px; left: 10px;
+}
+
+.container > .main > .map {
+    position: absolute;
+    bottom: 0; left: 0;
+    width: 500px;
+}
+
 #notifications {
     position: relative;
 }
@@ -191,6 +202,15 @@ footer {
     .mobile-buffer {
         display: block;
     }
+
+    .container > .main > .map-button {
+        bottom: 60px; left: 10px;
+    }
+
+    .container > .main > .map {
+        bottom: 0; left: 0;
+        width: 100%;
+    }
 }
 
 @media screen and (pointer: none), (pointer: coarse) and (orientation: landscape) {

src/app/app.component.ts

@@ -24,6 +24,7 @@ import { BusinessDataModule } from 'fis/business.data/business.data.module';
 import { NotificationService } from 'angularlib/notification/notification.service';
 import { env } from 'angularlib/environments/environment';
 import { TranslatePipe } from 'angularlib/labels/translate.pipe';
+import { MapComponent } from 'angularlib/map';
 
 @Component({
     selector: 'app-root',
@@ -34,7 +35,8 @@ import { TranslatePipe } from 'angularlib/labels/translate.pipe';
         RouterModule,
         Angularlib,
         NotificationModule,
-        BusinessDataModule
+        BusinessDataModule,
+        MapComponent
     ],
     providers: [DatePipe, FISMessaging],
     templateUrl: './app.component.html',
@@ -76,6 +78,8 @@ export class AppComponent extends BaseComponent implements OnInit {
   private notification = inject(NotificationService);
   private tr = inject(TranslatePipe);
 
+  protected sampleMap = {hidden:true};
+
   constructor(
     private router: Router,
     private store: Store,