Determine Leaflet's base layers by fetching raster-tile-base-layer-configs-version-1.jsonc in photo-location-map-resources repo.

angular.webpack.ts

@@ -4,6 +4,7 @@ import * as webpack from 'webpack';
 // This is Custom Webpack Config Function.
 // See https://www.npmjs.com/package/@angular-builders/custom-webpack#custom-webpack-config-function
 export default (config: webpack.Configuration, options: CustomWebpackBrowserSchema) => {
+  config.experiments.topLevelAwait = true;
   config.target = 'electron-renderer';
   return config;
 };

package.json

@@ -133,6 +133,7 @@
     "espower-typescript": "10.0.1",
     "exif-parser": "0.1.12",
     "jasmine-core": "5.2.0",
+    "jsonc-parser": "3.3.1",
     "karma": "6.4.4",
     "karma-coverage-istanbul-reporter": "3.0.3",
     "karma-electron": "7.3.0",

src/app/map/leaflet-map/leaflet-map.component.ts

@@ -14,6 +14,7 @@ import { PhotoInfoViewerContent } from '../../photo-info-viewer/photo-info-viewe
 import { LeafletMapForceRenderService } from './leaflet-map-force-render/leaflet-map-force-render.service';
 import { createDivIconHtml } from './div-icon';
 import { leafletMapLogger as logger } from './leaflet-map-logger';
+import { rasterTileBaseLayerConfigsVersion1 } from './raster-tile-base-layer-configs-version-1';
 
 // References to implement Bing Maps with leaflet-plugins:
 // - https://github.com/shramov/leaflet-plugins/blob/master/examples/bing.html
@@ -39,8 +40,8 @@ export class LeafletMapComponent implements OnDestroy, AfterViewInit {
   private pinnedPhotoServiceSubscription: Subscription;
   private forceRenderServiceSubscription: Subscription;
   private readonly commonLayerOptions = {
-    maxNativeZoom: 19,
-    maxZoom: 19,
+    maxNativeZoom: 18,
+    maxZoom: 18, // To prevent the issue that marker cluster does not work at zoom level 19.
   };
   private map: Map;
   private regionInfo: RegionInfo;
@@ -148,18 +149,16 @@ export class LeafletMapComponent implements OnDestroy, AfterViewInit {
   }
 
   private configureBaseLayer() {
-    const bingLayer = this.getBingLayer();
-    const osmLayer = this.getOsmLayer();
+    const rasterTileBaseLayers = this.getRasterTileBaseLayers();
+    const bingLayers = this.getBingLayers();
     const baseLayers = {
-      'Bing (Road)': bingLayer.roadOnDemand,
-      'Bing (Aerial)': bingLayer.aerial,
-      'Bing (Aerial with Labels)': bingLayer.aerialWithLabelsOnDemand,
-      'OpenStreetMap': osmLayer,
+      ...rasterTileBaseLayers,
+      ...bingLayers,
     };
     L.control.layers(baseLayers, null, {position: 'topright'}).addTo(this.map);
 
     const previousBaseLayer = baseLayers[this.selectedBaseLayerName];
-    const defaultBaseLayer = bingLayer.roadOnDemand;
+    const defaultBaseLayer = Object.values(baseLayers)[0];
     const selectedBaseLayer = previousBaseLayer ?? defaultBaseLayer;
     selectedBaseLayer.addTo(this.map);
 
@@ -168,7 +167,19 @@ export class LeafletMapComponent implements OnDestroy, AfterViewInit {
     });
   }
 
