Hi, I’m having a bit of trouble with the API call for the weather app. Here is my code:
$(document).ready(function() {
var desc;
var location;
var condition;
var temp;
var lati;
var long;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
lati = position.coords.latitude;
long = position.coords.longitude;
});
}
function getWeather() {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather lat=" + lati + "&lon=" + long + "&APPID=7d8a67b75d7c6055ec28b2ccca42d989",
success: function(response) {
desc = response.sys.country;
$('#location1').text(desc);
location = response.name;
$('#location').text(location);
condition = response.weather[0].description;
$('#condition').text(condition);
if (condition == "clear sky") {
$('#weatherpic').attr("src", "http://img11.deviantart.net/786e/i/2009/089/d/c/clear_sky_by_sed_rah_stock.jpg");
} else if (condition == "few clouds") {
$('#weatherpic').attr("src", "https://image.freepik.com/free-photo/blue-sky-with-a-few-clouds_2662062.jpg");
} else if (condition == "scattered clouds") {
$('#weatherpic').attr("src", "https://c1.staticflickr.com/3/2106/1909487867_de140c7eb8_b.jpg");
} else if (condition == "broken clouds") {
$('#weatherpic').attr("src", "http://australiasevereweather.com/photography/photos/1995/0605jd02.jpg");
} else if (condition == "shower rain") {
$('#weatherpic').attr("src", "https://cdn.empowernetwork.com/user_images/post/2014/03/29/9/73/5b12/540x293_20140329_9735b12e909f88d550031c5218024768_png.png");
} else if (condition == "rain" || "moderate rain") {
$('#weatherpic').attr("src", "http://efdreams.com/data_images/dreams/rain/rain-07.jpg");
} else if (condition == "thunderstorm") {
$('#weatherpic').attr("src", "http://www.homeadvisor.com/r/wp-content/forum/uploads/2015/03/Dollarphotoclub_43826198-1024x680.jpg");
} else if (condition == "snow") {
$('#weatherpic').attr("src", "http://weknowyourdreams.com/image.php?pic=/images/snow/snow-04.jpg");
} else if (condition == "mist") {
$('#weatherpic').attr("src", "http://vignette1.wikia.nocookie.net/demigodshaven/images/f/f5/Mist.jpg/revision/latest?cb=20110102163040");
}
temp = response.main.temp - 273.15;
var temprounded = Math.round(temp * 10) / 10;
$('#temp').text(temprounded + ' celcius');
$("#CTOF").on("click", function() {
$('#temp').text((temprounded * (1.8)) + 32 + " Fahrenheit")
});
$("#FTOC").on("click", function() {
$('#temp').text(temprounded + " cELCIUS")
});
}
});
}
getWeather()
});
this code works if I enter a lat and lon value in the api call, however when I try to use the values from the browser as in the code above it does not work for some reason. Am I inserting the lati and long variables in to the url correctly?
Thanks.