Skip to content

Commit

Permalink
refactor(wip): map zoom to location
Browse files Browse the repository at this point in the history
  • Loading branch information
@shenlong-tanwen
shenlong-tanwen committed Jan 1, 2024
1 parent f04d2fb commit 0d05f2b
Show file tree
Hide file tree
Showing 4 changed files with 159 additions and 55 deletions.
80 changes: 80 additions & 0 deletions mobile/lib/modules/map/utils/map_utils.dart
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:immich_mobile/modules/map/models/map_marker.dart';
import 'package:immich_mobile/shared/ui/confirm_dialog.dart';
import 'package:geolocator/geolocator.dart';
import 'package:logging/logging.dart';
import 'package:maplibre_gl/maplibre_gl.dart';

class MapUtils {
MapUtils._();

static final Logger _log = Logger("MapUtils");
static const defaultSourceId = 'asset-map-markers';
static const defaultHeatMapLayerId = 'asset-heatmap-layer';

Expand Down Expand Up @@ -55,4 +62,77 @@ class MapUtils {
'type': 'FeatureCollection',
'features': markers.map(_addFeature).toList(),
};

static Future<(Position?, LocationPermission?)> checkOrGetLocationPermission(
BuildContext context,
) async {
try {
bool serviceEnabled = await Geolocator.isLocationServiceEnabled();
if (!serviceEnabled) {
showDialog(
context: context,
builder: (context) => _LocationServiceDisabledDialog(),
);
return (null, LocationPermission.deniedForever);
}

LocationPermission permission = await Geolocator.checkPermission();
bool shouldRequestPermission = false;

if (permission == LocationPermission.denied) {
shouldRequestPermission = await showDialog(
context: context,
builder: (context) => _LocationPermissionDisabledDialog(),
);
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) {
await Geolocator.openAppSettings();
}
return (null, LocationPermission.deniedForever);
}

Position currentUserLocation = await Geolocator.getCurrentPosition(
desiredAccuracy: LocationAccuracy.medium,
timeLimit: const Duration(seconds: 5),
);
return (currentUserLocation, null);
} catch (error) {
_log.severe(
"Cannot get user's current location due to ${error.toString()}",
);
return (null, LocationPermission.unableToDetermine);
}
}
}

class _LocationServiceDisabledDialog extends ConfirmDialog {
_LocationServiceDisabledDialog()
: super(
title: 'map_location_service_disabled_title'.tr(),
content: 'map_location_service_disabled_content'.tr(),
cancel: 'map_location_dialog_cancel'.tr(),
ok: 'map_location_dialog_yes'.tr(),
onOk: () async {
await Geolocator.openLocationSettings();
},
);
}

class _LocationPermissionDisabledDialog extends ConfirmDialog {
_LocationPermissionDisabledDialog()
: super(
title: 'map_no_location_permission_title'.tr(),
content: 'map_no_location_permission_content'.tr(),
cancel: 'map_location_dialog_cancel'.tr(),
ok: 'map_location_dialog_yes'.tr(),
onOk: () {},
);
}
98 changes: 76 additions & 22 deletions mobile/lib/modules/map/views/map_page.dart
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import 'dart:math';
import 'package:collection/collection.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.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';
Expand All @@ -11,12 +14,14 @@ import 'package:immich_mobile/modules/map/models/map_event.model.dart';
import 'package:immich_mobile/modules/map/models/map_marker.dart';
import 'package:immich_mobile/modules/map/providers/map_marker.provider.dart';
import 'package:immich_mobile/modules/map/providers/map_state.provider.dart';
import 'package:immich_mobile/modules/map/utils/map_utils.dart';
import 'package:immich_mobile/modules/map/widgets/map_app_bar.dart';
import 'package:immich_mobile/modules/map/widgets/map_asset_grid.dart';
import 'package:immich_mobile/modules/map/widgets/map_bottom_sheet.dart';
import 'package:immich_mobile/modules/map/widgets/map_theme_override.dart';
import 'package:immich_mobile/modules/map/widgets/positioned_asset_marker_icon.dart';
import 'package:immich_mobile/shared/models/asset.dart';
import 'package:immich_mobile/shared/ui/immich_toast.dart';
import 'package:immich_mobile/shared/views/immich_loading_overlay.dart';
import 'package:immich_mobile/utils/debounce.dart';
import 'package:maplibre_gl/maplibre_gl.dart';
Expand All @@ -37,6 +42,7 @@ class MapPage extends HookConsumerWidget {
final markerDebouncer =
useDebouncer(interval: const Duration(milliseconds: 800));
final selectedAssets = useValueNotifier<Set<Asset>>({});
const mapZoomToAssetLevel = 12.0;

// updates the markersInBounds value with the map markers that are visible in the current
// map camera bounds
Expand Down Expand Up @@ -179,7 +185,33 @@ class MapPage extends HookConsumerWidget {
assetMarker.latLng.longitude,
);
mapController.value!.animateCamera(
CameraUpdate.newLatLngZoom(latlng, 12),
CameraUpdate.newLatLngZoom(latlng, mapZoomToAssetLevel),
duration: const Duration(milliseconds: 800),
);
}
}

