Pretty much the best plugin in the world.

A simple jQuery plugin to display current weather data for any location and doesn't get in your way. Now supports HTML5 GeoLocation!
Handcrafted with ♥ from Austin, Texas by James Fleeting.

Download v2.7.0

Last updated on April 17, 2014
More ways to install

bower install simpleWeather

Introducing simpleWeather

See the Pen simpleWeather.demo.js by James Fleeting (@fleeting) on CodePen.


Example Usage

The demo above gives you a real world example of how to display and style the weather. The table below shows every piece of data that is available for you to use. In most cases you won't need the majority of it however I make it all available so you can use whatever you want. The example values with links (thumbnail, image, link) all return the url, I just linked it so the table didn't look cluttered.

Data Description Example value
title Returns the generic title for the weather being displayed. Conditions for Austin, TX at 2:50 pm CST
temp Returns current temperature for selected location without unit. 75
tempAlt If unit is set to f (fahrenheit), this will return the current temp in c (celsius) or or vice versa. 24
code Returns the current condition code. View a list condition codes. 32
todayCode Returns the condition code for the day vs current. View a list condition codes. 30
units.temp Returns the unit in which temp is displayed, f for Fahrenheit or c for Celsius. This can be changed when calling simpleWeather. f
units.distance Returns the unit in which distance is displayed, mi for miles or km for kilometers. mi
units.pressure Returns the units of barometric pressure, in for pounds per square inch or mb for millibars. in
units.speed Returns the unit in which speed is displayed, mph for miles per hour or kph for kilometers per hour. mph
units.tempAlt Returns the opposite from units.temp (if Fahrenheit, this will return the temp in Celsuis). c
currently Returns a textual description of the current condition. Partly Cloudy
high Returns the forecasted high temp for the day. 82
highAlt Returns the opposite from high (if Fahrenheit, this will return the temp in Celsuis). 28
low Returns the forecasted low temp for the day. 47
lowAlt Returns the opposite from low (if Fahrenheit, this will return the temp in Celsuis). 8
forecast Returns a textual description of the condition for the day vs current. Sunny
wind.chill Returns the current wind chill in degrees. 71
wind.direction Returns the current wind direction. NW
wind.speed Returns the current wind speed. Use with units.speed to display mph or kph. 13
humidity Returns current humidity in precent. 63
heatindex Returns the current heatindex. 71
pressure 29.85
rising Returns the state of the barometric pressure; steady (0), rising (1), or falling (2). 0
visibility Returns current visibility in distance. Use with units.distance for mi or km. 10
sunrise Returns the time of sunrise for today. 7:26am
sunset Returns the time of sunset for today. 5:47pm
thumbnail Returns the thumbnail image url for the current condition code. View Image
image Returns the full size image url for the current condition code. View Image
tomorrow.high Returns the forecasted high temp for tomorrow. 78
tomorrow.highAlt Returns the opposite from tomorrow.high (if Fahrenheit, this will return the temp in Celsuis). 25
tomorrow.low Returns the forecasted low temp for tomorrow. 41
tomorrow.lowAlt Returns the opposite from tomorrow.low (if Fahrenheit, this will return the temp in Celsuis). 5
tomorrow.forecast Returns a textual description of the condition for tomorrow. Thunderstorms
tomorrow.code Returns the condition code for tomorrow. View a list condition codes. 4
tomorrow.date Returns the date for tomorrow. 12 Jan 2013
tomorrow.day Returns the day for tomorrow. Sat
tomorrow.image Returns the full size image url for tomorrow's condition code. View Image
forecasts.XX.high Returns the forecasted high temp for XX day out. (XX = one, two, three, or four) 78
forecasts.XX.highAlt Returns the opposite from forecasts.XX.high (if Fahrenheit, this will return the temp in Celsuis) (XX = one, two, three, or four). 25
forecasts.XX.low Returns the forecasted low temp for XX day out. (XX = one, two, three, or four) 41
forecasts.XX.lowAlt Returns the opposite from forecasts.XX.low (if Fahrenheit, this will return the temp in Celsuis) (XX = one, two, three, or four). 5
forecasts.XX.forecast Returns a textual description of the condition for XX day. (XX = one, two, three, or four) Thunderstorms
forecasts.XX.code Returns the condition code for XX day. View a list condition codes. (XX = one, two, three, or four) 4
forecasts.XX.date Returns the date for XX day. (XX = one, two, three, or four) 12 Jan 2013
forecasts.XX.day Returns the day for XX day. (XX = one, two, three, or four) Sat
forecasts.XX.image Returns the full size image url for XX day's condition code. (XX = one, two, three, or four) View Image
city Returns the city name. Austin
country Returns the two character country code. US
region Returns the state, territory, or region. TX
updated Returns when the weather feed was last updated. Fri, 11 Jan 2013 3:50 pm CST
link Returns a url to the full forecast on Yahoo! Weather. View Forecast

