Fix last user location updates, showing user location dot above the route on the map, rounded route line

Author: GCyganek

src/CONST/index.ts

@@ -9492,6 +9492,13 @@ const CONST = {
     },
 
     MODAL_MAX_HEIGHT_TO_WINDOW_HEIGHT_RATIO_LANDSCAPE_MODE: 0.75,
+
+    MAP_VIEW_LAYERS: {
+        USER_LOCATION_SOURCE: 'user-location-source',
+        USER_LOCATION: 'user-location',
+        ROUTE_SOURCE: 'route-source',
+        ROUTE_FILL: 'route-fill',
+    },
 } as const;
 
 const CONTINUATION_DETECTION_SEARCH_FILTER_KEYS = [

src/components/MapView/Direction.tsx

@@ -1,5 +1,6 @@
 import Mapbox from '@rnmapbox/maps';
 import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
 import type {DirectionProps} from './MapViewTypes';
 
 function Direction({coordinates}: DirectionProps) {
@@ -10,7 +11,7 @@ function Direction({coordinates}: DirectionProps) {
 
     return (
         <Mapbox.ShapeSource
-            id="routeSource"
+            id={CONST.MAP_VIEW_LAYERS.ROUTE_SOURCE}
             shape={{
                 type: 'Feature',
                 properties: {},
@@ -21,7 +22,8 @@ function Direction({coordinates}: DirectionProps) {
             }}
         >
             <Mapbox.LineLayer
-                id="routeFill"
+                belowLayerID={CONST.MAP_VIEW_LAYERS.USER_LOCATION}
+                id={CONST.MAP_VIEW_LAYERS.ROUTE_FILL}
                 style={styles.mapDirection}
             />
         </Mapbox.ShapeSource>

src/components/MapView/Direction.website.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import {Layer, Source} from 'react-map-gl';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
 import type {DirectionProps} from './MapViewTypes';
 
 function Direction({coordinates}: DirectionProps) {
@@ -20,7 +21,7 @@ function Direction({coordinates}: DirectionProps) {
         <View>
             {!!coordinates && (
                 <Source
-                    id="route"
+                    id={CONST.MAP_VIEW_LAYERS.ROUTE_SOURCE}
                     type="geojson"
                     data={{
                         type: 'Feature',
@@ -32,9 +33,9 @@ function Direction({coordinates}: DirectionProps) {
                     }}
                 >
                     <Layer
-                        id="route"
+                        id={CONST.MAP_VIEW_LAYERS.ROUTE_FILL}
                         type="line"
-                        source="route"
+                        source={CONST.MAP_VIEW_LAYERS.ROUTE_SOURCE}
                         paint={layerPointStyle}
                         layout={layerLayoutStyle}
                     />

src/components/MapView/MapView.tsx

@@ -278,7 +278,7 @@ function MapView({
                 />
                 {interactive && (
                     <Mapbox.ShapeSource
-                        id="user-location"
+                        id={CONST.MAP_VIEW_LAYERS.USER_LOCATION_SOURCE}
                         shape={{
                             type: 'FeatureCollection',
                             features: [
@@ -294,8 +294,8 @@ function MapView({
                         }}
                     >
                         <Mapbox.CircleLayer
-                            id="user-location-layer"
-                            sourceID="user-location"
+                            id={CONST.MAP_VIEW_LAYERS.USER_LOCATION}
+                            sourceID={CONST.MAP_VIEW_LAYERS.USER_LOCATION_SOURCE}
                             style={{
                                 circleColor: colors.blue400,
                                 circleRadius: 8,

src/libs/actions/GPSDraftDetails.ts

@@ -6,6 +6,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import type {GpsDraftDetails} from '@src/types/onyx';
 import type {Unit} from '@src/types/onyx/Policy';
 import geodesicDistance from '@src/utils/geodesicDistance';
+import {setUserLocation} from './UserLocation';
 
 function resetGPSDraftDetails() {
     Onyx.merge(ONYXKEYS.GPS_DRAFT_DETAILS, null);
@@ -72,6 +73,12 @@ function addGpsPoints(gpsDraftDetails: OnyxEntry<GpsDraftDetails>, newGpsPoints:
 
     const updatedGpsPoints = [...capturedPoints, ...gpsPointsToAdd];
 
+    const latestPoint = updatedGpsPoints.at(-1);
+
+    if (latestPoint) {
+        setUserLocation({longitude: latestPoint.long, latitude: latestPoint.lat});
+    }
+
     if (updatedDistance > 0) {
         updateGpsTripNotificationDistance(updatedDistance);
     }

src/styles/index.ts

@@ -91,7 +91,7 @@ type WorkspaceUpgradeIntroBoxParams = {isExtraSmallScreenWidth: boolean};
 
 type OfflineFeedbackStyle = Record<'deleted' | 'pending' | 'default' | 'error' | 'container' | 'textContainer' | 'text' | 'errorDot', ViewStyle | TextStyle>;
 
-type MapDirectionStyle = Pick<LineLayerStyleProps, 'lineColor' | 'lineWidth'>;
+type MapDirectionStyle = Pick<LineLayerStyleProps, 'lineColor' | 'lineWidth' | 'lineCap'>;
 
 type MapDirectionLayerStyle = Pick<LineLayer, 'layout' | 'paint'>;
 
@@ -6465,6 +6465,7 @@ const plainStyles = (theme: ThemeColors) =>
         mapDirection: {
             lineColor: theme.success,
             lineWidth: 7,
+            lineCap: 'round',
         },
 
         mapDirectionLayer: {