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

Stockage de la géolocalisation en arrière-plan et utilisation sur la carte

Browse Source
This commit is contained in:
Emmy D'Anello
2024-12-06 21:49:28 +01:00
parent 91963e378d
commit d08dcb9720
11 changed files with 257 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
client/components/Map.tsx
View File

@ -1,20 +1,21 @@
import { StyleSheet, Text } 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 { LocationObject } from 'expo-location'
import { FontAwesome5 } from '@expo/vector-icons'
import { circle } from '@turf/circle'
import { useLocation } from '@/hooks/useLocation'
export default function Map({ location }: { location: LocationObject | null }) {
export default function Map() {
const userLocation = useLocation()
MapLibreGL.setAccessToken(null)
const accuracyCircle = circle([location?.coords.longitude ?? 0, location?.coords.latitude ?? 0], location?.coords.accuracy ?? 0, {steps: 64, units: 'meters'})
const accuracyCircle = circle([userLocation?.coords.longitude ?? 0, userLocation?.coords.latitude ?? 0], userLocation?.coords.accuracy ?? 0, {steps: 64, units: 'meters'})
return (
<MapView
logoEnabled={true}
style={styles.map}
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 */}
{location && <Camera
defaultSettings={{centerCoordinate: [location?.coords.longitude, location?.coords.latitude], zoomLevel: 15}} />}
{userLocation && <Camera
defaultSettings={{centerCoordinate: [userLocation?.coords.longitude, userLocation?.coords.latitude], zoomLevel: 15}} />}
<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}} />
@ -22,7 +23,7 @@ export default function Map({ location }: { location: LocationObject | null }) {
<ShapeSource id="accuracy-radius" shape={accuracyCircle} />
<FillLayer id="accuracy-radius-fill" sourceID="accuracy-radius" style={{fillOpacity: 0.4, fillColor: 'lightblue'}} aboveLayerID="railwaymap-layer" />
<LineLayer id="accuracy-radius-border" sourceID="accuracy-radius" style={{lineOpacity: 0.4, lineColor: 'blue'}} aboveLayerID="accuracy-radius-fill" />
<PointAnnotation id="current-location" coordinate={[location?.coords.longitude ?? 0, location?.coords.latitude ?? 0]}>
<PointAnnotation id="current-location" coordinate={[userLocation?.coords.longitude ?? 2.9, userLocation?.coords.latitude ?? 46.5]}>
<FontAwesome5 name="map-marker-alt" size={24} color="blue" />
</PointAnnotation>
{/* <UserLocation animated={true} renderMode="native" androidRenderMode="compass" showsUserHeadingIndicator={true} /> */}

41
client/components/Map.web.tsx
View File

@ -1,26 +1,39 @@
import { useLocation } from "@/hooks/useLocation"
import { circle } from "@turf/circle"
import { LocationObject } from "expo-location"
import { RLayer, RMap, RMarker, RNavigationControl, RSource } from "maplibre-react-components"
import { type Map as MaplibreGLMap } from "maplibre-gl"
import { RLayer, RMap, RMarker, RNavigationControl, RSource, useMap } from "maplibre-react-components"
import { useState } from "react"
export default function Map({ location }: { location: LocationObject }) {
if (!location)
// FIXME On devrait avoir la position qui se centre sur la position une fois qu'elle est établie
return <></>
const accuracyCircle = circle([location?.coords.longitude ?? 0, location?.coords.latitude ?? 0], location?.coords.accuracy ?? 0, {steps: 64, units: 'meters'})
export default function Map() {
return (
<RMap
initialCenter={[location?.coords.longitude, location?.coords.latitude]}
initialZoom={15}
initialCenter={[2.9, 46.5]}
initialZoom={6}
mapStyle="https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json">
<RNavigationControl position="bottom-right" showCompass={true} showZoom={true} visualizePitch={true} />
<RSource id="railwaymap-source" type="raster" tiles={["https://a.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png"]} />
<RLayer id="railwaymap-layer" type="raster" source="railwaymap-source" paint={{"raster-opacity": 0.7}} />
<RSource id="accuracy-radius" type="geojson" data={accuracyCircle} />
<RLayer id="accuracy-radius-fill" type="fill" source="accuracy-radius" paint={{"fill-color": "lightblue", "fill-opacity": 0.4}} />
<RLayer id="accuracy-radius-border" type="line" source="accuracy-radius" paint={{"line-color": "blue", "line-opacity": 0.4}} />
{location && <RMarker longitude={location?.coords.longitude} latitude={location?.coords.latitude} />}
<UserLocation />
</RMap>
)
}
}
function UserLocation() {
const userLocation = useLocation()
const [firstUserPositionFetched, setFirstUserPositionFetched] = useState(false)
const map: MaplibreGLMap = useMap()
if (userLocation != null && !firstUserPositionFetched) {
setFirstUserPositionFetched(true)
map.flyTo({center: [userLocation.coords.longitude, userLocation.coords.latitude], zoom: 15})
}
const accuracyCircle = circle([userLocation?.coords.longitude ?? 0, userLocation?.coords.latitude ?? 0], userLocation?.coords.accuracy ?? 0, {steps: 64, units: 'meters'})
const marker = userLocation ? <RMarker longitude={userLocation?.coords.longitude} latitude={userLocation?.coords.latitude} /> : <></>
return <>
<RSource id="accuracy-radius" type="geojson" data={accuracyCircle} />
<RLayer id="accuracy-radius-fill" type="fill" source="accuracy-radius" paint={{"fill-color": "lightblue", "fill-opacity": 0.4}} />
<RLayer id="accuracy-radius-border" type="line" source="accuracy-radius" paint={{"line-color": "blue", "line-opacity": 0.4}} />
{marker}
</>
}