diff --git a/package-lock.json b/package-lock.json
index 41a6ad6ad40b..49a80b78bc4f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -107,7 +107,7 @@
"react-native-web-linear-gradient": "^1.1.2",
"react-native-web-lottie": "^1.4.4",
"react-native-webview": "^11.17.2",
- "react-native-x-maps": "1.0.6",
+ "react-native-x-maps": "1.0.9",
"react-pdf": "^6.2.2",
"react-plaid-link": "3.3.2",
"react-web-config": "^1.0.0",
@@ -5605,16 +5605,6 @@
"gl-style-validate": "dist/gl-style-validate.mjs"
}
},
- "node_modules/@math.gl/web-mercator": {
- "version": "3.6.3",
- "resolved": "https://registry.npmjs.org/@math.gl/web-mercator/-/web-mercator-3.6.3.tgz",
- "integrity": "sha512-UVrkSOs02YLehKaehrxhAejYMurehIHPfFQvPFZmdJHglHOU4V2cCUApTVEwOksvCp161ypEqVp+9H6mGhTTcw==",
- "peer": true,
- "dependencies": {
- "@babel/runtime": "^7.12.0",
- "gl-matrix": "^3.4.0"
- }
- },
"node_modules/@mdx-js/mdx": {
"version": "1.6.22",
"dev": true,
@@ -43457,11 +43447,10 @@
}
},
"node_modules/react-native-x-maps": {
- "version": "1.0.6",
- "resolved": "https://registry.npmjs.org/react-native-x-maps/-/react-native-x-maps-1.0.6.tgz",
- "integrity": "sha512-aGqhdjBPDI6ZXhccjnetjA88eYFB5l8wtpY1ooGwEbiAUOaCqEWqeUHMI79q3VByBOgfP51gJOtpZbk9JOIKcw==",
+ "version": "1.0.9",
+ "resolved": "https://registry.npmjs.org/react-native-x-maps/-/react-native-x-maps-1.0.9.tgz",
+ "integrity": "sha512-EEb0BcAWwTnN18J2QL7WHbafV/NLaxtPKJbB0SYJp4KzGK1lRTT3Pl/LYodEUhLUbYk04Y0jcA8ifiImc7yn6A==",
"peerDependencies": {
- "@math.gl/web-mercator": "^3.6.3",
"@rnmapbox/maps": "^10.0.11",
"mapbox-gl": "^2.15.0",
"react": "^18.2.0",
@@ -54219,16 +54208,6 @@
"sort-object": "^3.0.3"
}
},
- "@math.gl/web-mercator": {
- "version": "3.6.3",
- "resolved": "https://registry.npmjs.org/@math.gl/web-mercator/-/web-mercator-3.6.3.tgz",
- "integrity": "sha512-UVrkSOs02YLehKaehrxhAejYMurehIHPfFQvPFZmdJHglHOU4V2cCUApTVEwOksvCp161ypEqVp+9H6mGhTTcw==",
- "peer": true,
- "requires": {
- "@babel/runtime": "^7.12.0",
- "gl-matrix": "^3.4.0"
- }
- },
"@mdx-js/mdx": {
"version": "1.6.22",
"dev": true,
@@ -80309,9 +80288,9 @@
}
},
"react-native-x-maps": {
- "version": "1.0.6",
- "resolved": "https://registry.npmjs.org/react-native-x-maps/-/react-native-x-maps-1.0.6.tgz",
- "integrity": "sha512-aGqhdjBPDI6ZXhccjnetjA88eYFB5l8wtpY1ooGwEbiAUOaCqEWqeUHMI79q3VByBOgfP51gJOtpZbk9JOIKcw==",
+ "version": "1.0.9",
+ "resolved": "https://registry.npmjs.org/react-native-x-maps/-/react-native-x-maps-1.0.9.tgz",
+ "integrity": "sha512-EEb0BcAWwTnN18J2QL7WHbafV/NLaxtPKJbB0SYJp4KzGK1lRTT3Pl/LYodEUhLUbYk04Y0jcA8ifiImc7yn6A==",
"requires": {}
},
"react-pdf": {
diff --git a/package.json b/package.json
index ee0862f65394..cb86cd14f874 100644
--- a/package.json
+++ b/package.json
@@ -147,7 +147,7 @@
"react-native-web-linear-gradient": "^1.1.2",
"react-native-web-lottie": "^1.4.4",
"react-native-webview": "^11.17.2",
- "react-native-x-maps": "1.0.6",
+ "react-native-x-maps": "^1.0.9",
"react-pdf": "^6.2.2",
"react-plaid-link": "3.3.2",
"react-web-config": "^1.0.0",
diff --git a/src/CONST.js b/src/CONST.js
index 2b7f183b82b9..6d7d39cc5f7e 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -2564,6 +2564,7 @@ const CONST = {
},
STATUS_TEXT_MAX_LENGTH: 100,
SF_COORDINATES: [-122.4194, 37.7749],
+ MAPBOX_STYLE_URL: 'mapbox://styles/expensify/cllcoiqds00cs01r80kp34tmq',
NAVIGATION: {
TYPE: {
FORCED_UP: 'FORCED_UP',
diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index 93254bdfddf1..8f07c7c05ecf 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -80,6 +80,36 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
const numberOfWaypoints = _.size(waypoints);
const lastWaypointIndex = numberOfWaypoints - 1;
+ const waypointMarkers = _.filter(
+ _.map(waypoints, (waypoint, key) => {
+ if (!waypoint || waypoint.lng === undefined || waypoint.lat === undefined) {
+ return;
+ }
+
+ const index = Number(key.replace('waypoint', ''));
+ let MarkerComponent;
+ if (index === 0) {
+ MarkerComponent = Expensicons.DotIndicatorUnfilled;
+ } else if (index === lastWaypointIndex) {
+ MarkerComponent = Expensicons.Location;
+ } else {
+ MarkerComponent = Expensicons.DotIndicator;
+ }
+
+ return {
+ coordinate: [waypoint.lng, waypoint.lat],
+ markerComponent: () => (
+
+ ),
+ };
+ }),
+ (waypoint) => waypoint,
+ );
+
// Show up to the max number of waypoints plus 1/2 of one to hint at scrolling
const halfMenuItemHeight = Math.floor(variables.baseMenuItemHeight / 2);
const scrollContainerMaxHeight = variables.baseMenuItemHeight * MAX_WAYPOINTS_TO_DISPLAY + halfMenuItemHeight;
@@ -175,6 +205,8 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
zoom: DEFAULT_ZOOM_LEVEL,
}}
style={styles.mapView}
+ waypoints={waypointMarkers}
+ styleURL={CONST.MAPBOX_STYLE_URL}
/>
) : (
@@ -182,6 +214,7 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
icon={Expensicons.EmptyStateRoutePending}
title={translate('distance.mapPending.title')}
subtitle={isOffline ? translate('distance.mapPending.subtitle') : translate('distance.mapPending.onlineSubtitle')}
+ shouldShowLink={false}
/>
)}