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,
},
}}
>
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 have an API to get cars's position in react-native-maps.
[
{
"Message": "OK",
"NumberPlate": "*****",
"DeviceID": "60000660",
"DriverName": "",
"DriverLicense": "",
"Date": "08:10:00 - 10/01/2022",
"Lt": "latitude",
"Ln": "longitude",
"Address": "***, ***, ***",
"Angle": 285,
"CarStatus": "parking",
"Speed": 0,
"Acc": "off",
"Oil": 323
},
.....
]
To prevent the server from crashing, I only get data every 15 seconds. And as we all know, my cars will "jump" in maps.
So is there a way to make them move smoothly?
For example they will move straight between 2 points in 15s.
This is my <MapView />
<MapView
ref={mapRef}
style={{width: '100%', height: '100%'}}
initialRegion={{
latitude: mapState.lat,
longitude: mapState.long,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
}}
onPress={() => {
menuRef.current.snapTo(1);
vehiclesRef.current.snapTo(2);
}}
showsUserLocation={true}
showsTraffic={false}
showsMyLocationButton={true}
zoomEnabled={true}>
{CarInfo.map(car => {
return (
<Marker
key={car.DeviceID}
coordinate={{
latitude: car.Lt,
longitude: car.Ln,
}}
onPress={() => vehiclesRef.current.snapTo(1)}>
<Animated.View style={[styles.markerWrap]}>
<Text style={styles.numberPlate} numberOfLines={1}>
{car.NumberPlate}
</Text>
<Animated.Image
source={Car}
style={styles.marker}
resizeMode="cover"
/>
</Animated.View>
</Marker>
);
})}
</MapView>
If you use react-native-maps Marker, you can see this and follow him. It works. If you want show multiple marker and want them move smoothly, you should custom a child component and use I in return(). this is my code:
export default function CarMarker({car, onOpen}) {
const [marker, setMarker] = useState(null);
const [coordinate, setCoordinate] = useState(
new AnimatedRegion({
latitude: car.Lt || INITIAL_LAT,
longitude: car.Ln || INITIAL_LONG,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}),
);
useEffect(() => {
animateMarker();
}, [car]);
const animateMarker = () => {
const newCoordinate = {
latitude: car.Lt,
longitude: car.Ln,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
};
if (Platform.OS === 'android') {
if (marker) {
marker.animateMarkerToCoordinate(newCoordinate, 15000);
}
} else {
coordinate.timing(newCoordinate).start();
}
};
return (
<Marker.Animated
key={car.DeviceID}
ref={marker => {
setMarker(marker);
}}
coordinate={coordinate}
anchor={{x: 0.5, y: 0.5}}
onPress={onOpen}>
<Animated.View style={styles.markerWrap}>
<Text style={styles.numberPlate} numberOfLines={1}>
{car.NumberPlate}
</Text>
<Animated.Image source={Car} style={styles.marker} resizeMode="cover" />
</Animated.View>
</Marker.Animated>
);
}
and this is my <MapView/>
<MapView
ref={mapRef}
style={{width: '100%', height: '100%'}}
initialRegion={{
latitude: mapState.lat,
longitude: mapState.long,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}}
onPress={() => {
menuRef.current.snapTo(1);
vehiclesRef.current.snapTo(2);
}}
showsUserLocation={true}
showsTraffic={false}
showsMyLocationButton={true}
zoomEnabled={true}>
{CarInfo.map(car => {
return (
<CarMarker
key={car.DeviceID}
car={car}
onOpen={() => {
vehiclesRef.current.snapTo(1);
setSelectedVehicle(car);
}}
/>
);
})}
</MapView>
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 showing multiple marker in React Native Mapview. My code
this.state = {
coords: [
{ latitude: 23.759119, longitude: 90.411804 },
{ latitude: 23.759188, longitude: 90.41167 },
{ latitude: 23.759127, longitude: 90.41138 },
{ latitude: 23.759224, longitude: 90.411995 },
{ latitude: 23.7591, longitude: 90.41138 }
]}
It's working when code like as
<Marker coordinate={this.state.coords[0]} />
<Marker coordinate={this.state.coords[1]} />
<Marker coordinate={this.state.coords[2]} />
<Marker coordinate={this.state.coords[3]} />
<Marker coordinate={this.state.coords[4]} />
But not working when code like as
{this.state.coords.map((c, index) => {
<Marker key={index} coordinate={c} />;
})}
I didn't get any error. Also not understood why not working the codes. Anyone can help me?
I got the solution. I've not returning anything. So modify the code like
{this.state.coords.map((c, index) => {
return <Marker key={index} coordinate={c} />;
})}
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 🥰