Geolocation for Local Weather App

1

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!

Thank you!

2

Type https instead of http in your address bar. If it doesn’t work, clear browsers cache.

Edit: This might explain why you are having such issues

2 Likes
3

Thank you so much! Typing https worked!

4

Wow, thanks for this. This was driving me nuts, I was 100% sure my code was right but the coords weren’t showing up.

5

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);
});
}

6

Hey there,

I haven’t had a chance to dig into it any more yet… I’ll let you know though!

7

I have my kids use an API for location then nest another API call for weather. Try this:

8

I had the same issue!

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:

http://ip-api.com/

You can use a getJSON with url “http://ip-api.com/json” to find your lat and lon - that way the whole thing works in http.

The other option would be to find a secured weather API.

The below video explains in detail (but don’t watch the previous 9 parts if you don’t want spoilers):

https://www.youtube.com/watch?v=aLKJhOmBjBw&index=10&list=PLHdCowjFIBmLRvwkK0UNz0OA10pYI4H0g

Hope this helps!

9

(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.)

10

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);
    });

  });
});
11

Hey, I tried looking into this yesterday but couldn’t get anything to work, then finally realized today I needed to load jQuery…

After that, small fix only, the api_url needs the leading http:// as otherwise it thinks the link is local (i.e., on codepen).

12

You are a saint, thank you! I was pulling my hair out over this for a while… and adding the http:// definitely worked.

1 Like