React Native Maps Go to Marker - react-native

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

Related

Auto zoom to current location is not working properly for particular area

I'm using react-native-maps, I have been showing maps with current location, Zoom level looks good for some location, and for some location, map looks blurry. I tried calculating the latitudeDelta and longitudeDelta value following this link, but no luck. How to zoom map at city level?
This is my code
let region = {
latitude: this.props.latitude,
longitude: this.props.longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
};
<MapView
style={[styles.map, {flex: 3, height: deviceHeight / 50, width: deviceWidth}]}
region={this.state.mapRegion}
showsUserLocation={true}
followUserLocation={true}
initialRegion={this.state.initialRegion}
onRegionChangeComplete={mapRegion => {
this.updateAddress(mapRegion);
}}>
<MapView.Marker
coordinate={{
latitude: this.state.mapRegion ? this.state.mapRegion.latitude : this.state.latitude,
longitude: this.state.mapRegion ? this.state.mapRegion.longitude : this.state.longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}}>
</MapView.Marker>
</MapView>
blurry map image

Try to use animateToRegion() method which me help you.
this.mapView.animateToRegion(initialRegion, 2000); // pass your region object as first parameter

how to set marker in center of the circle

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!

react native maps marker custom image cannot change from default

I've spent about 5 hours trying to get this to work with many different permutations of code, and then rebuilding. I cannot for the life of me change the default "red pointer" marker as the default marker image in react native maps.
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
...
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
ref={ref => {this.map = ref;}}
minZoomLevel={4} // default => 0
maxZoomLevel={10} // default => 20
enableZoomControl={true}
showsUserLocation = {true}
showsMyLocationButton = {true}
zoomEnabled = {true}
initialRegion={{
latitude: 37.600425,
longitude: -122.385861,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}}
>
<MapView.Marker
coordinate={marker.location}
image={require('./images/test.png')} <------ HERE
width={48}
height={48}
/>
</MapView>
The images definitely exist in the right folder, I've tried different image formats png/gif/jpg/svg, I've tried using {{uri:...}} and icon/image, adding and removing width/height attributes. Nothing seems to work. I'm always getting the default red pointer.
Have I missed something obvious?
The project packager/compiler fails when I require an image that doesn't exist, or an unsupported type. It definitely can see the image, but just doesn't do anything with it. Same results on the emulator and on actual device.
image={require('./images/test.png')}
This line just does nothing, as if it's being ignored somehow.

<MapView
provider={PROVIDER_GOOGLE}
style={styles.container}
region={{
latitude: this.state.latitude,
longitude: this.state.longitude,
}}
>
<Marker
coordinate={{
latitude: this.state.latitude,
longitude: this.state.longitude,
}}
description={"This is a marker in React Natve"}
>
<Image source={require('./man_marker.png')} style={{height: 35, width:35 }} />
</Marker>
</MapView>

There are two solutions:
The first solution (recommended)
Resize your marker image with image editor(such as Photoshop,....) and use as icon in marker
To do this, you can make three photos of different sizes (YOUR_MARKER.png , YOUR_MARKER#2x.png , YOUR_MARKER#3x.png) (React Native automatically displays the appropriate item).
This is a good solution if you have a large number of markers.(You can refer here to clarify this)
<Marker
coordinate={ ... }
tracksViewChanges={false}
icon={require('./YOUR_MARKER.png')}
/>
The second solution
As #shubham-raitka said you can use the Image inside the marker
<Marker
coordinate={ ... }
>
<Image source={require('./YOUR_MARKER.png')} style={{height: 35, width:35 }} />
</Marker>
In this case, if your number of markers is high (about 50 or more) the map performance will be very low.Therefore, it is not recommended to use this method

Here's an approach that worked for me in a similar situation: Use Image in place of Marker. Pop-ups work the same as with a marker. If you try this, Image is imported from react-native. The actual image is imported as:
var dotImage = require('./pathToImage.png')
<Marker
coordinate={meter.latlng}
title={"Parking Meter"}
key={idx}
>
<Image
source={dotImage}
style={{height: 6, width: 6}}
/>
</Marker>

The way you give the width and height is a bit strange, please try with this way.
import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
const markerImg = require('./images/test.png'); // <-- create a const with the path of the image
<------
------>
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
ref={ref => {this.map = ref;}}
minZoomLevel={4} // default => 0
maxZoomLevel={10} // default => 20
enableZoomControl={true}
showsUserLocation = {true}
showsMyLocationButton = {true}
zoomEnabled = {true}
initialRegion={{
latitude: 37.600425,
longitude: -122.385861,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}}
>
<Marker
image={markerImg} // <----- add this the const with image
onPress={() => this.setState({ marker1: !this.state.marker1 })}
coordinate={{
latitude: 37.600425,
longitude: -122.385861,
}}
centerOffset={{ x: -18, y: -60 }}
anchor={{ x: 0.69, y: 1 }}
/>
</Marker>
</MapView>
I hope it works for you, works for me!

Not enough rep yet to just leave a comment, but the first solution works, I just had to add resizeMode or it cuts off the image if it's bigger.
<Marker
coordinate={ ... }
>
<Image source={require('./YOUR_MARKER.png')} style={{height: 35, width:35, resizeMode:"contain" }} />
</Marker>

<Marker
coordinate={d.driverLocation}
title={d.driverName}
description={d.autoNumber}
onPress={() => console.warn(d.mobaNumbers)}
image={require("../../../assets/bee.png")}
>
</Marker>

Try this it should work
import {Image} from 'react-native';
import MapView, {Marker} from 'react-native-maps';
<MapView
style={styles.mapStyle}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
customMapStyle={mapStyle}>
<Marker
draggable
coordinate={{
latitude: 37.78825,
longitude: -122.4324,
}}
onDragEnd={e => alert(JSON.stringify(e.nativeEvent.coordinate))}
title={'Test Marker'}
description={'This is a description of the marker'}>
<Image
source={require('./assests/custom_marker.png')}
style={{height: 35, width: 35}}
/>
</Marker>
</MapView>

How to zoom into a specific lat lon on starting of maps in react-native-maps?

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.

React Native maps get top left corner and bottom right corner latitude and longitude

I'm working on a react native app which uses React-native-maps , currently i'm stucking with getting current region top left corner (lat & long) and bottom right corner ( lat & long )
<MapView.Animated
onRegionChange={this.onRegionChange.bind(this)}
showsUserLocation
initialRegion={{
latitude: coords.latitude,
longitude: coords.longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}}
style={{ flex: 1 }}
>
<MapView.Marker
coordinate={{ latitude: coords.latitude, longitude: coords.longitude }}
>
<MapView.Callout style={{ position: 'relative', width: 150}}>
<PlaceCard />
</MapView.Callout>
</MapView.Marker>
</MapView.Animated>
any idea for how to get that ?!

If (REGION.latitude, REGION.longitude) is the center of the map and the deltas are the distance (in degrees) between the minimum and maximum lat/long displayed on the map then you should be able to get the topLeft and bottomRight points like below:
{
latlng: {
latitude: REGION.latitude+(REGION.latitudeDelta/2),
longitude: REGION.longitude-(REGION.longitudeDelta/2)
},
title:'topLeft'
},
{
latlng: {
latitude: REGION.latitude-(REGION.latitudeDelta/2),
longitude: REGION.longitude+(REGION.longitudeDelta/2)
},
title:'bottomRight'
}