traintrape-moi/client/components/Map.web.tsx

import { useAuth } from "@/hooks/useAuth"
import { useLastOwnLocation } from "@/hooks/useLocation"
import { useQuery } from "@tanstack/react-query"
import { circle } from "@turf/circle"
import { type Map as MaplibreGLMap } from "maplibre-gl"
import { RLayer, RMap, RMarker, RNavigationControl, RSource, useMap } from "maplibre-react-components"
import { useEffect, useMemo, useState } from "react"

export default function Map() {
  return (
    <RMap
        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}} />

      <UserLocation />
      <DownloadedLocation />
    </RMap>
  )
}

function UserLocation() {
  const userLocation = useLastOwnLocation()
  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}
  </>
}

function DownloadedLocation() {
  const auth = useAuth()
  const query = useQuery({
    queryKey: ['get-last-locations'],
    queryFn: () => fetch(`${process.env.EXPO_PUBLIC_TRAINTRAPE_MOI_SERVER}/geolocations/last-locations/`, {
      method: "GET",
      headers: {
        "Authorization": `Bearer ${auth.token}`,
        "Content-Type": "application/json",
      }}
    ).then(resp => resp.json()),
  })
  useEffect(() => {
    const interval = setInterval(() => query.refetch(), 5000)
    return () => clearInterval(interval)
  }, [])
  console.log(query.data)
  const userLocation = query.isSuccess ? query.data[0] : { longitude: 0, latitude: 0, accuracy: 0 }
  const [firstUserPositionFetched, setFirstUserPositionFetched] = useState(false)
  const map: MaplibreGLMap = useMap()
  if (userLocation != null && !firstUserPositionFetched) {
    setFirstUserPositionFetched(true)
    map.flyTo({center: [userLocation.longitude, userLocation.latitude], zoom: 15})
  }
  const accuracyCircle = useMemo(() => circle([userLocation?.longitude ?? 0, userLocation?.latitude ?? 0], userLocation?.accuracy ?? 0, {steps: 64, units: 'meters'}), [userLocation])
  const marker = userLocation ? <RMarker longitude={userLocation?.longitude} latitude={userLocation?.latitude} /> : <></>
  return <>
    <RSource id="accuracy-radius-2" type="geojson" data={accuracyCircle} />
    <RLayer id="accuracy-radius-fill-2" type="fill" source="accuracy-radius-2" paint={{"fill-color": "pink", "fill-opacity": 0.4}} />
    <RLayer id="accuracy-radius-border-2" type="line" source="accuracy-radius-2" paint={{"line-color": "red", "line-opacity": 0.4}} />
    {marker}
  </>
}