40 lines
2.2 KiB
TypeScript
40 lines
2.2 KiB
TypeScript
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={false}
|
|
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',
|
|
}
|
|
})
|