Skip to content

Commit

Permalink
Merge pull request #43630 from truph01/fix/43330-your-location-button…
Browse files Browse the repository at this point in the history
…-displayed-thumbnail

Fix: Your location button button is displayed on distance request thumbnail
  • Loading branch information
mountiny authored Jun 20, 2024
2 parents 41d02de + 7a130f5 commit e1aec82
Show file tree
Hide file tree
Showing 2 changed files with 120 additions and 64 deletions.
115 changes: 75 additions & 40 deletions src/components/MapView/MapView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -166,8 +166,41 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
});
}, [directionCoordinates, currentPosition, mapPadding, waypoints]);

const centerCoordinate = currentPosition ? [currentPosition.longitude, currentPosition.latitude] : initialState?.location;
return !isOffline && !!accessToken && !!currentPosition ? (
const centerCoordinate = useMemo(() => (currentPosition ? [currentPosition.longitude, currentPosition.latitude] : initialState?.location), [currentPosition, initialState?.location]);

const waypointsBounds = useMemo(() => {
if (!waypoints) {
return undefined;
}
const {northEast, southWest} = utils.getBounds(
waypoints.map((waypoint) => waypoint.coordinate),
directionCoordinates,
);
return {ne: northEast, sw: southWest};
}, [waypoints, directionCoordinates]);

const defaultSettings: Mapbox.CameraStop | undefined = useMemo(() => {
if (interactive) {
if (!centerCoordinate) {
return undefined;
}
return {
zoomLevel: initialState?.zoom,
centerCoordinate,
};
}
if (!waypointsBounds) {
return undefined;
}
return {
bounds: waypointsBounds,
};
}, [interactive, centerCoordinate, waypointsBounds, initialState?.zoom]);

const initCenterCoordinate = useMemo(() => (interactive ? centerCoordinate : undefined), [interactive, centerCoordinate]);
const initBounds = useMemo(() => (interactive ? undefined : waypointsBounds), [interactive, waypointsBounds]);

return !isOffline && !!accessToken && !!defaultSettings ? (
<View style={[style, !interactive ? styles.pointerEventsNone : {}]}>
<Mapbox.MapView
style={{flex: 1}}
Expand All @@ -183,43 +216,43 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
>
<Mapbox.Camera
ref={cameraRef}
defaultSettings={{
centerCoordinate,
zoomLevel: initialState?.zoom,
}}
defaultSettings={defaultSettings}
// Include centerCoordinate here as well to address the issue of incorrect coordinates
// displayed after the first render when the app's storage is cleared.
centerCoordinate={centerCoordinate}
centerCoordinate={initCenterCoordinate}
bounds={initBounds}
/>
<Mapbox.ShapeSource
id="user-location"
shape={{
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [currentPosition?.longitude ?? 0, currentPosition?.latitude ?? 0],
{interactive && (
<Mapbox.ShapeSource
id="user-location"
shape={{
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [currentPosition?.longitude ?? 0, currentPosition?.latitude ?? 0],
},
properties: {},
},
properties: {},
},
],
}}
>
<Mapbox.CircleLayer
id="user-location-layer"
sourceID="user-location"
style={{
circleColor: colors.blue400,
circleRadius: 8,
],
}}
/>
</Mapbox.ShapeSource>
>
<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])) {
if (utils.areSameCoordinate([coordinate[0], coordinate[1]], [currentPosition?.longitude ?? 0, currentPosition?.latitude ?? 0]) && interactive) {
return null;
}
return (
Expand All @@ -235,15 +268,17 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(

{directionCoordinates && <Direction coordinates={directionCoordinates} />}
</Mapbox.MapView>
<View style={[styles.pAbsolute, styles.p5, styles.t0, styles.r0, {zIndex: 1}]}>
<Button
onPress={centerMap}
iconFill={theme.icon}
medium
icon={Expensicons.Crosshair}
accessibilityLabel={translate('common.center')}
/>
</View>
{interactive && (
<View style={[styles.pAbsolute, styles.p5, styles.t0, styles.r0, {zIndex: 1}]}>
<Button
onPress={centerMap}
iconFill={theme.icon}
medium
icon={Expensicons.Crosshair}
accessibilityLabel={translate('common.center')}
/>
</View>
)}
</View>
) : (
<PendingMapView
Expand Down
69 changes: 45 additions & 24 deletions src/components/MapView/MapView.website.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {useFocusEffect} from '@react-navigation/native';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
import type {MapRef} from 'react-map-gl';
import type {MapRef, ViewState} from 'react-map-gl';
import Map, {Marker} from 'react-map-gl';
import {View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
Expand Down Expand Up @@ -206,7 +206,28 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
});
}, [directionCoordinates, currentPosition, mapRef, waypoints, mapPadding]);

return !isOffline && !!accessToken && !!currentPosition ? (
const initialViewState: Partial<ViewState> | undefined = useMemo(() => {
if (!interactive) {
if (!waypoints) {
return undefined;
}
const {northEast, southWest} = utils.getBounds(
waypoints.map((waypoint) => waypoint.coordinate),
directionCoordinates,
);
return {
zoom: initialState.zoom,
bounds: [northEast, southWest],
};
}
return {
longitude: currentPosition?.longitude,
latitude: currentPosition?.latitude,
zoom: initialState.zoom,
};
}, [waypoints, directionCoordinates, interactive, currentPosition, initialState.zoom]);

return !isOffline && !!accessToken && !!initialViewState ? (
<View
style={style}
// eslint-disable-next-line react/jsx-props-no-spreading
Expand All @@ -217,25 +238,23 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
ref={setRef}
mapLib={mapboxgl}
mapboxAccessToken={accessToken}
initialViewState={{
longitude: currentPosition?.longitude,
latitude: currentPosition?.latitude,
zoom: initialState.zoom,
}}
initialViewState={initialViewState}
style={StyleUtils.getTextColorStyle(theme.mapAttributionText)}
mapStyle={styleURL}
interactive={interactive}
>
<Marker
key="Current-position"
longitude={currentPosition?.longitude ?? 0}
latitude={currentPosition?.latitude ?? 0}
>
<View style={styles.currentPositionDot} />
</Marker>
{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])) {
if (utils.areSameCoordinate([coordinate[0], coordinate[1]], [currentPosition?.longitude ?? 0, currentPosition?.latitude ?? 0]) && interactive) {
return null;
}
return (
Expand All @@ -250,15 +269,17 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
})}
{directionCoordinates && <Direction coordinates={directionCoordinates} />}
</Map>
<View style={[styles.pAbsolute, styles.p5, styles.t0, styles.r0, {zIndex: 1}]}>
<Button
onPress={centerMap}
iconFill={theme.icon}
medium
icon={Expensicons.Crosshair}
accessibilityLabel={translate('common.center')}
/>
</View>
{interactive && (
<View style={[styles.pAbsolute, styles.p5, styles.t0, styles.r0, {zIndex: 1}]}>
<Button
onPress={centerMap}
iconFill={theme.icon}
medium
icon={Expensicons.Crosshair}
accessibilityLabel={translate('common.center')}
/>
</View>
)}
</View>
) : (
<PendingMapView
Expand Down

0 comments on commit e1aec82

Please sign in to comment.