feat(mobile): map view (#3661)

* feat(mobile): map page - add map view * map: add map-markers * feat(map): add relative date filter * fix: do not let users scroll past map bounds * fix: fetch relative date from store to state on init * feat(mobile):re-fetch markers only on filter change * feat(mobile) - asset bottom sheet in map page * feat(mobile): display markers based on bottom sheet scroll * fix: exif-bottom-sheet - rebase conflict * feat(mobile): map-view - strongly typed map page events * feat(map): zoom to asset * chore: dart analyzer fixes * map-page move attribution to top-right * feat(mobile): map view - asset selection handling * feat(mobile): map-view display map in places row * fix: make asset marker icon responsive * optimise map page rebuilds * refactor(mobile): map page * feat(mobile): map-view: Go to location * map-view(mobile): minor refactor * fix(mobile): Handle invalid coords gracefully * small styling --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
2025-11-07 17:27:20 +00:00 · 2023-08-27 05:07:35 +00:00 · 2023-08-27 05:07:35 +00:00 · cb391342d7
commit cb391342d7
parent 305889f32b
37 changed files with 2268 additions and 139 deletions
--- a/mobile/lib/modules/map/ui/map_thumbnail.dart
+++ b/mobile/lib/modules/map/ui/map_thumbnail.dart
@ -0,0 +1,76 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_map/plugin_api.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/utils/color_filter_generator.dart';
+import 'package:latlong2/latlong.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+// A non-interactive thumbnail of a map in the given coordinates with optional markers
+class MapThumbnail extends HookConsumerWidget {
+  final Function(TapPosition, LatLng)? onTap;
+  final LatLng coords;
+  final double zoom;
+  final List<Marker> markers;
+  final double height;
+  final bool showAttribution;
+  final bool isDarkTheme;
+
+  const MapThumbnail({
+    super.key,
+    required this.coords,
+    required this.height,
+    this.onTap,
+    this.zoom = 1,
+    this.showAttribution = true,
+    this.isDarkTheme = false,
+    this.markers = const [],
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final tileLayer = TileLayer(
+      urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+      subdomains: const ['a', 'b', 'c'],
+    );
+
+    return SizedBox(
+      height: height,
+      child: ClipRRect(
+        borderRadius: const BorderRadius.all(Radius.circular(15)),
+        child: FlutterMap(
+          options: MapOptions(
+            interactiveFlags: InteractiveFlag.none,
+            center: coords,
+            zoom: zoom,
+            onTap: onTap,
+          ),
+          nonRotatedChildren: [
+            if (showAttribution)
+              RichAttributionWidget(
+                animationConfig: const ScaleRAWA(),
+                attributions: [
+                  TextSourceAttribution(
+                    'OpenStreetMap contributors',
+                    onTap: () => launchUrl(
+                      Uri.parse('https://openstreetmap.org/copyright'),
+                    ),
+                  ),
+                ],
+              ),
+          ],
+          children: [
+            isDarkTheme
+                ? InvertionFilter(
+                    child: SaturationFilter(
+                      saturation: -1,
+                      child: tileLayer,
+                    ),
+                  )
+                : tileLayer,
+            if (markers.isNotEmpty) MarkerLayer(markers: markers),
+          ],
+        ),
+      ),
+    );
+  }
+}