-
Notifications
You must be signed in to change notification settings - Fork 2.9k
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.
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
Map panning fix #25977
Map panning fix #25977
Changes from all commits
3db5935
1dbc119
20fe5e7
9b012b7
2405b2c
6cf632c
5639067
cb6cb07
82b9473
2fbff69
77867ce
1bcc326
f903158
9af7e4e
042a9f8
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import Mapbox from '@rnmapbox/maps'; | ||
import {DirectionProps} from './MapViewTypes'; | ||
import styles from '../../styles/styles'; | ||
|
||
function Direction({coordinates}: DirectionProps) { | ||
if (coordinates.length < 1) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<Mapbox.ShapeSource | ||
id="routeSource" | ||
shape={{ | ||
type: 'Feature', | ||
properties: {}, | ||
geometry: { | ||
type: 'LineString', | ||
coordinates, | ||
}, | ||
}} | ||
> | ||
<Mapbox.LineLayer | ||
id="routeFill" | ||
style={styles.mapDirection} | ||
/> | ||
</Mapbox.ShapeSource> | ||
); | ||
} | ||
|
||
export default Direction; |
Original file line number | Diff line number | Diff line change | ||
---|---|---|---|---|
@@ -0,0 +1,48 @@ | ||||
// Explanation: Different Mapbox libraries are required for web and native mobile platforms. | ||||
// This is why we have separate components for web and native to handle the specific implementations. | ||||
// For the web version, we use the Mapbox Web library called react-map-gl, while for the native mobile version, | ||||
// we utilize a different Mapbox library @rnmapbox/maps tailored for mobile development. | ||||
|
||||
import React from 'react'; | ||||
hayata-suenaga marked this conversation as resolved.
Show resolved
Hide resolved
|
||||
import {View} from 'react-native'; | ||||
import {Layer, Source} from 'react-map-gl'; | ||||
import {DirectionProps} from './MapViewTypes'; | ||||
|
||||
import styles from '../../styles/styles'; | ||||
|
||||
function Direction({coordinates}: DirectionProps) { | ||||
const layerLayoutStyle: Record<string, string> = styles.mapDirectionLayer.layout; | ||||
const layerPointStyle: Record<string, string | number> = styles.mapDirectionLayer.paint; | ||||
|
||||
if (coordinates.length < 1) { | ||||
return null; | ||||
} | ||||
return ( | ||||
<View> | ||||
{coordinates && ( | ||||
<Source | ||||
id="route" | ||||
type="geojson" | ||||
data={{ | ||||
type: 'Feature', | ||||
properties: {}, | ||||
geometry: { | ||||
type: 'LineString', | ||||
coordinates, | ||||
}, | ||||
}} | ||||
Comment on lines
+26
to
+33
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Better to move this data in mapView utils.ts file as a function which takes |
||||
> | ||||
<Layer | ||||
id="route" | ||||
Comment on lines
+24
to
+36
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Use different ids for layer and source and keep these the same as native varient. Technically, we don't need to pass these ids. given that we are not using this our logic and lib will assign default ones. |
||||
type="line" | ||||
source="route" | ||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
Beacuse it is nested in a Source so let's remove it for less confusion. |
||||
paint={layerPointStyle} | ||||
layout={layerLayoutStyle} | ||||
/> | ||||
</Source> | ||||
)} | ||||
</View> | ||||
); | ||||
} | ||||
|
||||
export default Direction; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please create a child folder
Direction
in Mapview and then create this file asindex.tsx
. for native file, name would beindex.native.tsx