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)
}
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 have a react-native-maps MapView which is utilized in a fitToCoordinates function. The function zooms the map to fit a start point (current user location) and an end point. Below is the MapView object:
<MapView
ref={map => { this.map = map; }}
region={{
latitude: this.props.startLatitude,
longitude: this.props.startLongitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}}
style={styles.mapContainer}
showsCompass={false}
showsUserLocation
>
<MapViewDirections
origin={{ latitude: this.props.startLatitude, longitude: this.props.startLongitude }}
destination={this.props.optimalDestination}
apikey={GOOGLE_API_KEY}
strokeWidth={2}
strokeColor={COLORS.MAIN.hexCode}
/>
{this.walkLine()}
{this.optimalAddressFound()}
{this.fitCoordinates()}
</MapView>
The fitToCoordinates function referenced in the MapView object is as follows:
fitCoordinates() {
if (this.props.optimalAddressFound && this.props.destinationMapFit) {
this.map.fitToCoordinates(
[{ latitude: this.props.startLatitude,
longitude: this.props.startLongitude },
{ latitude: this.props.optimalAddressLat,
longitude: this.props.optimalAddressLng }],
{ edgePadding: { top: 30, right: 30, bottom: 30, left: 30 } }
);
}
}
Everything works fine, except when a user opens the React Navigation Drawer Menu, navigates to another page, and then returns to the Map page. If they do that, the ref to the MapView object becomes undefined and the fitToCoordinates function fails (TypeError: Cannot ready property 'fitToCoordinates' of undefined).
My question is, how can I maintain the map ref if my user navigates to other screens? I have tried creating a function to store the MapView object in my Redux store but it seems that the Redux store cannot accept an object in the Reducer.
if you use react-navigation, you would need to set a key for your Map-Screen to make sure the same screen is reused instead of creating a new one each time.
something like
navigation.navigate({key: 'map-screen', routeName: 'Map'});
i tried to set marker in the center of the circle in MapView ,i using the same coordinate of the map and the circle but the image of marker not centralised this is the code :
<MapView
ref={(ref) => this.map = ref}
provider={MapView.PROVIDER_GOOGLE}
style={styles.map}
region={{
latitude: this.props.user.pos.lat,
longitude: this.props.user.pos.lng,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}>
<MapView.Circle
center={{latitude: 33.941582,
longitude: 10.066695, }}
radius={1000}
fillColor="#fed42855"
strokeColor="#fed42855" >
</MapView.Circle>
<MapView.Marker
coordinate={{
latitude: 33.941582,
longitude: 10.066695,
}}
title={"title"}
description={"description"}
image{require('../../../../../assets/navigation.png')}
/>
</MapView>
A MapView marker is displayed just above the given coordinate, since by default markers are displayed as pins and the bottom of the pin needle corresponds to the coordinate.
You can use the anchor and centerOffset props to reposition the marker according your needs. You can find the documentation here!
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.