feat(web): Global map showing all assets with geo information (#2355)

* First crude implementation of the global asset map in web

* Use single DOM element for all markers

* Minor layout changes

* Refactor

* Add asset viewer

* Add API endpoint that returns only assets with location information (Thanks @EPP100)

* Remove sidebar icon flip

* Add dark theme support

* Center map to most recent asset

* Allow cluster viewing

* Fix linter errors

* Add newlines

* Fix ts errors

* Fix eslint error

* Run prettier

* Server code style

* Fix openapi mobile code generation issues

* Map markers test

* fix: Support video thumbnails

* Update API

* Review suggestions

* Review suggestions

* Linter error

* Chage mapMarker endpoint to map-marker

* Clean up leaflet imports

server/apps/immich/src/api-v1/asset/asset.controller.ts

@@ -31,7 +31,7 @@ import { CheckDuplicateAssetDto } from './dto/check-duplicate-asset.dto';
 import { ApiBody, ApiConsumes, ApiHeader, ApiOkResponse, ApiTags } from '@nestjs/swagger';
 import { CuratedObjectsResponseDto } from './response-dto/curated-objects-response.dto';
 import { CuratedLocationsResponseDto } from './response-dto/curated-locations-response.dto';
-import { AssetResponseDto, ImmichReadStream } from '@app/domain';
+import { AssetResponseDto, ImmichReadStream, MapMarkerResponseDto } from '@app/domain';
 import { CheckDuplicateAssetResponseDto } from './response-dto/check-duplicate-asset-response.dto';
 import { CreateAssetDto, mapToUploadFile } from './dto/create-asset.dto';
 import { AssetFileUploadResponseDto } from './response-dto/asset-file-upload-response.dto';
@@ -260,6 +260,18 @@ export class AssetController {
     return await this.assetService.getAssetByTimeBucket(authUser, getAssetByTimeBucketDto);
   }
 
+  /**
+   * Get all assets that have GPS information embedded
+   */
+  @Authenticated()
+  @Get('/map-marker')
+  getMapMarkers(
+    @GetAuthUser() authUser: AuthUserDto,
+    @Query(new ValidationPipe({ transform: true })) dto: AssetSearchDto,
+  ): Promise<MapMarkerResponseDto[]> {
+    return this.assetService.getMapMarkers(authUser, dto);
+  }
+
   /**
    * Get all asset of a device that are in the database, ID only.
    */

server/apps/immich/src/api-v1/asset/asset.service.spec.ts

@@ -1,7 +1,7 @@
 import { IAssetRepository } from './asset-repository';
 import { AssetService } from './asset.service';
 import { QueryFailedError, Repository } from 'typeorm';
-import { AssetEntity, AssetType } from '@app/infra/entities';
+import { AssetEntity, AssetType, ExifEntity } from '@app/infra/entities';
 import { CreateAssetDto } from './dto/create-asset.dto';
 import { AssetCountByTimeBucket } from './response-dto/asset-count-by-time-group-response.dto';
 import { TimeGroupEnum } from './dto/get-asset-count-by-time-bucket.dto';
@@ -57,6 +57,9 @@ const _getAsset_1 = () => {
   asset_1.webpPath = '';
   asset_1.encodedVideoPath = '';
   asset_1.duration = '0:00:00.000000';
+  asset_1.exifInfo = new ExifEntity();
+  asset_1.exifInfo.latitude = 49.533547;
+  asset_1.exifInfo.longitude = 10.703075;
   return asset_1;
 };
 
@@ -492,4 +495,17 @@ describe('AssetService', () => {
       expect(storageMock.createReadStream).toHaveBeenCalledWith('fake_path/asset_1.jpeg', 'image/jpeg');
     });
   });
+
+  describe('get map markers', () => {
+    it('should get geo information of assets', async () => {
+      assetRepositoryMock.getAllByUserId.mockResolvedValue(_getAssets());
+
+      const markers = await sut.getMapMarkers(authStub.admin, {});
+
+      expect(markers).toHaveLength(1);
+      expect(markers[0].lat).toBe(_getAsset_1().exifInfo?.latitude);
+      expect(markers[0].lon).toBe(_getAsset_1().exifInfo?.longitude);
+      expect(markers[0].id).toBe(_getAsset_1().id);
+    });
+  });
 });

server/apps/immich/src/api-v1/asset/asset.service.ts

@@ -30,6 +30,8 @@ import {
   JobName,
   mapAsset,
   mapAssetWithoutExif,
+  MapMarkerResponseDto,
+  mapAssetMapMarker,
 } from '@app/domain';
 import { CreateAssetDto, UploadFile } from './dto/create-asset.dto';
 import { DeleteAssetResponseDto, DeleteAssetStatusEnum } from './response-dto/delete-asset-response.dto';
@@ -142,6 +144,12 @@ export class AssetService {
     return assets.map((asset) => mapAsset(asset));
   }
 
+  public async getMapMarkers(authUser: AuthUserDto, dto: AssetSearchDto): Promise<MapMarkerResponseDto[]> {
+    const assets = await this._assetRepository.getAllByUserId(authUser.id, dto);
+
+    return assets.map((asset) => mapAssetMapMarker(asset)).filter((marker) => marker != null) as MapMarkerResponseDto[];
+  }
+
   public async getAssetByTimeBucket(
     authUser: AuthUserDto,
     getAssetByTimeBucketDto: GetAssetByTimeBucketDto,