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 { 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 { FontAwesome5, MaterialIcons } from '@expo/vector-icons'
import { circle } from '@turf/circle' import { circle } from '@turf/circle'
import { useLastOwnLocation, useLastPlayerLocations } from '@/hooks/useLocation' 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 { PlayerLocation } from '@/utils/features/location/locationSlice'
import { useGame } from '@/hooks/useGame' import { useGame } from '@/hooks/useGame'
import { FAB } from 'react-native-paper' import { FAB } from 'react-native-paper'
@ -12,7 +12,7 @@ export default function Map() {
const [followUser, setFollowUser] = useState(true) const [followUser, setFollowUser] = useState(true)
return ( return (
<> <>
<MapComponent followUser={followUser} /> <MapComponent followUser={followUser} setFollowUser={setFollowUser} />
<FAB <FAB
style={{ position: 'absolute', right: 25, bottom: 25 }} style={{ position: 'absolute', right: 25, bottom: 25 }}
icon={(props) => <MaterialIcons name={followUser ? 'my-location' : 'location-searching'} {...props} />} 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) MapLibreGL.setAccessToken(null)
const userLocation = useLastOwnLocation() const userLocation = useLastOwnLocation()
return ( return (
@ -33,7 +33,12 @@ function MapComponent({ followUser }: { followUser?: boolean }) {
{userLocation && <Camera {userLocation && <Camera
defaultSettings={{centerCoordinate: [userLocation?.coords.longitude, userLocation?.coords.latitude], zoomLevel: 15}} defaultSettings={{centerCoordinate: [userLocation?.coords.longitude, userLocation?.coords.latitude], zoomLevel: 15}}
followUserLocation={followUser} 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> <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}} /> <RasterLayer id="railwaymap-layer" sourceID="railwaymap-source" style={{rasterOpacity: 0.7}} />