diff --git a/client/components/Map.tsx b/client/components/Map.tsx index 65fc1ce..a36ecc4 100644 --- a/client/components/Map.tsx +++ b/client/components/Map.tsx @@ -1,9 +1,9 @@ import { StyleSheet } from 'react-native' -import MapLibreGL, { Camera, FillLayer, LineLayer, MapView, PointAnnotation, RasterLayer, RasterSource, ShapeSource, UserLocation } from '@maplibre/maplibre-react-native' +import MapLibreGL, { Camera, FillLayer, LineLayer, MapView, PointAnnotation, RasterLayer, RasterSource, ShapeSource, UserLocation, UserTrackingMode } from '@maplibre/maplibre-react-native' import { FontAwesome5, MaterialIcons } from '@expo/vector-icons' import { circle } from '@turf/circle' import { useLastOwnLocation, useLastPlayerLocations } from '@/hooks/useLocation' -import { useMemo, useState } from 'react' +import React, { useMemo, useState } from 'react' import { PlayerLocation } from '@/utils/features/location/locationSlice' import { useGame } from '@/hooks/useGame' import { FAB } from 'react-native-paper' @@ -12,7 +12,7 @@ export default function Map() { const [followUser, setFollowUser] = useState(true) return ( <> - + } @@ -21,7 +21,7 @@ export default function Map() { ) } -function MapComponent({ followUser }: { followUser?: boolean }) { +function MapComponent({ followUser, setFollowUser }: { followUser?: boolean, setFollowUser: React.Dispatch> }) { MapLibreGL.setAccessToken(null) const userLocation = useLastOwnLocation() return ( @@ -33,7 +33,12 @@ function MapComponent({ followUser }: { followUser?: boolean }) { {userLocation && } + followUserMode={UserTrackingMode.Follow} + followZoomLevel={13} + onUserTrackingModeChange={(event) => { + if (followUser && !event.nativeEvent.payload.followUserLocation) + setFollowUser(false) + }} />}