Погода онлайн - компактный информер

Вам может понадобиться компактный информер погоды для сайта. Например, такой как приведен здесь. Информер отображает текущую погоду (температура, скорость ветра и влажность) в вашем регионе, городе автоматически определяя вашу местность. А также генерируется картинка, которая показывает погодную пиктограмму (облачность, снег, дождь, ясно и тому подобное). Для реализации такого информера, вам понадобится следующий код, отвечающий за отображение информации:

<span id="sky-image"></span>
<span title="Температура воздуха">
<span id="temperature"> </span> <span>&degC</span></span>
<span title="Скорость ветра" id="wind-speed"></span>
<span title="Влажность воздуха" id="humidity"></span>

Естественно, вам придется написать свой стиль для формирования красивой выдачи информации. А также вам придется подключить следующий скрипт:

$(document).ready(function() {
// get location from user's IP address
$.getJSON('https://ipinfo.io', function(info){
 var locString = info.loc.split(', ');
 var latitude = parseFloat(locString[0]);
 var longitude = parseFloat(locString[1]);
 $('#location').html('Location: ' + info.city + ', ' + info.region + ', ' + info.country)
 
// get weather using OpenWeatherMap API
 $.getJSON('https://cors.5apps.com/?
uri=http://api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' 
+ longitude +'&units=metric&APPID=c3e00c8860695fd6096fe32896042eda', function(data){
 var windSpeedkmh = Math.round(data.wind.speed * 3.6);
 var Celsius = Math.round(data.main.temp)
 var iconId = data.weather[0].icon;
 var weatherURL = "http://openweathermap.org/img/w/" +
 iconId + ".png";

 var iconImg = "<img style='height:22px;' title='Погода' src='" + weatherURL + "'>";
 $('#sky-image').html(iconImg);

 $('#temperature').html(Celsius);
 $('#wind-speed').html(windSpeedkmh + ' км/ч');
 $('#humidity').html(data.main.humidity + ' %');
 
})
})
})