One does not simply write docs

Note: You can use woeid.rosselliot.co.nz/lookup/ to find your locations unique WOEID.

simpleWeather is meant to be... well simple. You simply provide your US zip code, WOEID or any location in the world and it returns your local weather from Yahoo! This plugin won't spit out a bunch of HTML full of classes and IDs. It just gives you the returned data for you to use, display and style as you need.

There are two params that you can use to pass in your location. The first being `location` and accepts any combination of city, state, country, US zip code, or latitude/longitude. The second is `woeid` and takes your locations ID only. Most locations will work using the location param however if it is not returning the location it should please switch to using the WOEID param and use the link above to get your ID if needed.

Since geolocation is a common question and is now supported as of v2.5.0 I have a quick demo that uses HTML5 geolocation to display your weather up on codepen.


Y u no ask questions?

1 How do I change the language?

Currently the Yahoo! Weather API only returns en-us and does not provide a way for you to change this. If Yahoo! adds this feature then I will update simpleWeather to make use of it. If you have any other suggestions on providing translations feel free to let me know.

2 My location does not return the correct weather?

If you are using the `location` param and having this issue it might be best to get your location's WOEID following the steps above in the docs. Some locations only work with a very specific name.

3 Can I use different weather icons instead of Yahoo's?

As of v1.7 you have access to the condition code which can be used to use your own images. Now this will require having images for all (even if the same is used over) Condition Codes of which there are about 50. Basically you will need to name the images based on the condition code. Below is a quick example:

Now if the current weather is snow then the code returned is 16 in which case the above code will look for a 16.png image or whatever the condition code returned is. Yahoo! provides a description of each code found in the link above. If your not up to making your own icons but still aren't satisfied with Yahoo's there are plenty of free weather icon sets around. Here is a list found at WebResources Depot and a search on deviantArt returns lots of quality sets. I also came across this great set recently - artill weather icons.

4 Is it possible to display the forecast for the week?

As of v2.4.0 Yahoo! Weather returns a five day forecast. You can access that data using `forecasts.one.high` or `forecasts.two.high`. You can do this for one through four. Reference the table above for complete data returned. Prior to v2.4.0 the Yahoo! Weather API only returned today and tomorrow's weather along with providing a link to view the full forecast.

5 Can I use latitude/longitude or geolocation?

As of v2.5.0 the `location` param now accepts latitude/longitude which means you can now use a visitors geolocation to display weather. Here is a quick demo to get you started: geolocation demo.

6 Why yet another weather widget/plugin?

This plugin came about because I wanted control over what was displayed. I've used other widgets and plugins and found that none fit my needs. The biggest issue was not having control over the code it was spitting out. This included some plugins giving me crazy HTML with a bunch of classes. Why not write your own HTML? simpleWeather gives you all the available data and you choose what to use and how it should be display. This includes using your own HTML and CSS. More then that this means you can use the plugin for more then just displaying current weather. An example would be to create a dynamic design that changes based on the weather such as a header or images. simpleWeather makes it... well simple.

7 Can I display the weather for multiple locations?

Yes, you can use the plugin to display the weather for multiple locations by calling $.simpleWeather({...}); as many times as you want. This allows you to retrieve the weather for multiple locations and display each different if you wish.

8 How can I display the current temp in both F and C?

As of version 1.9 you are able to do this. If your unit is set to F then based on the demo `weather.temp` shows the current temp in F and you can now use `weather.tempAlt` to display the temp in C. Same goes if the unit is set to C, `temp` is the degrees in that unit and `tempAlt` is in F. This only works with the current temp and not high, low, etc. If you are wanting to display more with both then you can use the same calculations in your success function.

9 Oh no, the plugin is broke!

If you have any issues with simpleWeather you can submit an issue on GitHub. Please provide detail on the issue and jsfiddle your code.