commit json

mobile/lib/domain/models/map.model.dart

@@ -0,0 +1,18 @@
+import 'package:maplibre_gl/maplibre_gl.dart';
+
+class Marker {
+  final LatLng location;
+  final String assetId;
+
+  const Marker({required this.location, required this.assetId});
+
+  @override
+  bool operator ==(covariant Marker other) {
+    if (identical(this, other)) return true;
+
+    return other.location == location && other.assetId == assetId;
+  }
+
+  @override
+  int get hashCode => location.hashCode ^ assetId.hashCode;
+}

mobile/lib/domain/services/map.service.dart

@@ -0,0 +1,23 @@
+import 'package:immich_mobile/domain/models/map.model.dart';
+import 'package:immich_mobile/infrastructure/repositories/map.repository.dart';
+import 'package:maplibre_gl/maplibre_gl.dart';
+
+typedef MapMarkerSource = Future<List<Marker>> Function(LatLngBounds? bounds);
+
+typedef MapQuery = ({MapMarkerSource markerSource});
+
+class MapFactory {
+  final DriftMapRepository _mapRepository;
+
+  const MapFactory({required DriftMapRepository mapRepository}) : _mapRepository = mapRepository;
+
+  MapService remote(String ownerId) => MapService(_mapRepository.remote(ownerId));
+}
+
+class MapService {
+  final MapMarkerSource _markerSource;
+
+  MapService(MapQuery query) : _markerSource = query.markerSource;
+
+  Future<List<Marker>> Function(LatLngBounds? bounds) get getMarkers => _markerSource;
+}

mobile/lib/domain/services/timeline.service.dart

@@ -10,6 +10,7 @@ import 'package:immich_mobile/domain/services/setting.service.dart';
 import 'package:immich_mobile/domain/utils/event_stream.dart';
 import 'package:immich_mobile/infrastructure/repositories/timeline.repository.dart';
 import 'package:immich_mobile/utils/async_mutex.dart';
+import 'package:maplibre_gl/maplibre_gl.dart';
 
 typedef TimelineAssetSource = Future<List<BaseAsset>> Function(int index, int count);
 
@@ -57,6 +58,8 @@ class TimelineFactory {
       TimelineService(_timelineRepository.person(userId, personId, groupBy));
 
   TimelineService fromAssets(List<BaseAsset> assets) => TimelineService(_timelineRepository.fromAssets(assets));
+
+  TimelineService map(LatLngBounds bounds) => TimelineService(_timelineRepository.map(bounds, groupBy));
 }
 
 class TimelineService {

mobile/lib/infrastructure/entities/exif.entity.dart

@@ -95,6 +95,7 @@ class ExifInfo {
   );
 }
 
