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
Create examples of custom myLocationButton and zoomButtons #1874
Comments
Any work for that???? |
Some problem for me, I want to know how to change position of my current location button... |
Is this available? |
Any update? |
Custom myLocationButton example: Here's the component I made in case you'd like to create your own. I tried getting the packages location button to work for my project on Android and nearly became bald because of it (All those solutions with re-rendering the Map component upon mapDidLoad or whatever definitely didn't work for me) so here's a snippet of my own code (no need to worry about my !isListingSelected statement etc). The use of refs here is the trick - you steal snippets from the baked in methods of the MapListing component with the refs - and then call the method you'd like when your custom component is tapped. this.state = {
latitude: INITIAL_REGION.latitude,
longitude: INITIAL_REGION.longitude,
error: null,
isListingSelected: false
} /**
* Sets the overall lat long of the map viewport and thus the animation engages
*/
getCurrentPosition = () => {
navigator.geolocation.getCurrentPosition(
position => {
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null
})
_mapView.animateToCoordinate(
{
latitude: this.state.latitude,
longitude: this.state.longitude
},
1000
)
},
error => {
console.log(error)
this.setState({ error: error.message })
}
)
} /**
* Show find my location button
* TODO: needs to have SDK26 permissions added to it in the near future
*/
renderShowLocationButton = () => {
if (!this.state.isListingSelected) {
return (
<TouchableOpacity
style={styles.myLocationButton}
onPress={() => {
this.getCurrentPosition()
}}
>
<MaterialCommunityIcons name='crosshairs-gps' size={24} />
</TouchableOpacity>
)
}
return
// Should add error handling if needed too
} //In your map component
render() {
...
<MapView
ref={mapView => {
_mapView = mapView
}}
{this.renderShowLocationButton()}
...
/>
} const styles = StyleSheet.create({
map: {
...StyleSheet.absoluteFillObject
},
myLocationButton: {
backgroundColor: colors.surface,
position: 'absolute',
bottom: 10,
right: 10,
padding: 15,
elevation: 3,
alignItems: 'center',
alignSelf: 'flex-end',
justifyContent: 'center',
borderRadius: 50
}
}) |
Could someone help with zoom in/out buttons? I can't make it work properly... And there is no valid and working examples in Internet... (Typescript, React 0.60) |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
any update? |
is there any update concerning the show my location button location |
No description provided.
The text was updated successfully, but these errors were encountered: