diff --git a/client/wfnews-war/src/main/angular/.npmrc b/client/wfnews-war/src/main/angular/.npmrc new file mode 100644 index 0000000000..a4c7e80395 --- /dev/null +++ b/client/wfnews-war/src/main/angular/.npmrc @@ -0,0 +1,2 @@ +//registry.npmjs.org/:_authToken=36fa59cd-a580-4444-9d28-aabc9188b196 +@wf1:registry=https://apps.vividsolutions.com/artifactory/api/npm/npm \ No newline at end of file diff --git a/client/wfnews-war/src/main/angular/src/app/components/wf-map-container/wf-map-container.component.ts b/client/wfnews-war/src/main/angular/src/app/components/wf-map-container/wf-map-container.component.ts index 562d043c74..8731d4746a 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/wf-map-container/wf-map-container.component.ts +++ b/client/wfnews-war/src/main/angular/src/app/components/wf-map-container/wf-map-container.component.ts @@ -15,12 +15,11 @@ import { ViewChild, ViewContainerRef, } from '@angular/core'; +import { CommonUtilityService } from '@app/services/common-utility.service'; import { PointIdService } from '../../services/point-id.service'; import { WFMapService } from '../../services/wf-map.service'; import { IncidentIdentifyPanelComponent } from '../incident-identify-panel/incident-identify-panel.component'; import { WeatherPanelComponent } from '../weather/weather-panel/weather-panel.component'; -import { CommonUtilityService } from '@app/services/common-utility.service'; -import { getActiveMap } from '@app/utils'; let mapIndexAuto = 0; let initPromise = Promise.resolve(); @@ -84,8 +83,7 @@ export class WFMapContainerComponent implements OnDestroy, OnChanges { // initialize the map initPromise = initPromise - .then(function() { - return self.wfMap + .then(() => self.wfMap .createSMK({ id: mapIndex, containerSel: self.mapContainer.nativeElement, @@ -93,7 +91,7 @@ export class WFMapContainerComponent implements OnDestroy, OnChanges { toggleAccordion: self.toggleAccordion, fullScreen: self.fullScreen, }) - .then(function(smk) { + .then((smk) => { self.mapInitialized.emit(smk); // force bc fire centres to the front @@ -101,30 +99,30 @@ export class WFMapContainerComponent implements OnDestroy, OnChanges { // over to the overlay pane on app startup. If the tile // is not active, it will not be moved // note: When we disable the tile layer, we can (and should) remove this - smk.$viewer.map.eachLayer((lyr) => { - if (lyr?._smk_id === 'bc-fire-centres') { - lyr.bringToFront(); - lyr.options.pane = 'tileOverlay'; - let tileOverlay = smk.$viewer.map.getPane('tileOverlay'); - if (!tileOverlay) { - smk.$viewer.map.createPane('tileOverlay'); - tileOverlay = smk.$viewer.map.getPane('tileOverlay'); - //If you want to change the custom pane order, - // set tileOverlay.style.zIndex = ###; to whatever number makes sense - } - // this will move the initially visible layer over on init, as it will - // be placed in the default div on app start. Not really a great way to - // do this so we should implement a better solution for layer pane order - // in smk directly. note that this requires the tile layer to be visible - // by default - tileOverlay.appendChild(smk.$viewer.map.getPane('tilePane').childNodes[0]); - } - }); + // smk.$viewer.map.eachLayer((lyr) => { + // if (lyr?._smk_id === 'bc-fire-centres') { + // lyr.bringToFront(); + // lyr.options.pane = 'tileOverlay'; + // let tileOverlay = smk.$viewer.map.getPane('tileOverlay'); + // if (!tileOverlay) { + // smk.$viewer.map.createPane('tileOverlay'); + // tileOverlay = smk.$viewer.map.getPane('tileOverlay'); + // //If you want to change the custom pane order, + // // set tileOverlay.style.zIndex = ###; to whatever number makes sense + // } + // // this will move the initially visible layer over on init, as it will + // // be placed in the default div on app start. Not really a great way to + // // do this so we should implement a better solution for layer pane order + // // in smk directly. note that this requires the tile layer to be visible + // // by default + // tileOverlay.appendChild(smk.$viewer.map.getPane('tilePane').childNodes[0]); + // } + // }); // enforce a max zoom setting, in case we're using cluster/heatmapping smk.$viewer.map._layersMaxZoom = 20; - smk.$viewer.handlePick(3, function(location) { + smk.$viewer.handlePick(3, (location) => { self.lastClickedLocation = location; // If the layer is visible only if ( @@ -159,16 +157,16 @@ export class WFMapContainerComponent implements OnDestroy, OnChanges { } else { // if the weather stations layer is turned off, we can ignore the debounce // and immediately execute - self.addSelectedIncidentPanels(smk) + self.addSelectedIncidentPanels(smk); } }); return smk; - }); - }) - .catch(function(e) { + })) + .catch((e) => { console.warn(e); }); + this.initPromise = initPromise; } diff --git a/client/wfnews-war/src/main/angular/src/app/services/capacitor-service.ts b/client/wfnews-war/src/main/angular/src/app/services/capacitor-service.ts index c549ebbea7..41d0705572 100644 --- a/client/wfnews-war/src/main/angular/src/app/services/capacitor-service.ts +++ b/client/wfnews-war/src/main/angular/src/app/services/capacitor-service.ts @@ -1,26 +1,25 @@ import { EventEmitter, Injectable, NgZone } from '@angular/core'; -import { MatSnackBarConfig } from '@angular/material/snack-bar'; -import { MatSnackBar } from '@angular/material/snack-bar'; +import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import { Router } from '@angular/router'; import { FCM } from '@capacitor-community/fcm'; -import { Store } from '@ngrx/store'; -import { BehaviorSubject, fromEvent } from 'rxjs'; -import { EventEmitterService } from './event-emitter.service'; -import { environment } from '../../environments/environment'; -import { RootState } from '../store'; -import { ApplicationStateService } from './application-state.service'; import { App, AppState } from '@capacitor/app'; +import { AppLauncher } from '@capacitor/app-launcher'; +import { Browser } from '@capacitor/browser'; import { Device } from '@capacitor/device'; import { Geolocation, Position } from '@capacitor/geolocation'; -import { Browser } from '@capacitor/browser'; import { PushNotificationSchema, PushNotifications, } from '@capacitor/push-notifications'; -import { AppLauncher } from '@capacitor/app-launcher'; +import { Store } from '@ngrx/store'; +import { BehaviorSubject, fromEvent } from 'rxjs'; +import { environment } from '../../environments/environment'; +import { RootState } from '../store'; +import { ApplicationStateService } from './application-state.service'; +import { EventEmitterService } from './event-emitter.service'; -import { NotificationSnackbarComponent } from '../components/notification-snackbar/notification-snackbar.component'; import { ResourcesRoutes } from '@app/utils'; +import { NotificationSnackbarComponent } from '../components/notification-snackbar/notification-snackbar.component'; export interface CompassHeading { magneticHeading?: number; //The heading in degrees from 0-359.99 at a single moment in time. (Number) diff --git a/client/wfnews-war/src/main/angular/src/app/services/map-config.service/map.config.ts b/client/wfnews-war/src/main/angular/src/app/services/map-config.service/map.config.ts index 1e30c5caaa..d0aac79181 100644 --- a/client/wfnews-war/src/main/angular/src/app/services/map-config.service/map.config.ts +++ b/client/wfnews-war/src/main/angular/src/app/services/map-config.service/map.config.ts @@ -8,7 +8,7 @@ export const mapConfig = ( mapServices: MapServices, serviceStatus: MapServiceStatus, device: WfDevice, - appConfigService: AppConfigService, + appConfigService: AppConfigService ) => ({ viewer: { type: 'leaflet', @@ -16,7 +16,7 @@ export const mapConfig = ( location: { extent: [-136.3, 49, -116, 60.2], }, - baseMap: 'navigation', + baseMap: navigator.platform.includes('Linux') || navigator.platform.includes('Android') ? 'openstreetmap' : 'navigation', minZoom: 4, maxZoom: 30, }, diff --git a/client/wfnews-war/src/main/angular/src/app/services/wf-map.service.ts b/client/wfnews-war/src/main/angular/src/app/services/wf-map.service.ts index 4700e50edb..eda8d1f91a 100644 --- a/client/wfnews-war/src/main/angular/src/app/services/wf-map.service.ts +++ b/client/wfnews-war/src/main/angular/src/app/services/wf-map.service.ts @@ -153,7 +153,7 @@ export class WFMapService { id: 'topography', type: 'vector', url: 'https://tiles.arcgis.com/tiles/B6yKvIZqzuOr0jBR/arcgis/rest/services/Canada_Topographic/VectorTileServer', - style: (style) => topoStyle, + style: () => topoStyle, }, ]); @@ -162,7 +162,7 @@ export class WFMapService { id: 'navigation', type: 'vector', url: 'https://tiles.arcgis.com/tiles/B6yKvIZqzuOr0jBR/arcgis/rest/services/Canada_Topographic/VectorTileServer', - style: (style) => navStyle, + style: () => navStyle, }, ]); @@ -171,7 +171,7 @@ export class WFMapService { id: 'imagery', type: 'vector', url: 'https://tiles.arcgis.com/tiles/B6yKvIZqzuOr0jBR/arcgis/rest/services/Canada_Topographic/VectorTileServer', - style: (style) => satelliteStyle, + style: () => satelliteStyle, }, { id: 'Imagery', type: 'tile', url: null, style: null }, ]); @@ -181,7 +181,7 @@ export class WFMapService { id: 'night', type: 'vector', url: 'https://tiles.arcgis.com/tiles/B6yKvIZqzuOr0jBR/arcgis/rest/services/Canada_Topographic/VectorTileServer', - style: (style) => nightStyle, + style: () => nightStyle, }, ]); @@ -194,9 +194,7 @@ export class WFMapService { }, ]); - /*defineEsriBasemap( 'topographic-tile', 'Topographic Tile', [ - { id: 'Topographic', option: { ...topographicOption, ...option2x } } - ] );*/ + defineOpenStreetMapLayer(); smk.destroy(); temp.parentElement.removeChild(temp); @@ -859,10 +857,30 @@ const defineWmsBasemap = ( window['SMK'].TYPE.Viewer.prototype.basemap[id] = { title, order, - create: () => baseMaps.map((bm) => { + create() { + return baseMaps.map((bm) => { const L = window['L']; return L.tileLayer(bm.url, bm.option); - }), + }); + } + }; +}; + +const defineOpenStreetMapLayer = () => { + const L = window['L']; + const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + maxZoom: 19, + attribution: 'Map data © OpenStreetMap', + className: 'leaflet-tile-pane' + }); + order += 1; + + window['SMK'].TYPE.Viewer.prototype.basemap['openstreetmap'] = { + title: 'OpenStreetMap', + order, + create() { + return [osm]; + } }; };