How display icon by ID and Code?

[thehatami]

I not find any more information to display icon from Open Weather API code like 09d or id like 300.

{"coord":{"lon":-0.13,"lat":51.51},"weather":[{"id":300,"main":"Drizzle","description":"light intensity drizzle","icon":"09d"}],"base":"stations","main":{"temp":280.32,"pressure":1012,"humidity":81,"temp_min":279.15,"temp_max":281.15},"visibility":10000,"wind":{"speed":4.1,"deg":80},"clouds":{"all":90},"dt":1485789600,"sys":{"type":1,"id":5091,"message":0.0103,"country":"GB","sunrise":1485762037,"sunset":1485794875},"id":2643743,"name":"London","cod":200}

[cyoung502]

function getIconClass(weatherCode){
	let icon;
	switch(weatherCode){
		case 300:
			icon = 'wi-sprinkle';
			break;
	}
	return icon;
}

element.innerHTML = '<i class="wi ' + getIconClass(weather.id) + '"></i>';

[Wikibear]

Are you sure that there is only this way? So then we need a json array with all data to compare status codes or anything that it make possible to add icons via code.

[cyoung502]

Are you sure that there is only this way? So then we need a json array with all data to compare status codes or anything that it make possible to add icons via code.

This isn't the only way, but it is one way. You return the class for the weather icon with the input weather code, and you apply the class to some element to display it. Ideally you already have all weather codes in a json array from whatever weather API you using. Here is what I use for Yahoo Weather:

function getIconClass(weatherCode){
	let icon;
	switch(weatherCode){
		case "0":
			icon = "wi-tornado";
			break;
		case "1":
			icon = "wi-hurricane-warning";
			break;
		case "2":
			icon = "wi-hurricane";
			break;
		case "3":
		case "4":
		case "37":
		case "38":
			icon = "wi-thunderstorm";
			break;
		case "5":
		case "6":
		case "7":
		case "35":
		case "46":
			icon = "wi-rain-mix";
			break;
		case "8":
		case "10":
		case "18":
			icon = "wi-sleet";
			break;
		case 9:
			icon = "wi-sprinkle";
			break;
		case "11":
		case "12":
		case "39":
		case "40":
			icon = "wi-showers";
			break;
		case "13":
		case "14":
		case "15":
		case "16":
			icon = "wi-snow";
			break;
		case "17":
			icon = "wi-hail";
			break;
		case "19":
			icon = "wi-dust";
			break;
		case "20":
			icon = "wi-fog";
			break;
		case "21":
			icon = "wi-day-haze";
			break;
		case "23":
			icon = "wi-strong-wind";
			break;
		case "24":
			icon = "wi-windy";
			break;
		case "25":
			icon = "wi-snowflake-cold";
			break;
		case "26":
			icon = "wi-day-sunny-overcast";
			break;
		case "27":
		case "29":
			icon = "wi-night-alt-cloudy";
			break;
		case "28":
			icon = "wi-cloudy";
			break;
		case "30":
			icon = "wi-day-cloudy";
			break;
		case "31":
			icon = "wi-night-clear";
			break;
		case "32":
			icon = "wi-day-sunny";
			break;
		case "33":
			icon = "wi-night-cloudy";
			break;
		case "34":
			icon = "wi-day-haze";
			break;
		case "36":
			icon = "wi-hot";
			break;
		case "41":
		case "42":
		case "43":
			icon = "wi-snow";
			break;
		case "44":
			icon = "wi-cloud";
			break;
		case "45":
		case "47":
			icon = "wi-storm-showers";
			break;
		case "3200":
		default:
			icon = "wi-na";
			break;
	}
	return icon;
}

And how I set the icon:

	for(let i = 0; i < days; i++){
		let td = document.createElement("td");
		td.innerHTML = "<i class=\"mt-3 mb-1 wi " + getIconClass(w.weatherData.item.forecast[i].code) + "\"></i>";
		tr.appendChild(td);
	}

[jonneymendoza]

Looks like a hackable way of doing so.

[Wikibear]

