Weather JSONP example

HTML

<div id="weather_output"></div>

CSS

h3{
 color:red;margin-top:10px;
}

JavaScript

var lat = 13.3428;
var lon = -6.26612;

getWeather(lat, lon, function (data) {
    var tempHTML = "";
    tempHTML = tempHTML + '<h3>WEATHER INFO:</h3>';
    tempHTML = tempHTML + 'Weather data received <br/>';
    
    tempHTML = tempHTML + '<h3>SYS:</h3>';
    tempHTML = tempHTML + 'Country: ' + data.sys.country + '<br/>';
    tempHTML = tempHTML + 'Sunrise: ' + data.sys.sunrise + '<br/>';
    tempHTML = tempHTML + 'Sunset: ' + data.sys.sunset + '<br/>';
    
    tempHTML = tempHTML + '<h3>WEATHER:</h3>';
    tempHTML = tempHTML + 'Weather Id: ' + data.weather[0].id + '<br/>';
    tempHTML = tempHTML + 'Weather Main: ' + data.weather[0].main + '<br/>';
    tempHTML = tempHTML + 'Weather Description: ' + data.weather[0].description + '<br/>';
    tempHTML = tempHTML + 'Weather Icon: ' + data.weather[0].icon + '<br/>';
    
    tempHTML = tempHTML + '<h3>MAIN:</h3>';
    tempHTML = tempHTML + 'Temperature: ' + data.main.temp + 'degrees<br/>';
    tempHTML = tempHTML + 'Temperature Min: ' + data.main.temp_min + 'degrees<br/>';
    tempHTML = tempHTML + 'Temperature Max: ' + data.main.temp_max + 'degrees<br/>';
    tempHTML = tempHTML + 'Pressure: ' + data.main.pressure + 'Kpa<br/>';
    tempHTML = tempHTML + 'Humidity: ' + data.main.humidity + '%<br/>';
    
    tempHTML = tempHTML + '<h3>WIND:</h3>';
    tempHTML = tempHTML + 'Wind Speed: ' + data.wind.speed + 'kmh<br/>';
    tempHTML = tempHTML + 'Wind Direction: ' + data.wind.deg + 'degrees <br/>';
    
    tempHTML = tempHTML + '<h3>CLOUDS:</h3>';
    tempHTML = tempHTML + 'Cloud Coverage: ' + data.clouds.all + '%<br/>';
    
    document.getElementById('weather_output').innerHTML = tempHTML;
});

function getWeather(lat, lon, callback) {
    var weather = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&cnt=1';
    $.ajax({
        dataType: "jsonp",
        url: weather,
        success: callback
    });
};