91 lines
3.9 KiB
TypeScript
91 lines
3.9 KiB
TypeScript
import { StyleSheet } from 'react-native'
|
|
import MapLibreGL, { Camera, FillLayer, LineLayer, MapView, PointAnnotation, RasterLayer, RasterSource, ShapeSource, UserLocation, UserTrackingMode } from '@maplibre/maplibre-react-native'
|
|
import { FontAwesome5, MaterialIcons } from '@expo/vector-icons'
|
|
import { circle } from '@turf/circle'
|
|
import { useLastOwnLocation, useLastPlayerLocations } from '@/hooks/useLocation'
|
|
import React, { useMemo, useState } from 'react'
|
|
import { PlayerLocation } from '@/utils/features/location/locationSlice'
|
|
import { useGame } from '@/hooks/useGame'
|
|
import { FAB } from 'react-native-paper'
|
|
|
|
export default function Map() {
|
|
const [followUser, setFollowUser] = useState(true)
|
|
return (
|
|
<>
|
|
<MapComponent followUser={followUser} setFollowUser={setFollowUser} />
|
|
<FAB
|
|
style={{ position: 'absolute', right: 25, bottom: 25 }}
|
|
icon={(props) => <MaterialIcons name={followUser ? 'my-location' : 'location-searching'} {...props} />}
|
|
onPress={() => setFollowUser(followUser => !followUser)} />
|
|
</>
|
|
)
|
|
}
|
|
|
|
function MapComponent({ followUser, setFollowUser }: { followUser?: boolean, setFollowUser: React.Dispatch<React.SetStateAction<boolean>> }) {
|
|
MapLibreGL.setAccessToken(null)
|
|
const userLocation = useLastOwnLocation()
|
|
return (
|
|
<MapView
|
|
logoEnabled={false}
|
|
compassViewPosition={2}
|
|
style={styles.map}
|
|
styleURL="https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json">
|
|
{userLocation && <Camera
|
|
defaultSettings={{centerCoordinate: [userLocation?.coords.longitude, userLocation?.coords.latitude], zoomLevel: 15}}
|
|
followUserLocation={followUser}
|
|
followUserMode={UserTrackingMode.Follow}
|
|
followZoomLevel={16}
|
|
onUserTrackingModeChange={(event) => {
|
|
if (followUser && !event.nativeEvent.payload.followUserLocation)
|
|
setFollowUser(false)
|
|
}} />}
|
|
|
|
<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(() => game.currentRunner === true || !game.gameStarted)
|
|
.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',
|
|
}
|
|
})
|