Jump to content

GeoLocation Help


Akilian
 Share

Recommended Posts

My weather function works when I enter the coordinates myself. I'm trying to use a get location function to find and enter them in but it's not working. Please help.

 

////////////////////////////////////////////////////////////////////////////////////////////////

var x = document.getElementById("demo");
function showLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
x.innerHTML = latitude + "," + longitude;
}
function errorHandler(err) {
if(err.code === 1) {
alert("Error: Access is denied!");
}
else if( err.code === 2) {
alert("Error: Position is unavailable!");
}
}
function getLocation(){
if(navigator.geolocation){
// timeout at 60000 milliseconds (60 seconds)
var options = {timeout:60000};
navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options);
}
else{
alert("Sorry, browser does not support geolocation!");
}
}
///////////////////////////////////////////////////////////////////////////////////////////////
function updateWeather() {
var xmlHttp = new XMLHttpRequest(),
location = x;
xmlHttp.overrideMimeType("application/json");
xmlHttp.open("GET", URL_WEATHER_DATA + location + URL_WEATHER_DATA2,false);
Edited by Akilian
Link to comment
Share on other sites

As davej said, the main problem is that you're treating x as a string when it's an HTML element.

 

Aside from that, you shouldn't have a global variable called "location" because it's masking the window.location object.

Make it local by declaring it with the var keyword.

Link to comment
Share on other sites

Have you read through this?

 

http://www.w3schools.com/html/html5_geolocation.asp

 

http://www.w3schools.com/js/js_ajax_examples.asp

 

In your above code you have a global var x declared as an element and then later you seem to think it is a string?

Yes, I have read those. i can get the coordinates to send via alert but cannot link it with the weather function. What should I put for location so it calls for the coordinates. And, thank you both for the assistance.

Link to comment
Share on other sites

navigator.geolocation.getCurrentPosition(updateWeather, errorHandler, options);

 

You tell it which function to call when it gets the position, so tell it to call updateWeather and then change that function so that it takes the passed coordinates and uses them.

Link to comment
Share on other sites

navigator.geolocation.getCurrentPosition(updateWeather, errorHandler, options);

 

You tell it which function to call when it gets the position, so tell it to call updateWeather and then change that function so that it takes the passed coordinates and uses them.

Is this right?

 

 

 

var x = document.getElementById("demo");
function showLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
x.innerHTML = latitude + "," + longitude;
navigator.geolocation.getCurrentPosition(updateWeather, errorHandler);
}
function errorHandler(err) {
if(err.code === 1) {
alert("Error: Access is denied!");
}
else if( err.code === 2) {
alert("Error: Position is unavailable!");
}
}
function getLocation(){
if(navigator.geolocation){
// timeout at 60000 milliseconds (60 seconds)
var options = {timeout:60000};
navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options);
}
else{
alert("Sorry, browser does not support geolocation!");
}
}
And in the weather function, what do I put in the url?
xmlHttp.open("GET", URL_WEATHER_DATA + getLocation() + "?exclude=hourly,minutely,alerts,flags?units=auto",false);
Edited by Akilian
Link to comment
Share on other sites

No, you added that line to showLocation for some reason. I'm suggesting that you change the line in getLocation where you call navigator.geolocation.getCurrentPosition and tell it to use updateWeather as the callback function instead of showLocation, or whatever you want to name the callback. Then that callback function should do everything that you want to happen once you get the location, so it should update that element's innerHTML if you want, send an ajax request, or whatever else you want to happen after you get the location.

  • Like 1
Link to comment
Share on other sites

I'm starting to understand but I'm having issues with the url.



if(navigator.geolocation){

// timeout at 60000 milliseconds (60 seconds)

var options = {timeout:60000};

navigator.geolocation.getCurrentPosition(updateWeather, errorHandler, options);

}


else{

alert("Sorry, browser does not support geolocation!");

}

}




function updateWeather(position) {


var coords = document.getElementById();


coords.innerHTML = position.coords.latitude + "," + position.coords.longitude;


xmlHttp.open("GET", URL_WEATHER_DATA + coords.innerHTML + "?exclude=hourly,minutely,alerts,flags?units=auto",false);
Link to comment
Share on other sites

Well, I got the alerts to display, but still no weather.

 

 

function showLocation(position) {
var xmlHttp = new XMLHttpRequest(),
latitude = position.coords.latitude,
longitude = position.coords.longitude,
weatherInform,
elWeatherIcon = document.querySelector("#weather-icon"),
elWeatherTemp = document.querySelector("#weather-temp"),
elWeatherMax = document.querySelector("#weather-max"),
elWeatherMin = document.querySelector("#weather-min"),
elWeatherSum1 = document.querySelector("#weather-sum1"),
coords,
weather,
weatherMax,
weatherMin,
weatherSum1,
weatherIcon,
weatherTemp;
weather = URL_WEATHER_DATA + coords + URL_WEATHER_DATA2;
coords = latitude + "," + longitude;
alert(weather);
alert(coords);
xmlHttp.overrideMimeType("application/json");
xmlHttp.open("GET", weather, false);
if (xmlHttp.responseText) {
// Parses responseText to JSON
weatherInform = JSON.parse(xmlHttp.responseText);
weatherIcon = weatherInform.currently.icon;
weatherSum1 = weatherInform.daily.data[0].summary;
weatherTemp = weatherInform.currently.temperature;
weatherMax = weatherInform.daily.data[0].temperatureMax;
weatherMin = weatherInform.daily.data[0].temperatureMin;
elWeatherMax.innerHTML = weatherMax + " / ";
elWeatherMin.innerHTML = weatherMin;
elWeatherTemp.innerHTML = weatherTemp;
elWeatherSum1.innerHTML = weatherSum1;
elWeatherIcon.style.backgroundImage = "url('./image/weather_icon/" + weatherIcon + ".png')";
}
xmlHttp.send();
}
Link to comment
Share on other sites

You may want to use console.log instead of alert so that it doesn't block execution, you can find the data in the browser's developer console. It looks like coords is undefined when you build the URL, and it looks like your ajax code is out of order because you switched to a synchronous request and got rid of the ajax callback, but you check the response before sending the request.

 

Other than that, you need to keep validating everything that you're doing. Use console.log to print all of your variables and things in the console so that you can verify everything that you're doing, so that you know what the code is doing.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...