merged latest dev

cyan_angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cyan-web-app",
-  "version": "1.1.43",
+  "version": "1.1.46",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

cyan_angular/src/app/location-details/location-details.component.ts

@@ -501,7 +501,16 @@ export class LocationDetailsComponent implements OnInit {
     if (!this.authService.checkUserAuthentication()) { return; }
     let tifName = image.name.split('.png')[0] + '.tif';
     let imageURL = this.getImageUrl(tifName);
-    window.open(imageURL, '_blank');
+
+    this.downloader.getLocationImage(tifName, imageURL).subscribe(result => {
+      let link = document.createElement('a');
+      let blob = new Blob([result.body], { type: 'application/octet-stream'});
+      link.href = window.URL.createObjectURL(blob);
+      link.setAttribute('download', tifName);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    });
   }
 
   downloadTimeSeries() {

cyan_angular/src/app/marker-map/marker-map.component.ts

@@ -40,14 +40,15 @@ export class MarkerMapComponent implements OnInit {
 
   imageLayerTitle = this.mapService.imageLayerTitle;
 
+
   options = {
     layers: [this.mapService.esriImagery],
     zoom: 4,
     center: latLng([this.lat_0, this.lng_0])
   };
 
   currentAttempts: number = 0;
-  totalPrevDayAttempts: number = 50;
+  totalPrevDayAttempts: number = 700;
 
   configSetSub: Subscription;
   dailyTypeSub: Subscription;
@@ -72,6 +73,7 @@ export class MarkerMapComponent implements OnInit {
   ) { }
 
   ngOnInit() {
+
     this.getLocations();
     let username = this.user.getUserName();
     let path = this.ngLocation.path();
@@ -177,22 +179,16 @@ export class MarkerMapComponent implements OnInit {
     let startYear = parseInt(prevDate.split(' ')[0]);
     let startDay = parseInt(prevDate.split(' ')[1]);
 
-    // this.loaderService.show();
-
     this.downloader.getConusImage(startYear, startDay, dailyParam).subscribe(result => {
 
-      // this.loaderService.hide();
-
       let resonseType = result.body.type;
       let responseStatus = result.status;
 
       if (resonseType != 'image/png' || responseStatus != 200) {
         // No data, retry with the date before this one:
         if (this.currentAttempts >= this.totalPrevDayAttempts) {
           this.currentAttempts = 0;
-          // this.dialog.handleError('No conus waterbody image found');
-          console.log("No conus waterbody image found")
-          // this.loaderService.hide();
+          console.error('No conus waterbody image found to load onto map');
           return;
         }
         this.currentAttempts += 1;
@@ -201,7 +197,14 @@ export class MarkerMapComponent implements OnInit {
       else {
         this.currentAttempts = 0;
         let imageBlob = result.body;
-        let dateString = this.calcs.getDateFromDayOfYear(startYear + ' ' + startDay);
+
+        // Ex: attachment; filename="static/raster_plots/weekly-conus-2022-317.png"
+        let dateArray = result.headers.get('Content-Disposition').split('-');
+        let year = dateArray[dateArray.length - 2];
+        let day = dateArray[dateArray.length - 1].split('.')[0];
+
+        let dateString = this.calcs.getDateFromDayOfYear(year + ' ' + day);
+
         let dataTypeString = daily === true ? 'Daily' : 'Weekly';
         this.addImageLayer(imageBlob, dateString, dataTypeString, initImageLoad);
         this.addCustomLabelToMap(dateString, dataTypeString);
@@ -216,16 +219,13 @@ export class MarkerMapComponent implements OnInit {
     reader.addEventListener("load", () => {
       let imageUrl = reader.result.toString();
       let map = this.mapService.getMap();
-
-      // Updates map layer:
-      this.mapService.waterbodyDataLayer.removeFrom(this.mapService.getMap())
+      this.mapService.waterbodyDataLayer.removeFrom(map);
       this.mapService.waterbodyDataLayer = new ImageOverlay(imageUrl, this.mapService.imageBounds);
 
       if (initImageLoad === true) {
-        this.mapService.waterbodyDataLayer.addTo(this.mapService.getMap());
+        this.mapService.waterbodyDataLayer.addTo(map);
       }
 
-      // Updates layer controls:
       if (this.mapService.imageLayerTitle.length > 0) {
         delete this.layersControl.overlays[this.mapService.imageLayerTitle];
       }
@@ -240,9 +240,9 @@ export class MarkerMapComponent implements OnInit {
   }
 
   addCustomLabelToMap(dateString: string, dataTypeString: string): void {
-
+    let map = this.mapService.getMap();
     if (this.mapService.customControl) {
-      this.mapService.getMap().removeControl(this.mapService.customControl);
+      map.removeControl(this.mapService.customControl);
     }
     this.mapService.customControl = new Control()
     this.mapService.customControl.options = {
@@ -252,19 +252,19 @@ export class MarkerMapComponent implements OnInit {
       let container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
       container.style.background = 'white';
       container.style.padding = '5px';
-      container.textContent = 'Satellite Imagery Showing ' + dataTypeString + ' Data for ' + dateString;
+      // container.textContent = 'Satellite Imagery ' + dataTypeString + ' Data -- ' + dateString;
+      container.textContent = dataTypeString + ' Satellite Imagery - ' + dateString;
+
+      console.log("container: ", container)
+
       return container;
     }
-
-    this.mapService.getMap().addControl(this.mapService.customControl);
+    map.addControl(this.mapService.customControl);
   }
 
   mapPanEvent(e: any): void {
-
     if (!this.authService.checkUserAuthentication()) { return; }  // won't auto log out, just skips refresh
-
     this.isClicking = false;  // assumes user intends to pan instead of placing location
-
     if (this.isEnabled == true) {
       this.isEnabled = false;
       this.authService.refresh();

cyan_angular/src/app/services/downloader.service.ts

@@ -317,7 +317,8 @@ export class DownloaderService {
     let url = this.envService.config.waterbodyUrl + 
       'conus_image/?year=' + year +
       '&day=' + day +
-      '&daily=' + daily
+      '&daily=' + daily;
+
     return this.http.get(url, {
       headers: {
         'Content-Type': 'image/png',
@@ -459,6 +460,22 @@ export class DownloaderService {
     });
   }
 
+  getLocationImage(tifName: string, imageURL: string) {
+    /*
+    Gets image from location-details images.
+    */
+    if (!this.authService.checkUserAuthentication()) { return; }
+    let url = this.envService.config.tomcatApiUrl + 'location/images/' + tifName;
+    return this.http.get(url, {
+      headers: {
+        'Content-Type': 'image/tiff',
+        'App-Name': this.envService.config.appName,
+      },
+      responseType: 'blob',
+      observe: 'response'
+    });
+  }
+
   executeAuthorizedPostRequest(url: string, body: any) {
     if (!this.authService.checkUserAuthentication()) { return; }
     return this.http.post(url, body, this.envService.getHeaders());

cyan_angular/src/app/services/map.service.ts

@@ -20,6 +20,7 @@ import { UserService } from '../services/user.service';
 import { ConcentrationRanges } from '../test-data/test-levels';
 import { MapPopupComponent } from '../map-popup/map-popup.component';
 import { NgElement, WithProperties } from '@angular/elements';
+import { HttpClient } from '@angular/common/http';
 
 @Injectable({
   providedIn: 'root'
@@ -44,7 +45,6 @@ export class MapService {
   bottomRight = latLng(this.bottom, this.right);
   imageBounds = latLngBounds(this.bottomRight, this.topLeft);
 
-  // waterbodyDataLayer = new ImageOverlay('./assets/images/daily-conus-2021-234-new.png', this.imageBounds, {});
   waterbodyDataLayer = new ImageOverlay('', null, {});
 
   customControl = new Control();
@@ -75,7 +75,7 @@ export class MapService {
       'Topographic Maps': this.topoMap,
     },
     overlays: {
-      // 'Latest Daily Data': this.waterbodyDataLayer,
+      // 'Latest Daily Data (Testing)': this.waterbodyDataLayer,
       'Waterbodies': this.waterbodiesLayer
     }
   };
@@ -84,8 +84,9 @@ export class MapService {
 
   constructor(
     private cyanMap: CyanMap,
-    private userService: UserService
-  ) {}
+    private userService: UserService,
+    private httpClient: HttpClient
+  ) { }
 
   setMap(map: Map): void {
     this.cyanMap.map = map;

cyan_angular/src/app/waterbody-stats/waterbody-stats-details.component.html

@@ -5,7 +5,7 @@
 		<button mat-button [routerLink]="['']" class="locations-exit">X</button>
 
 		<div class="wbstats-content">
-			<h4>Waterbody Information</h4>
+			<h4>Waterbody Information <a style="color: #212529" href="assets/CYANWEB-USERS-GUIDE_09314022-Final.pdf#page=30" target="_blank"><mat-icon class="waterbody-help-icon">help_outline</mat-icon></a></h4>
 			<br>
 			<div class="wbstats-main-info">
 				<b>Name:</b> {{selectedWaterbody.name}}<br>

cyan_angular/src/app/waterbody-stats/waterbody-stats-details.component.ts

@@ -203,6 +203,7 @@ export class WaterBodyStatsDetails {
     private charts: Charts,
     private router: Router,
     private envService: EnvService,
+    private matDialog: MatDialog,
   ) { }
 
   ngOnInit() {
@@ -230,7 +231,9 @@ export class WaterBodyStatsDetails {
 
     });
 
+    // NOTE: This needs to remove all the tiles/images (move remove function to map.service)
     this.mapService.getMap().removeLayer(this.mapService.waterbodyDataLayer);  // removes wb data layer
+    this.mapService.getMap().removeLayer(this.mapService.waterbodiesLayer);  // removes waterbodies layer
 
   }
 
@@ -1292,4 +1295,4 @@ export class WaterBodyStatsDetails {
 
   }
 
-}
+}

cyan_angular/src/app/waterbody-stats/waterbody-stats.component.css

@@ -380,4 +380,12 @@ h2.label {
 	display:  grid;
 	justify-content: end;
 	justify-items: start;
+}
+
+.waterbody-help-icon {
+
+}
+
+.waterbody-help-icon:hover {
+	cursor: pointer;
 }