WHen i open my react native expo app my mapview is on my location:
initialRegion={{
latitude: Number(userProfil.latitude),
longitude: Number(userProfil.longitude),
latitudeDelta: isBoat ? 10 : 0.0922,
longitudeDelta: isBoat ? 10 : 0.0421,
}}
When isBoat is true the latitude should be 10 but the map does'nt change the zoom
do you have any recommendation for this issue ?
As you want to change the map camera focus when the app switched to boat view.
you can simply animate the camera as below:
const MapScreen = () => {
const mapRef = React.useRef();
const [isBoat, setIsBoat] = useState(false);
useEffect(() => {
if (isBoat) {
const camera = {
center: {
latitude: Number(userProfil.latitude),
longitude: Number(userProfil.longitude),
},
// Only on iOS MapKit, in meters. The property is ignored by Google Maps.
altitude: 20,
// Only when using Google Maps.
zoom: 10,
};
mapRef.current.animateCamera(camera, 300);
}
}, [isBoat]);
return (
<MapView
initialRegion={{
latitude: Number(userProfil.latitude),
longitude: Number(userProfil.longitude),
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
ref={mapRef}
></MapView>
);
};
Related
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
}
})
I was trying get the current location using react-native-maps. This is my following code :
import MapView from 'react-native-maps';
import Geolocation from '#react-native-community/geolocation';
const [position, setPosition] = useState({
latitude: 10,
longitude: 10,
latitudeDelta: 0.001,
longitudeDelta: 0.001,
});
useEffect(() => {
Geolocation.getCurrentPosition(success, error, options);
}, []);
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0,
};
function success(pos) {
var crd = pos.coords;
setPosition({
latitude: crd.latitude,
longitude: crd.longitude,
latitudeDelta: 0.0421,
longitudeDelta: 0.0421,
});
}
function error(err) {
console.warn(`ERROR(${err.code}): ${err.message}`);
}
return (
<MapView
style={styles.map}
initialRegion={position}
showsUserLocation={true}
>
</MapView>
Now if I remove the property initialRegion, the map is working perfectly fine. But with the above code, I am getting a white screen without any error.
Any help will be appreciated.
I think the problem with your code is that getCurrentPosition is failing and since your initial coordinates inside position are very zoomed in, it looks like it isn't showing anything.
Also make sure the google maps API is enabled and react-native-maps is configured correctly.
Here is how I got it working:
import React, {useState, useEffect} from 'react';
import {StyleSheet} from 'react-native';
import MapView from 'react-native-maps';
import Geolocation from '#react-native-community/geolocation';
const App = () => {
const [position, setPosition] = useState({
latitude: 10,
longitude: 10,
latitudeDelta: 0.001,
longitudeDelta: 0.001,
});
useEffect(() => {
Geolocation.getCurrentPosition((pos) => {
const crd = pos.coords;
setPosition({
latitude: crd.latitude,
longitude: crd.longitude,
latitudeDelta: 0.0421,
longitudeDelta: 0.0421,
});
}).catch((err) => {
console.log(err);
});
}, []);
return (
<MapView
style={styles.map}
initialRegion={position}
showsUserLocation={true}
/>
);
};
const styles = StyleSheet.create({
map: {
...StyleSheet.absoluteFillObject,
},
});
export default App;
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
})
}
I'm trying to create a simple app that loads a google map (using airbnb's react-native-maps library) and shows the user's current location. What I'm seeing is that the map always shows the default initial position rather than re-rendering once the user's location is acquired.
I'm using React 0.42 and testing only on iOS. Here is some code to clarify:
1.) I set an initial state
state = {
region: {
latitude: 52,
longitude: 5,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}
}
2.) I get the user's location within componentDidMount
componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
region: {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: 0.01,
longitudeDelta: 0.0011
}
});
},
(error) => alert(JSON.stringify(error)),
{enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
);
}
3.) With render, I display the map with the initial region, and expect that region to change once the user's location is acquired
render() {
return (
<View style={{ flex: 1 }}>
<View style={{backgroundColor: 'coral', height: 70, justifyContent: 'center', alignItems: 'center'}}>
<Text>
<Text>longitude: {this.state.region.longitude}</Text>
<Text>latitude: {this.state.region.latitude}</Text>
</Text>
</View>
<View style={styles.container}>
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
initialRegion={this.state.region}
region={this.state.region}
onRegionChange={this.onRegionChange}
onRegionChangeComplete={this.reloadEntities}
/>
</View>
</View>
);
}
Here is the onRegionChange, just updates the state with the new region, which I believe will cause a re-render
onRegionChange = (region) => {
this.setState({ region });
}
NOTE: The longitude and latitude text values do update as the region on the map changes, and they have they are updated once the user's location is acquired.
So I'm a bit confused as to why the map does not change what it's showing once the user's location is acquired. Any help would be much appreciated!
Update: I've taken a look at this thread: https://github.com/airbnb/react-native-maps/issues/43 and it seems to revolve mainly around Android, but I did try to remove the enableHighAccuracy option with no luck.
Set the region of the MapView with the value of your region state this.state.region.
You need to get the current position and setting it to the region and then to use the watchPosition function to get the coordinates everytime the device detects there's a change in the location, this time set the new values to your region state.
This would work this way
import React, { Component } from 'react';
import MapView from 'react-native-maps';
import { AppRegistry, View } from 'react-native';
const { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0122;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const SPACE = 0.01;
class Test extends Component {
constructor() {
super();
this.state = {
region: {
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
}
}
}
componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
region: {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
accuracy: position.coords.accuracy
}
});
},
(error) => alert(error.message),
{timeout: 10000}
);
this.watchID = navigator.geolocation.watchPosition((position) => {
const newRegion = {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
accuracy: position.coords.accuracy
}
this.setState({newRegion});
});
}
componentWillUnmount() {
navigator.geolocation.clearWatch(this.watchID);
}
render() {
return (
<View style={styles.container}>
<MapView
style={styles.map}
region={this.state.region}
showsUserLocation={true}
followUserLocation={true}>
</MapView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
});
AppRegistry.registerComponent('Russia terrorist state', () => Test);
Be sure to enable showsUserLocation and followUserLocation in the MapView, this way the app will ask the user current location.
followUserLocation depends on showUserLocation.
Constant longitude and latitude are only as example.
You should not use initialRegion prop with region prop together:
Use this prop instead of region only if you don't want to control the
viewport of the map besides the initial region.
Source
It should work after you remove the initialRegion prop.
It's also important to get rid of onRegionChangeComplete={this.reloadEntities}.
Every time the region changes, react-native will reload and default back to the initial state you declared in your constructor.
How can I apply ground overlay and markers together in React Native map?
I want to have some markers above the overlay and the overlay above map.
The react-native-maps project is a very capable and active community solution that can handle this.
Here's an example that draws a polygon overlay and places a marker on the overlay:
import React from 'react';
import {
AppRegistry,
View
} from 'react-native';
import MapView from 'react-native-maps';
class MyApp extends React.Component {
render () {
return (
<MapView
style={{flex:1}}
initialRegion={{
latitude: 40.758242,
longitude: -73.848986,
latitudeDelta: 0.001,
longitudeDelta: 0.01,
}}
>
<MapView.Polygon
coordinates={[
{ latitude: 40.757966, longitude: -73.847704 },
{ latitude: 40.758421, longitude: -73.845129 },
{ latitude: 40.756869, longitude: -73.844227 },
{ latitude: 40.755471, longitude: -73.846266 }
]}
fillColor="rgba(0,0,255,0.2)"
strokeColor="orange"
strokeWidth={2}
/>
<MapView.Marker
title="Citi Field"
description="center field"
coordinate={{ latitude: 40.757405, longitude: -73.845815 }}
pinColor="blue"
/>
</MapView>
);
}
}
AppRegistry.registerComponent('MyApp', () => MyApp);