Add/comment code for more map menu

Author: znorman-harris

apps/notebook/components/src/app/app.module.ts

@@ -6,6 +6,7 @@ import { ApplicationRef, DoBootstrap, Injector, NgModule } from '@angular/core';
 import { createCustomElement } from '@angular/elements';
 import { MatIconRegistry } from '@angular/material/icon';
 import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
   MaterialCssVarsModule,
   MaterialCssVarsService,
@@ -23,19 +24,21 @@ import {
 } from './components/map/map-property-sheet/map-property-sheet.component';
 import { FAST_FORWARD } from './icons/fast-forward';
 import { FAST_REWIND } from './icons/fast-rewind';
+import { LAYERS } from './icons/layers';
+import { MY_LOCATION_FILLED } from './icons/my-location-fill';
 import { PAUSE } from './icons/pause';
 import { PLAY } from './icons/play';
 import { SAVE } from './icons/save';
 import { MaterialModule } from './material.module';
 import { VSCodeRendererMessenger } from './services/vscode-renderer-messenger.service';
-import { MY_LOCATION_FILLED } from './icons/my-location-fill';
 
 @NgModule({
   declarations: [AppComponent],
   bootstrap: [],
   exports: [],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     MaterialCssVarsModule.forRoot({}),
     MaterialModule,
     ComponentsModule,
@@ -93,6 +96,7 @@ export class AppModule implements DoBootstrap {
     const icons: { [key: string]: any } = {
       'fast-forward': FAST_FORWARD,
       'fast-rewind': FAST_REWIND,
+      layers: LAYERS,
       my_location_fill: MY_LOCATION_FILLED,
       pause: PAUSE,
       play: PLAY,

apps/notebook/components/src/app/components/map/map.component.html

@@ -3,16 +3,27 @@
 <div class="map-container cell-item-full-height" style="position: relative">
   <canvas #MapCanvas></canvas>
 
-  <div
-    class="map-controls toolbar"
-    fxLayout="row"
-    fxLayoutAlign="space-around center"
-  >
-    <mat-icon
-      (click)="resetView()"
-      class="icon-button"
-      svgIcon="my_location_fill"
-    ></mat-icon>
+  <div class="map-controls" fxLayout="column" fxLayoutAlign="center start">
+    <!-- <div
+      *ngIf="showLayers"
+      fxLayout="column"
+      class="toolbar"
+      style="margin-bottom: 5px"
+    >
+      Something cool
+    </div> -->
+    <div fxLayout="row" fxLayoutAlign="space-around center" class="toolbar">
+      <mat-icon
+        (click)="resetView()"
+        class="icon-button"
+        svgIcon="my_location_fill"
+      ></mat-icon>
+      <!-- <mat-icon
+        (click)="showLayers = !showLayers"
+        class="icon-button"
+        svgIcon="layers"
+      ></mat-icon> -->
+    </div>
   </div>
 
   <div class="map-credits">

apps/notebook/components/src/app/components/map/map.component.ts

@@ -76,6 +76,9 @@ export class MapComponent
   /** Current layers */
   private layers!: ILayers;
 
+  /** Do we show the layers dialog */
+  showLayers = false;
+
   /**
    * Interval callback to make sure we render
    *

apps/notebook/components/src/app/icons/layers.ts

@@ -0,0 +1 @@
+export const LAYERS = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"  fill="currentColor"><path d="M480-118 120-398l66-50 294 228 294-228 66 50-360 280Zm0-202L120-600l360-280 360 280-360 280Z"/></svg>`;

apps/notebook/components/src/app/material.module.ts

@@ -1,13 +1,15 @@
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatTableModule } from '@angular/material/table';
 import { FlexLayoutModule } from '@ngbracket/ngx-layout';
 
 const modules = [
   MatIconModule,
   MatButtonModule,
+  MatMenuModule,
   MatSliderModule,
   MatTableModule,
   FlexLayoutModule,