chore(mobile): upgrade maplibre (#16739)

* chore(mobile): upgrade maplibre

* chore(mobile): upgrade maplibre

* color

mobile/lib/extensions/maplibrecontroller_extensions.dart

@@ -6,7 +6,7 @@ import 'package:immich_mobile/models/map/map_marker.model.dart';
 import 'package:immich_mobile/utils/map_utils.dart';
 import 'package:maplibre_gl/maplibre_gl.dart';
 
-extension MapMarkers on MaplibreMapController {
+extension MapMarkers on MapLibreMapController {
   static var _completer = Completer()..complete();
 
   Future<void> addGeoJSONSourceForMarkers(List<MapMarker> markers) async {
@@ -40,12 +40,26 @@ extension MapMarkers on MaplibreMapController {
 
     await addGeoJSONSourceForMarkers(markers);
 
-    await addHeatmapLayer(
+    await addCircleLayer(
       MapUtils.defaultSourceId,
       MapUtils.defaultHeatMapLayerId,
-      MapUtils.defaultHeatMapLayerProperties,
+      const 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,
+      ),
     );
 
+    // await addHeatmapLayer(
+    //   MapUtils.defaultSourceId,
+    //   MapUtils.defaultHeatMapLayerId,
+    //   MapUtils.defaultHeatMapLayerProperties,
+    // );
+
     _completer.complete();
   }
 

mobile/lib/pages/search/map/map.page.dart

@@ -11,7 +11,6 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
 import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/extensions/latlngbounds_extension.dart';
 import 'package:immich_mobile/extensions/maplibrecontroller_extensions.dart';
 import 'package:immich_mobile/models/map/map_event.model.dart';
 import 'package:immich_mobile/models/map/map_marker.model.dart';
@@ -39,7 +38,7 @@ class MapPage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final mapController = useRef<MaplibreMapController?>(null);
+    final mapController = useRef<MapLibreMapController?>(null);
     final markers = useRef<List<MapMarker>>([]);
     final markersInBounds = useRef<List<MapMarker>>([]);
     final bottomSheetStreamController = useStreamController<MapEvent>();
@@ -162,7 +161,7 @@ class MapPage extends HookConsumerWidget {
       }
     }
 
-    void onMapCreated(MaplibreMapController controller) async {
+    void onMapCreated(MapLibreMapController controller) async {
       mapController.value = controller;
       controller.addListener(() {
         if (controller.isCameraMoving && selectedMarker.value != null) {
@@ -389,7 +388,7 @@ class _MapWithMarker extends StatelessWidget {
         child: Stack(
           children: [
             style.widgetWhen(
-              onData: (style) => MaplibreMap(
+              onData: (style) => MapLibreMap(
                 initialCameraPosition:
                     const CameraPosition(target: LatLng(0, 0)),
                 styleString: style,
@@ -403,7 +402,7 @@ class _MapWithMarker extends StatelessWidget {
                 tiltGesturesEnabled: false,
                 dragEnabled: false,
                 myLocationEnabled: false,
-                attributionButtonPosition: AttributionButtonPosition.TopRight,
+                attributionButtonPosition: AttributionButtonPosition.topRight,
                 rotateGesturesEnabled: false,
               ),
             ),

mobile/lib/pages/search/map/map_location_picker.page.dart

@@ -24,7 +24,7 @@ class MapLocationPickerPage extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final selectedLatLng = useValueNotifier<LatLng>(initialLatLng);
-    final controller = useRef<MaplibreMapController?>(null);
+    final controller = useRef<MapLibreMapController?>(null);
     final marker = useRef<Symbol?>(null);
 
     Future<void> onStyleLoaded() async {
@@ -74,7 +74,7 @@ class MapLocationPickerPage extends HookConsumerWidget {
                   bottomRight: Radius.circular(40),
                 ),
               ),
-              child: MaplibreMap(
+              child: MapLibreMap(
                 initialCameraPosition:
                     CameraPosition(target: initialLatLng, zoom: 12),
                 styleString: style,

mobile/lib/widgets/map/map_thumbnail.dart

@@ -41,10 +41,10 @@ class MapThumbnail extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final offsettedCentre = LatLng(centre.latitude + 0.002, centre.longitude);
-    final controller = useRef<MaplibreMapController?>(null);
+    final controller = useRef<MapLibreMapController?>(null);
     final position = useValueNotifier<Point<num>?>(null);
 
-    Future<void> onMapCreated(MaplibreMapController mapController) async {
+    Future<void> onMapCreated(MapLibreMapController mapController) async {
       controller.value = mapController;
       if (assetMarkerRemoteId != null) {
         // The iOS impl returns wrong toScreenLocation without the delay
@@ -73,7 +73,7 @@ class MapThumbnail extends HookConsumerWidget {
             alignment: Alignment.center,
             children: [
               style.widgetWhen(
-                onData: (style) => MaplibreMap(
+                onData: (style) => MapLibreMap(
                   initialCameraPosition:
                       CameraPosition(target: offsettedCentre, zoom: zoom),
                   styleString: style,

mobile/pubspec.lock

@@ -964,26 +964,26 @@ packages:
     dependency: "direct main"
     description:
       name: maplibre_gl
-      sha256: "9dd9eebee52f42a45aaa9cdb912afa47845c37007b26a799aa482ecd368804c8"
+      sha256: cd0adf2da87149cab556ac70977783d6dcb3bd73b17a5583cc8366a5aafa46f8
       url: "https://pub.dev"
     source: hosted
-    version: "0.19.0+2"
+    version: "0.21.0"
   maplibre_gl_platform_interface:
     dependency: transitive
     description:
       name: maplibre_gl_platform_interface
-      sha256: a95fa38a3532253f32dfe181389adfe9f402773e58ac902d9c4efad3209e0903
+      sha256: "6db8234705e58c09b6fd5a43747a817ba1e6e91a76deb3ed057a36a994d86f22"
       url: "https://pub.dev"
     source: hosted
-    version: "0.19.0+2"
+    version: "0.21.0"
   maplibre_gl_web:
     dependency: transitive
     description:
       name: maplibre_gl_web
-      sha256: "7f1540b384f16f3c9bc8b4ebdfca96fb07f6dab5d9ef4dd0e102985dba238691"
+      sha256: e1cbe04594fdb0d76de7cd448c0048290df8dc69dc37a85d23307dd595779141
       url: "https://pub.dev"
     source: hosted
-    version: "0.19.0+2"
+    version: "0.21.0"
   matcher:
     dependency: transitive
     description:

mobile/pubspec.yaml

@@ -26,7 +26,7 @@ dependencies:
   auto_route: ^9.2.0
   fluttertoast: ^8.2.4
   socket_io_client: ^2.0.3+1
-  maplibre_gl: 0.19.0+2
+  maplibre_gl: ^0.21.0
   geolocator: ^11.0.0 # used to move to current location in map view
   flutter_udid: ^3.0.0
   flutter_svg: ^2.0.9