void onZoomToLocation() async {
final location = await MapUtils.checkOrGetLocationPermission(context);
if (location.$2 != null) {
if (location.$2 == LocationPermission.unableToDetermine &&
context.mounted) {
ImmichToast.show(
context: context,
gravity: ToastGravity.BOTTOM,
toastType: ToastType.error,
msg: "map_cannot_get_user_location".tr(),
);
}
return;
}

if (mapController.value != null && location.$1 != null) {
mapController.value!.animateCamera(
CameraUpdate.newLatLngZoom(
LatLng(location.$1!.latitude, location.$1!.longitude),
mapZoomToAssetLevel,
),
duration: const Duration(milliseconds: 800),
);
}
Expand All @@ -195,20 +227,27 @@ class MapPage extends HookConsumerWidget {
? Scaffold(
extendBodyBehindAppBar: true,
appBar: MapAppBar(selectedAssets: selectedAssets),
body: _MapWithMarker(
style: style,
selectedMarker: selectedMarker,
onMapCreated: onMapCreated,
onMapMoved: onMapMoved,
onMarkerClicked: onMarkerClicked,
onStyleLoaded: reloadLayers,
),
bottomSheet: MapBottomSheet(
mapEventStream: bottomSheetStreamController.stream,
onGridAssetChanged: onBottomSheetScrolled,
onZoomToAsset: onZoomToAsset,
onAssetsSelected: onAssetsSelected,
selectedAssets: selectedAssets,
body: Stack(
children: [
_MapWithMarker(
style: style,
selectedMarker: selectedMarker,
onMapCreated: onMapCreated,
onMapMoved: onMapMoved,
onMarkerClicked: onMarkerClicked,
onStyleLoaded: reloadLayers,
),
// Should be a part of the body and not scaffold::bottomsheet for the
// location button to be hit testable
MapBottomSheet(
mapEventStream: bottomSheetStreamController.stream,
onGridAssetChanged: onBottomSheetScrolled,
onZoomToAsset: onZoomToAsset,
onAssetsSelected: onAssetsSelected,
onZoomToLocation: onZoomToLocation,
selectedAssets: selectedAssets,
),
],
),
)
// Two-pane
Expand All @@ -218,13 +257,28 @@ class MapPage extends HookConsumerWidget {
child: Scaffold(
extendBodyBehindAppBar: true,
appBar: MapAppBar(selectedAssets: selectedAssets),
body: _MapWithMarker(
style: style,
selectedMarker: selectedMarker,
onMapCreated: onMapCreated,
onMapMoved: onMapMoved,
onMarkerClicked: onMarkerClicked,
onStyleLoaded: reloadLayers,
body: Stack(
children: [
_MapWithMarker(
style: style,
selectedMarker: selectedMarker,
onMapCreated: onMapCreated,
onMapMoved: onMapMoved,
onMarkerClicked: onMarkerClicked,
onStyleLoaded: reloadLayers,
),
Positioned(
right: 0,
bottom: 30,
child: ElevatedButton(
onPressed: onZoomToLocation,
style: ElevatedButton.styleFrom(
shape: const CircleBorder(),
),
child: const Icon(Icons.my_location),
),
),
],
),
),
),
Expand Down
30 changes: 0 additions & 30 deletions mobile/lib/modules/map/widgets/location_dialog.dart
View file

This file was deleted.

6 changes: 3 additions & 3 deletions mobile/lib/modules/map/widgets/map_bottom_sheet.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ class MapBottomSheet extends HookConsumerWidget {
final Stream<MapEvent> mapEventStream;
final Function(String)? onGridAssetChanged;
final Function(String)? onZoomToAsset;
final Function()? onZoomToLocation;
final Function(bool, Set<Asset>)? onAssetsSelected;
final ValueNotifier<Set<Asset>> selectedAssets;

Expand All @@ -19,6 +20,7 @@ class MapBottomSheet extends HookConsumerWidget {
this.onGridAssetChanged,
this.onZoomToAsset,
this.onAssetsSelected,
this.onZoomToLocation,
required this.selectedAssets,
super.key,
});
Expand Down Expand Up @@ -51,7 +53,6 @@ class MapBottomSheet extends HookConsumerWidget {
}

return Stack(
clipBehavior: Clip.none,
children: [
NotificationListener<DraggableScrollableNotification>(
onNotification: onScrollNotification,
Expand All @@ -61,7 +62,6 @@ class MapBottomSheet extends HookConsumerWidget {
maxChildSize: 0.5,
initialChildSize: sheetMinExtent,
snap: true,
expand: false,
shouldCloseOnMinExtent: false,
builder: (ctx, scrollController) => MapAssetGrid(
controller: scrollController,
Expand All @@ -84,7 +84,7 @@ class MapBottomSheet extends HookConsumerWidget {
child: child!,
),
child: ElevatedButton(
onPressed: () {},
onPressed: onZoomToLocation,
style: ElevatedButton.styleFrom(
shape: const CircleBorder(),
),
Expand Down

0 comments on commit 0d05f2b

Please sign in to comment.