diff --git a/client/wfnews-war/src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.ts b/client/wfnews-war/src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.ts index f28349313c..f8c039bfdc 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.ts +++ b/client/wfnews-war/src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.ts @@ -490,9 +490,11 @@ export class ActiveWildfireMapComponent implements OnInit, AfterViewInit { } else if ((params['areaRestriction'] && params['areaRestriction'] === 'true') || (params['evacuationAlert'] && params['evacuationAlert'] === 'true') || (params['activeWildfires'] && params['activeWildfires'] === 'true')){ - this.panToLocation(long, lat, 12); + this.panToLocation(long, lat, params['zoom'] ? params['zoom'] : 12); } else if (params['bansProhibitions'] && params['bansProhibitions'] === 'true'){ - this.panToLocation(long, lat, 6); + this.panToLocation(long, lat, params['zoom'] ? params['zoom'] : 6); + } else if (params['dangerRating'] && params['dangerRating'] === 'true'){ + this.panToLocation(long, lat, params['zoom'] ? params['zoom'] : 5); } else if (params['savedLocation'] && params['savedLocation'] === 'true') { this.panToLocation(long, lat, 8); } else { diff --git a/client/wfnews-war/src/main/angular/src/app/components/draggable-panel/draggable-panel.component.ts b/client/wfnews-war/src/main/angular/src/app/components/draggable-panel/draggable-panel.component.ts index ac018819ed..026de95d7e 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/draggable-panel/draggable-panel.component.ts +++ b/client/wfnews-war/src/main/angular/src/app/components/draggable-panel/draggable-panel.component.ts @@ -74,7 +74,7 @@ export class DraggablePanelComponent implements OnInit, OnChanges, OnDestroy { 'active-wildfires-under-control', 'bcws-activefires-publicview-inactive', 'fire-perimeters', - "active-wildfires-out" + 'active-wildfires-out' ]; convertToDateYear = convertToDateYear; convertToDateTime = convertToDateTime; @@ -90,7 +90,7 @@ export class DraggablePanelComponent implements OnInit, OnChanges, OnDestroy { private previousZoom: number; private marker: any; private markerAnimation; - public snowPlowHelper = snowPlowHelper + public snowPlowHelper = snowPlowHelper; constructor( private publishedIncidentService: PublishedIncidentService, protected cdr: ChangeDetectorRef, @@ -175,8 +175,8 @@ export class DraggablePanelComponent implements OnInit, OnChanges, OnDestroy { if (this.currentIncidentRefs.length === 1 && this.allowBackToIncidentsPanel) { // only show preview detial if it is through openPreviewPanel(). We will always the preview list page by clicking on map, even there is only single item. this.showPanel = true; - showPanel('identify-panel-wrapper') - hidePanel('desktop-preview') + showPanel('identify-panel-wrapper'); + hidePanel('desktop-preview'); const viewer = getActiveMap().$viewer; for (const polygon of this.highlightPolygons) { viewer.map.removeLayer(polygon); @@ -187,8 +187,8 @@ export class DraggablePanelComponent implements OnInit, OnChanges, OnDestroy { // single feature within clicked area this.showPanel = true; - showPanel('identify-panel-wrapper') - hidePanel('desktop-preview') + showPanel('identify-panel-wrapper'); + hidePanel('desktop-preview'); this.identifyItem = this.currentIncidentRefs[0]; let incidentNumber = null; let fireYear = null; @@ -243,8 +243,8 @@ export class DraggablePanelComponent implements OnInit, OnChanges, OnDestroy { // multiple features within clicked area this.identifyItem = null; this.showPanel = true; - showPanel('identify-panel-wrapper') - hidePanel('desktop-preview') + showPanel('identify-panel-wrapper'); + hidePanel('desktop-preview'); this.filteredWildfires = this.currentIncidentRefs.filter((item) => this.wildfireLayerIds.includes(item.layerId), ); @@ -294,8 +294,8 @@ export class DraggablePanelComponent implements OnInit, OnChanges, OnDestroy { ); if (this.weatherStations) { this.showPanel = true; - showPanel('identify-panel-wrapper') - hidePanel('desktop-preview') + showPanel('identify-panel-wrapper'); + hidePanel('desktop-preview'); } } } @@ -587,6 +587,9 @@ return 'Unknown'; location.longitude = Number(this.identifyItem._identifyPoint.longitude); } + // detect current zoom level for routing back from full details page + const currentZoomLevel = getActiveMap().$viewer?.map?._zoom; + switch (this.identifyItem.layerId) { case 'area-restrictions': if (item.properties.NAME) { @@ -596,6 +599,9 @@ return 'Unknown'; id: item.properties.PROT_RA_SYSID, name: item.properties.NAME, source: [ResourcesRoutes.ACTIVEWILDFIREMAP], + sourceLatitude: location.latitude, + sourceLongitude: location.longitude, + sourceZoom: currentZoomLevel }, }); } @@ -607,6 +613,9 @@ return 'Unknown'; type: 'bans-prohibitions', id: item.properties.PROT_BAP_SYSID, source: [ResourcesRoutes.ACTIVEWILDFIREMAP], + sourceLatitude: location.latitude, + sourceLongitude: location.longitude, + sourceZoom: currentZoomLevel }, }); } @@ -618,7 +627,10 @@ return 'Unknown'; id: item.properties.DANGER_RATING_DESC, location: JSON.stringify(location), source: [ResourcesRoutes.ACTIVEWILDFIREMAP], - sysid: item.properties.PROT_DR_SYSID + sysid: item.properties.PROT_DR_SYSID, + sourceLatitude: location.latitude, + sourceLongitude: location.longitude, + sourceZoom: currentZoomLevel }, }); break; @@ -636,6 +648,9 @@ return 'Unknown'; name: item.properties.EVENT_NAME, source: [ResourcesRoutes.ACTIVEWILDFIREMAP], eventNumber: item.properties.EVENT_NUMBER, + sourceLatitude: location.latitude, + sourceLongitude: location.longitude, + sourceZoom: currentZoomLevel }, }); break; @@ -651,8 +666,8 @@ return 'Unknown'; if (fireYear && incidentNumber) { this.router.navigate([ResourcesRoutes.PUBLIC_INCIDENT], { queryParams: { - fireYear: fireYear, - incidentNumber: incidentNumber, + fireYear, + incidentNumber, source: [ResourcesRoutes.ACTIVEWILDFIREMAP], }, }); @@ -684,6 +699,9 @@ return 'Unknown'; type: 'bans-prohibitions', id: item.properties.PROT_BAP_SYSID, source: [ResourcesRoutes.ACTIVEWILDFIREMAP], + sourceLatitude: location.latitude, + sourceLongitude: location.longitude, + sourceZoom: currentZoomLevel }, }); } diff --git a/client/wfnews-war/src/main/angular/src/app/components/full-details/full-details.component.ts b/client/wfnews-war/src/main/angular/src/app/components/full-details/full-details.component.ts index 752afe6f79..0e93554976 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/full-details/full-details.component.ts +++ b/client/wfnews-war/src/main/angular/src/app/components/full-details/full-details.component.ts @@ -15,21 +15,21 @@ export class FullDetailsComponent implements OnInit, OnDestroy { private router: Router, private route: ActivatedRoute, private agolService: AGOLService, - ) {} + ) { } ngOnInit(): void { this.route.queryParams.subscribe((params: ParamMap) => { this.params = params; }); if (document.getElementById('mobile-navigation-bar')) { -document.getElementById('mobile-navigation-bar').style.display = 'none'; -} + document.getElementById('mobile-navigation-bar').style.display = 'none'; + } } ngOnDestroy(): void { if (document.getElementById('mobile-navigation-bar')) { -document.getElementById('mobile-navigation-bar').style.display = 'block'; -} + document.getElementById('mobile-navigation-bar').style.display = 'block'; + } } getTitle() { @@ -48,8 +48,14 @@ document.getElementById('mobile-navigation-bar').style.display = 'block'; back() { try { - if (this.params && this.params['source']) { - if ( + if (this.params?.['source']) { + // If the user accessed the full details page from the map, and if the full details page contains one of area restrictions, + // fire bans, evac orders or evac alerts, use the backToMap function to route back to the map using the same layer and zoom level, + // along with the appropriate coordinates for that type. + if (this.navigatedfromMapPage() + && this.isCurrentlyNavigatedOn(['area-restriction', 'bans-prohibitions', 'evac-order', 'evac-alert', 'danger-rating'])) { + this.backToMap(); + } else if ( this.params['source'] === 'saved-location' && this.params['sourceName'] && this.params['sourceLongitude'] && @@ -75,18 +81,78 @@ document.getElementById('mobile-navigation-bar').style.display = 'block'; }, }); } else { -this.router.navigate(this.params['source']); -} + this.router.navigate(this.params['source']); + } } else { -throw new Error('No previous screen to route too'); -} + throw new Error('No previous screen to route to'); + } } catch (err) { console.error(err); this.router.navigate([ResourcesRoutes.DASHBOARD]); } } - async exit() { - this.router.navigate([ResourcesRoutes.DASHBOARD]); + exit() { + // If the user accessed the full details page from the map, and if the full details page contains one of area restrictions, + // fire bans, evac orders or evac alerts, use the backToMap function to route back to the map using the same layer and zoom level, + // along with the appropriate coordinates for that type + if (this.navigatedfromMapPage() + && this.isCurrentlyNavigatedOn(['area-restriction', 'bans-prohibitions', 'evac-order', 'evac-alert', 'danger-rating'])) { + this.backToMap(); + } else { + this.router.navigate([ResourcesRoutes.DASHBOARD]); + } + } + + navigatedfromMapPage() { + if (this.params?.['source'] === 'map' || this.params?.['source']?.[0] === 'map') { + return true; + } else { + return false; + } + } + + isCurrentlyNavigatedOn(pageList) { + if (pageList.includes(this.params?.['type'])) { + return true; + } else { + return false; + } + } + + // use query params to determine the layer, coordinates and zoom level for routing back to the map + backToMap() { + const navigateToMap = (longitude: number, latitude: number, zoom: string, queryParamKey: string) => { + setTimeout(() => { + this.router.navigate([ResourcesRoutes.ACTIVEWILDFIREMAP], { + queryParams: { + longitude, + latitude, + zoom, + [queryParamKey]: true + }, + }); + }, 100); + }; + + if (this.params['type'] && this.params['sourceLongitude'] && this.params['sourceLatitude'] && this.params['sourceZoom']) { + switch (this.params['type']) { + case 'area-restriction': + navigateToMap(this.params['sourceLongitude'], this.params['sourceLatitude'], this.params['sourceZoom'], 'areaRestriction'); + break; + case 'bans-prohibitions': + navigateToMap(this.params['sourceLongitude'], this.params['sourceLatitude'], this.params['sourceZoom'], 'bansProhibitions'); + break; + case 'danger-rating': + navigateToMap(this.params['sourceLongitude'], this.params['sourceLatitude'], this.params['sourceZoom'], 'dangerRating'); + break; + case 'evac-alert': + case 'evac-order': + navigateToMap(this.params['sourceLongitude'], this.params['sourceLatitude'], this.params['sourceZoom'], 'evacuationAlert'); + break; + } + } else { + throw new Error('Error occurred while routing back to map'); + } } } diff --git a/client/wfnews-war/src/main/angular/src/app/components/preview-panels/area-restriction-preview/area-restriction-preview.component.ts b/client/wfnews-war/src/main/angular/src/app/components/preview-panels/area-restriction-preview/area-restriction-preview.component.ts index 4a91b603c8..6041881c48 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/preview-panels/area-restriction-preview/area-restriction-preview.component.ts +++ b/client/wfnews-war/src/main/angular/src/app/components/preview-panels/area-restriction-preview/area-restriction-preview.component.ts @@ -38,13 +38,15 @@ export class AreaRestrictionPreviewComponent { enterFullDetail() { + const currentZoomLevel = getActiveMap().$viewer?.map?._zoom; const url = this.router.serializeUrl( this.router.createUrlTree([ResourcesRoutes.PUBLIC_EVENT], { queryParams: { eventType: 'area-restriction', eventNumber: this.data.PROT_RA_SYSID, eventName: this.data.NAME, - source: [ResourcesRoutes.ACTIVEWILDFIREMAP] + source: [ResourcesRoutes.ACTIVEWILDFIREMAP], + zoom: currentZoomLevel }, }), ); @@ -52,7 +54,6 @@ export class AreaRestrictionPreviewComponent { } zoomIn(level?: number, polygon?: boolean) { - const viewer = getActiveMap().$viewer; this.agolService .getAreaRestrictions( `NAME='${this.data.NAME}'`, diff --git a/client/wfnews-war/src/main/angular/src/app/components/preview-panels/danger-rating-preview/danger-rating-preview.component.ts b/client/wfnews-war/src/main/angular/src/app/components/preview-panels/danger-rating-preview/danger-rating-preview.component.ts index 2bfec12717..9794864108 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/preview-panels/danger-rating-preview/danger-rating-preview.component.ts +++ b/client/wfnews-war/src/main/angular/src/app/components/preview-panels/danger-rating-preview/danger-rating-preview.component.ts @@ -5,7 +5,7 @@ import { LocationData } from '@app/components/wildfires-list-header/filter-by-lo import { AGOLService } from '@app/services/AGOL-service'; import { CapacitorService } from '@app/services/capacitor-service'; import { CommonUtilityService } from '@app/services/common-utility.service'; -import { ResourcesRoutes, formatDate, hidePanel, showPanel, displayDangerRatingDescription } from '@app/utils'; +import { ResourcesRoutes, formatDate, hidePanel, showPanel, displayDangerRatingDescription, getActiveMap } from '@app/utils'; @Component({ selector: 'wfnews-danger-rating-preview', @@ -40,6 +40,7 @@ export class DangerRatingPreviewComponent { } enterFullDetail() { + const currentZoomLevel = getActiveMap().$viewer?.map?._zoom; const location = new LocationData(); const url = this.router.serializeUrl( this.router.createUrlTree([ResourcesRoutes.PUBLIC_EVENT], { @@ -48,7 +49,8 @@ export class DangerRatingPreviewComponent { eventNumber: this.data.PROT_DR_SYSID, eventName: this.data.DANGER_RATING_DESC, location: JSON.stringify(location), - source: [ResourcesRoutes.ACTIVEWILDFIREMAP] + source: [ResourcesRoutes.ACTIVEWILDFIREMAP], + zoom: currentZoomLevel }, }), ); diff --git a/client/wfnews-war/src/main/angular/src/app/components/preview-panels/evacuations-preview/evacuations-preview.component.ts b/client/wfnews-war/src/main/angular/src/app/components/preview-panels/evacuations-preview/evacuations-preview.component.ts index 742dc46667..7f4a9fb11a 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/preview-panels/evacuations-preview/evacuations-preview.component.ts +++ b/client/wfnews-war/src/main/angular/src/app/components/preview-panels/evacuations-preview/evacuations-preview.component.ts @@ -3,7 +3,7 @@ import { Router } from '@angular/router'; import { AGOLService } from '@app/services/AGOL-service'; import { CapacitorService } from '@app/services/capacitor-service'; import { CommonUtilityService } from '@app/services/common-utility.service'; -import { ResourcesRoutes, convertToDateYear, hidePanel, showPanel } from '@app/utils'; +import { ResourcesRoutes, convertToDateYear, hidePanel, showPanel, getActiveMap } from '@app/utils'; import { MapUtilityService } from '../map-share-service'; @Component({ @@ -49,6 +49,7 @@ export class EvacuationsPreviewComponent { } enterFullDetail() { + const currentZoomLevel = getActiveMap().$viewer?.map?._zoom; if (this.data) { const url = this.router.serializeUrl( this.router.createUrlTree([ResourcesRoutes.PUBLIC_EVENT], { @@ -56,7 +57,8 @@ export class EvacuationsPreviewComponent { eventType: this.data.ORDER_ALERT_STATUS, id: this.data.EMRG_OAA_SYSID, eventNumber: this.data.EVENT_NUMBER, - source: [ResourcesRoutes.ACTIVEWILDFIREMAP] + source: [ResourcesRoutes.ACTIVEWILDFIREMAP], + zoom: currentZoomLevel }, }), ); diff --git a/client/wfnews-war/src/main/angular/src/app/components/preview-panels/fire-ban-preview/fire-ban-preview.component.ts b/client/wfnews-war/src/main/angular/src/app/components/preview-panels/fire-ban-preview/fire-ban-preview.component.ts index 4e04195184..392d08258d 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/preview-panels/fire-ban-preview/fire-ban-preview.component.ts +++ b/client/wfnews-war/src/main/angular/src/app/components/preview-panels/fire-ban-preview/fire-ban-preview.component.ts @@ -38,13 +38,15 @@ export class FireBanPreviewComponent { } enterFullDetail() { + const currentZoomLevel = getActiveMap().$viewer?.map?._zoom; const url = this.router.serializeUrl( this.router.createUrlTree([ResourcesRoutes.PUBLIC_EVENT], { queryParams: { eventType: 'ban', eventNumber: this.data.PROT_BAP_SYSID, eventName: this.data.ACCESS_PROHIBITION_DESCRIPTION, - source: [ResourcesRoutes.ACTIVEWILDFIREMAP] + source: [ResourcesRoutes.ACTIVEWILDFIREMAP], + zoom: currentZoomLevel }, }), ); @@ -52,7 +54,6 @@ export class FireBanPreviewComponent { } zoomIn(level?: number, polygon?: boolean) { - const viewer = getActiveMap().$viewer; this.agolService .getBansAndProhibitionsById( this.data.PROT_BAP_SYSID, diff --git a/client/wfnews-war/src/main/angular/src/app/components/public-incident-page/incident-info-header/incident-header-panel.component.ts b/client/wfnews-war/src/main/angular/src/app/components/public-incident-page/incident-info-header/incident-header-panel.component.ts index 04f4720dfe..4a71ae5ab7 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/public-incident-page/incident-info-header/incident-header-panel.component.ts +++ b/client/wfnews-war/src/main/angular/src/app/components/public-incident-page/incident-info-header/incident-header-panel.component.ts @@ -84,7 +84,7 @@ export class IncidentHeaderPanelComponent implements AfterViewInit, OnInit { weight: 2, fillOpacity: 0 }) - }) + }); private evacOrdersLayer = esri.featureLayer({ url: this.appConfigService.getConfig()['externalAppConfig']['AGOLevacOrders'].toString(), @@ -107,7 +107,7 @@ export class IncidentHeaderPanelComponent implements AfterViewInit, OnInit { }; } } - }) + }); constructor( @@ -418,7 +418,7 @@ export class IncidentHeaderPanelComponent implements AfterViewInit, OnInit { style: '7734' }) .addTo(this.map); - }) + }); } const icon = L.icon({ iconUrl: '/assets/images/local_fire_department.png', @@ -549,13 +549,16 @@ export class IncidentHeaderPanelComponent implements AfterViewInit, OnInit { backToMap() { + const zoom = this.params?.['zoom']; + const navigateToMap = (longitude: number, latitude: number, queryParamKey: string) => { setTimeout(() => { this.router.navigate([ResourcesRoutes.ACTIVEWILDFIREMAP], { queryParams: { longitude, latitude, - [queryParamKey]: true + [queryParamKey]: true, + zoom }, }); }, 100);