Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix add center button and blue dot #40759

Merged
merged 39 commits into from
Jun 3, 2024
Merged

fix add center button and blue dot #40759

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
be55619
fix add center button and blue dot
nkdengineer Apr 23, 2024
0a4b847
fix use util.getBounds
nkdengineer Apr 23, 2024
6093f69
fix update center button
nkdengineer Apr 24, 2024
e7420da
fix native issue
nkdengineer Apr 25, 2024
b7b9fbb
fix lint
nkdengineer Apr 25, 2024
a5ea387
fix lint
nkdengineer Apr 25, 2024
a218054
fix create blueDot color
nkdengineer Apr 25, 2024
b7a31bc
fix lint
nkdengineer Apr 25, 2024
f29e65b
fix only display center button if user interacted
nkdengineer Apr 26, 2024
f975e08
fix merge main
nkdengineer Apr 28, 2024
9754dce
fix using toggleCenterButton and related comment
nkdengineer Apr 30, 2024
ee0584b
fix type error
nkdengineer Apr 30, 2024
50208b8
fix blue dot radius
nkdengineer May 2, 2024
ee76e2e
Merge branch 'main' into fix/40209
nkdengineer May 2, 2024
3acd03f
fix hide center button if already centered
nkdengineer May 2, 2024
757865a
fix lint
nkdengineer May 2, 2024
f1de15d
fix fade in and out 300ms
nkdengineer May 3, 2024
d179015
fix remove inline style and rename function
nkdengineer May 3, 2024
1ff830a
fix merge main
nkdengineer May 8, 2024
eadb32a
fix lint
nkdengineer May 8, 2024
ee8cef6
fix using onTouchCancel instead of onTouchEnd
nkdengineer May 8, 2024
ee451b3
fix merge main
nkdengineer May 16, 2024
273741e
fix native issues
nkdengineer May 16, 2024
b253ae1
fix remove redundant logic
nkdengineer May 16, 2024
b12c374
fix merge main
nkdengineer May 20, 2024
aa487e7
fix compare two coordinates in web
nkdengineer May 21, 2024
6ee0862
fix lint
nkdengineer May 21, 2024
6c90e66
fix lint
nkdengineer May 21, 2024
b38b19f
fix always display center button
nkdengineer May 21, 2024
0688a0e
fix lint
nkdengineer May 21, 2024
e30eb90
fix remove maxZoom prop and change the default zoom value
nkdengineer May 23, 2024
76679ed
fix remove currentZoom variable
nkdengineer May 23, 2024
55f6535
fix merge main
nkdengineer May 24, 2024
0f09d6f
fix merge main
nkdengineer May 28, 2024
1732367
Merge branch 'main' into fix/40209
nkdengineer May 29, 2024
cc42428
fix lint
nkdengineer May 29, 2024
2d79bd8
fix lint
nkdengineer May 29, 2024
95591d9
fix add explaination about haversineDistance
nkdengineer Jun 3, 2024
3fe0372
fix haversineDistance: add new line
nkdengineer Jun 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 42 additions & 1 deletion src/components/MapView/MapView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ 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 Button from '@components/Button';
import useThemeStyles from '@hooks/useThemeStyles';
import setUserLocation from '@libs/actions/UserLocation';
import compose from '@libs/compose';
Expand Down Expand Up @@ -143,7 +144,17 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
onMapReady();
}
};

const centerMap = useCallback(() => {
if (directionCoordinates && directionCoordinates.length > 1) {
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
];
nkdengineer marked this conversation as resolved.
Show resolved Hide resolved
cameraRef?.current?.fitBounds(bounds[0], bounds[1], undefined, 1000);
return;
}
cameraRef?.current?.setCamera({heading: 0, centerCoordinate: [currentPosition?.longitude ?? 0, currentPosition?.latitude ?? 0]});
}, [directionCoordinates, currentPosition]);
return !isOffline && Boolean(accessToken) && Boolean(currentPosition) ? (
<View style={style}>
<Mapbox.MapView
Expand All @@ -165,6 +176,31 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
zoomLevel: initialState?.zoom,
}}
/>
<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: '#007bff',
circleRadius: 8,
nkdengineer marked this conversation as resolved.
Show resolved Hide resolved
}}
/>
</Mapbox.ShapeSource>

{waypoints?.map(({coordinate, markerComponent, id}) => {
const MarkerComponent = markerComponent;
Expand All @@ -181,6 +217,11 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(

{directionCoordinates && <Direction coordinates={directionCoordinates} />}
</Mapbox.MapView>
<Button
style={{marginTop: 8}}
text="center"
onPress={centerMap}
/>
</View>
) : (
<PendingMapView
Expand Down
41 changes: 40 additions & 1 deletion src/components/MapView/MapView.website.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
import type {MapRef} from 'react-map-gl';
import Map, {Marker} from 'react-map-gl';
import Map, {Layer, Marker, Source} from 'react-map-gl';
import {View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import Button from '@components/Button';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
Expand Down Expand Up @@ -177,6 +178,18 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
[mapRef],
);

const centerMap = useCallback(() => {
if (directionCoordinates && directionCoordinates.length > 1) {
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[0][0], bounds[0][1], bounds[1][0], bounds[1][1]]);
return;
}
mapRef?.easeTo({center: {lat: currentPosition?.latitude ?? 0, lon: currentPosition?.longitude ?? 0}, bearing: 0});
}, [directionCoordinates, currentPosition, mapRef]);

return !isOffline && Boolean(accessToken) && Boolean(currentPosition) ? (
<View
style={style}
Expand All @@ -196,6 +209,27 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
style={StyleUtils.getTextColorStyle(theme.mapAttributionText)}
mapStyle={styleURL}
>
<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: {
/* eslint-disable @typescript-eslint/naming-convention */
'circle-radius': 8,
/* eslint-disable @typescript-eslint/naming-convention */
'circle-color': '#007bff',
},
}}
nkdengineer marked this conversation as resolved.
Show resolved Hide resolved
/>
</Source>
{waypoints?.map(({coordinate, markerComponent, id}) => {
const MarkerComponent = markerComponent;
return (
Expand All @@ -210,6 +244,11 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
})}
{directionCoordinates && <Direction coordinates={directionCoordinates} />}
</Map>
<Button
style={{marginTop: 8}}
nkdengineer marked this conversation as resolved.
Show resolved Hide resolved
text="center"
onPress={centerMap}
/>
</View>
) : (
<PendingMapView
Expand Down
Loading