46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
|
import { StyleSheet } from 'react-native'
|
||
|
|
import { ThemedView } from '@/components/ThemedView'
|
||
|
|
import { useEffect, useState } from 'react'
|
||
|
|
import "maplibre-gl/dist/maplibre-gl.css"
|
||
|
|
|
||
|
|
import * as Location from 'expo-location'
|
||
|
|
import Map from '@/components/map'
|
||
|
|
import { ThemedText } from '@/components/ThemedText'
|
||
|
|
|
||
|
|
export default function MapScreen() {
|
||
|
|
const [location, setLocation] = useState<Location.LocationObject | null>(null)
|
||
|
|
const [locationAccessGranted, setLocationAccessGranted] = useState(false)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
async function watchPosition() {
|
||
|
|
let { status } = await Location.requestForegroundPermissionsAsync()
|
||
|
|
if (status !== 'granted') {
|
||
|
|
setLocationAccessGranted(false)
|
||
|
|
alert("Vous devez activer votre géolocalisation pour utiliser l'application.")
|
||
|
|
return
|
||
|
|
}
|
||
|
|
setLocationAccessGranted(true)
|
||
|
|
await Location.watchPositionAsync({accuracy: Location.Accuracy.BestForNavigation}, location => setLocation(location))
|
||
|
|
}
|
||
|
|
watchPosition()
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ThemedView style={styles.page}>
|
||
|
|
{locationAccessGranted ? <Map location={location} /> : <ThemedText>La géolocalisation est requise pour utiliser la carte.</ThemedText>}
|
||
|
|
</ThemedView>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
page: {
|
||
|
|
flex: 1,
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center'
|
||
|
|
},
|
||
|
|
map: {
|
||
|
|
flex: 1,
|
||
|
|
alignSelf: 'stretch',
|
||
|
|
},
|
||
|
|
});
|