I am having a lot of trouble with my Local Weather App project. I cannot even get my lat and lon coordinates to work properly (although I had them working before). I would appreciate help on getting this function to work before I move on to the actual weather API. Here’s a link to my codepen project: http://codepen.io/katiescruggs/pen/mRrMGE?editors=0012 and here’s the function in question:
function getCoordinates() {
console.log(‘getCoordinates runs on load’);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
console.log(lat + " " + lon);
});
} else {
console.log(‘geolocation does not exist.’);
}
}
I put in the console.log lines to make sure things were working. The console displays “getCoordinates runs on load”, so I know that the function is being called, but it does not display the lat and lon variables. Please help!
Glad we were both able to fix our problem! Now I can’t get my data object from the API. Have you had any luck? I am getting stuck at every step of this Local Weather App it seems…
Here’s my function. I get the console log about the API URL, but no data information.
function getWeatherData() {
var apiUrl = “http://api.openweathermap.org/data/2.5/weather?lat=” + lat + “&lon=” + lon + “&APPID=77bfd0a41b138a9977734b28da2985df”;
console.log("API-URL looks like: " + apiUrl);
//use jQuery to get data object from API
$.getJSON(apiUrl, function(data) {
console.log(data);
});
}
Now you are using a secure encrypted https, but calling an unsecured unencrypted API with a http address. You can use a different API to get your geolocation:
(Just a guess based on my hours of battle sorting my weather page out…) You say the url pops out, but how is it getting the lat/lon variables? You are not passing them in as parameters for getWeatherData(), so that not existing in the function could be causing problems with the API retrieval.
For this, I would pass them in as parameters, and then just call getWeatherData(lat, lon) at the end of your getCoordinates() function. (Otherwise your code looks fine.)
(If you’ve defined lat/lon globally, you have to be careful as .getJSON is an ‘asynchronous’ call, so it may be running before your lat and lon have been retrieved from the getCoordinates() function, meaning they are perfectly defined on your console.log() after retrieval, but not defined on your getWeatherData() function, hence the missing data. Calling the getWeatherData(lat, lon) in getCoordinates() makes sure you are only calling it after they have been defined though.)
Hey Guys- I am still having so much trouble with this… I can get the coordinates fine, and get an URL that works if I paste it into my browser, ie it returns the correct JSON file. Yet, for some reason the $.getJSON call doesn’t do anything. Any ideas?
$(document).ready(function() {
$.getJSON("http://ip-api.com/json/?callback=?", function(data) {
var lat = data.lat;
var lng = data.lon;
var api_key = "be0a90284304984f9ed268176b4dd9a5"
var api_url = "api.openweathermap.org/data/2.5/weather?" + "lat=" + lat + "&lon=" + lng + "&APPID=" + api_key;
console.log(api_url);
//call to get weather data
$.getJSON(api_url, function(data2) {
console.log(data2);
});
});
});