'How to display OpenWeatherMap icons in weather application?

I'm trying to display weather icons from OpenWeatherMap in my weather application using JavaScript.

I've tried using jQuery and other solutions I've seen online. I've also tried specifying this link ("http://openweathermap.org/img/w/") using the "src" attribute, but the link doesn't work and the image is broken as a result.

How do I successfully add weather icons to my application?

Here is some minimal code used to formulate this problem. I hope this helps.

HTML:

<div class="weather">
  <div id="date"></div>
  <div id="cityName"></div>
  <img src="" id="icon">
  <div id="temp"></div>
  <div id="description"></div>
</div>

JavaScript:

var d = new Date();
var n = d.toLocaleDateString();
document.getElementById("date").innerHTML = n;

function getWeather( cityID ) {
  var key = '535f8a50b4bc24608c72fcde2aecb52b';
  fetch('https://api.openweathermap.org/data/2.5/weather?id=' + cityID+ '&appid=' + key)  
  .then(function(resp) { return resp.json() }) 
  .then(function(data) {
    drawWeather(data);
  })
  .catch(function() {
    // catch any errors
  });
}

window.onload = function() {
  getWeather( 6167865 );
}

function drawWeather( d ) {
  var celcius = Math.round(parseFloat(d.main.temp)-273.15);
  var fahrenheit = Math.round(((parseFloat(d.main.temp)-273.15)*1.8)+32); 

  document.getElementById('cityName').innerHTML = d.name;
  document.getElementById('description').innerHTML = d.weather[0].description;
  document.getElementById('temp').innerHTML = fahrenheit + '&deg;';
  document.getElementById('icon').src = "http://openweathermap.org/img/w/"+obj.weather[0].icon+".png";
 }
javascripthtmljqueryimageapi


Solution 1:[1]

Replace d.weather[0].icon with existing one when you set url in image src property.

var d = new Date();
var n = d.toLocaleDateString();
document.getElementById("date").innerHTML = n;

function getWeather( cityID ) {
  var key = '535f8a50b4bc24608c72fcde2aecb52b';
  fetch('https://api.openweathermap.org/data/2.5/weather?id=' + cityID+ '&appid=' + key)  
  .then(function(resp) { return resp.json() }) 
  .then(function(data) {
    drawWeather(data);
  })
  .catch(function() {
    // catch any errors
  });
}

window.onload = function() {
  getWeather( 6167865 );
}

function drawWeather( d ) {
  var celcius = Math.round(parseFloat(d.main.temp)-273.15);
  var fahrenheit = Math.round(((parseFloat(d.main.temp)-273.15)*1.8)+32); 

  document.getElementById('cityName').innerHTML = d.name;
  document.getElementById('description').innerHTML = d.weather[0].description;
  document.getElementById('temp').innerHTML = fahrenheit + '&deg;';
  document.getElementById('icon').src = `http://openweathermap.org/img/w/${d.weather[0].icon}.png`;
 }
<div class="weather">
  <div id="date"></div>
  <div id="cityName"></div>
  <img src="" id="icon">
  <div id="temp"></div>
  <div id="description"></div>
</div>

Solution 2:[2]

replace

document.getElementById('icon').src="http://openweathermap.org/img/w/"+obj.weather[0].icon+".png";

with

document.getElementById('icon').src="http://openweathermap.org/img/w/"+d.weather[0].icon+".png";

Solution 3:[3]

The open weather API documentation given the url to access icons. To display weather icon on webpage use the following method:

var iconCode = data.weather[0].icon; 
console.log(iconCode);
out_icon.innerHTML="<img 
src=http://openweathermap.org/img/wn/"+iconCode+"@2x.png>";

Solution 4:[4]

Here is the document for using weather icons: https://openweathermap.org/weather-conditions

In your case, you can change

document.getElementById('icon').src = "http://openweathermap.org/img/w/"+obj.weather[0].icon+".png";

to be

document.getElementById('icon').src = "http://openweathermap.org/img/wn/"+ data.weather[0].icon +"@2x.png";

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rahul Kumar
Solution 2 Nicola Calvio
Solution 3 Kamran qureshi
Solution 4 Hello_World

Related Questions