+@TableIndex(name: 'idx_lat_lng', columns: {#latitude, #longitude})
 class RemoteExifEntity extends Table with DriftDefaultsMixin {
   const RemoteExifEntity();
 

mobile/lib/infrastructure/repositories/db.repository.dart

@@ -21,7 +21,7 @@ import 'package:immich_mobile/infrastructure/entities/stack.entity.dart';
 import 'package:immich_mobile/infrastructure/entities/user.entity.dart';
 import 'package:immich_mobile/infrastructure/entities/user_metadata.entity.dart';
 import 'package:immich_mobile/infrastructure/repositories/db.repository.steps.dart';
-import 'package:isar/isar.dart';
+import 'package:isar/isar.dart' hide Index;
 
 import 'db.repository.drift.dart';
 
@@ -66,7 +66,7 @@ class Drift extends $Drift implements IDatabaseRepository {
     : super(executor ?? driftDatabase(name: 'immich', native: const DriftNativeOptions(shareAcrossIsolates: true)));
 
   @override
-  int get schemaVersion => 4;
+  int get schemaVersion => 5;
 
   @override
   MigrationStrategy get migration => MigrationStrategy(
@@ -94,6 +94,9 @@ class Drift extends $Drift implements IDatabaseRepository {
             // asset_face_entity is added
             await m.create(v4.assetFaceEntity);
           },
+          from4To5: (m, v5) async {
+            await m.createIndex(v5.idxLatLng);
+          },
         ),
       );
 

mobile/lib/infrastructure/repositories/db.repository.steps.dart

@@ -1954,10 +1954,345 @@ i1.GeneratedColumn<String> _column_83(String aliasedName) =>
       false,
       type: i1.DriftSqlType.string,
     );
+
+final class Schema5 extends i0.VersionedSchema {
+  Schema5({required super.database}) : super(version: 5);
+  @override
+  late final List<i1.DatabaseSchemaEntity> entities = [
+    userEntity,
+    remoteAssetEntity,
+    stackEntity,
+    localAssetEntity,
+    localAlbumEntity,
+    localAlbumAssetEntity,
+    idxLocalAssetChecksum,
+    uQRemoteAssetOwnerChecksum,
+    idxRemoteAssetChecksum,
+    userMetadataEntity,
+    partnerEntity,
+    remoteExifEntity,
+    remoteAlbumEntity,
+    remoteAlbumAssetEntity,
+    remoteAlbumUserEntity,
+    memoryEntity,
+    memoryAssetEntity,
+    personEntity,
+    assetFaceEntity,
+    idxLatLng,
+  ];
+  late final Shape0 userEntity = Shape0(
+    source: i0.VersionedTable(
+      entityName: 'user_entity',
+      withoutRowId: true,
+      isStrict: true,
+      tableConstraints: ['PRIMARY KEY(id)'],
+      columns: [
+        _column_0,
+        _column_1,
+        _column_2,
+        _column_3,
+        _column_4,
+        _column_5,
+        _column_6,
+        _column_7,
+      ],
+      attachedDatabase: database,
+    ),
+    alias: null,
+  );
+  late final Shape1 remoteAssetEntity = Shape1(
+    source: i0.VersionedTable(
+      entityName: 'remote_asset_entity',
+      withoutRowId: true,
+      isStrict: true,
+      tableConstraints: ['PRIMARY KEY(id)'],
+      columns: [
+        _column_1,
+        _column_8,
+        _column_9,
+        _column_5,
+        _column_10,
+        _column_11,
+        _column_12,
+        _column_0,
+        _column_13,
+        _column_14,
+        _column_15,
+        _column_16,
+        _column_17,
+        _column_18,
+        _column_19,
+        _column_20,
+        _column_21,
+      ],
+      attachedDatabase: database,
+    ),
+    alias: null,
+  );
+  late final Shape3 stackEntity = Shape3(
+    source: i0.VersionedTable(
+      entityName: 'stack_entity',
+      withoutRowId: true,
+      isStrict: true,
+      tableConstraints: ['PRIMARY KEY(id)'],
+      columns: [_column_0, _column_9, _column_5, _column_15, _column_75],
+      attachedDatabase: database,
+    ),
+    alias: null,
+  );
+  late final Shape2 localAssetEntity = Shape2(
+    source: i0.VersionedTable(
+      entityName: 'local_asset_entity',
+      withoutRowId: true,
+      isStrict: true,
+      tableConstraints: ['PRIMARY KEY(id)'],
+      columns: [
+        _column_1,
+        _column_8,
+        _column_9,
+        _column_5,
+        _column_10,
+        _column_11,
+        _column_12,
+        _column_0,
+        _column_22,
+        _column_14,
+        _column_23,
+      ],
+      attachedDatabase: database,
+    ),
+    alias: null,
+  );
+  late final Shape6 localAlbumEntity = Shape6(
+    source: i0.VersionedTable(
+      entityName: 'local_album_entity',
+      withoutRowId: true,
+      isStrict: true,
+      tableConstraints: ['PRIMARY KEY(id)'],
+      columns: [
+        _column_0,
+        _column_1,
+        _column_5,
+        _column_31,
+        _column_32,
+        _column_33,
+      ],
+      attachedDatabase: database,
+    ),
+    alias: null,
+  );
+  late final Shape7 localAlbumAssetEntity = Shape7(
+    source: i0.VersionedTable(
+      entityName: 'local_album_asset_entity',
+      withoutRowId: true,
+      isStrict: true,
+      tableConstraints: ['PRIMARY KEY(asset_id, album_id)'],
+      columns: [_column_34, _column_35],
+      attachedDatabase: database,
+    ),
+    alias: null,
+  );
+  final i1.Index idxLocalAssetChecksum = i1.Index(
+    'idx_local_asset_checksum',
+    'CREATE INDEX idx_local_asset_checksum ON local_asset_entity (checksum)',
+  );
+  final i1.Index uQRemoteAssetOwnerChecksum = i1.Index(
+    'UQ_remote_asset_owner_checksum',
+    'CREATE UNIQUE INDEX UQ_remote_asset_owner_checksum ON remote_asset_entity (checksum, owner_id)',
+  );
+  final i1.Index idxRemoteAssetChecksum = i1.Index(
+    'idx_remote_asset_checksum',
+    'CREATE INDEX idx_remote_asset_checksum ON remote_asset_entity (checksum)',
+  );
+  late final Shape4 userMetadataEntity = Shape4(
+    source: i0.VersionedTable(
+      entityName: 'user_metadata_entity',
+      withoutRowId: true,
+      isStrict: true,
+      tableConstraints: ['PRIMARY KEY(user_id, "key")'],
+      columns: [_column_25, _column_26, _column_27],
+      attachedDatabase: database,
+    ),
+    alias: null,
+  );
+  late final Shape5 partnerEntity = Shape5(
+    source: i0.VersionedTable(
+      entityName: 'partner_entity',
+      withoutRowId: true,
+      isStrict: true,
+      tableConstraints: ['PRIMARY KEY(shared_by_id, shared_with_id)'],
+      columns: [_column_28, _column_29, _column_30],
+      attachedDatabase: database,
+    ),
+    alias: null,
+  );
+  late final Shape8 remoteExifEntity = Shape8(
+    source: i0.VersionedTable(
+      entityName: 'remote_exif_entity',
+      withoutRowId: true,
+      isStrict: true,
+      tableConstraints: ['PRIMARY KEY(asset_id)'],
+      columns: [
+        _column_36,
+        _column_37,
+        _column_38,
+        _column_39,
+        _column_40,
+        _column_41,
+        _column_11,
+        _column_10,
+        _column_42,
+        _column_43,
+        _column_44,
+        _column_45,
+        _column_46,
+        _column_47,
+        _column_48,
+        _column_49,
+        _column_50,
+        _column_51,
+        _column_52,
+        _column_53,
+        _column_54,
+        _column_55,
+      ],
+      attachedDatabase: database,
+    ),
+    alias: null,
+  );
+  late final Shape9 remoteAlbumEntity = Shape9(
+    source: i0.VersionedTable(
+      entityName: 'remote_album_entity',
+      withoutRowId: true,
+      isStrict: true,
+      tableConstraints: ['PRIMARY KEY(id)'],
+      columns: [
+        _column_0,
+        _column_1,
+        _column_56,
+        _column_9,
+        _column_5,
+        _column_15,
+        _column_57,
+        _column_58,
+        _column_59,
+      ],
+      attachedDatabase: database,
+    ),
+    alias: null,
+  );
+  late final Shape7 remoteAlbumAssetEntity = Shape7(
+    source: i0.VersionedTable(
+      entityName: 'remote_album_asset_entity',
+      withoutRowId: true,
+      isStrict: true,
+      tableConstraints: ['PRIMARY KEY(asset_id, album_id)'],
+      columns: [_column_36, _column_60],
+      attachedDatabase: database,
+    ),
+    alias: null,
+  );
+  late final Shape10 remoteAlbumUserEntity = Shape10(
+    source: i0.VersionedTable(
+      entityName: 'remote_album_user_entity',
+      withoutRowId: true,
+      isStrict: true,
+      tableConstraints: ['PRIMARY KEY(album_id, user_id)'],
+      columns: [_column_60, _column_25, _column_61],
+      attachedDatabase: database,
+    ),
+    alias: null,
+  );
+  late final Shape11 memoryEntity = Shape11(
+    source: i0.VersionedTable(
+      entityName: 'memory_entity',
+      withoutRowId: true,
+      isStrict: true,
+      tableConstraints: ['PRIMARY KEY(id)'],
+      columns: [
+        _column_0,
+        _column_9,
+        _column_5,
+        _column_18,
+        _column_15,
+        _column_8,
+        _column_62,
+        _column_63,
+        _column_64,
+        _column_65,
+        _column_66,
+        _column_67,
+      ],
+      attachedDatabase: database,
+    ),
+    alias: null,
+  );
+  late final Shape12 memoryAssetEntity = Shape12(
+    source: i0.VersionedTable(
+      entityName: 'memory_asset_entity',
+      withoutRowId: true,
+      isStrict: true,
+      tableConstraints: ['PRIMARY KEY(asset_id, memory_id)'],
+      columns: [_column_36, _column_68],
+      attachedDatabase: database,
+    ),
+    alias: null,
+  );
+  late final Shape14 personEntity = Shape14(
+    source: i0.VersionedTable(
+      entityName: 'person_entity',
+      withoutRowId: true,
+      isStrict: true,
+      tableConstraints: ['PRIMARY KEY(id)'],
+      columns: [
+        _column_0,
+        _column_9,
+        _column_5,
+        _column_15,
+        _column_1,
+        _column_69,
+        _column_71,
+        _column_72,
+        _column_73,
+        _column_74,
+      ],
+      attachedDatabase: database,
+    ),
+    alias: null,
+  );
+  late final Shape15 assetFaceEntity = Shape15(
+    source: i0.VersionedTable(
+      entityName: 'asset_face_entity',
+      withoutRowId: true,
+      isStrict: true,
+      tableConstraints: ['PRIMARY KEY(id)'],
+      columns: [
+        _column_0,
+        _column_36,
+        _column_76,
+        _column_77,
+        _column_78,
+        _column_79,
+        _column_80,
+        _column_81,
+        _column_82,
+        _column_83,
+      ],
+      attachedDatabase: database,
+    ),
+    alias: null,
+  );
+  final i1.Index idxLatLng = i1.Index(
+    'idx_lat_lng',
+    'CREATE INDEX idx_lat_lng ON remote_exif_entity (latitude, longitude)',
+  );
+}
+
 i0.MigrationStepWithVersion migrationSteps({
   required Future<void> Function(i1.Migrator m, Schema2 schema) from1To2,
   required Future<void> Function(i1.Migrator m, Schema3 schema) from2To3,
   required Future<void> Function(i1.Migrator m, Schema4 schema) from3To4,
+  required Future<void> Function(i1.Migrator m, Schema5 schema) from4To5,
 }) {
   return (currentVersion, database) async {
     switch (currentVersion) {
@@ -1976,6 +2311,11 @@ i0.MigrationStepWithVersion migrationSteps({
         final migrator = i1.Migrator(database, schema);
         await from3To4(migrator, schema);
         return 4;
+      case 4:
+        final schema = Schema5(database: database);
+        final migrator = i1.Migrator(database, schema);
+        await from4To5(migrator, schema);
+        return 5;
       default:
         throw ArgumentError.value('Unknown migration from $currentVersion');
     }
@@ -1986,10 +2326,12 @@ i1.OnUpgrade stepByStep({
   required Future<void> Function(i1.Migrator m, Schema2 schema) from1To2,
   required Future<void> Function(i1.Migrator m, Schema3 schema) from2To3,
   required Future<void> Function(i1.Migrator m, Schema4 schema) from3To4,
+  required Future<void> Function(i1.Migrator m, Schema5 schema) from4To5,
 }) => i0.VersionedSchema.stepByStepHelper(
   step: migrationSteps(
     from1To2: from1To2,
     from2To3: from2To3,
     from3To4: from3To4,
+    from4To5: from4To5,
   ),
 );

mobile/lib/infrastructure/repositories/map.repository.dart

@@ -0,0 +1,71 @@
+import 'package:drift/drift.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/models/map.model.dart';
+import 'package:immich_mobile/domain/services/map.service.dart';
+import 'package:immich_mobile/infrastructure/entities/exif.entity.drift.dart';
+import 'package:immich_mobile/infrastructure/entities/remote_asset.entity.drift.dart';
+import 'package:immich_mobile/infrastructure/repositories/db.repository.dart';
+import 'package:maplibre_gl/maplibre_gl.dart';
+
+class DriftMapRepository extends DriftDatabaseRepository {
+  final Drift _db;
+
+  const DriftMapRepository(super._db) : _db = _db;
+
+  MapQuery remote(String ownerId) => _mapQueryBuilder(
+    assetFilter: (row) =>
+        row.deletedAt.isNull() & row.visibility.equalsValue(AssetVisibility.timeline) & row.ownerId.equals(ownerId),
+  );
+
+  MapQuery _mapQueryBuilder({Expression<bool> Function($RemoteAssetEntityTable row)? assetFilter}) {
+    return (markerSource: (bounds) => _watchMapMarker(assetFilter: assetFilter, bounds: bounds));
+  }
+
+  Future<List<Marker>> _watchMapMarker({
+    Expression<bool> Function($RemoteAssetEntityTable row)? assetFilter,
+    LatLngBounds? bounds,
+  }) {
+    final query = _db.remoteExifEntity.selectOnly()
+      ..addColumns([_db.remoteExifEntity.assetId, _db.remoteExifEntity.latitude, _db.remoteExifEntity.longitude])
+      ..join([
+        innerJoin(
+          _db.remoteAssetEntity,
+          _db.remoteAssetEntity.id.equalsExp(_db.remoteExifEntity.assetId),
+          useColumns: false,
+        ),
+      ])
+      ..limit(10000);
+
+    if (assetFilter != null) {
+      query.where(assetFilter(_db.remoteAssetEntity));
+    }
+
+    if (bounds != null) {
+      query.where(_db.remoteExifEntity.inBounds(bounds));
+    } else {
+      query.where(_db.remoteExifEntity.latitude.isNotNull() & _db.remoteExifEntity.longitude.isNotNull());
+    }
+
+    return query.map((row) {
+      return Marker(
+        assetId: row.read(_db.remoteExifEntity.assetId)!,
+        location: LatLng(row.read(_db.remoteExifEntity.latitude)!, row.read(_db.remoteExifEntity.longitude)!),
+      );
+    }).get();
+  }
+}
+
+extension MapBounds on $RemoteExifEntityTable {
+  Expression<bool> inBounds(LatLngBounds bounds) {
+    final southwest = bounds.southwest;
+    final northeast = bounds.northeast;
+
+    if (southwest.longitude <= northeast.longitude) {
+      return latitude.isBetweenValues(southwest.latitude, northeast.latitude) &
+          longitude.isBetweenValues(southwest.longitude, northeast.longitude);
+    } else {
+      return latitude.isBetweenValues(southwest.latitude, northeast.latitude) &
+          (longitude.isBiggerOrEqualValue(southwest.longitude) | longitude.isSmallerOrEqualValue(northeast.longitude));
+    }
+  }
+}

mobile/lib/infrastructure/repositories/timeline.repository.dart

@@ -11,6 +11,8 @@ import 'package:immich_mobile/infrastructure/entities/local_asset.entity.dart';
 import 'package:immich_mobile/infrastructure/entities/remote_asset.entity.dart';
 import 'package:immich_mobile/infrastructure/entities/remote_asset.entity.drift.dart';
 import 'package:immich_mobile/infrastructure/repositories/db.repository.dart';
+import 'package:immich_mobile/infrastructure/repositories/map.repository.dart';
+import 'package:maplibre_gl/maplibre_gl.dart';
 import 'package:stream_transform/stream_transform.dart';
 
 class DriftTimelineRepository extends DriftDatabaseRepository {
@@ -427,6 +429,67 @@ class DriftTimelineRepository extends DriftDatabaseRepository {
     return query.map((row) => row.readTable(_db.remoteAssetEntity).toDto()).get();
   }
 
+  TimelineQuery map(LatLngBounds bounds, GroupAssetsBy groupBy) => (
+    bucketSource: () => _watchMapBucket(bounds, groupBy: groupBy),
+    assetSource: (offset, count) => _getMapBucketAssets(bounds, offset: offset, count: count),
+  );
+
+  Stream<List<Bucket>> _watchMapBucket(LatLngBounds bounds, {GroupAssetsBy groupBy = GroupAssetsBy.day}) {
+    if (groupBy == GroupAssetsBy.none) {
+      // TODO: Support GroupAssetsBy.none
+      throw UnsupportedError("GroupAssetsBy.none is not supported for _watchMapBucket");
+    }
+
+    final assetCountExp = _db.remoteAssetEntity.id.count();
+    final dateExp = _db.remoteAssetEntity.createdAt.dateFmt(groupBy);
+
+    final query = _db.remoteAssetEntity.selectOnly()
+      ..addColumns([assetCountExp, dateExp])
+      ..join([
+        innerJoin(
+          _db.remoteExifEntity,
+          _db.remoteExifEntity.assetId.equalsExp(_db.remoteAssetEntity.id),
+          useColumns: false,
+        ),
+      ])
+      ..where(
+        _db.remoteExifEntity.latitude.isNotNull() &
+            _db.remoteExifEntity.longitude.isNotNull() &
+            _db.remoteExifEntity.inBounds(bounds) &
+            _db.remoteAssetEntity.visibility.equalsValue(AssetVisibility.timeline) &
+            _db.remoteAssetEntity.deletedAt.isNull(),
+      )
+      ..groupBy([dateExp])
+      ..orderBy([OrderingTerm.desc(dateExp)]);
+
+    return query.map((row) {
+      final timeline = row.read(dateExp)!.dateFmt(groupBy);
+      final assetCount = row.read(assetCountExp)!;
+      return TimeBucket(date: timeline, assetCount: assetCount);
+    }).watch();
+  }
+
+  Future<List<BaseAsset>> _getMapBucketAssets(LatLngBounds bounds, {required int offset, required int count}) {
+    final query =
+        _db.remoteAssetEntity.select().join([
+            innerJoin(
+              _db.remoteExifEntity,
+              _db.remoteExifEntity.assetId.equalsExp(_db.remoteAssetEntity.id),
+              useColumns: false,
+            ),
+          ])
+          ..where(
+            _db.remoteExifEntity.latitude.isNotNull() &
+                _db.remoteExifEntity.longitude.isNotNull() &
+                _db.remoteExifEntity.inBounds(bounds) &
+                _db.remoteAssetEntity.visibility.equalsValue(AssetVisibility.timeline) &
+                _db.remoteAssetEntity.deletedAt.isNull(),
+          )
+          ..orderBy([OrderingTerm.desc(_db.remoteAssetEntity.createdAt)])
+          ..limit(count, offset: offset);
+    return query.map((row) => row.readTable(_db.remoteAssetEntity).toDto()).get();
+  }
+
   TimelineQuery _remoteQueryBuilder({
     required Expression<bool> Function($RemoteAssetEntityTable row) filter,
     GroupAssetsBy groupBy = GroupAssetsBy.day,

mobile/lib/presentation/pages/dev/feat_in_development.page.dart

@@ -22,6 +22,7 @@ final _features = [
     icon: Icons.timeline_rounded,
     onTap: (ctx, _) => ctx.pushRoute(const TabShellRoute()),
   ),
+  _Feature(name: 'Map', icon: Icons.map_outlined, onTap: (ctx, _) => ctx.pushRoute(const DriftMapRoute())),
   _Feature(
     name: 'Selection Mode Timeline',
     icon: Icons.developer_mode_rounded,

mobile/lib/presentation/pages/drift_map.page.dart

@@ -0,0 +1,13 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/presentation/widgets/map/map.widget.dart';
+
+@RoutePage()
+class DriftMapPage extends StatelessWidget {
+  const DriftMapPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Scaffold(extendBodyBehindAppBar: true, body: DriftMap());
+  }
+}

mobile/lib/presentation/pages/drift_place.page.dart

@@ -94,7 +94,11 @@ class _Map extends StatelessWidget {
                 width: context.width,
                 // TODO: migrate to DriftMapRoute after merging #19898
                 child: MapThumbnail(
-                  onTap: (_, __) => context.pushRoute(MapRoute(initialLocation: currentLocation)),
+                  onTap: (_, __) => context.pushRoute(
+                    const DriftMapRoute(
+                      // initialLocation: currentLocation
+                    ),
+                  ),
                   zoom: 8,
                   centre: currentLocation ?? const LatLng(21.44950, -157.91959),
                   showAttribution: false,

mobile/lib/presentation/widgets/bottom_sheet/map_bottom_sheet.widget.dart

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
+import 'package:immich_mobile/presentation/widgets/map/map.state.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/timeline.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
+import 'package:maplibre_gl/maplibre_gl.dart';
+
+class MapBottomSheet extends ConsumerWidget {
+  const MapBottomSheet({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    LatLngBounds bounds = ref.watch(mapStateProvider.select((s) => s.bounds));
+
+    return BaseBottomSheet(
+      initialChildSize: 0.25,
+      shouldCloseOnMinExtent: false,
+      actions: const [],
+      slivers: [
+        SliverFillRemaining(
+          child: ProviderScope(
+            key: ObjectKey(bounds),
+            overrides: [
+              timelineServiceProvider.overrideWith((ref) {
+                final timelineService = ref.watch(timelineFactoryProvider).map(bounds);
+                ref.onDispose(timelineService.dispose);
+                return timelineService;
+              }),
+            ],
+            child: const Timeline(),
+          ),
+        ),
+      ],
+    );
+  }
+}

mobile/lib/presentation/widgets/map/map.state.dart

@@ -0,0 +1,61 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/providers/infrastructure/map.provider.dart';
+import 'package:maplibre_gl/maplibre_gl.dart';
+
+class MapState {
+  final LatLngBounds bounds;
+
+  const MapState({required this.bounds});
+
+  @override
+  bool operator ==(covariant MapState other) {
+    return bounds == other.bounds;
+  }
+
+  @override
+  int get hashCode => bounds.hashCode;
+
+  MapState copyWith({LatLngBounds? bounds}) {
+    return MapState(bounds: bounds ?? this.bounds);
+  }
+}
+
+class MapStateNotifier extends Notifier<MapState> {
+  MapStateNotifier();
+
+  bool setBounds(LatLngBounds bounds) {
+    if (state.bounds == bounds) {
+      return false;
+    }
+    state = state.copyWith(bounds: bounds);
+    return true;
+  }
+
+  @override
+  MapState build() => MapState(
+    // TODO: set default bounds
+    bounds: LatLngBounds(northeast: const LatLng(0, 0), southwest: const LatLng(0, 0)),
+  );
+}
+
+// This provider watches the markers from the map service and serves the markers.
+// It should be used only after the map service provider is overridden
+final mapMarkerProvider = FutureProvider.family<Map<String, dynamic>, LatLngBounds?>((ref, bounds) async {
+  final mapService = ref.watch(mapServiceProvider);
+  final markers = await mapService.getMarkers(bounds);
+  final features = List.filled(markers.length, const <String, dynamic>{});
+  for (int i = 0; i < markers.length; i++) {
+    final marker = markers[i];
+    features[i] = {
+      'type': 'Feature',
+      'id': marker.assetId,
+      'geometry': {
+        'type': 'Point',
+        'coordinates': [marker.location.longitude, marker.location.latitude],
+      },
+    };
+  }
+  return {'type': 'FeatureCollection', 'features': features};
+}, dependencies: [mapServiceProvider]);
+
+final mapStateProvider = NotifierProvider<MapStateNotifier, MapState>(MapStateNotifier.new);

mobile/lib/presentation/widgets/map/map.widget.dart

@@ -0,0 +1,190 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:geolocator/geolocator.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/bottom_sheet/map_bottom_sheet.widget.dart';
+import 'package:immich_mobile/presentation/widgets/map/map_utils.dart';
+import 'package:immich_mobile/presentation/widgets/map/map.state.dart';
+import 'package:immich_mobile/utils/async_mutex.dart';
+import 'package:immich_mobile/utils/debounce.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+import 'package:immich_mobile/widgets/map/map_theme_override.dart';
+import 'package:maplibre_gl/maplibre_gl.dart';
+
+class CustomSourceProperties implements SourceProperties {
+  final Map<String, dynamic> data;
+  const CustomSourceProperties({required this.data});
+
+  @override
+  Map<String, dynamic> toJson() {
+    return {
+      "type": "geojson",
+      "data": data,
+      // "cluster": true,
+      // "clusterRadius": 1,
+      // "clusterMinPoints": 5,
+      // "tolerance": 0.1,
+    };
+  }
+}
+
+class DriftMap extends ConsumerStatefulWidget {
+  const DriftMap({super.key});
+
+  @override
+  ConsumerState<DriftMap> createState() => _DriftMapState();
+}
+
+class _DriftMapState extends ConsumerState<DriftMap> {
+  MapLibreMapController? mapController;
+  final _reloadMutex = AsyncMutex();
+  final _debouncer = Debouncer(interval: const Duration(milliseconds: 250), maxWaitTime: const Duration(seconds: 2));
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    mapController?.removeListener(onMapMoved);
+    mapController?.dispose();
+    _debouncer.dispose();
+    super.dispose();
+  }
+
+  void onMapCreated(MapLibreMapController controller) {
+    mapController = controller;
+  }
+
+  Future<void> onMapReady() async {
+    final controller = mapController;
+    if (controller == null) {
+      return;
+    }
+
+    await controller.addSource(
+      MapUtils.defaultSourceId,
+      const CustomSourceProperties(data: {'type': 'FeatureCollection', 'features': []}),
+    );
+
+    await controller.addHeatmapLayer(
+      MapUtils.defaultSourceId,
+      MapUtils.defaultHeatMapLayerId,
+      MapUtils.defaultHeatmapLayerProperties,
+    );
+    controller.addListener(onMapMoved);
+  }
+
+  void onMapMoved() {
+    if (mapController!.isCameraMoving || !mounted) {
+      return;
+    }
+
+    _debouncer.run(setBounds);
+  }
+
+  Future<void> setBounds() async {
+    final controller = mapController;
+    if (controller == null || !mounted) {
+      return;
+    }
+
+    final bounds = await controller.getVisibleRegion();
+    _reloadMutex.run(() async {
+      if (mounted && ref.read(mapStateProvider.notifier).setBounds(bounds)) {
+        final markers = await ref.read(mapMarkerProvider(bounds).future);
+        await reloadMarkers(markers);
+      }
+    });
+  }
+
+  Future<void> reloadMarkers(Map<String, dynamic> markers) async {
+    final controller = mapController;
+    if (controller == null || !mounted) {
+      return;
+    }
+
+    await controller.setGeoJsonSource(MapUtils.defaultSourceId, markers);
+  }
+
+  Future<void> onZoomToLocation() async {
+    final (location, error) = await MapUtils.checkPermAndGetLocation(context: context);
+    if (error != null) {
+      if (error == LocationPermission.unableToDetermine && context.mounted) {
+        ImmichToast.show(
+          context: context,
+          gravity: ToastGravity.BOTTOM,
+          toastType: ToastType.error,
+          msg: "map_cannot_get_user_location".t(context: context),
+        );
+      }
+      return;
+    }
+
+    final controller = mapController;
+    if (controller != null && location != null) {
+      controller.animateCamera(
+        CameraUpdate.newLatLngZoom(LatLng(location.latitude, location.longitude), MapUtils.mapZoomToAssetLevel),
+        duration: const Duration(milliseconds: 800),
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        _Map(onMapCreated: onMapCreated, onMapReady: onMapReady),
+        _MyLocationButton(onZoomToLocation: onZoomToLocation),
+        const MapBottomSheet(),
+      ],
+    );
+  }
+}
+
+class _Map extends StatelessWidget {
+  const _Map({required this.onMapCreated, required this.onMapReady});
+
+  final MapCreatedCallback onMapCreated;
+
+  final VoidCallback onMapReady;
+
+  @override
+  Widget build(BuildContext context) {
+    return MapThemeOverride(
+      mapBuilder: (style) => style.widgetWhen(
+        onData: (style) => MapLibreMap(
+          initialCameraPosition: const CameraPosition(target: LatLng(0, 0), zoom: 0),
+          styleString: style,
+          onMapCreated: onMapCreated,
+          onStyleLoadedCallback: onMapReady,
+        ),
+      ),
+    );
+  }
+}
+
+class _MyLocationButton extends StatelessWidget {
+  const _MyLocationButton({required this.onZoomToLocation});
+
+  final VoidCallback onZoomToLocation;
+
+  @override
+  Widget build(BuildContext context) {
+    return Positioned(
+      right: 0,
+      bottom: context.padding.bottom + 16,
+      child: ElevatedButton(
+        onPressed: onZoomToLocation,
+        style: ElevatedButton.styleFrom(shape: const CircleBorder()),
+        child: const Icon(Icons.my_location),
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/map/map_utils.dart

@@ -0,0 +1,138 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:geolocator/geolocator.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/widgets/common/confirm_dialog.dart';
+import 'package:logging/logging.dart';
+import 'package:maplibre_gl/maplibre_gl.dart';
+
+class MapUtils {
+  static final Logger _logger = Logger("MapUtils");
+
+  static const mapZoomToAssetLevel = 12.0;
+  static const defaultSourceId = 'asset-map-markers';
+  static const defaultHeatMapLayerId = 'asset-heatmap-layer';
+  static var markerCompleter = Completer()..complete();
+
+  static const defaultCircleLayerLayerProperties = CircleLayerProperties(
+    circleRadius: 10,
+    circleColor: "rgba(150,86,34,0.7)",
+    circleBlur: 1.0,
+    circleOpacity: 0.7,
+    circleStrokeWidth: 0.1,
+    circleStrokeColor: "rgba(203,46,19,0.5)",
+    circleStrokeOpacity: 0.7,
+  );
+
+  static const defaultHeatmapLayerProperties = HeatmapLayerProperties(
+    heatmapColor: [
+      Expressions.interpolate,
+      ["linear"],
+      ["heatmap-density"],
+      0.0,
+      "rgba(103,58,183,0.0)",
+      0.3,
+      "rgb(103,58,183)",
+      0.5,
+      "rgb(33,149,243)",
+      0.7,
+      "rgb(76,175,79)",
+      0.95,
+      "rgb(255,235,59)",
+      1.0,
+      "rgb(255,86,34)",
+    ],
+    heatmapIntensity: [
+      Expressions.interpolate,
+      ["linear"],
+      [Expressions.zoom],
+      0,
+      0.5,
+      9,
+      2,
+    ],
+    heatmapRadius: [
+      Expressions.interpolate,
+      ["linear"],
+      [Expressions.zoom],
+      0,
+      4,
+      4,
+      8,
+      9,
+      16,
+    ],
+    heatmapOpacity: 0.7,
+  );
+
+  static Future<(Position?, LocationPermission?)> checkPermAndGetLocation({
+    required BuildContext context,
+    bool silent = false,
+  }) async {
+    try {
+      bool serviceEnabled = await Geolocator.isLocationServiceEnabled();
+      if (!serviceEnabled && !silent) {
+        showDialog(context: context, builder: (context) => _LocationServiceDisabledDialog(context));
+        return (null, LocationPermission.deniedForever);
+      }
+
+      LocationPermission permission = await Geolocator.checkPermission();
+      bool shouldRequestPermission = false;
+
+      if (permission == LocationPermission.denied && !silent) {
+        shouldRequestPermission = await showDialog(
+          context: context,
+          builder: (context) => _LocationPermissionDisabledDialog(context),
+        );
+        if (shouldRequestPermission) {
+          permission = await Geolocator.requestPermission();
+        }
+      }
+
+      if (permission == LocationPermission.denied || permission == LocationPermission.deniedForever) {
+        // Open app settings only if you did not request for permission before
+        if (permission == LocationPermission.deniedForever && !shouldRequestPermission && !silent) {
+          await Geolocator.openAppSettings();
+        }
+        return (null, LocationPermission.deniedForever);
+      }
+
+      Position currentUserLocation = await Geolocator.getCurrentPosition(
+        locationSettings: const LocationSettings(
+          accuracy: LocationAccuracy.high,
+          distanceFilter: 0,
+          timeLimit: Duration(seconds: 5),
+        ),
+      );
+      return (currentUserLocation, null);
+    } catch (error, stack) {
+      _logger.severe("Cannot get user's current location", error, stack);
+      return (null, LocationPermission.unableToDetermine);
+    }
+  }
+}
+
+class _LocationServiceDisabledDialog extends ConfirmDialog {
+  _LocationServiceDisabledDialog(BuildContext context)
+    : super(
+        title: 'map_location_service_disabled_title'.t(context: context),
+        content: 'map_location_service_disabled_content'.t(context: context),
+        cancel: 'cancel'.t(context: context),
+        ok: 'yes'.t(context: context),
+        onOk: () async {
+          await Geolocator.openLocationSettings();
+        },
+      );
+}
+
+class _LocationPermissionDisabledDialog extends ConfirmDialog {
+  _LocationPermissionDisabledDialog(BuildContext context)
+    : super(
+        title: 'map_no_location_permission_title'.t(context: context),
+        content: 'map_no_location_permission_content'.t(context: context),
+        cancel: 'cancel'.t(context: context),
+        ok: 'yes'.t(context: context),
+        onOk: () {},
+      );
+}

mobile/lib/providers/infrastructure/map.provider.dart

@@ -0,0 +1,24 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/infrastructure/repositories/map.repository.dart';
+import 'package:immich_mobile/providers/infrastructure/db.provider.dart';
+import 'package:immich_mobile/domain/services/map.service.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+
+final mapRepositoryProvider = Provider<DriftMapRepository>((ref) => DriftMapRepository(ref.watch(driftProvider)));
+
+final mapServiceProvider = Provider<MapService>(
+  (ref) {
+    final user = ref.watch(currentUserProvider);
+    if (user == null) {
+      throw Exception('User must be logged in to access map');
+    }
+
+    final mapService = ref.watch(mapFactoryProvider).remote(user.id);
+    return mapService;
+  },
+  // Empty dependencies to inform the framework that this provider
+  // might be used in a ProviderScope
+  dependencies: const [],
+);
+
+final mapFactoryProvider = Provider<MapFactory>((ref) => MapFactory(mapRepository: ref.watch(mapRepositoryProvider)));

mobile/lib/routing/router.dart

@@ -87,6 +87,7 @@ import 'package:immich_mobile/presentation/pages/drift_favorite.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_library.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_local_album.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_locked_folder.page.dart';
+import 'package:immich_mobile/presentation/pages/drift_map.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_memory.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_partner_detail.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_people_collection.page.dart';
@@ -329,6 +330,7 @@ class AppRouter extends RootStackRouter {
 
     AutoRoute(page: DriftPeopleCollectionRoute.page, guards: [_authGuard, _duplicateGuard]),
     AutoRoute(page: DriftPersonRoute.page, guards: [_authGuard]),
+    AutoRoute(page: DriftMapRoute.page, guards: [_authGuard, _duplicateGuard]),
     // required to handle all deeplinks in deep_link.service.dart
     // auto_route_library#1722
     RedirectRoute(path: '*', redirectTo: '/'),

mobile/lib/routing/router.gr.dart

@@ -860,6 +860,22 @@ class DriftLockedFolderRoute extends PageRouteInfo<void> {
   );
 }
 
+/// generated route for
+/// [DriftMapPage]
+class DriftMapRoute extends PageRouteInfo<void> {
+  const DriftMapRoute({List<PageRouteInfo>? children})
+    : super(DriftMapRoute.name, initialChildren: children);
+
+  static const String name = 'DriftMapRoute';
+
+  static PageInfo page = PageInfo(
+    name,
+    builder: (data) {
+      return const DriftMapPage();
+    },
+  );
+}
+
 /// generated route for
 /// [DriftMemoryPage]
 class DriftMemoryRoute extends PageRouteInfo<DriftMemoryRouteArgs> {

mobile/lib/utils/async_mutex.dart

@@ -5,7 +5,7 @@ class AsyncMutex {
   Future _running = Future.value(null);
   int _enqueued = 0;
 
-  get enqueued => _enqueued;
+  int get enqueued => _enqueued;
 
   /// Execute [operation] exclusively, after any currently running operations.
   /// Returns a [Future] with the result of the [operation].

mobile/lib/utils/debounce.dart

@@ -27,8 +27,9 @@ class Debouncer {
   }
 
   Future<void>? drain() {
-    if (_timer != null && _timer!.isActive) {
-      _timer!.cancel();
+    final timer = _timer;
+    if (timer != null && timer.isActive) {
+      timer.cancel();
       if (_lastAction != null) {
         _callAndRest();
       }

mobile/test/drift/main/generated/schema.dart

@@ -7,6 +7,7 @@ import 'schema_v1.dart' as v1;
 import 'schema_v2.dart' as v2;
 import 'schema_v3.dart' as v3;
 import 'schema_v4.dart' as v4;
+import 'schema_v5.dart' as v5;
 
 class GeneratedHelper implements SchemaInstantiationHelper {
   @override
@@ -20,10 +21,12 @@ class GeneratedHelper implements SchemaInstantiationHelper {
         return v3.DatabaseAtV3(db);
       case 4:
         return v4.DatabaseAtV4(db);
+      case 5:
+        return v5.DatabaseAtV5(db);
       default:
         throw MissingSchemaException(version, versions);
     }
   }
 
-  static const versions = const [1, 2, 3, 4];
+  static const versions = const [1, 2, 3, 4, 5];
 }