Amélioration carte, séparation Web/Android + géolocalisation

client/components/map.tsx

@@ -0,0 +1,38 @@
+import { StyleSheet, Text } from 'react-native'
+import MapLibreGL, { Camera, FillLayer, LineLayer, MapView, PointAnnotation, RasterLayer, RasterSource, ShapeSource, UserLocation } from '@maplibre/maplibre-react-native'
+import { LocationObject } from 'expo-location'
+import { FontAwesome5 } from '@expo/vector-icons'
+import { circle } from '@turf/circle'
+
+export default function Map({ location }: { location: LocationObject | null }) {
+  MapLibreGL.setAccessToken(null)
+  const accuracyCircle = circle([location?.coords.longitude ?? 0, location?.coords.latitude ?? 0], location?.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 */}
+      {location && <Camera
+          defaultSettings={{centerCoordinate: [location?.coords.longitude, location?.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={[location?.coords.longitude ?? 0, location?.coords.latitude ?? 0]}>
+        <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',
+  }
+})

client/components/map.web.tsx

@@ -0,0 +1,26 @@
+import { circle } from "@turf/circle"
+import { LocationObject } from "expo-location"
+import { RLayer, RMap, RMarker, RNavigationControl, RSource } from "maplibre-react-components"
+
+export default function Map({ location }: { location: LocationObject }) {
+  if (!location)
+    // FIXME On devrait avoir la position qui se centre sur la position une fois qu'elle est établie
+    return <></>
+  const accuracyCircle = circle([location?.coords.longitude ?? 0, location?.coords.latitude ?? 0], location?.coords.accuracy ?? 0, {steps: 64, units: 'meters'})
+  return (
+    <RMap
+        initialCenter={[location?.coords.longitude, location?.coords.latitude]}
+        initialZoom={15}
+        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}} />
+
+      <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}} />
+      {location && <RMarker longitude={location?.coords.longitude} latitude={location?.coords.latitude} />}
+    </RMap>
+  )
+}