diff --git a/src/screens/RecordingScreen.tsx b/src/screens/RecordingScreen.tsx index 164aa47..19d04f2 100644 --- a/src/screens/RecordingScreen.tsx +++ b/src/screens/RecordingScreen.tsx @@ -4,7 +4,7 @@ import { useNavigation } from '@react-navigation/native'; import { NativeStackNavigationProp } from '@react-navigation/native-stack'; import { activateKeepAwakeAsync, deactivateKeepAwake } from 'expo-keep-awake'; import { Map, Camera, GeoJSONSource, Layer, UserLocation } from '@maplibre/maplibre-react-native'; -import type { LineLayerStyle } from '@maplibre/maplibre-react-native'; +import type { LineLayerStyle, CircleLayerStyle } from '@maplibre/maplibre-react-native'; import { useRecordingStore } from '../store/recording'; import { startGpsRecording, stopGpsRecording, requestLocationPermissions, requestForegroundLocation } from '../services/gps'; import { RootStackParamList } from '../types'; @@ -43,6 +43,14 @@ export function RecordingScreen() { lineCap: 'round', }), [accent]); + const userDotStyle = useMemo(() => ({ + circleRadius: 8, + circleColor: accent, + circleStrokeWidth: 2.5, + circleStrokeColor: '#ffffff', + circlePitchAlignment: 'map', + }), [accent]); + const trackGeoJSON = useMemo>(() => ({ type: 'Feature', geometry: { type: 'LineString', coordinates: trackPoints.map((p) => [p.lon, p.lat]) }, @@ -101,7 +109,9 @@ export function RecordingScreen() { trackUserLocation={status === 'recording' ? 'course' : 'default'} initialViewState={{ zoom: 14 }} /> - + + + {trackPoints.length >= 2 && (