How to Display Openweathermap Weather Icon

How to display OpenWeatherMap icons in weather application?

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 + '°';
  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>

how to display openweather map weather icons react.js

In order for you to display the icon, you need to use the URL and not just icon value. Something like this

The value returned from the API is '09d'. So you will have to append the URL with string url to have the weather api url appended with image and image extension.

{http://openweathermap.org/img/w/${props.icon}.png}

Few other things noticed in your code is ,

You are setting default values as undefined, which is not correct.

Please use proper value, something like

state = {
temperature: '',
city: ''
}

https://codesandbox.io/s/6102m4kn3r

FLUTTER: How can I show the weather Icon from Open Weather Map?

For this api icon code have an url actually, and it will be like that in your case.

icon_url = "http://openweathermap.org/img/w/" + dataDecoded["weather"]["icon"] +".png"

and you can use it as image:

Image.network(icon_url),

or directly:

Image.network('http://openweathermap.org/img/w/${dataDecoded["weather"]["icon"]}.png',),

How to display icon with openweather api in rails app

You need to use ERB tags <%= %> in order for the parser to actually evaluate the code.

<img src="http://openweathermap.org/img/wn/<%= @icon %>.png">

The normal string interpolation sequence #{} has no special significance in ERB and will just be output as is.

You can also use the image_tag helper:

<%= image_tag "http://openweathermap.org/img/wn/#{@icon}.png" %>

How to access Weather API icon id?

check it:

const url = `http://openweathermap.org/img/${value?.[0].icon}.png`

Open Weather API icons not showing up on react project

You need to change

<img src='imgurl'  width="120" height="100"></img>

to

<img src={imgurl}  width="120" height="100"></img>

As imgurl is a JS variable, the curly braces are needed.

Can't fetch weather icons from openweathermap

Question: fetch weather icons from openweathermap

According to the comments:

• The value of icon is "03n". Of course tkinter does not know how to show that. You have to see in openweathermap's API docs how to fetch that icon. – @zvone

• see SO:Answer set a tkinter app icon with a URL? to get the icon.
  
  use f'http://openweathermap.org/img/wn/{icon}.png' as url. – @Stef

---

import tkinter as tk
import requests, base64

class OpenWeatherMap:
    APPID = 'c73d9cdb31fd6a386bee66158b116cd0'

    def __init__(self):
        self.url = "http://api.openweathermap.org/data/2.5/weather?appid={appid}&q={city}&units=metric"
        self.json = {}

    def get_city(self, city):
        url = self.url.format(appid=OpenWeatherMap.APPID, city=city)
        self.json = requests.get(url).json()
        return self.json

    def get(self, key):
        return self.json['main'][key]

    def get_icon_data(self):
        icon_id = self.json['weather'][0]['icon']
        url = 'http://openweathermap.org/img/wn/{icon}.png'.format(icon=icon_id)
        response = requests.get(url, stream=True)
        return base64.encodebytes(response.raw.read())

class OWIconLabel(tk.Label):
    def __init__(self, parent, **kwargs):
        weather_icon = kwargs.pop('weather_icon', None)
        if weather_icon is not None:
            self.photo = tk.PhotoImage(data=weather_icon)
            kwargs['image'] = self.photo

        super().__init__(parent, **kwargs)

Usage:

class App(tk.Tk):
    def __init__(self):
        super().__init__()
        self.geometry("220x120+0+0")
        self.configure(bg='black')

        owm = OpenWeatherMap()
        owm.get_city('karachi')

        temperature = owm.get('temp')

        temp_icon = OWIconLabel(self, weather_icon=owm.get_icon_data())
        temp_icon.grid(row=0, column=0)

        self.temp = tk.Label(self,
                             text='{} deg celcius'.format(temperature),
                             font=("Helvetica", 15), bg='black', fg='white')
        self.temp.grid(row=1, column=0)

if __name__ == '__main__':
    App().mainloop()

Tested with Python: 3.5

---

Related Topics