Amélioration carte, séparation Web/Android + géolocalisation

client/app/(tabs)/index.jsx

@@ -1,46 +0,0 @@
-import { Platform, StyleSheet } from 'react-native'
-import { ThemedView } from '@/components/ThemedView'
-
-export default function MapScreen() {
-  if (Platform.OS === "web") {
-    const maplibre = require('react-map-gl/maplibre')
-    const Map = maplibre.Map
-    return <ThemedView style={styles.page}>
-        <Map
-        initialViewState={{
-          longitude: 0,
-          latitude: 0,
-          zoom: 1
-        }}
-        mapStyle="https://demotiles.maplibre.org/style.json"
-      />
-    </ThemedView>
-  }
-  else {
-    const MapLibreGL = require('@maplibre/maplibre-react-native')
-    MapLibreGL.setAccessToken(null)
-    return (
-      <ThemedView style={styles.page}>
-        <MapLibreGL.MapView
-            style={styles.map}
-            logoEnabled={false}
-            styleURL="https://demotiles.maplibre.org/style.json"
-            children={[]}
-          />
-      </ThemedView>
-    )
-  }
-}
-
-const styles = StyleSheet.create({
-  page: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  map: {
-    flex: 1,
-    alignSelf: 'stretch',
-  },
-});

client/app/(tabs)/index.tsx

@@ -0,0 +1,45 @@
+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',
+  },
+});