Rastered map tiles for Android

sukhpalp · Apr 11, 2024 · 177c69c · 177c69c
1 parent fa69976
commit 177c69c
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 51 deletions.
diff --git a/client/wfnews-war/src/main/angular/.npmrc 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
diff --git a/...ws-war/src/main/angular/src/app/components/wf-map-container/wf-map-container.component.ts b/...ws-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,47 +83,46 @@ 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
             // Note, this will move any active tile layer
             // 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
@@ -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
@@ -8,15 +8,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:  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
@@ -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 &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
+    className: 'leaflet-tile-pane'
+  });
+  order += 1;
+
+  window['SMK'].TYPE.Viewer.prototype.basemap['openstreetmap'] = {
+    title: 'OpenStreetMap',
+    order,
+    create() {
+      return [osm];
+    }
   };
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		//registry.npmjs.org/:_authToken=36fa59cd-a580-4444-9d28-aabc9188b196
		@wf1:registry=https://apps.vividsolutions.com/artifactory/api/npm/npm