fix add center button and blue dot

src/CONST.ts

@@ -3508,10 +3508,12 @@ const CONST = {
     COLON: ':',
     MAPBOX: {
         PADDING: 50,
-        DEFAULT_ZOOM: 10,
+        DEFAULT_ZOOM: 15,
         SINGLE_MARKER_ZOOM: 15,
         DEFAULT_COORDINATE: [-122.4021, 37.7911],
         STYLE_URL: 'mapbox://styles/expensify/cllcoiqds00cs01r80kp34tmq',
+        ANIMATION_DURATION_ON_CENTER_ME: 1000,
+        CENTER_BUTTON_FADE_DURATION: 300,
     },
     ONYX_UPDATE_TYPES: {
         HTTPS: 'https',

src/components/Icon/Expensicons.ts

@@ -46,6 +46,7 @@ import ConnectionComplete from '@assets/images/connection-complete.svg';
 import Copy from '@assets/images/copy.svg';
 import CreditCardHourglass from '@assets/images/credit-card-hourglass.svg';
 import CreditCard from '@assets/images/creditcard.svg';
+import Crosshair from '@assets/images/crosshair.svg';
 import DocumentPlus from '@assets/images/document-plus.svg';
 import DocumentSlash from '@assets/images/document-slash.svg';
 import Document from '@assets/images/document.svg';
@@ -206,6 +207,7 @@ export {
     Concierge,
     ConciergeAvatar,
     Connect,
+    Crosshair,
     ConnectionComplete,
     Copy,
     CreditCard,

src/components/MapView/MapView.tsx

@@ -4,12 +4,18 @@ import Mapbox, {MarkerView, setAccessToken} from '@rnmapbox/maps';
 import {forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import {PressableWithoutFeedback} from '@components/Pressable';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as UserLocation from '@libs/actions/UserLocation';
 import compose from '@libs/compose';
 import getCurrentPosition from '@libs/getCurrentPosition';
 import type {GeolocationErrorCallback} from '@libs/getCurrentPosition/getCurrentPosition.types';
 import {GeolocationErrorCode} from '@libs/getCurrentPosition/getCurrentPosition.types';
+import colors from '@styles/theme/colors';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import useLocalize from '@src/hooks/useLocalize';
 import useNetwork from '@src/hooks/useNetwork';
@@ -27,7 +33,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
         const {isOffline} = useNetwork();
         const {translate} = useLocalize();
         const styles = useThemeStyles();
-
+        const theme = useTheme();
         const cameraRef = useRef<Mapbox.Camera>(null);
         const [isIdle, setIsIdle] = useState(false);
         const [currentPosition, setCurrentPosition] = useState(cachedUserLocation);
@@ -148,6 +154,19 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                 onMapReady();
             }
         };
+        const centerMap = useCallback(() => {
+            if (directionCoordinates && directionCoordinates.length > 1) {
+                const {southWest, northEast} = utils.getBounds(waypoints?.map((waypoint) => waypoint.coordinate) ?? [], directionCoordinates);
+                cameraRef.current?.fitBounds(southWest, northEast, mapPadding, CONST.MAPBOX.ANIMATION_DURATION_ON_CENTER_ME);
+                return;
+            }
+            cameraRef?.current?.setCamera({
+                heading: 0,
+                centerCoordinate: [currentPosition?.longitude ?? 0, currentPosition?.latitude ?? 0],
+                animationDuration: CONST.MAPBOX.ANIMATION_DURATION_ON_CENTER_ME,
+                zoomLevel: CONST.MAPBOX.SINGLE_MARKER_ZOOM,
+            });
+        }, [directionCoordinates, currentPosition, mapPadding, waypoints]);
 
         const centerCoordinate = currentPosition ? [currentPosition.longitude, currentPosition.latitude] : initialState?.location;
         return !isOffline && Boolean(accessToken) && Boolean(currentPosition) ? (
@@ -174,9 +193,37 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                         // displayed after the first render when the app's storage is cleared.
                         centerCoordinate={centerCoordinate}
                     />
+                    <Mapbox.ShapeSource
+                        id="user-location"
+                        shape={{
+                            type: 'FeatureCollection',
+                            features: [
+                                {
+                                    type: 'Feature',
+                                    geometry: {
+                                        type: 'Point',
+                                        coordinates: [currentPosition?.longitude ?? 0, currentPosition?.latitude ?? 0],
+                                    },
+                                    properties: {},
+                                },
+                            ],
+                        }}
+                    >
+                        <Mapbox.CircleLayer
+                            id="user-location-layer"
+                            sourceID="user-location"
+                            style={{
+                                circleColor: colors.blue400,
+                                circleRadius: 8,
+                            }}
+                        />
+                    </Mapbox.ShapeSource>
 
                     {waypoints?.map(({coordinate, markerComponent, id}) => {
                         const MarkerComponent = markerComponent;
+                        if (utils.areSameCoordinate([coordinate[0], coordinate[1]], [currentPosition?.longitude ?? 0, currentPosition?.latitude ?? 0])) {
+                            return null;
+                        }
                         return (
                             <MarkerView
                                 id={id}
@@ -190,6 +237,22 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
 
                     {directionCoordinates && <Direction coordinates={directionCoordinates} />}
                 </Mapbox.MapView>
+                <View style={[styles.pAbsolute, styles.p5, styles.t0, styles.r0, {zIndex: 1}]}>
+                    <PressableWithoutFeedback
+                        accessibilityRole={CONST.ROLE.BUTTON}
+                        onPress={centerMap}
+                        accessibilityLabel={translate('common.center')}
+                    >
+                        <View style={styles.primaryMediumIcon}>
+                            <Icon
+                                width={variables.iconSizeNormal}
+                                height={variables.iconSizeNormal}
+                                src={Expensicons.Crosshair}
+                                fill={theme.icon}
+                            />
+                        </View>
+                    </PressableWithoutFeedback>
+                </View>
             </View>
         ) : (
             <PendingMapView

src/components/MapView/MapView.website.tsx

@@ -10,11 +10,15 @@ import type {MapRef} from 'react-map-gl';
 import Map, {Marker} from 'react-map-gl';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import {PressableWithoutFeedback} from '@components/Pressable';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {GeolocationErrorCallback} from '@libs/getCurrentPosition/getCurrentPosition.types';
 import {GeolocationErrorCode} from '@libs/getCurrentPosition/getCurrentPosition.types';
+import variables from '@styles/variables';
 import * as UserLocation from '@userActions/UserLocation';
 import CONST from '@src/CONST';
 import useLocalize from '@src/hooks/useLocalize';
@@ -183,6 +187,26 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
             [mapRef],
         );
 
+        const centerMap = useCallback(() => {
+            if (!mapRef) {
+                return;
+            }
+            if (directionCoordinates && directionCoordinates.length > 1) {
+                const {northEast, southWest} = utils.getBounds(waypoints?.map((waypoint) => waypoint.coordinate) ?? [], directionCoordinates);
+                const map = mapRef?.getMap();
+                map?.fitBounds([southWest, northEast], {padding: mapPadding, animate: true, duration: CONST.MAPBOX.ANIMATION_DURATION_ON_CENTER_ME});
+                return;
+            }
+
+            mapRef.flyTo({
+                center: [currentPosition?.longitude ?? 0, currentPosition?.latitude ?? 0],
+                zoom: CONST.MAPBOX.SINGLE_MARKER_ZOOM,
+                bearing: 0,
+                animate: true,
+                duration: CONST.MAPBOX.ANIMATION_DURATION_ON_CENTER_ME,
+            });
+        }, [directionCoordinates, currentPosition, mapRef, waypoints, mapPadding]);
+
         return !isOffline && Boolean(accessToken) && Boolean(currentPosition) ? (
             <View
                 style={style}
@@ -203,8 +227,18 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                     mapStyle={styleURL}
                     interactive={interactive}
                 >
+                    <Marker
+                        key="Current-position"
+                        longitude={currentPosition?.longitude ?? 0}
+                        latitude={currentPosition?.latitude ?? 0}
+                    >
+                        <View style={styles.currentPositionDot} />
+                    </Marker>
                     {waypoints?.map(({coordinate, markerComponent, id}) => {
                         const MarkerComponent = markerComponent;
+                        if (utils.areSameCoordinate([coordinate[0], coordinate[1]], [currentPosition?.longitude ?? 0, currentPosition?.latitude ?? 0])) {
+                            return null;
+                        }
                         return (
                             <Marker
                                 key={id}
@@ -217,6 +251,22 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                     })}
                     {directionCoordinates && <Direction coordinates={directionCoordinates} />}
                 </Map>
+                <View style={[styles.pAbsolute, styles.p5, styles.t0, styles.r0, {zIndex: 1}]}>
+                    <PressableWithoutFeedback
+                        accessibilityRole={CONST.ROLE.BUTTON}
+                        onPress={centerMap}
+                        accessibilityLabel={translate('common.center')}
+                    >
+                        <View style={styles.primaryMediumIcon}>
+                            <Icon
+                                width={variables.iconSizeNormal}
+                                height={variables.iconSizeNormal}
+                                src={Expensicons.Crosshair}
+                                fill={theme.icon}
+                            />
+                        </View>
+                    </PressableWithoutFeedback>
+                </View>
             </View>
         ) : (
             <PendingMapView

src/components/MapView/utils.ts

@@ -12,6 +12,32 @@ function getBounds(waypoints: Array<[number, number]>, directionCoordinates: und
     };
 }
 
+/**
+ * Calculates the distance between two points on the Earth's surface given their latitude and longitude coordinates.
+ */
+function haversineDistance(coordinate1: number[], coordinate2: number[]) {
+    // Radius of the Earth in meters
+    const R = 6371e3;
+    const lat1 = (coordinate1[0] * Math.PI) / 180;
+    const lat2 = (coordinate2[0] * Math.PI) / 180;
+    const deltaLat = ((coordinate2[0] - coordinate1[0]) * Math.PI) / 180;
+    const deltaLon = ((coordinate2[1] - coordinate1[1]) * Math.PI) / 180;
+
+    // The square of half the chord length between the points
+    const halfChordLengthSq = Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) + Math.cos(lat1) * Math.cos(lat2) * Math.sin(deltaLon / 2) * Math.sin(deltaLon / 2);
+
+    // The angular distance in radians
+    const angularDistance = 2 * Math.atan2(Math.sqrt(halfChordLengthSq), Math.sqrt(1 - halfChordLengthSq));
+
+    // Distance in meters
+    return R * angularDistance;
+}
+
+function areSameCoordinate(coordinate1: number[], coordinate2: number[]) {
+    return haversineDistance(coordinate1, coordinate2) < 20;
+}
+
 export default {
     getBounds,
+    areSameCoordinate,
 };

src/languages/en.ts

@@ -125,6 +125,7 @@ export default {
         buttonConfirm: 'Got it',
         name: 'Name',
         attachment: 'Attachment',
+        center: 'Center',
         from: 'From',
         to: 'To',
         optional: 'Optional',

src/languages/es.ts

@@ -119,6 +119,7 @@ export default {
         to: 'A',
         optional: 'Opcional',
         new: 'Nuevo',
+        center: 'Centrar',
         search: 'Buscar',
         find: 'Encontrar',
         searchWithThreeDots: 'Buscar...',

src/styles/index.ts

@@ -4417,6 +4417,7 @@ const styles = (theme: ThemeColors) =>
             borderWidth: variables.componentBorderWidth,
             borderColor: theme.appBG,
         },
+        currentPositionDot: {backgroundColor: colors.blue400, width: 16, height: 16, borderRadius: 16},
 
         mapViewOverlay: {
             flex: 1,