Jump to content
Sign in to follow this  
Akilian

GeoLocation Help

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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

The showLocation function should call the weather function and pass the coordinates, or just use the weather function as the callback for getCurrentPosition.

Share this post


Link to post
Share on other sites

The showLocation function should call the weather function and pass the coordinates, or just use the weather function as the callback for getCurrentPosition.

Would you mind showing me? I would be grateful.

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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);

Share this post


Link to post
Share on other sites

What is URL_WEATHER_DATA set to? That doesn't look right because of the question marks, a URL should only contain one.

Share this post


Link to post
Share on other sites

If it doesn't show the alert box at all then that code isn't even being run. Make sure you're checking your browser's developer console for error messages.

Share this post


Link to post
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();
}

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

I don't see that in your code. In general, that creates an object with a single property called "timeout" set to that value.

Share this post


Link to post
Share on other sites

If you don't want to get the location more than once per hour, you could use localStorage or cookies to store the last position and the last time you got it, and check that before trying to get the location.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...