feat: themed user location dot on map
Replace default MapLibre puck with a custom CircleLayer child: accent-coloured fill, 2.5px white stroke, map-pitch-aligned. Dot colour updates live when the palette changes in Settings.
This commit is contained in:
@@ -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<CircleLayerStyle>(() => ({
|
||||
circleRadius: 8,
|
||||
circleColor: accent,
|
||||
circleStrokeWidth: 2.5,
|
||||
circleStrokeColor: '#ffffff',
|
||||
circlePitchAlignment: 'map',
|
||||
}), [accent]);
|
||||
|
||||
const trackGeoJSON = useMemo<GeoJSON.Feature<GeoJSON.LineString>>(() => ({
|
||||
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 }}
|
||||
/>
|
||||
<UserLocation />
|
||||
<UserLocation>
|
||||
<Layer id="user-dot" type="circle" style={userDotStyle} />
|
||||
</UserLocation>
|
||||
{trackPoints.length >= 2 && (
|
||||
<GeoJSONSource id="track" data={trackGeoJSON}>
|
||||
<Layer id="track-line" type="line" style={trackLineStyle} />
|
||||
|
||||
Reference in New Issue
Block a user