Map performance improvement

.gitignore

@@ -51,3 +51,4 @@ server/wfss-pointid-api/wfss-pointid-api-rest-fireweather-client/target
 server/wfss-pointid-api/wfss-pointid-api-rest-fireweather-common/target
 server/wfss-pointid-api/wfss-pointid-api-rest-wfnews-common/target
 server/wfss-pointid-api/wfss-pointid-swagger-java-client/target
+client/wfnews-war/src/main/angular/.npmrc

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,16 +83,15 @@ 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,
             config: mapConfig,
             toggleAccordion: self.toggleAccordion,
             fullScreen: self.fullScreen,
           })
-          .then(function(smk) {
+          .then((smk) => {
             self.mapInitialized.emit(smk);
 
             // force bc fire centres to the front
@@ -117,14 +115,15 @@ export class WFMapContainerComponent implements OnDestroy, OnChanges {
                 // 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]);
+                const tilePanes = smk.$viewer.map.getPane('tilePane').childNodes;
+                tileOverlay.appendChild(tilePanes[tilePanes.length - 1]);
               }
             });
 
             // 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 +158,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;
   }
 

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)

client/wfnews-war/src/main/angular/src/app/services/map-config.service/map.config.ts

@@ -1,3 +1,4 @@
+import { isAndroidViaNavigator } from '@app/utils';
 import { AppConfigService } from '@wf1/core-ui';
 import { WfDevice } from '@wf1/wfcc-application-ui';
 import { MapServices, MapServiceStatus } from '.';
@@ -8,15 +9,15 @@ export const mapConfig = (
   mapServices: MapServices,
   serviceStatus: MapServiceStatus,
   device: WfDevice,
-  appConfigService: AppConfigService,
+  appConfigService: AppConfigService
 ) => ({
   viewer: {
     type: 'leaflet',
     device,
     location: {
       extent: [-136.3, 49, -116, 60.2],
     },
-    baseMap: 'navigation',
+    baseMap: isAndroidViaNavigator() ? 'openstreetmap' : 'navigation',
     minZoom: 4,
     maxZoom: 30,
   },