[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 [email protected] 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)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01f4462a45d6a637d7

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat (External)

[bfitzexpensify]

Couple of proposals ready for review @parasharrajat - this one is CRITICAL so please review asap, thank you!

[parasharrajat]

Both proposals are not very clear. Because the documentation of lib is not very declarative, It would be great if both proposals could explain the results of their changes as well. Good to see visual examples when we are talking about maps.

@nkdengineer Please try to follow our guidelines for updating a proposal. I don't see any comment stating that the proposal was updated. Also, I didn't like the idea of adding criticism to another proposal in your proposal. Let's try to avoid that practice (it can be a new comment).

Could you please also add some visuals on how it will look?

[parasharrajat]

@shahinyan11 I was looking into the libs documentation but didn't find any good examples. Could you please update your proposal and explain results as well.

geoControlRef.current?.trigger()

Also, I think we should be doing native geolocation of the lib when we use our custom logic to get user location. Is there a way we can reuse the values from getCurrentPosition and just render it on the map using native controls.

[nkdengineer]

@parasharrajat Thanks for your feedback. I updated the proposal to explain the results of the changes.

[shahinyan11]

Proposal

Updated Added videos for different platforms .
@parasharrajat The web package supports centering on user location functionality but the native package not. And that's why I left the default UI for the web and use random icon for native just to show functionality. And since the description of the problem does not indicate a single icon, I did not pay attention to it

[parasharrajat]

Also, I think we should be doing native geolocation of the lib when we use our custom logic to get user location. Is there a way we can reuse the values from getCurrentPosition and just render it on the map using native controls.

@shahinyan11 Thoughts?

[shahinyan11]

@parasharrajat I can suggest to use Layer an Source to display blue dot . Create a Layer with circle type and add user location in Source data. See example here

[nkdengineer]

@parasharrajat I updated alternative solution

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.79-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix add center button and blue dot #40759

If no regressions arise, payment will be issued on 2024-06-13. 🎊

For reference, here are some details about the assignees on this issue:

• @parasharrajat requires payment through NewDot Manual Requests
• @nkdengineer requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@parasharrajat] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@bfitzexpensify / @kadiealexander] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[parasharrajat]

Regression Test Steps

1. Open app.
2. Click on "Submit expense" -> "Distance".
3. Verify that the map displays the blue dot as the current position.
4. Move the map to any new location.
5. Click on the "center-me" button.
6. Verify that the map will animate to the location in which the current position is center.
7. Select any 2 waypoints.
8. Drag the map to any new area after waypoints are set on the map.
9. Click on "center-me" button.
10. Verify that the app will animate to the area of the current waypoints route.

Do you agree 👍 or 👎 ?

[bfitzexpensify]

Regression steps proposed in https://github.com/Expensify/Expensify/issues/404901

Payment summary:

$500 to @parasharrajat for C+ work to be paid via manual request
$500 to @nkdengineer for contributor work to be paid via Upwork

Previous posting is closed and I'm getting constant errors trying to post on Upwork. Will try again in a bit

[nkdengineer]

@bfitzexpensify This is a CRITICAL-priority issue but it seems to miss the High Priority label, could you help to add it same as this case

Thank you

[bfitzexpensify]

Appreciate the clarification @nkdengineer.

Payment summary updated, and job offer sent via Upwork

[nkdengineer]

Thanks @bfitzexpensify I accepted the offer!

[bfitzexpensify]

Payment complete, closing this one out. Thanks everyone!

[parasharrajat]

Payment requested as per #40209 (comment)

[JmillsExpensify]

$500 approved for @parasharrajat