Dev/modify map plugin (#47)

* Switched Mapbox to openstreetmap
* Increased minor version

README.md

@@ -38,7 +38,8 @@ This project is under heavy development, there will be continous functions, feat
 - Image Tagging/Classification based on ImageNet dataset
 - Search assets based on tags and exif data (lens, make, model, orientation)
 - Upload assets from your local computer/server using [immich cli tools](https://www.npmjs.com/package/immich)
-- Geocoding to show asset's location information on map (required MapBox registration for their generous free tier)
+- [Optional] Reserve geocoding using Mapbox (Generous free-tier of 100,000 search/month)
+- Show asset's location information on map (OpenStreetMap).
 
 # Development
 

mobile/ios/Podfile.lock

@@ -11,15 +11,6 @@ PODS:
   - FMDB (2.7.5):
     - FMDB/standard (= 2.7.5)
   - FMDB/standard (2.7.5)
-  - Mapbox-iOS-SDK (6.4.1):
-    - MapboxMobileEvents (~> 0.10.12)
-  - mapbox_gl (0.0.1):
-    - Flutter
-    - Mapbox-iOS-SDK (~> 6.4.0)
-    - MapboxAnnotationExtension (~> 0.0.1-beta.1)
-  - MapboxAnnotationExtension (0.0.1-beta.2):
-    - Mapbox-iOS-SDK (~> 6.0)
-  - MapboxMobileEvents (0.10.14)
   - path_provider_ios (0.0.1):
     - Flutter
   - photo_manager (1.0.0):
@@ -40,7 +31,6 @@ DEPENDENCIES:
   - Flutter (from `Flutter`)
   - flutter_udid (from `.symlinks/plugins/flutter_udid/ios`)
   - fluttertoast (from `.symlinks/plugins/fluttertoast/ios`)
-  - mapbox_gl (from `.symlinks/plugins/mapbox_gl/ios`)
   - path_provider_ios (from `.symlinks/plugins/path_provider_ios/ios`)
   - photo_manager (from `.symlinks/plugins/photo_manager/ios`)
   - sqflite (from `.symlinks/plugins/sqflite/ios`)
@@ -50,9 +40,6 @@ DEPENDENCIES:
 SPEC REPOS:
   trunk:
     - FMDB
-    - Mapbox-iOS-SDK
-    - MapboxAnnotationExtension
-    - MapboxMobileEvents
     - SAMKeychain
     - Toast
 
@@ -65,8 +52,6 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/flutter_udid/ios"
   fluttertoast:
     :path: ".symlinks/plugins/fluttertoast/ios"
-  mapbox_gl:
-    :path: ".symlinks/plugins/mapbox_gl/ios"
   path_provider_ios:
     :path: ".symlinks/plugins/path_provider_ios/ios"
   photo_manager:
@@ -84,10 +69,6 @@ SPEC CHECKSUMS:
   flutter_udid: 0848809dbed4c055175747ae6a45a8b4f6771e1c
   fluttertoast: 6122fa75143e992b1d3470f61000f591a798cc58
   FMDB: 2ce00b547f966261cd18927a3ddb07cb6f3db82a
-  Mapbox-iOS-SDK: f870f83cbdc7aa4a74afcee143aafb0dae390c82
-  mapbox_gl: 33c5ab6306cbfa72289bb3606d2cd2e8baee9ff0
-  MapboxAnnotationExtension: 4eee6c26349ef6d909f1a23a7eae2d0f7ca5fa7d
-  MapboxMobileEvents: 5a172cc9bbf8ac0e45ba86095cbee685ede248cc
   path_provider_ios: 7d7ce634493af4477d156294792024ec3485acd5
   photo_manager: 84fa94fbeb82e607333ea9a13c43b58e0903a463
   SAMKeychain: 483e1c9f32984d50ca961e26818a534283b4cd5c

mobile/lib/modules/asset_viewer/ui/exif_bottom_sheet.dart

@@ -1,13 +1,10 @@
-import 'dart:typed_data';
-
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
+import 'package:flutter_map/flutter_map.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/shared/models/immich_asset_with_exif.model.dart';
-import 'package:immich_mobile/shared/providers/server_info.provider.dart';
 import 'package:intl/intl.dart';
-import 'package:mapbox_gl/mapbox_gl.dart';
 import 'package:path/path.dart' as p;
+import 'package:latlong2/latlong.dart';
 
 class ExifBottomSheet extends ConsumerWidget {
   final ImmichAssetWithExif assetDetail;
@@ -17,7 +14,7 @@ class ExifBottomSheet extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     _buildMap() {
-      return ref.watch(serverInfoProvider).mapboxInfo.isEnable
+      return (assetDetail.exifInfo!.latitude != null && assetDetail.exifInfo!.longitude != null)
           ? Padding(
               padding: const EdgeInsets.symmetric(vertical: 16.0),
               child: Container(
@@ -26,30 +23,33 @@ class ExifBottomSheet extends ConsumerWidget {
                 decoration: const BoxDecoration(
                   borderRadius: BorderRadius.all(Radius.circular(15)),
                 ),
-                child: MapboxMap(
+                child: FlutterMap(
-                  doubleClickZoomEnabled: false,
+                  options: MapOptions(
-                  zoomGesturesEnabled: true,
+                    center: LatLng(assetDetail.exifInfo!.latitude!, assetDetail.exifInfo!.longitude!),
-                  scrollGesturesEnabled: false,
+                    zoom: 16.0,
-                  accessToken: ref.watch(serverInfoProvider).mapboxInfo.mapboxSecret,
-                  styleString: 'mapbox://styles/mapbox/streets-v11',
-                  initialCameraPosition: CameraPosition(
-                    zoom: 15.0,
-                    target: LatLng(assetDetail.exifInfo!.latitude!, assetDetail.exifInfo!.longitude!),
-                  ),
-                  onMapCreated: (MapboxMapController mapController) async {
-                    final ByteData bytes = await rootBundle.load("assets/location-pin.png");
-                    final Uint8List list = bytes.buffer.asUint8List();
-                    await mapController.addImage("assetImage", list);
-
-                    await mapController.addSymbol(
-                      SymbolOptions(
-                        geometry: LatLng(assetDetail.exifInfo!.latitude!, assetDetail.exifInfo!.longitude!),
-                        iconImage: "assetImage",
-                        iconSize: 0.2,
                   ),
+                  layers: [
+                    TileLayerOptions(
+                      urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                      subdomains: ['a', 'b', 'c'],
+                      attributionBuilder: (_) {
+                        return const Text(
+                          "© OpenStreetMap",
+                          style: TextStyle(fontSize: 10),
                         );
                       },
                     ),
+                    MarkerLayerOptions(
+                      markers: [
+                        Marker(
+                          anchorPos: AnchorPos.align(AnchorAlign.top),
+                          point: LatLng(assetDetail.exifInfo!.latitude!, assetDetail.exifInfo!.longitude!),
+                          builder: (ctx) => const Image(image: AssetImage('assets/location-pin.png')),
+                        ),
+                      ],
+                    ),
+                  ],
+                ),
               ),
             )
           : Container();

mobile/lib/modules/home/views/home_page.dart

@@ -11,7 +11,6 @@ import 'package:immich_mobile/modules/home/ui/immich_sliver_appbar.dart';
 import 'package:immich_mobile/modules/home/ui/monthly_title_text.dart';
 import 'package:immich_mobile/modules/home/ui/profile_drawer.dart';
 import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
-import 'package:immich_mobile/shared/providers/server_info.provider.dart';
 import 'package:immich_mobile/shared/providers/websocket.provider.dart';
 import 'package:sliver_tools/sliver_tools.dart';
 
@@ -29,7 +28,6 @@ class HomePage extends HookConsumerWidget {
     useEffect(() {
       ref.read(websocketProvider.notifier).connect();
       ref.read(assetProvider.notifier).getAllAsset();
-      ref.read(serverInfoProvider.notifier).getMapboxInfo();
       return null;
     }, []);
 

mobile/pubspec.lock

@@ -356,6 +356,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.4"
+  flutter_map:
+    dependency: "direct main"
+    description:
+      name: flutter_map
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.14.0"
   flutter_riverpod:
     dependency: transitive
     description:
@@ -506,6 +513,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "4.4.0"
+  latlong2:
+    dependency: transitive
+    description:
+      name: latlong2
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.8.1"
   lints:
     dependency: transitive
     description:
@@ -513,6 +527,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.1"
+  lists:
+    dependency: transitive
+    description:
+      name: lists
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.1"
   logging:
     dependency: transitive
     description:
@@ -520,34 +541,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.2"
-  mapbox_gl:
-    dependency: "direct main"
-    description:
-      name: mapbox_gl
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "0.15.0"
-  mapbox_gl_dart:
-    dependency: transitive
-    description:
-      name: mapbox_gl_dart
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "0.2.1"
-  mapbox_gl_platform_interface:
-    dependency: transitive
-    description:
-      name: mapbox_gl_platform_interface
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "0.15.0"
-  mapbox_gl_web:
-    dependency: transitive
-    description:
-      name: mapbox_gl_web
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "0.15.0"
   matcher:
     dependency: transitive
     description:
@@ -569,6 +562,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.7.0"
+  mgrs_dart:
+    dependency: transitive
+    description:
+      name: mgrs_dart
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.0"
   mime:
     dependency: transitive
     description:
@@ -709,6 +709,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.5.0"
+  positioned_tap_detector_2:
+    dependency: transitive
+    description:
+      name: positioned_tap_detector_2
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.4"
   process:
     dependency: transitive
     description:
@@ -716,6 +723,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "4.2.4"
+  proj4dart:
+    dependency: transitive
+    description:
+      name: proj4dart
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.0"
   provider:
     dependency: transitive
     description:
@@ -737,6 +751,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.2.0"
+  quiver:
+    dependency: transitive
+    description:
+      name: quiver
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.1+1"
   riverpod:
     dependency: transitive
     description:
@@ -903,6 +924,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.0.0"
+  tuple:
+    dependency: transitive
+    description:
+      name: tuple
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.0"
   typed_data:
     dependency: transitive
     description:
@@ -910,6 +938,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.3.0"
+  unicode:
+    dependency: transitive
+    description:
+      name: unicode
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.3.1"
   universal_html:
     dependency: transitive
     description:
@@ -1036,6 +1071,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.3.8"
+  wkt_parser:
+    dependency: transitive
+    description:
+      name: wkt_parser
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.0"
   xdg_directories:
     dependency: transitive
     description:

mobile/pubspec.yaml

@@ -2,7 +2,7 @@ name: immich_mobile
 description: A new Flutter project.
 
 publish_to: "none"
-version: 1.0.1+3
+version: 1.1.0+1
 
 environment:
   sdk: ">=2.15.1 <3.0.0"
@@ -34,7 +34,8 @@ dependencies:
   badges: ^2.0.2
   photo_view: ^0.13.0
   socket_io_client: ^2.0.0-beta.4-nullsafety.0
-  mapbox_gl: ^0.15.0
+  # mapbox_gl: ^0.15.0
+  flutter_map: ^0.14.0
   flutter_udid: ^2.0.0
   
 dev_dependencies: