i am using react-native-maps in my expo application ,i'm trying to animate to different regions but when the button is clicked nothing happens
const mapRef = useRef(null);
const moveTo = () => {
if (mapRef.current) {
mapRef.current.animateToRegion({
latitude: 34.67264651170966,
longitude: 3.2496815480574,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}, 20);
}
}
<View style={styles.container}>
<MapView
ref={mapRef}
showsUserLocation
style={styles.map}
initialRegion={{
latitude: 36.74041655479224,
longitude: 3.344924892773676,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
onRegionChangeComplete={(region) => setcurrentLocalisation(region)}
>
</MapView>
<Button style={styles.btn} onPress={moveTo}>Move</Button>
</View>
Can you try using this method instead :
mapRef?.current?.animateCamera({
center: {
latitude: 34.67264651170966,
longitude: 3.344924892773676
}
})
Related
The map renders just fine but ignores the setMapBoundaries.
What am I doing wrong please?
<MapView
style={styles.map}
provider={PROVIDER_GOOGLE}
mapType="hybrid"
region={location}
setMapBoundaries ={{
northEast: {
latitude: 17.31,
longitude: -61.55,
},
southWest: {
latitude: 16.85,
longitude: -62.07,
},
}}
>
In my app, I have google map. It is implemented as given below.
<MapView style={[styles.mapStyle, { flex: 1, width: this.state.mapWidth }]}
initialRegion={{
latitude: this.state.latitude,
longitude: this.state.longitude,
latitudeDelta: 0.1,
longitudeDelta: 0.1,
}}
provider={PROVIDER_GOOGLE}
onPress={this.onMapPress.bind(this)}
showsUserLocation={true}
followsUserLocation={true}
showsMyLocationButton={true}
showsCompass={true}
showsTraffic={true}
toolbarEnabled={true}
onMapReady={() => this.setState({ width: width - 1 })}
>
<Marker draggable
coordinate={{
latitude: this.state.latitude,
longitude: this.state.longitude,
}}
onDragEnd={(e) => this.setState({ x: e.nativeEvent.coordinate })}
/>
<Circle
center={{
latitude: this.state.latitude,
longitude: this.state.longitude,
}}
radius={this.state.radius}
fillColor='rgba(253, 48, 4,0.5)'
strokeColor='rgba(253, 48, 4,1)'
/>
</MapView>
When I click on a button I change the state value of region of the the map.
changeRegion(){
this.setState({ latitude: 6.86, longitude: 6.86 });
}
This successfully changes the position of the marker of the map.
My problem is, map doesn't move to selected position. How can I achieve that?
Create a ref for your Map
const mapRef = React.createRef();
Pass the ref to your Map
<Map
ref={mapRef}
// Rest of your props
/>
Modify your function
changeRegion(){
const latitude = 6.86;
const longitude = 6.86;
this.setState({ latitude, longitude });
mapRef.current.animateToRegion({
latitude,
longitude,
latitudeDelta: 0.1,
longitudeDelta: 0.1
})
}
based on #Dan's answer, modify a little bit if that answer does not work for you:
changeRegion(){
const targetLatitude = 6.86;
const targetLongitude = 6.86;
this.setState({ latitude, longitude });
mapRef.current.animateToRegion({
latitude: targetLatitude,
longitude: targetLongitude,
latitudeDelta: 0.1,
longitudeDelta: 0.1
})
}
const [marker, setMarker] = useState([
{
latLng: { latitude: 16.960775, longitude: 82.2258361 },
title: "Best Place",
description: "This is the best place in Portland"
}
]);
and i was using in Mapper as below
<Marker
coordinate={marker.latLng}
title={marker.title}
description={marker.description}
/>
and it was showing error like latLng cannot be null -a position is required
const INITIAL_REGION = {
latitude: 52.5,
longitude: 19.2,
latitudeDelta: 8.5,
longitudeDelta: 8.5
};
render(){
return (
<MapView
initialRegion={INITIAL_REGION}
style={{ flex: 1, zIndex: -1, ...StyleSheet.absoluteFillObject }}
>
<Marker coordinate={{ latitude: 52.0, longitude: 18.2 }} />
<Marker coordinate={{ latitude: 52.4, longitude: 18.7 }} />
<Marker coordinate={{ latitude: 52.1, longitude: 18.4 }} />
<Marker coordinate={{ latitude: 52.6, longitude: 18.3 }} />
<Marker coordinate={{ latitude: 51.6, longitude: 18.0 }} />
<Marker coordinate={{ latitude: 53.1, longitude: 18.8 }} />
<Marker coordinate={{ latitude: 52.9, longitude: 19.4 }} />
<Marker coordinate={{ latitude: 52.2, longitude: 21 }} />
</MapView>
);
}
Here is a working example. Marker coordinate should be receiving an object which requires latitude, and longitude fields. I could not tell what is wrong with your code because of the lack of code segment example. If you want to share the whole render code segment with me, I can help you with what is wrong.
Hope that this helped you a bit.
Have fun 🥰
How to check the latitude and the longitude value is laying on the MapView region or outside the MapView region.
//This is outside render funtion
handleItem = (lat, lng) => {
this.setState({ latitude: lat, longitude: lng })
this.map.animateToCoordinate({ latitude: lat, longitude: lng }, 1000)
}
//this is is in render function
<MapView style={{ flex: 1 }}
ref={map => this.map = map}
initialRegion={{
latitude: this.state.latitude,
longitude: this.state.longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
<Marker coordinate={this.state} />
{ this.handleItem(this.state.latitude, this.state.longitude) }}
</MapView>
I am using MapView of react-native map clustering and Marker and callout of react-native-maps. I am unable to use animateToRegion.
It shows me this.mapView.animateToRegion is not a function
<MapView
ref={map=>{mapView = map}}
provider='google'
clustering={true}
onClusterPress={this.onPressCluster}
region={this.state.region}
onRegionChange={this.onRegionChange}
onRegionChangeComplete={this.onRegionChangeComplete}
style={styles.map}
showsUserLocation={true}
followUserLocation={true}
zoomEnabled={true}
ScrollEnabled={true}
showsBuildings={true}
showsMyLocationButton={false}/>
animate(){
let r = {
latitude: 42.5,
longitude: 15.2,
latitudeDelta: 7.5,
longitudeDelta: 7.5,
};
this.mapView.root.animateToRegion(r, 2000);
}
render(){
return(
<MapView
ref = {(ref)=>this.mapView=ref}
region={{
latitude: 35.688442,
longitude: 51.403753,
latitudeDelta: 0.5,
longitudeDelta: 0.5,
}}
onPress={()=>this.animate()}
>
...markers...
</MapView>
);
}
clickOnSearchedAddress = (placeId, index, dscrpt) => {
getLatLongFromAddress(placeId).then((response) => {
let r = {
[Constants.KEY_LATITUDE]: response.geometry.location.lat,
[Constants.KEY_LONGITUDE]: response.geometry.location.lng,
latitudeDelta: latitudeDelta,
longitudeDelta: longitudeDelta
}
this.mapView.animateToRegion(r, 1000)
Keyboard.dismiss()
isSetTextProgramatically = true;
this.setState({
search: dscrpt,
searchData: [],
})
}).then((error) => { })
}
<MapView
ref={ref => this.mapView = ref}
provider={PROVIDER_GOOGLE}
style={[styles.map, , { width: this.state.width }]}
initialRegion={region}
onRegionChangeComplete={this.onRegionChange}
showsMyLocationButton={true}
showsCompass={true}
showsUserLocation={true}
onMapReady={() => this.setState({ width: width - 1 })}}
/>
I believe the issue is that the prop is not called ref, but instead mapRef. Pass the ref in there, and it should work.
You would then also have to call it with something like this this.mapView.[current/map]animateToRegion. Just check the mapView object you get.