-  private getBingLayer() {
+  private getRasterTileBaseLayers() {
+    const tileLayers = {};
+    rasterTileBaseLayerConfigsVersion1.rasterTileBaseLayerConfigs.forEach(config => {
+      const tileLayer = L.tileLayer(config.url, {
+        ...config.options,
+        maxZoom: 18, // To prevent the issue that marker cluster does not work at zoom level 19.
+      });
+      tileLayers[config.name] = tileLayer;
+    });
+    return tileLayers;
+  }
+
+  private getBingLayers() {
     const bingMapsKey = '96S0sLgTrpX5VudevEyg~93qOp_-tPdiBcUw_Q-mpUg~AtbViWkzvmAlU9MB08o4mka92JlnRQnYHrHP8GKZBbl0caebqVS95jsvOKVHvrt3';
     const bingMapsOptions = {
       key: bingMapsKey,
@@ -178,7 +189,11 @@ export class LeafletMapComponent implements OnDestroy, AfterViewInit {
     const roadOnDemand = new L.bingLayer(L.extend({imagerySet: 'RoadOnDemand'}, bingMapsOptions));
     const aerial = new L.bingLayer(L.extend({imagerySet: 'Aerial'}, bingMapsOptions));
     const aerialWithLabelsOnDemand = new L.bingLayer(L.extend({imagerySet: 'AerialWithLabelsOnDemand'}, bingMapsOptions));
-    return {roadOnDemand, aerial, aerialWithLabelsOnDemand};
+    return {
+      'Bing (Road)': roadOnDemand,
+      'Bing (Aerial)': aerial,
+      'Bing (Aerial with Labels)': aerialWithLabelsOnDemand,
+    };
   }
 
   private getCultureForBingMaps(): string {
@@ -191,13 +206,6 @@ export class LeafletMapComponent implements OnDestroy, AfterViewInit {
     return navigator.language;
   }
 
-  private getOsmLayer() {
-    return L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
-      attribution: '© OpenStreetMap contributors, CC-BY-SA',
-      ...this.commonLayerOptions,
-    });
-  }
-
   private configureRegionSelector() {
     this.configureRegionInfo();
     this.configureLeafletGeoman();

src/app/map/leaflet-map/raster-tile-base-layer-configs-version-1.ts

@@ -0,0 +1,91 @@
+import { parse as parseJsonc } from 'jsonc-parser';
+import { Analytics } from '../../../../src-shared/analytics/analytics';
+import { toLoggableString } from '../../../../src-shared/log/to-loggable-string';
+import { leafletMapLogger as logger } from './leaflet-map-logger';
+
+// Represents the content of raster-tile-base-layer-configs-version-1.jsonc in photo-location-map-resources repo.
+interface RasterTileBaseLayerConfigsVersion1 {
+  version: string;
+  rasterTileBaseLayerConfigs: RasterTileBaseLayerConfigs[];
+}
+
+interface RasterTileBaseLayerConfigs {
+  name: string;
+  url: string;
+  options?: any;
+}
+
+// The fallback configs used in case of failing to fetch the configs from photo-location-map-resources repo.
+export const rasterTileBaseLayerConfigsVersion1Fallback: RasterTileBaseLayerConfigsVersion1 = {
+  version: '1',
+  rasterTileBaseLayerConfigs: [
+    {
+      name: 'OpenStreetMap',
+      url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+      options: {
+        attribution: '© OpenStreetMap contributors'
+      }
+    },
+    {
+      name: 'Esri World Street Map',
+      url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
+      options: {
+        attribution: 'Tiles © Esri — Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
+      }
+    },
+    {
+      name: 'Esri World Imagery',
+      url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+      options: {
+        attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
+      }
+    }
+  ],
+};
+
+// In the production environment, the content of main branch in photo-location-map-resources repo is used.
+// In the development environment, the content of the feature branch can be used as needed.
+const configsFileUrl
+  = 'https://cdn.jsdelivr.net/gh/TomoyukiAota/photo-location-map-resources@main/map-configs/raster-tile-base-layer-configs-version-1.jsonc';
+
+async function fetchRasterTileBaseLayerConfigsVersion1(): Promise<RasterTileBaseLayerConfigsVersion1> {
+  const response = await fetch(configsFileUrl);
+  if (!response.ok) {
+    throw new Error(`response.status: ${response.status}, response.statusText: ${response.statusText}`);
+  }
+  const jsonc = await response.text();
+  const json = parseJsonc(jsonc);
+  return json as RasterTileBaseLayerConfigsVersion1;
+}
+
+function recordErrorAndGetFallback(message: string): RasterTileBaseLayerConfigsVersion1 {
+  logger.error(message);
+  Analytics.trackEvent('Leaflet Map', `[Leaflet Map] Fallback BaseLayerConfigs`, message);
+  return rasterTileBaseLayerConfigsVersion1Fallback;
+}
+
+async function fetchRasterTileBaseLayerConfigsVersion1WithFallback(): Promise<RasterTileBaseLayerConfigsVersion1> {
+  const fetchingMessage = `Fetching ${configsFileUrl}`;
+  logger.info(fetchingMessage);
+  Analytics.trackEvent('Leaflet Map', `[Leaflet Map] Fetching BaseLayerConfigs`, fetchingMessage);
+
+  let configs: RasterTileBaseLayerConfigsVersion1;
+  try {
+    configs = await fetchRasterTileBaseLayerConfigsVersion1();
+  } catch (error) {
+    const message = `Failed to fetch ${configsFileUrl}. Using the fallback configs. ${error.message}`;
+    return recordErrorAndGetFallback(message);
+  }
+
+  if (!configs?.rasterTileBaseLayerConfigs?.length) {
+    const message = `Invalid configs object is fetched from ${configsFileUrl}. Using the fallback configs.\n${toLoggableString(configs)}`;
+    return recordErrorAndGetFallback(message);
+  }
+
+  const fetchedMessage = `Fetched ${configsFileUrl}\n${toLoggableString(configs)}`;
+  logger.info(fetchedMessage);
+  Analytics.trackEvent('Leaflet Map', `[Leaflet Map] Fetched BaseLayerConfigs`, fetchedMessage);
+  return configs;
+}
+
+export const rasterTileBaseLayerConfigsVersion1 = await fetchRasterTileBaseLayerConfigsVersion1WithFallback();