Bans widget content

client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/bans-widget/bans-widget.component.html

@@ -3,5 +3,18 @@
     <span>Fire Bans</span>
   </div>
   <ng-template #loading><mat-spinner [diameter]="80" class="spinner-position"></mat-spinner></ng-template>
-  <div *ngIf="startupComplete; else loading"></div>
+  <div class="content" *ngIf="startupComplete; else loading">
+    <div class="legend-bar">
+      <div class="legend-part">
+        <img height="17" width="17" src="/assets/images/category1ban.png" alt="Category 1" class="icon"><span class="checkbox-label">Category 1 (Campfires)</span>
+      </div>
+      <div class="legend-part">
+        <img height="17" width="17" src="/assets/images/category2ban.png" alt="Category 2" class="icon"><span class="checkbox-label">Category 2</span>
+      </div>
+      <div class="legend-part">
+        <img height="17" width="17" src="/assets/images/category3ban.png" alt="Category 3" class="icon"><span class="checkbox-label">Category 3</span>
+      </div>
+    </div>
+    <div id="bans-map" class="bans-map-container"></div>
+  </div>
 </div>

client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/bans-widget/bans-widget.component.scss

@@ -28,7 +28,7 @@
 .widget-header {
   color: #242424;
   font-feature-settings: 'clig' off, 'liga' off;
-  font-family: Noto Sans;
+  font-family: 'Noto sans', 'BCSans', 'Open Sans', Verdana, Arial, sans-serif;
   font-size: 26px;
   font-style: normal;
   font-weight: 500;
@@ -38,3 +38,36 @@
   width: 100%;
   padding-bottom: 16px;
 }
+
+.content {
+  height: 100%;
+  width: 100%;
+}
+
+.legend-bar {
+  display: flex;
+  padding: 8px 0px;
+  align-items: flex-start;
+  align-content: flex-start;
+  gap: 24px var(--24, 24px);
+  align-self: stretch;
+  flex-wrap: wrap;
+  color: var(--Black-2, #484848);
+  font-family: 'Noto sans', 'BCSans', 'Open Sans', Verdana, Arial, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.icon {
+  padding: 4px;
+  position: relative;
+  top: 6px;
+}
+
+.bans-map-container {
+  width: 100%;
+  height: calc(100% - 50px);
+  border-radius: 10px;
+}

client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/bans-widget/bans-widget.component.ts

@@ -1,12 +1,93 @@
-import { Component } from "@angular/core"
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnInit } from "@angular/core"
+import * as L from 'leaflet'
+import { AppConfigService } from "@wf1/core-ui"
+import { HttpClient } from "@angular/common/http"
 
 @Component({
   selector: 'bans-widget',
   templateUrl: './bans-widget.component.html',
   styleUrls: ['./bans-widget.component.scss']
 })
-export class BansWidget {
+export class BansWidget implements OnInit, AfterViewInit {
   public startupComplete = false
-
-  constructor() { }
+  public map: any = null
+
+  constructor(private appConfigService: AppConfigService, private cdr: ChangeDetectorRef, private httpClient: HttpClient, private el: ElementRef) { }
+
+  ngOnInit (): void {
+    const observer = new ResizeObserver(() => {
+      if (this.map) {
+        this.map.invalidateSize()
+      }
+    }).observe(this.el.nativeElement)
+  }
+
+  ngAfterViewInit (): void {
+    Promise.all([
+      this.httpClient.get('assets/js/smk/bans-cat1.sld', {responseType: 'text'}).toPromise(),
+      this.httpClient.get('assets/js/smk/bans-cat2.sld', {responseType: 'text'}).toPromise(),
+      this.httpClient.get('assets/js/smk/bans-cat3.sld', {responseType: 'text'}).toPromise()
+    ]).then(([cat1sld, cat2sld, cat3sld]) => {
+      // set startupComplete to true
+      this.startupComplete = true
+      this.cdr.detectChanges()
+
+      console.log(cat1sld, cat2sld, cat3sld)
+
+      // Create map and append data to the map component
+      const southWest = L.latLng(60.2, -116),
+      northEast = L.latLng(49, -136.3),
+      bounds = L.latLngBounds(southWest, northEast),
+      location = [Number(55), Number(-126)]
+
+      this.map = L.map('bans-map', {
+      maxBounds: bounds,
+      attributionControl: false,
+      zoomControl: false,
+      dragging: false,
+      doubleClickZoom: false,
+      boxZoom: false,
+      trackResize: false,
+      scrollWheelZoom: false,
+      maxZoom: 5
+      }).setView(location, 5)
+      // configure map data
+      L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      }).addTo(this.map)
+
+      const databcUrl = this.appConfigService.getConfig()['mapServices']['openmapsBaseUrl'].toString()
+      L.tileLayer.wms(databcUrl, {
+        layers: 'WHSE_LAND_AND_NATURAL_RESOURCE.PROT_BANS_AND_PROHIBITIONS_SP',
+        format: 'image/png',
+        transparent: true,
+        version: '1.1.1',
+        sld_body: cat3sld,
+        cql_filter: 'ACCESS_PROHIBITION_DESCRIPTION LIKE \'%Category 3%\'',
+        opacity: 0.5
+      }).addTo(this.map)
+
+      L.tileLayer.wms(databcUrl, {
+        layers: 'WHSE_LAND_AND_NATURAL_RESOURCE.PROT_BANS_AND_PROHIBITIONS_SP',
+        format: 'image/png',
+        transparent: true,
+        version: '1.1.1',
+        sld_body: cat2sld,
+        cql_filter: 'ACCESS_PROHIBITION_DESCRIPTION LIKE \'%Category 2%\'',
+        opacity: 0.5
+      }).addTo(this.map)
+
+      L.tileLayer.wms(databcUrl, {
+        layers: 'WHSE_LAND_AND_NATURAL_RESOURCE.PROT_BANS_AND_PROHIBITIONS_SP',
+        format: 'image/png',
+        transparent: true,
+        version: '1.1.1',
+        sld_body: cat1sld,
+        cql_filter: 'ACCESS_PROHIBITION_DESCRIPTION LIKE \'%Category 1%\' OR ACCESS_PROHIBITION_DESCRIPTION LIKE \'%Campfire%\'',
+        opacity: 0.5
+      }).addTo(this.map)
+
+      this.cdr.detectChanges()
+    })
+  }
 }

client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/overview-widget/overview-widget.component.ts

@@ -26,8 +26,6 @@ export class OverviewWidget implements OnInit, AfterViewInit {
     console.log('After View Init')
     // load the incident points from the API
     const url = `${this.appConfigService.getConfig().rest['wfnews']}/publicPublishedIncident/features?stageOfControl=`
-    this.httpClient.get(url, { headers: { apikey: this.appConfigService.getConfig().application['wfnewsApiKey']} }).toPromise()
-
     Promise.all([
       this.httpClient.get(url + 'FIRE_OF_NOTE', { headers: { apikey: this.appConfigService.getConfig().application['wfnewsApiKey']} }).toPromise(),
       this.httpClient.get(url + 'OUT_CNTRL', { headers: { apikey: this.appConfigService.getConfig().application['wfnewsApiKey']} }).toPromise(),