[HOLD for payment 2024-06-13] CRITICAL: [P2P Distance] [$250] Add blue dot showing current location, and center-on-me button.

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Problem:

There is no blue dot to show where the user is on the location in the map

Solution:

Should see a "blue dot" where I am on the map when doing Track distance, along with a button to center the map on my location and orient the top to be North

Context/Examples/Screenshots/Notes:

Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @quinthar
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1712974874670609

Add any screenshot/video evidence

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f4462a45d6a637d7
• Upwork Job ID: 1780349889093390336
• Last Price Increase: 2024-04-16
• Automatic offers:
• nkdengineer | Contributor | 0

Issue Owner

Current Issue Owner: @bfitzexpensify / @kadiealexander

[melvin-bot]

Triggered auto assignment to @bfitzexpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[nkdengineer]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• New feature: Add blue dot showing current location, and center-on-me button.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

• With the feature see a "blue dot" where I am on the map when doing Track distance: We can add the below component to this:

                  <Marker
                   
                        longitude={currentPosition?.longitude}
                        latitude={currentPosition?.latitude}
                    >
                        <View style={{backgroundColor: 'blue', width: 12, height: 12, borderRadius: 12}} />  // Just a pseudo code
                    </Marker>

The above change will add a new Marker (blue dot) with coordinates is the currentPosition

• With the feature with a button to center the map on my location and orient the top to be North: We can create a new button (based on design) and then, if the user clicks on that button, we will:

   if (directionCoordinates) {
                            const bounds = [
                                [Math.min(...directionCoordinates.map((coord) => coord[0])), Math.min(...directionCoordinates.map((coord) => coord[1]))], // Southwest
                                [Math.max(...directionCoordinates.map((coord) => coord[0])), Math.max(...directionCoordinates.map((coord) => coord[1]))], // Northeast
                            ];
                            mapRef?.fitBounds(bounds);
                            return;
                        }
                        mapRef?.easeTo({center: {lat: currentPosition?.latitude, lon: currentPosition?.longitude}, bearing: 0});

The above will use the fitBounds to fit the map to the route if existed.
If not, we will use easeTo to center the map on my location and orient the top to be North

• Do the same with other platforms.

What alternative solutions did you explore? (Optional)

• In the main solution, we can use Layer to display the blue dot:

<Source
                        id="my-data"
                        type="geojson"
                        data={{
                            type: 'FeatureCollection',
                            features: [{type: 'Feature', geometry: {type: 'Point', coordinates: [currentPosition?.longitude, currentPosition?.latitude]}}],
                        }}
                    >
                        <Layer
                            {...{
                                id: 'point',
                                type: 'circle',
                                paint: {
                                    'circle-radius': 10,
                                    'circle-color': '#007cbf',
                                },
                            }}
                        />
                    </Source>

• Here is the difference between Marker and Layer. Refer to that document, I believe that using either Marker (HTML) or Layer (Map tile) to render the blue dot does not significantly impact performance since there is only one element in this case.

Evidence

• Web:

output.mp4

• Mobile:

Screen.Recording.2024-04-20.at.05.18.36.mov

[shahinyan11]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add blue dot showing current location, and center-on-me button.

What is the root cause of that problem?

New feature

What changes do you think we should make in order to solve the problem?

For Web

1. Add the GeolocateControl component imported from react-map-gl to the Map children

<GeolocateControl ref={geoControlRef} showAccuracyCircle={true} />

2. Add below geoControlRef.current?.trigger() in here

Screen.Recording.2024-04-17.at.16.27.45.mov

For Native

1. Add <Mapbox.UserLocation visible={true}/> to the MapBox.mapView children
2. Add custom Icon for center user location and call below code on icon click

cameraRef.current?.setCamera({
    zoomLevel: CONST.MAPBOX.SINGLE_MARKER_ZOOM,
    animationDuration: 1500,
    centerCoordinate: [currentPosition.longitude, currentPosition.latitude],
});

Screenrecorder-2024-04-17-18-40-12-398.0.mp4

What alternative solutions did you explore? (Optional)