diff --git a/client/components/Map.tsx b/client/components/Map.tsx index 6168843..65fc1ce 100644 --- a/client/components/Map.tsx +++ b/client/components/Map.tsx @@ -1,24 +1,39 @@ import { StyleSheet } from 'react-native' import MapLibreGL, { Camera, FillLayer, LineLayer, MapView, PointAnnotation, RasterLayer, RasterSource, ShapeSource, UserLocation } from '@maplibre/maplibre-react-native' -import { FontAwesome5 } from '@expo/vector-icons' +import { FontAwesome5, MaterialIcons } from '@expo/vector-icons' import { circle } from '@turf/circle' import { useLastOwnLocation, useLastPlayerLocations } from '@/hooks/useLocation' -import { useMemo } from 'react' +import { useMemo, useState } from 'react' import { PlayerLocation } from '@/utils/features/location/locationSlice' import { useGame } from '@/hooks/useGame' +import { FAB } from 'react-native-paper' export default function Map() { - const userLocation = useLastOwnLocation() + const [followUser, setFollowUser] = useState(true) + return ( + <> + + } + onPress={() => setFollowUser(followUser => !followUser)} /> + + ) +} + +function MapComponent({ followUser }: { followUser?: boolean }) { MapLibreGL.setAccessToken(null) + const userLocation = useLastOwnLocation() return ( - {/* FIXME Il faudra pouvoir avoir un bouton de suivi pour activer le suivi de la caméro */} {userLocation && } + defaultSettings={{centerCoordinate: [userLocation?.coords.longitude, userLocation?.coords.latitude], zoomLevel: 15}} + followUserLocation={followUser} + followZoomLevel={followUser ? 13 : undefined} />}