ynerant/traintrape-moi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Correction suivi position

Browse Source
This commit is contained in:
Emmy D'Anello 2024-12-16 18:18:56 +01:00
parent b726305a44
commit ed019a3ed4
Signed by: ynerant
GPG Key ID: 3A75C55819C8CF85
1 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/components/Map.tsx
View File

@ -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 (
<>
<MapComponent followUser={followUser} />
<MapComponent followUser={followUser} setFollowUser={setFollowUser} />
<FAB
style={{ position: 'absolute', right: 25, bottom: 25 }}
icon={(props) => <MaterialIcons name={followUser ? 'my-location' : 'location-searching'} {...props} />}
@ -21,7 +21,7 @@ export default function Map() {
)
}
function MapComponent({ followUser }: { followUser?: boolean }) {
function MapComponent({ followUser, setFollowUser }: { followUser?: boolean, setFollowUser: React.Dispatch<React.SetStateAction<boolean>> }) {
MapLibreGL.setAccessToken(null)
const userLocation = useLastOwnLocation()
return (
@ -33,7 +33,12 @@ function MapComponent({ followUser }: { followUser?: boolean }) {
{userLocation && <Camera
defaultSettings={{centerCoordinate: [userLocation?.coords.longitude, userLocation?.coords.latitude], zoomLevel: 15}}
followUserLocation={followUser}
followZoomLevel={followUser ? 13 : undefined} />}
followUserMode={UserTrackingMode.Follow}
followZoomLevel={13}
onUserTrackingModeChange={(event) => {
if (followUser && !event.nativeEvent.payload.followUserLocation)
setFollowUser(false)
}} />}
<RasterSource id="railwaymap-source" tileUrlTemplates={["https://a.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png"]}></RasterSource>
<RasterLayer id="railwaymap-layer" sourceID="railwaymap-source" style={{rasterOpacity: 0.7}} />