I'm using the google maps API to do the reverse geocoding but I'm not able to extract the formatted_address
componentWillMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
});
},
(error) => this.setState({ error: error.message }),
{ enableHighAccuracy: true, timeout: 20000 },
);
axios.get('https://maps.googleapis.com/maps/api/geocode/json?address='+ this.state.latitude +','+ this.state.longitude +'&key=__API_KEY__')
.then(results => {
this.setState({
place: results[0].formated_address
})
.catch((error) => {
this.setState({ error: error.message })
});
});
}
How do I do that?
first you need to call the api after getCurrentPosition is finished
be sure your api key is correct and has access to the geocode api
access the first place address from response.data.results[0].formatted_address note that i changed results to response since it is more descriptive name also note that formatted_address with double t
finally catch is called after then not after setState
full working example
componentWillMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
}, () => this.getGeocode()); // call the api after getCurrentPosition is finished
},
(error) => this.setState({ error: error.message }),
{ enableHighAccuracy: true, timeout: 20000 },
);
}
getGeocode() {
axios.get('https://maps.googleapis.com/maps/api/geocode/json?address='+ this.state.latitude +','+ this.state.longitude +'&key=__API_KEY__') // be sure your api key is correct and has access to the geocode api
.then(response => {
console.log(response);
this.setState({
place: response.data.results[0].formatted_address // access from response.data.results[0].formatted_address
})
}).catch((error) => { // catch is called after then
this.setState({ error: error.message })
});
}
Related
Hi I'm working on a app in react-native which is using the latitude and longitude of the user phone position. I'm also using a webService that let me retrieve some data about the user. I want now to send the latitude and longitude to the webservice how can I do that ?
getData(){
const url = "https://somewebsite.com/webservice/app/ws.php"
fetch(url)
.then(res => res.json())
.then(res => {
this.setState({
dataSource: res
});
})
.catch(error => {
console.log("get data error:" + error);
});
}
displayPosition = () => {
Geolocation.getCurrentPosition(
(position) => {
this.setState({
latitude: JSON.stringify(position.coords.latitude),
longitude: JSON.stringify(position.coords.longitude),
error: null,
});
console.log(this.state.latitude)
},
(error) => this.setState({ error: error.message }),
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
);
}
Will it work if I do : `https://somewebsite.com/webservice/app/ws.php?lo=${this.state.longitude}&la=${this.state.latitude} `
You need to use POST method to send data to your backend. You can use axios. Here is a very basic example:
axios.post('https://somewebsite.com/webservice/app/ws.php', {
latitude: position.coords.latitude,
longitude: position.coords.longitude
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Which library will be most suitable for Android and iOS to be able to track user location continuously even if the app is running in background.
I need to track user's location to send notification that the user has entered a specific location and upon exiting the user has left the location.
You can use geolocation like this way:
getUserCurrentLocation = async () => {
return new Promise((resolve, reject) => {
try {
navigator.geolocation.getCurrentPosition(position => {
const { latitude, longitude } = position.coords;
resolve({ lat: latitude, lng: longitude })
}, error => {
console.log(`ERROR(${error.code}): ${error.message}`);
resolve({ error })
} // , { enableHighAccuracy: true, timeout: 10000, maximumAge: 1000 }
);
setTimeout(() => { resolve({ error: { code: 3 } }) }, 5000);
} catch (e) {
resolve({ error: { code: 3 } })
}
})
};
I am trying to get the current location from latitude and longitude in react-native(Android), I have received latitude and longitude correctly but the result of the location returns as [object object]
constructor(props) {
super(props);
this.state = {
latitude: null,
longitude: null,
error:null,
};
}
componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
console.log("wokeeey");
console.log(position);
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
});
},
(error) => this.setState({ error: error.message }),
{ enableHighAccuracy: false, timeout: 200000, maximumAge: 1000 },
);
}
getData(){
Geocoder.init("My_Api");
Geocoder.from(this.state.latitude,this.state.longitude)
.then(json => {
var addressComponent = json.results[0].address_components[0];
alert(addressComponent);
})
.catch(error => console.warn(error));
}
I am getting this error while making an API call:
Possible Unhandled Promise Rejection (id:0): TypError: undefined is not an object(evaluating 'json.main.temp').
this is my state:
this.state = {
weather:{
city: null,
temperature: null,
wind:{
direction: null,
speed: null
}
},
latitude: null,
longitude:null,
error: null
}
My componentWillMount function:
async componentWillMount(){
await this.getLocation();
await this.getWeather();
}
My getLocation function:
async getLocation() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
});
},
(error) => this.setState({ error: error.message }),
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
);
}
getWeather function:
async getWeather() {
try{
let url = 'https://api.openweathermap.org/data/2.5/weather?lat=' + this.state.latitude + '&lon=' + this.state.longitude + '&appid=<my app id>&units=metric'
console.log(url);
fetch(url).then(res=>res.json())
.then(json=>{
console.log(url);
this.setState({
weather: {
city: json.name,
temperature: json.main.temp,
wind: {
direction: json.wind.direction,
speed: json.wind.speed
}
}
});
});
}
catch(error){
console.log(error)
}
}
The json you get from the API:
{
"coord":{
"lon":6.14,
"lat":52.79
},
"weather":[
{
"id":804,
"main":"Clouds",
"description":"overcast clouds",
"icon":"04d"
}
],
"base":"stations",
"main":{
"temp":11.49,
"pressure":996,
"humidity":81,
"temp_min":11,
"temp_max":12
},
"visibility":10000,
"wind":{
"speed":8.2,
"deg":240
},
"clouds":{
"all":90
},
"dt":1543829100,
"sys":{
"type":1,
"id":1530,
"message":0.1147,
"country":"NL",
"sunrise":1543822083,
"sunset":1543850543
},
"id":2746766,
"name":"Steenwijk",
"cod":200
}
The console log in the getWeather function logs the latitude and longtitude as "NULL". I think it is because the getLocation function isn't done yet. I have no clue what to do to make it work.
I have a React Native app using redux and I'd like my action to set the GPS coordinates so I have them available in the store. You can see my console logs in the code, and 'action returning' is logged before 'has coordinates', which is the problem.
Component:
<TouchableOpacity style={{flex:1}} onPress={() => {
this.props.setLocation();
}}>
Action.js
export function setLocation(){
let coords = {
latitude:0,
longitude:0,
navigatorError:''
};
navigator.geolocation.getCurrentPosition(
(position) => {
console.log('has coordinates');
coords['latitude'] = position.coords.latitude
coords['longitude'] = position.coords.longitude
coords['navigatorError'] = null
},
(error) => coords['navigatorError'] = error.message,
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
);
console.log('action returning');
return {
type: 'set_location',
payload: coords
};
};
Reducer.js
export default (state = null, action) => {
switch(action.type){
case 'set_location':
return action.payload;
default:
return state;
}
}
Note: I'm not actually using redux-thunk in this project, I'm not sure if it's appropriate for what I need here.
You can use async and await to accomplish this. Basically, you need to await the coords to be returned from your asynchronous call.
Something like this:
export async function setLocation(){
let coords = {
latitude:0,
longitude:0,
navigatorError:''
};
await navigator.geolocation.getCurrentPosition(
(position) => {
console.log('has coordinates');
coords['latitude'] = position.coords.latitude
coords['longitude'] = position.coords.longitude
coords['navigatorError'] = null
},
(error) => coords['navigatorError'] = error.message,
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
);
console.log('action returning');
return {
type: 'set_location',
payload: coords
};
};
Documentation on async/await can be found here.