traintrape-moi/client/components/Map.tsx

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 { useLastOwnLocation, useLastPlayerLocations } from '@/hooks/useLocation'
import { useMemo } from 'react'
import { PlayerLocation } from '@/utils/features/location/locationSlice'
import { useGame } from '@/hooks/useGame'

export default function Map() {
  const userLocation = useLastOwnLocation()
  MapLibreGL.setAccessToken(null)
  return (
    <MapView
      logoEnabled={false}
      compassViewPosition={2}
      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}} />

      <UserLocation animated={true} renderMode="native" androidRenderMode="compass" showsUserHeadingIndicator={true} />
      <PlayerLocationsMarkers />
    </MapView>
  )
}


function PlayerLocationsMarkers() {
  const game = useGame()
  const lastPlayerLocations = useLastPlayerLocations()
  return lastPlayerLocations ? lastPlayerLocations
    .filter(playerLoc => playerLoc.playerId !== game.playerId)
    .map(playerLoc => <PlayerLocationMarker key={`player-${playerLoc.playerId}-loc`} playerLocation={playerLoc} />) : <></>
}

function PlayerLocationMarker({ playerLocation }: { playerLocation: PlayerLocation }) {
  const accuracyCircle = useMemo(() => circle([playerLocation.longitude, playerLocation.latitude], playerLocation.accuracy, {steps: 64, units: 'meters'}), [playerLocation])
  return <>
    <ShapeSource
        id={`accuracy-radius-${playerLocation.playerId}`}
        shape={accuracyCircle} />
    <FillLayer
        id={`accuracy-radius-fill-${playerLocation.playerId}`}
        sourceID={`accuracy-radius-${playerLocation.playerId}`}
        style={{fillOpacity: 0.4, fillColor: 'pink'}}
        aboveLayerID="railwaymap-layer" />
    <LineLayer
        id={`accuracy-radius-border-${playerLocation.playerId}`}
        sourceID={`accuracy-radius-${playerLocation.playerId}`}
        style={{lineOpacity: 0.4, lineColor: 'red'}}
        aboveLayerID={`accuracy-radius-fill-${playerLocation.playerId}`} />
    <PointAnnotation id={`player-location-marker-${playerLocation.playerId}`}
        coordinate={[playerLocation.longitude, playerLocation.latitude]}>
      <FontAwesome5 name="map-marker-alt" size={24} color="red" />
    </PointAnnotation>
  </>
}

const styles = StyleSheet.create({
  map: {
    flex: 1,
    alignSelf: 'stretch',
  }
})