Light rain
62°F
Tuesday
Flat Weather is an easy to use jQuery plugin that supports switching between three different weather API sources (OpenWeatherMap.org1, wunderground2 or Yahoo) without changing any of your front-end code.
The code is well-documented and small, with its only external dependency being jQuery, which makes it easy to deploy and extend. The plugin comes with an attractive flat UI css stylesheet, and uses the weather icons3 font to provide attractive and scalable visuals. As you can see from the examples below, there are plenty of display options that will let you customize the widget for your particular application without forcing you read the source. Responsive css keeps it looking good across desktop and mobile.
Multi-language now fully supported. Openweathermap or Wunderground only. Wunderground uses its own zmw location codes, use the included tool to help find your zmw locaiton code.
Don't like any of the default styles? Build your own markup with our uniform data API, which bridges the gap between the Yahoo, Wunderground and OpenWeather APIs and presents a simple and consistent JSON object to interact with. See example 6 below for more details.
Notes:
<head>
<!-- include flatWeatherPlugin.css and copy the font folder to one folder above your /css folder -->
<link href="path/to/css/flatWeatherPlugin.css" rel="stylesheet">
<!-- include a copy of jquery (if you haven't already) -->
<script src="path/to/js/jquery-2.1.1.min.js"></script>
<!-- include flatWeatherPlugin -->
<script src="path/to/js/jquery.flatWeatherPlugin.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Setup the plugin, see readme for more examples
var example = $("#example").flatWeatherPlugin({
//Required options Yahoo and Openweather
location: "Boston, MA", //city and region *required
country: "USA", //country *required
//Required options for wunderground
zmw : "00000.83.71368", //zmw location code *required for wunderground
//use tool at bottom of page for finding zmw
//Full options:
api: "yahoo", //default: yahoo (openweathermap, yahoo or wunderground)
//apikey: "your-api-key", //api key required for openweather and wunderground
//visit openweathermap.org or wunderground.com/weather/api and sign up for an account to get an api key
view : "partial", //default: full (partial, full, simple, today or forecast)
timeformat: "12", //"24" or "12" default: "12"
displayCityNameOnly : true, //default: false (true/false) if you want to display only city name
forecast: 4, //default: 5 (0 -5) how many days you want forecast (max 3 for wunderground)
render: true, //default: true (true/false) if you want plugin to generate markup
loadingAnimation: true, //default: true (true/false) if you want plugin to show loading animation
units : "imperial", //"metric" or "imperial" to overide units default: "auto"
//Include multi-language options here (see below)
});
});
</script>
</head>
<body>
<!-- have a target for where you want it shown -->
<div id="example"></div>
</body>
//Optional: include with flatWeatherPlugin init above
lang: "EN", //default: "en" *optional
//translation strings, If you would like to use another language please replace these strings with your language
strings : {
days: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
min : "Min",
max : "Max",
direction : ["N","NNE","NE","ENE","E","ESE","SE","SSE","S","SSW","SW","WSW","W","WNW","NW", "NNW"]
},
Include options above for multi-language support. Translate strings manually. Supported langauge codes listed below for each api.
Show supported languages codes ▼| Yahoo | Openweathermap | wunderground |
| EN English | EN English RU Russian IT Italian ES Spanish (or SP) UK Ukrainian (or UA) DE German PT Portuguese RO Romanian PL Polish FI Finnish NL Dutch FR French BG Bulgarian SV Swedish (or SE) ZH_TW Chinese Traditional ZH Chinese Simplified (or ZH_CN) TR Turkish HR Croatian CA Catalan | AF Afrikaans AL Albanian AR Arabic HY Armenian AZ Azerbaijani EU Basque BY Belarusian BU Bulgarian LI British English MY Burmese CA Catalan CN Chinese - Simplified TW Chinese - Traditional CR Croatian CZ Czech DK Danish DV Dhivehi NL Dutch EN English EO Esperanto ET Estonian FA Farsi FI Finnish FR French FC French Canadian GZ Galician DL German KA Georgian GR Greek GU Gujarati HT Haitian Creole IL Hebrew HI Hindi HU Hungarian IS Icelandic IO Ido ID Indonesian IR Irish Gaelic IT Italian JP Japanese JW Javanese KM Khmer KR Korean KU Kurdish LA Latin LV Latvian LT Lithuanian ND Low German MK Macedonian MT Maltese GM Mandinka MI Maori MR Marathi MN Mongolian NO Norwegian OC Occitan PS Pashto GN Plautdietsch PL Polish BR Portuguese PA Punjabi RO Romanian RU Russian SR Serbian SK Slovak SL Slovenian SP Spanish SI Swahili SW Swedish CH Swiss TL Tagalog TT Tatarish TH Thai TR Turkish TK Turkmen UA Ukrainian UZ Uzbek VU Vietnamese CY Welsh SN Wolof JI Yiddish - transliterated YI Yiddish - unicode |
Light intensity shower rain
7°C
Tuesday
//ex. all default options. full view, openweathermap weather
var example1 = $("#example-1").flatWeatherPlugin({
location: "Waterloo, ON",
country: "Canada",
});
Cloudy
8°C
//ex. simple view, openweathermap weather
var example2 = $("#example-2").flatWeatherPlugin({
location: "Toronto, ON",
country: "Canada",
api: "yahoo",
view : "simple"
});
Partly Cloudy
62°F
//today only detailed view and display city name only,
var example3 = $("#example-3").flatWeatherPlugin({
location: "San Francisco, CA",
country: "USA",
api: "yahoo",
displayCityNameOnly : true,
view : "today",
});
//forecast only view, no loading animation from yahoo weather
//**force metric units**
var example4 = $("#example-4").flatWeatherPlugin({
location: "New York, NY",
country: "USA",
api: "yahoo",
view : "forecast",
loadingAnimation : false,
units : "metric", //force metric units
});
Moderate rain
12°C
//ex. Auto Refresh example
var example5 = $("#example-5").flatWeatherPlugin({
//first intilize the plugin per normal
location: "Malmo",
country: "Sweden",
view : "simple",
});
//then setup an interval to make repeat calls to fetchWeather
var intervalID = window.setInterval(function() {
example5.flatWeatherPlugin('fetchWeather').then(success, fail);
}, 2*60*1000); //call every two minutes
//then handle the success and fail states of the fetchWeather promise
function success(data) {
example5.flatWeatherPlugin('render', data);
}
function error(data) {
example5.flatWeatherPlugin('error', data);
}
10°C, Light intensity shower rain
//for custom output call with render: false
var custom_example = $("#example-6").flatWeatherPlugin({
location: "London",
country: "UK",
api: "openweathermap",
render : false //the plugin will not generate any markup
});
//then manually call 'fetchWeather' which returns a jquery promise
//when complete, result contains the weather data
custom_example.flatWeatherPlugin('fetchWeather')
.then(function(data){
console.log(data);
//you can then do whatever you want with the data
//such as generate your own custom markup
$("<h2/>", {"class" : "wi wi"+data.today.code})
.text(" " + data.city)
.appendTo(custom_example);
$("<p/>").html(data.today.temp.now + "°C, " + data.today.desc )
.appendTo(custom_example);
});
/* //Data object from fetchWeather looks like this:
{
location : String, //as returned back from api
today : {
temp : {
//temperatures are in units requested from api
now : Number, ex. 18
min : Number, ex. 24
max : Number ex. 12
},
desc : String, ex. "Partly Cloudy"
code : Number, ex. "801" used by css font, see css.
wind : {
speed : 4, //either km/h or mph
deg : Number, //direction in degrees from North
},
pressure : Number, //barometric pressure
humidity : Number, //% humidity
sunrise : Time,
sunset : Time,
day : String,
},
forecast : [
//array
{
Day: String,
code:Number,
desc: String,
temp : {min:number, max:number}
}
]
}
*/