It’s mostly the same. I actually copied and pasted it from your code, but with minor modifications. Notably, I added the http:// before your URL to the openweather API. You can make that change yourself, or copy and past my copy of your code, but either way, if your browser connection is not SSL, it’ll work.
For geolocation, I suggest the native HTML API. To get a more exact location, I used Google’s geocoding API. Here’s an example call from a Node app I wrote:
Alright, I changed it now. Is that all you did was added an ‘http://’ to the front of that…I could have sworn I tried. I must have messed up somehow. Thanks. All down here from here hopefully.
Also, apologies Soirana for apparently not implementing your advice right.
Sorry, I didn’t realize what you had asked, who was asking, and who I was talking to.
I had already described your problem a few posts ago. You have only defined the variable position in the scope of the navigator.geolocation.getCurrentPosition callback. You’re trying to access it on lines 36 and 37, but once the function on line 30 completes, there’s no such thing as position anymore. Geolocation is working fine in your code.
Thanks for you continued assistance. I’ve reviewed one of your previous replies and made changes to my code. Like you, I’ve declared the lat and long variables at the beginning, and then assigned values after the geolocation request successfully retrieves those values. After which i use them as inputs into the weather API call function.
$(document).ready(function(){
var lat="";
var long="";
var weatherURL = "http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&APPID=***MYKEY***&callback=JSON_CALLBACK";
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
$("#geoLoc").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
lat = position.coords.latitude;
long = position.coords.longitude;
$.getJSON(weatherURL).done(function(data){
$('#currTemp').html("current temp: " + data.main.temp);
});
});
}
I’m still having issues after changing the variable declaration and weather API call function reposition. I am getting error/alerts in CodePen, which I think is a simple matter of braces/semi-colons, but am having trouble finding it. Currently, in this state, the code is not pulling and printing the lat/long to the screen.
I don’t know if this is related, but soon after I finished my weather app, it broke because Chrome stopped allowing non-https sites to request access to the client’s location data.
I haven’t tried out that code, but I’m already seeing a problem with your weatherURL. At the time it gets declared, lat and log are empty strings, so that’s what they’ll be in the URL string. Declare weatherURLafter you get the geolocation data.
Thanks for the tips, I’ve declared the URL variable after geolocation retrieves the lat and long values and added the “})” as suggested. I’m still getting a error/red exclamation in CodePen stating an “unexpected token ).” and says “Loading…”.
I think it’s the closure that’s preventing it from running. I’ve double-checked my function closures but still am stuck.
$(document).ready(function(){
var lat="";
var long="";
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
$("#geoLoc").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
lat = position.coords.latitude;
long = position.coords.longitude;
var weatherURL = "http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&APPID=****MYKEY******&callback=JSON_CALLBACK";
$.getJSON(weatherURL).done(function(data){
$('#currTemp').html("current temp: " + data.main.temp);
});
});
})
Thanks so much! Those braces/brackets were driving me crazy.
It now no longer shows any errors on CodePen, which is great. But it’s still not returning the weather information even though I corrected the lat-long declaration issue earlier. I’ve tested it in FireFox, and it is returning the lat-long, but not the related weather data.
Now I’m really confused.
$(document).ready(function(){
var lat="";
var long="";
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
$("#geoLoc").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
lat = position.coords.latitude;
long = position.coords.longitude;
var weatherURL = "http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&APPID=***MYKEY***&callback=JSON_CALLBACK";
$.getJSON(weatherURL).done(function(data){
$('#currTemp').html("current temp: " + data.main.temp);
});
});
}
});
Hi Stomper, I think I figured out your issue. Since openweathermap.org’s API is HTTP, your codepen.io URL must be HTTP as well. If you used the FreeCodeCamp’s link to open codepen, it is likely HTTPS. Just go into the URL bar and remove the “S” from HTTPS and reload the page, your code should work.
Thanks for the reply. Are you saying the URL in my code should be HTTP not HTTPS?
I’ve made the code change ie. the URL in the code is HTTP, and I’ve ensured that I only have HTTP in the browser address bar, both FF and Chrome. It is still not working.
browser to https and get http api call refused, https in browser and https in api call, get location works, but api call rejected because free api account doesn’t support.
what a stupid problem caused by open weather not exactly being all that open as it turns out.
Thanks so much it was cors for me. tried it with the cros plugin for Chrome and nothing in code pen but errors, worked on local machine with JS and HTML. then came here and after adding the above code and it worked
Can anyone help me with this task? Also in my case the callback is not working. I did not do any layout.
I also tried the forecas.io api but this also did not work
tried it with the cros plugin for Chrome and nothing in code pen but errors, worked on local machine with JS and HTML. then came here and after adding the above code and it worked 