feat: add selector for map layers specific to displacement

src/app/components/map/displacement-layers/displacement-layers.component.html

@@ -0,0 +1,35 @@
+<div class="disp-layers--layout position">
+  <div class="layers-selector fx-col">
+    <mat-checkbox>
+      <div class="selector-text">
+        Rollout
+      </div>
+    </mat-checkbox>
+
+    <mat-checkbox>
+      <div class="selector-text">
+        Cumulative Deformation
+      </div>
+    </mat-checkbox>
+
+    <mat-checkbox>
+      <div class="selector-text">
+        Cumulative Velocity
+
+      </div>
+    </mat-checkbox>
+
+    <div class="help-text">
+      What are these?
+      <app-docs-modal class="info-icon"
+                      url="https://docs.asf.alaska.edu/vertex/manual/#area-of-interest-options">
+      </app-docs-modal>
+    </div>
+  </div>
+
+  <div class="footer">
+    <div class="footer--text">
+      Map Layers
+    </div>
+  </div>
+</div>

src/app/components/map/displacement-layers/displacement-layers.component.scss

@@ -0,0 +1,56 @@
+@import "asf-theme";
+
+.disp-layers--layout {
+  height: 100%;
+  min-height: 100%;
+  width: fit-content;
+  flex-direction: column;
+  box-sizing: border-box;
+  display: flex;
+}
+
+.position {
+  z-index: 998;
+  margin-left: 0;
+  top: 20px;
+}
+
+.layers-selector {
+  @include themify($themes) {
+    background-color: themed('primary-light');
+  }
+
+  padding-bottom: 4px;
+  padding-right: 10px;
+  pointer-events: auto;
+}
+
+.selector-text {
+  font-weight: bold;
+}
+
+.help-text {
+  padding-left: 10px;
+  font-size: small;
+}
+
+.footer {
+  @include themify($themes) {
+    background-color: themed('primary');
+  }
+
+  width: calc(100% + 10px);
+  margin: 0 0 0 -10px;
+  height: 16px;
+}
+
+.footer--text {
+  @include themify($themes) {
+    background-color: themed('primary');
+    color: themed('light-secondary-text');
+  }
+
+  font-size: 12px;
+  margin-top: 0;
+  padding-left: 20px;
+}

src/app/components/map/displacement-layers/displacement-layers.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-displacement-layers',
+  templateUrl: './displacement-layers.component.html',
+  styleUrl: './displacement-layers.component.scss'
+})
+export class DisplacementLayersComponent {
+
+}

src/app/components/map/displacement-layers/displacement-layers.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MatMenuModule } from '@angular/material/menu';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+import { DisplacementLayersComponent } from './displacement-layers.component';
+import { DocsModalModule } from '@components/shared/docs-modal';
+
+import { MatSharedModule } from '@shared';
+import { SharedModule } from "@shared";
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatMenuModule,
+    MatCheckboxModule,
+    MatSharedModule,
+    SharedModule,
+    DocsModalModule,
+  ],
+  declarations: [
+    DisplacementLayersComponent
+  ],
+  exports: [
+    DisplacementLayersComponent
+  ]
+})
+export class DisplacementLayersModule { }

src/app/components/map/displacement-layers/index.ts

@@ -0,0 +1 @@
+export * from './displacement-layers.module';

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

@@ -6,10 +6,14 @@
   <div class="header-controls fx-row"
        [class.map-control-margin]="(areResultsLoaded$ | async) && breakpoint === breakpoints.MOBILE">
 
-    <div *ngIf="breakpoint > breakpoints.MOBILE" class="fx-row">
+    <div *ngIf="breakpoint > breakpoints.MOBILE" class="fx-col">
       <div class="map-controls">
         <app-map-controls></app-map-controls>
       </div>
+
+      <div class="disp-layers">
+        <app-displacement-layers></app-displacement-layers>
+      </div>
     </div>
 
     <div class="fx-row banner-row">

src/app/components/map/map.component.scss

@@ -25,6 +25,10 @@
   height: 58px;
 }
 
+.disp-layers {
+  margin-top: 10px;
+}
+
 .map-control-margin {
   margin-right: 72px;
 }

src/app/components/map/map.module.ts

@@ -16,6 +16,7 @@ import { AoiOptionsModule } from '@components/shared/aoi-options';
 import { AttributionsComponent } from './attributions/attributions.component';
 import { FiltersDropdownModule } from '@components/filters-dropdown';
 import { BannersModule } from './banners';
+import { DisplacementLayersModule } from './displacement-layers';
 
 import { FileUploadModule } from '@components/shared/aoi-options/file-upload';
 import { SharedModule } from "@shared";
@@ -33,6 +34,7 @@ import { SharedModule } from "@shared";
     MapControlsModule,
     FiltersDropdownModule,
     AoiOptionsModule,
+    DisplacementLayersModule,
 
     SearchButtonModule,
     ClearButtonModule,