Andy/ds 6227 displacemen story map

src/app/components/header/header-buttons/header-buttons.component.html

@@ -73,6 +73,24 @@
         }
         @if (searchType === searchTypes.DISPLACEMENT) {
           <app-search-button></app-search-button>
+          <button
+            class="spacing nav-icon-buttons"
+            color="basic"
+            mat-button
+            matTooltip="{{ 'STORYMAP' | translate }}"
+            (click)="onOpenStoryMap()"
+            style="padding: 0"
+          >
+            <img
+              src="assets/StoryMaps.png"
+              alt="StoryMap"
+              class="storymap-icon"
+            />
+            <div class="text-under faint-text" style="margin-top: -3px">
+              {{ 'STORYMAP' | translate }}
+              <mat-icon class="external-link-icon">open_in_new</mat-icon>
+            </div>
+          </button>
           <button class="spacing nav-icon-buttons" color="basic" mat-button>
             <app-docs-modal
               class="icon-description"

src/app/components/header/header-buttons/header-buttons.component.scss

@@ -20,5 +20,17 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+}
+
+.external-link-icon {
+  font-size: 12px;
+  width: 12px;
+  height: 12px;
+  vertical-align: middle;
+  margin-left: 2px;
+}
 
+.storymap-icon {
+  width: 30px;
+  height: 30px;
 }

src/app/components/header/header-buttons/header-buttons.component.ts

@@ -236,6 +236,17 @@ export class HeaderButtonsComponent implements OnInit, OnDestroy {
     this.openNewWindow(url, analyticsEvent);
   }
 
+  public onOpenStoryMap(): void {
+    const url =
+      'https://storymaps.arcgis.com/collections/c52e34d6f5a34538a45a9c9c4dfbc3dc';
+    const analyticsEvent = {
+      name: 'open-storymap',
+      value: url,
+    };
+
+    this.openNewWindow(url, analyticsEvent);
+  }
+
   public onOpenOnDemandDocs(): void {
     const url = 'https://hyp3-docs.asf.alaska.edu/';
     const analyticsEvent = {