import { StyleSheet } from '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 { circle } from '@turf/circle' import { useLocation } from '@/hooks/useLocation' export default function Map() { const userLocation = useLocation() MapLibreGL.setAccessToken(null) 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 */} {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}} /> {/* FIXME Il faudra avoir uniquement les positions des autres personnes, puisque sa propre position peut être obtenue nativement */} <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={[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} /> */} </MapView> ) } const styles = StyleSheet.create({ map: { flex: 1, alignSelf: 'stretch', } })