Zooming in and out with Android is pretty easy and works totally fine; however, the result is pretty much different with IOS. I can not zoom the map in to align the map view like what I have in Android.
I set my deltas to:
const LATITUDE_DELTA = 0.000894375;
const LONGITUDE_DELTA = 0.000894375;
And I am using:
region: new MapView.AnimatedRegion({
latitude: 0,
longitude: 0,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}),
For both IOS and Android. Though I found this answer:
how to zoom in/out in react-native-map?
But I am not sure if AnimateToRegion and AnimatedRegion are the same thing. If not, I am not sure how to implement the AnimateToRegion.
Please advise thank you.
I am not sure about AnimatedRegion, but you can use AnimateToRegion like following:
this.refs.map.animateToRegion({
latitude: latitude,
longitude: longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA},
duration)
<MapView style={{flex: 1}}
ref="map"
...
>
I found duration of 3000 suitable for my use.
Related
I've implemented React Native Maps and I have a basic that allows me to interact with the map as expected.
I can pan North/East/South/West without a problem. But when I zoom, it doesn't update the finer details in the map like I'd expect.
My MapView is as follows:
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
initialRegion={initialRegion}
mapType={mapType}
onRegionChange={handleRegionChange}
onMapReady={() => {
setRegionReady(true)
}}
showsUserLocation={true}
followsUserLocation={true}
showsMyLocationButton={true}
/>
My initial region is:
const initialRegion = {
latitude: 56.55352329368351,
latitudeDelta: 10.777170227627643,
longitude: -4.6383764035999775,
longitudeDelta: 9.564308412373066,
}
Anything obvious I'm missing here?
Edit
This only seem to be an issue on simulators. Xcode/Android sims studio both show this behavior but physical devices seem to work.
So I am building an app that is refreshing a GPS position with a marker. The problem is that the initial region is not near the marker and will change.
I have a button to refresh the GPS position, is there a way to have the map go to the marker?
I do not see anything in the documentation that states this.
<MapView
style={styles.map}
initialRegion={region}
ref={_map}
onRegionChangeComplete={region => {setRegion(region)}}
>
<Marker
coordinate={{
latitude: lat,
longitude: long,
}}
key={lat}
title="Location"
style={{width: 26, height: 40}}
description={address}
resizeMode='contain'
/>
</MapView>
You can use de asttribute animateToRegio of react-native-maps.
Something like this:
function getLocation(){
Geolocation.getCurrentPosition(position => {
const region = {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: 0.0043,
longitudeDelta: 0.0034
};
map.current.animateToRegion(region, 500);
});
};
Then, on a button or whatever you want, you can call that function to go to your position, or you can change latitude and longitude to your marker coords
I am trying to get map view to work, when I am using the code below I can see the map at the right location but no sign to my Marker, I tried removing dark mode and giving the Marker an Image but still no result.
Maybe you can locate the problem and help me.
Thank you very much.
Using react-native with expo, testing on my IOS device.
<MapView
style={{ flex: 1 }}
initialRegion={{
latitude: 32.060797,
longitude: 34.7617,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
<Marker
pinColor={"#d62424"}
coordinate={{
latitude: 32.060797,
longitude: 34.7617
}}
image={require('../assets/images/icon.png')}
/>
</MapView>
Finally I found the solution, instead of using Marker just use MapView.Marker.
I hope I fixed your problem as well!
I Have a map marker that is centered on the current user location.
This marker has a draggable property so it it possible to drag
the marker around on the map. My questions is how can i set the current region prop
of the map onDragEnd of the maker. I basically want the user to be able to
drag the marker around and update the map region.
region={{ latitude: this.state.region.latitude, longitude: this.state.region.longitude, latitudeDelta: 0.0922, longitudeDelta: 0.0421 }}
showsUserLocation={true} loadingEnabled={true} followsUserLocation={false}>
<MapView.Marker
onDragEnd={this.onRegionChange(this.state.region)}
//On region change method that gets fires ondragEnd of the marker
onRegionChange=(region) => {
this.setState({region
});
console.log(this.state.region)
}
I'm using react-native-maps and I want to zoom to a specific lat lon location when i init my maps in my react native project. I heard that it is called as camera zoom but couldn't find anything that could help me with this problem. and also it must fit to all the markers on the map.
Any lead would be greatly appreciated...
Use the following code:
componentDidMount() {
var newRegion = {
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
};
this.mapView.animateToRegion(newRegion, 1000);
}
MapView:
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
initialRegion={this.state.region}
zoomEnabled={true}
minZoomLevel={10}
ref={ref => { this.mapView = ref }}>
</MapView>
By specifying latitudeDelta , longitudeDelta and marker array, you can zoom in. see props of react native maps for more information.