I am using react-native-maps
for react-native
and I like to use my own buttons for "left" "right" "up" and "down" instead of using the fingers to swipe. (also a button for rotation)
i searched a lot in the web, but i couldn't find a solution for that.
It was possible for me to use setInterval and add a number to the longitude or latitude, but this is/was very data intensive, slow and not so smooth.
<MapView style={{ flex: 1 }}
initialRegion={this.state.region}
followUserLocation={false}
showsUserLocation={false}
zoomEnabled={false}
zoomControlEnabled={false}
zoomTapEnabled={false}
rotateEnabled={false}
scrollEnabled={false}
></MapView>
<Button title="up" onPress... />
<Button title="down" onPress.../>
<Button title="left" onPress... />
<Button title="right onPress... />
<Button title="rotate-left" onPress... />
<Button title="rotate-right" onPress... />
You can use camera view
instead of region
for specifying latitude and longitude. It provides a way to navigate to specific coordinate and also rotate the map.
First create state for initial position of map:
this.state = {
camera: {
center: {
latitude: 40.712776,
longitude: -74.005974,
},
pitch: 0,
heading: 0,
zoom: 15
}
}
then use it with MapView like this:
<MapView
ref={(ref) => this.mapView = ref}
camera={this.state.camera}
.../>
Now specify calculated latitude and longitude for moving to specific side(function for left, right, up and down button).
MoveToPosition = () => {
const duration = 1000;
//provided static latitude and longitude for moving downwards from original location
var newCam = {
center: {
latitude: 40.702776,
longitude: -74.005974,
}
}
//below method animates view to specified latitude and longitude in provided duration
this.mapView.animateCamera(newCam, duration);
}
And to rotate the map you can specify degree in number in heading
prop.
RotateFun = () => {
heading += 90;
this.mapView.animateCamera({ heading: heading }, 1000);
}
You can do the same using region
prop and animateToRegion
method where you can specify latitude and longitude.(but, i think there isn't any prop for rotating when using region)
You can find more information for the same in documentation: https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With