Need help with the Weather App

1

The HTML5 Geolocation works fine but doesen’t work when I add the longtitude and latitude from the HTML5 Geolocation API.
Here is my code:
Please Help! :slight_smile:

$(document).ready(function() {
    var lon;
    var lat;
    
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            lon = position.coords.longitude
            lat = position.coords.latitude;
            console.log(lon);
          console.log(lat);
            $.getJSON(url, function(data) {
                console.log(data);
            })
        });
    }
});
2

You’ll have to move your variable declaration for url to be inside of the getCurrentPosition callback. As you have it now, lat and lon are undefined.

if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            lon = position.coords.longitude
            lat = position.coords.latitude;
            var url = "https://fcc-weather-api.glitch.me/api/current?lat=" + lat + "&lon=" + lon; //move it here
            console.log(lon);
          console.log(lat);
            $.getJSON(url, function(data) {
                console.log(data);
            })
        });
    }
1 Like
3

You’re going to come across another problem: CodePen switched to allowing only https content on June, 1 of this year. The provided fcc-weather-api is not supplying https content and is being blocked by CodePen. There is a recent post where someone addresses this issue and offers a solution. We have to use a proxy server, basically. Or find an alternative API. Good luck!

edit: The post in question For those of you who are stuck on the Weather API Projects

1 Like