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

Suivi caméra sur Android

Browse Source
This commit is contained in:
Emmy D'Anello 2024-12-15 18:18:19 +01:00
parent 39312adc2a
commit 986649a070
Signed by: ynerant
GPG Key ID: 3A75C55819C8CF85
1 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
client/components/Map.tsx
View File

@ -1,24 +1,39 @@
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 } from '@maplibre/maplibre-react-native'
import { FontAwesome5 } 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 } from 'react' import { 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'
export default function Map() { export default function Map() {
const userLocation = useLastOwnLocation() const [followUser, setFollowUser] = useState(true)
return (
<>
<MapComponent followUser={followUser} />
<FAB
style={{ position: 'absolute', right: 25, bottom: 25 }}
icon={(props) => <MaterialIcons name={followUser ? 'my-location' : 'location-searching'} {...props} />}
onPress={() => setFollowUser(followUser => !followUser)} />
</>
)
}
function MapComponent({ followUser }: { followUser?: boolean }) {
MapLibreGL.setAccessToken(null) MapLibreGL.setAccessToken(null)
const userLocation = useLastOwnLocation()
return ( return (
<MapView <MapView
logoEnabled={false} logoEnabled={false}
compassViewPosition={2} compassViewPosition={2}
style={styles.map} style={styles.map}
styleURL="https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json"> styleURL="https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json">
{/* FIXME Il faudra pouvoir avoir un bouton de suivi pour activer le suivi de la caméro */}
{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}
followZoomLevel={followUser ? 13 : undefined} />}
<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}} />