How to dsplay coordinates of GPS in a Mapview? - react-native

Question

I need your help to know how to display GPS coordinates in a MapView.
I want to track a person's location from gps coordinates (longitude and latitude).
I tried too much to recover the coordinates in a MapView but I did not arrive to do it, I am blocked.
So, I get the coordinates from a web service and I display them in a TextView.
This is my code:
import React, { Component } from 'react';
import { Constants, Location, Permissions } from 'expo';
import { Card } from 'react-native-paper';
import { Polyline } from 'react-native-maps';
import {
StyleSheet,
Platform,
View,
ActivityIndicator,
FlatList,
Text,
Image,
TouchableOpacity,
Alert,
YellowBox,
AppRegistry,
Button,
} from 'react-native';
export default class gps extends Component {
static navigationOptions = ({ navigation }) => {
return {
title: 'Suivi GPS',
headerStyle: {
backgroundColor: 'transparent',
},
headerTitleStyle: {
fontWeight: 'bold',
color: '#000',
zIndex: 1,
fontSize: 18,
lineHeight: 25,
fontFamily: 'monospace',
},
};
}
state = {
mapRegion: null,
dat: '',
};
GetItem() {}
componentDidMount() {
this.webCall();
}
FlatListItemSeparator = () => {
return (
<View
style={{
height: 0.5,
width: '100%',
backgroundColor: '#000',
}}
/>
); //
};
webCall = () => {
return fetch('http://first-ontheweb.com/onLineSenior/pos.php')
.then(response => response.json())
.then(responseJson => {
this.setState({
isLoading: false,
dataSource: responseJson,
});
})
.catch(error => {
console.error(error);
});
};
render() {
if (this.state.isLoading) {
return (
<View
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator size="large" />
</View>
);
}
return (
<View style={styles.map}>
<FlatList
data={this.state.dataSource}
ItemSeparatorComponent={this.FlatListItemSeparator}
renderItem={({ item }) => (
<View>
<Text style={styles.textView}>Longitude :</Text>
<Text style={styles.textView}>{item.longitude}</Text>
<Text style={styles.textView}>Latitude :</Text>
<Text style={styles.textView}>{item.latitude}</Text>
</View>
)}
keyExtractor={(index) => index.toString()}
/>
</View>
);
}
}
const styles = StyleSheet.create({
map: {
...StyleSheet.absoluteFillObject,
},
});
So, I want to display the GPS coordinates in a MapView.
Thanks.

Answer 1

You can do something like this:
first import the mapView:
import MapView from "react-native-maps";
Then:
state = {
focusedLocation: {
latitude: 37.7900352, //or your coordinates
longitude: -122.4013726, //or your coordinates
latitudeDelta: 0.0122,
longitudeDelta:
Dimensions.get("window").width /
Dimensions.get("window").height *
0.0122
}
};
render() {
let marker = null;
if (this.state.locationChosen) {
marker = <MapView.Marker coordinate={this.state.focusedLocation} />;
}
return (
let marker = <MapView.Marker coordinate={this.state.focusedLocation} />;
<View style={styles.container}>
<MapView
initialRegion={this.state.focusedLocation}
style={//map style here}
>
{marker}
</MapView>
</View>
);
}

Answer 2

you need to install react-native-maps package than
import MapView from 'react-native-maps';
Rendering a Map with an initial region
<MapView
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/>
Using a MapView while controlling the region as state
getInitialState() {
return {
region: {
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
},
};
}
onRegionChange(region) {
this.setState({ region });
}
render() {
return (
<MapView
region={this.state.region}
onRegionChange={this.onRegionChange}
/>
);
}
Rendering a list of markers on a map
import { Marker } from 'react-native-maps';
<MapView
region={this.state.region}
onRegionChange={this.onRegionChange}
>
{this.state.markers.map(marker => (
<Marker
coordinate={marker.latlng}
title={marker.title}
description={marker.description}
/>
))}
</MapView>
you can find more in the documention here.
https://github.com/react-native-community/react-native-maps