Как вывести свои иконки погоды?
 

Здравствуйте!

Подскажите как вывести иконки погоды? Свои или с яндекса?

Использовал готовый скрипт от сюда

Документация тут на английском

Мой скрипт немного переделан под нужды сайта

$(document).ready(function() {
 $('#town').html("город");
 $('#country').html("область.");

 // OpenWeatherMap API request.
 var url = '//api.openweathermap.org/data/2.5/weather';

 $.getJSON(url, {
 q: "Ryazan", 
 units: "metric",
 lang:"RU",
 APPID: "2bae515a0124fef864cf38e0f2986b32"
 }, function(returnedData) {
 
 $('#celsius').html((returnedData.main.temp).toFixed(1) + ' °C');
 $('#celsius2').html((returnedData.main.temp).toFixed(1) + ' °C');
 // Convert Celsius to Fahrenheit.
 $('#fahrenheit').html((returnedData.main.temp * 1.8 + 32).toFixed(1) + ' °F');
 // Toggle between Celsius and Fahrenheit.
 $("#toggle2").click(function() {
 $(".toggler2").toggle();
 });
 $('#wind-humidity').html(returnedData.main.humidity + " %" + " вла");
 $('#wind-deg').html(returnedData.wind.deg + ' мм');
 $('#wind').html(returnedData.wind.speed + " м/с");
 $('#description').html(returnedData.weather["0"].description);
 }).fail(function() {
 console.log("error");
 });

});

Как вывести иконку примерно так я в js полный ноль. В скрипте выводится погода текстом, там как то нужно переключить или что то добавить, подскажите что нужно сделать?

Нужно картинку и температуру?

j0hnik,

да в один блок, у меня в панель выводится в блок температурв

<span class="lead toggler" id="celsius2"></span>

вот пример



там без картинки

таки разобрались с курсом валют я смотрю.

j0hnik,

Да мне хорошие люди помогли)

список возможных иконок - http://openweathermap.org/weather-conditions
можешь их иконки взять, можешь свои добавить с теми же именами (01d.png и т.д.)

returnedData.weather["0"].icon - вот имя файла, надо только слева путь присобачить, а справа ".png"

Alexandroppolus,
Как точно это сделать? И куда вставить? Я наверно свои картинки сделаю как в мозиле выше фото есть.

Подскажите я плохо js знаю

spinastr,
https://codepen.io/anon/pen/RQvPPR

просто по удалял ненужные блоки

spinastr,
ну, например, твои иконки png лежат в папке "/images/weather"

тогда url иконки будет
var url = '/images/weather/' + returnedData.weather["0"].icon + '.png'

втыкаешь его в elem.style.backgroundImage и она рисуется на экране, юзер счастлив

j0hnik,

тая я про бывал, но нету иконок

https://pp.userapi.com/c840330/v8403...AF_BM8aSCs.jpg

Alexandroppolus,
SVG

также вставлять? ссылка нашёл?

Alexandroppolus,

можно по подробней куда в мой код вставить? Их нужно как то пронумировать?

Не понимаю как сделать, стандартные тоже н выводятся

Нашёл нормальные иконки ссылка как их вставить ?

7, 8, 10, 15 наборы самые нормальные

Подскажите как вставить картинки в скрипт?

$(document).ready(function() {
 $('#town').html("город");
 $('#country').html("область.");

 // OpenWeatherMap API request.
 var url = '//api.openweathermap.org/data/2.5/weather';

 $.getJSON(url, {
 q: "Ryazan", 
 units: "metric",
 lang:"RU",
 APPID: "2bae515a0124fef864cf38e0f2986b32"
 }, function(returnedData) {
 
 $('#celsius').html((returnedData.main.temp).toFixed(1) + ' °C');
 $('#celsius2').html((returnedData.main.temp).toFixed(1) + ' °C');
 // Convert Celsius to Fahrenheit.
 $('#fahrenheit').html((returnedData.main.temp * 1.8 + 32).toFixed(1) + ' °F');
 // Toggle between Celsius and Fahrenheit.
 $("#toggle2").click(function() {
 $(".toggler2").toggle();
 });
 $('#wind-humidity').html(returnedData.main.humidity + " %" + " вла");
 $('#wind-deg').html(returnedData.wind.deg + ' мм');
 $('#wind').html(returnedData.wind.speed + " м/с");
 $('#description').html(returnedData.weather["0"].description);
 }).fail(function() {
 console.log("error");
 });

});

Я скачиваю не понимаю там нету по отдельности картинок

Вот нашёл нормальные иконки ссылка

Нашёл рабочий код с иконками, как из этого кода добавить иконку в мой код?, что делать?
Вроде всё нормално работает

ссылка

Подскажите кто тут есть?

Как тут убрать лакацию города по ip? Чтобы просто название города вписать?

<link rel='stylesheet' href="https://cdn.rawgit.com/erikflowers/weather-icons/master/css/weather-icons.css" rel="stylesheet">
 <link rel='stylesheet' href="https://cdn.rawgit.com/erikflowers/weather-icons/master/css/weather-icons-wind.css" rel="stylesheet">

 <div id='place'></div>
 <div id='temperature'></div>
 <div id='degree' class='Celsius'>&deg;<span id='degree-system'>C</span></div>
 <div id='weather'></div>
 <i class='wi'></i>




<script>

var coord;
var APIcall;
var FarTemp;
var CelTemp;

function showWeather(json) {
 console.log(json.weather[0].main.toLowerCase());
 FarTemp = Math.round(json.main.temp * 1.8 + 32);
 CelTemp = Math.round(json.main.temp);
 var weatherIcon = 'wi-owm-' + json.weather[0].id;
 $('#temperature').text(CelTemp);
 $('#weather').text(json.weather[0].description);
 $('.wi').addClass(weatherIcon);
};

function showPlace(json) {
 console.log(json);
 var coords = json.loc.split(',');
 $('#place').text((json.city + ', ' + json.country));
 APIcall = 'https://api.openweathermap.org/data/2.5/weather?q=Mikhaylov&APPID=2bae515a0124fef864cf38e0f2986b32&units=metric&lang=ru&lat=' + coords[0] + '&lon=' + coords[1];
 $.getJSON(APIcall, showWeather);
}

$.getJSON('https://ipinfo.io/json', showPlace);

$('#degree').click(function () {
 if ($('#degree').hasClass('Celsius')) {
 $('#temperature').text(FarTemp);
 $('#degree-system').text('F');
 $('#degree').removeClass('Celsius');
 $('#degree').addClass('Fahrenheit');
 } else {
 $('#temperature').text(CelTemp);
 $('#degree-system').text('C');
 $('#degree').removeClass('Fahrenheit');
 $('#degree').addClass('Celsius');
 }
});
</script>