feat: serve map tile styles from tiles.immich.cloud (#12858)

Co-authored-by: shenlong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>

server/src/config.ts

@@ -285,8 +285,8 @@ export const defaults = Object.freeze<SystemConfig>({
   },
   map: {
     enabled: true,
-    lightStyle: '',
-    darkStyle: '',
+    lightStyle: 'https://tiles.immich.cloud/v1/style/light.json',
+    darkStyle: 'https://tiles.immich.cloud/v1/style/dark.json',
   },
   reverseGeocoding: {
     enabled: true,

server/src/controllers/map.controller.ts

@@ -7,7 +7,6 @@ import {
   MapReverseGeocodeDto,
   MapReverseGeocodeResponseDto,
 } from 'src/dtos/map.dto';
-import { MapThemeDto } from 'src/dtos/system-config.dto';
 import { Auth, Authenticated } from 'src/middleware/auth.guard';
 import { MapService } from 'src/services/map.service';
 
@@ -22,12 +21,6 @@ export class MapController {
     return this.service.getMapMarkers(auth, options);
   }
 
-  @Authenticated({ sharedLink: true })
-  @Get('style.json')
-  getMapStyle(@Query() dto: MapThemeDto) {
-    return this.service.getMapStyle(dto.theme);
-  }
-
   @Authenticated()
   @Get('reverse-geocode')
   @HttpCode(HttpStatus.OK)

server/src/dtos/server.dto.ts

@@ -121,6 +121,8 @@ export class ServerConfigDto {
   isInitialized!: boolean;
   isOnboarded!: boolean;
   externalDomain!: string;
+  mapDarkStyleUrl!: string;
+  mapLightStyleUrl!: string;
 }
 
 export class ServerFeaturesDto {

server/src/dtos/system-config.dto.ts

@@ -296,10 +296,12 @@ class SystemConfigMapDto {
   @ValidateBoolean()
   enabled!: boolean;
 
-  @IsString()
+  @IsNotEmpty()
+  @IsUrl()
   lightStyle!: string;
 
-  @IsString()
+  @IsNotEmpty()
+  @IsUrl()
   darkStyle!: string;
 }
 

server/src/services/map.service.ts

@@ -43,17 +43,6 @@ export class MapService {
     return this.mapRepository.getMapMarkers(userIds, albumIds, options);
   }
 
-  async getMapStyle(theme: 'light' | 'dark') {
-    const { map } = await this.configCore.getConfig({ withCache: false });
-    const styleUrl = theme === 'dark' ? map.darkStyle : map.lightStyle;
-
-    if (styleUrl) {
-      return this.mapRepository.fetchStyle(styleUrl);
-    }
-
-    return JSON.parse(await this.systemMetadataRepository.readFile(`./resources/style-${theme}.json`));
-  }
-
   async reverseGeocode(dto: MapReverseGeocodeDto) {
     const { lat: latitude, lon: longitude } = dto;
     // eventually this should probably return an array of results

server/src/services/server.service.spec.ts

@@ -186,6 +186,8 @@ describe(ServerService.name, () => {
         isInitialized: undefined,
         isOnboarded: false,
         externalDomain: '',
+        mapDarkStyleUrl: 'https://tiles.immich.cloud/v1/style/dark.json',
+        mapLightStyleUrl: 'https://tiles.immich.cloud/v1/style/light.json',
       });
       expect(systemMock.get).toHaveBeenCalled();
     });

server/src/services/server.service.ts

@@ -129,6 +129,8 @@ export class ServerService {
       isInitialized,
       isOnboarded: onboarding?.isOnboarded || false,
       externalDomain: config.server.externalDomain,
+      mapDarkStyleUrl: config.map.darkStyle,
+      mapLightStyleUrl: config.map.lightStyle,
     };
   }
 

server/src/services/system-config.service.spec.ts

@@ -100,8 +100,8 @@ const updatedConfig = Object.freeze<SystemConfig>({
   },
   map: {
     enabled: true,
-    lightStyle: '',
-    darkStyle: '',
+    lightStyle: 'https://tiles.immich.cloud/v1/style/light.json',
+    darkStyle: 'https://tiles.immich.cloud/v1/style/dark.json',
   },
   reverseGeocoding: {
     enabled: true,