var wiToOWM = { "200": "thunderstorm", "201": "thunderstorm", "202": "thunderstorm", "210": "lightning", "211": "lightning", "212": "lightning", "221": "lightning", "230": "thunderstorm", "231": "thunderstorm", "232": "thunderstorm", "300": "sprinkle", "301": "sprinkle", "302": "rain", "310": "rain-mix", "311": "rain", "312": "rain", "313": "showers", "314": "rain", "321": "sprinkle", "500": "sprinkle", "501": "rain", "502": "rain", "503": "rain", "504": "rain", "511": "rain-mix", "520": "showers", "521": "showers", "522": "showers", "531": "storm-showers", "600": "snow", "601": "snow", "602": "sleet", "611": "rain-mix", "612": "rain-mix", "615": "rain-mix", "616": "rain-mix", "620": "rain-mix", "621": "snow", "622": "snow", "701": "showers", "711": "smoke", "721": "day-haze", "731": "dust", "741": "fog", "761": "dust", "762": "dust", "771": "cloudy-gusts", "781": "tornado", "800": "day-sunny", "801": "cloudy-gusts", "802": "cloudy-gusts", "803": "cloudy-gusts", "804": "cloudy", "900": "tornado", "901": "storm-showers", "902": "hurricane", "903": "snowflake-cold", "904": "hot", "905": "windy", "906": "hail", "957": "strong-wind", "day-200": "day-thunderstorm", "day-201": "day-thunderstorm", "day-202": "day-thunderstorm", "day-210": "day-lightning", "day-211": "day-lightning", "day-212": "day-lightning", "day-221": "day-lightning", "day-230": "day-thunderstorm", "day-231": "day-thunderstorm", "day-232": "day-thunderstorm", "day-300": "day-sprinkle", "day-301": "day-sprinkle", "day-302": "day-rain", "day-310": "day-rain", "day-311": "day-rain", "day-312": "day-rain", "day-313": "day-rain", "day-314": "day-rain", "day-321": "day-sprinkle", "day-500": "day-sprinkle", "day-501": "day-rain", "day-502": "day-rain", "day-503": "day-rain", "day-504": "day-rain", "day-511": "day-rain-mix", "day-520": "day-showers", "day-521": "day-showers", "day-522": "day-showers", "day-531": "day-storm-showers", "day-600": "day-snow", "day-601": "day-sleet", "day-602": "day-snow", "day-611": "day-rain-mix", "day-612": "day-rain-mix", "day-615": "day-rain-mix", "day-616": "day-rain-mix", "day-620": "day-rain-mix", "day-621": "day-snow", "day-622": "day-snow", "day-701": "day-showers", "day-711": "smoke", "day-721": "day-haze", "day-731": "dust", "day-741": "day-fog", "day-761": "dust", "day-762": "dust", "day-781": "tornado", "day-800": "day-sunny", "day-801": "day-cloudy-gusts", "day-802": "day-cloudy-gusts", "day-803": "day-cloudy-gusts", "day-804": "day-sunny-overcast", "day-900": "tornado", "day-902": "hurricane", "day-903": "snowflake-cold", "day-904": "hot", "day-906": "day-hail", "day-957": "strong-wind", "night-200": "night-alt-thunderstorm", "night-201": "night-alt-thunderstorm", "night-202": "night-alt-thunderstorm", "night-210": "night-alt-lightning", "night-211": "night-alt-lightning", "night-212": "night-alt-lightning", "night-221": "night-alt-lightning", "night-230": "night-alt-thunderstorm", "night-231": "night-alt-thunderstorm", "night-232": "night-alt-thunderstorm", "night-300": "night-alt-sprinkle", "night-301": "night-alt-sprinkle", "night-302": "night-alt-rain", "night-310": "night-alt-rain", "night-311": "night-alt-rain", "night-312": "night-alt-rain", "night-313": "night-alt-rain", "night-314": "night-alt-rain", "night-321": "night-alt-sprinkle", "night-500": "night-alt-sprinkle", "night-501": "night-alt-rain", "night-502": "night-alt-rain", "night-503": "night-alt-rain", "night-504": "night-alt-rain", "night-511": "night-alt-rain-mix", "night-520": "night-alt-showers", "night-521": "night-alt-showers", "night-522": "night-alt-showers", "night-531": "night-alt-storm-showers", "night-600": "night-alt-snow", "night-601": "night-alt-sleet", "night-602": "night-alt-snow", "night-611": "night-alt-rain-mix", "night-612": "night-alt-rain-mix", "night-615": "night-alt-rain-mix", "night-616": "night-alt-rain-mix", "night-620": "night-alt-rain-mix", "night-621": "night-alt-snow", "night-622": "night-alt-snow", "night-701": "night-alt-showers", "night-711": "smoke", "night-721": "day-haze", "night-731": "dust", "night-741": "night-fog", "night-761": "dust", "night-762": "dust", "night-781": "tornado", "night-800": "night-clear", "night-801": "night-alt-cloudy-gusts", "night-802": "night-alt-cloudy-gusts", "night-803": "night-alt-cloudy-gusts", "night-804": "night-alt-cloudy", "night-900": "tornado", "night-902": "hurricane", "night-903": "snowflake-cold", "night-904": "hot", "night-906": "night-alt-hail", "night-957": "strong-wind" };

and

console.log(wiToOWM[night-957]);

Will do the trick.

EG Open Weather:

$('p.wwIcon').html('<i class="wi wi-'+wiToOWM[getDayNight(data.sys.sunrise*1000,data.sys.sunset*1000)+data.weather[0].id]+'"></i>');

[jonneymendoza]

Do you have a java or kotlin example?

[mrbbp]

getDayNight function missed
try this

const getDayNight = (sunrise, sunset) => {
      const now = Date.now();
      if (now> sunrise && now< sunset) {
        return "day-";
      } else {
        return "night-";
      }
    };