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 Boston, MA by James Fleeting.

Download v3.1.0

Last updated on January 29, 2016
More ways to install

bower install simpleWeather
Tweet

Introducing simpleWeather

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


You call these docs?

simpleWeather is meant to be... well simple. You simply provide your US zip code, WOEID, lat/long, 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 data for you to use, display, and style as you need. Get a full list of data in the table below.

Since geolocation is a common question, it is now supported as of v2.5.0. This means you can use HTML5 geolocation to pass in lat/long to simpleWeather and get data back. See demos below.

ALL THE DEMOS!

Over the past year or two I've compiled several demos from requests which you are lucky enough to have access to.

  • Bare Minimum - Dead simple demo with nothing but current temp.
  • Full Demo - This is the demo above and includes using a custom icon font.
  • Forecast - Gives you a five day forecast.
  • Geolocation - The most requested demo was how to use HTML5 geolocation or lat/long coordinates to get weather data; here you go.
  • Auto Update - Quick demo showing how to auto update the weather data. Usefull if you are displaying the weather on a dashboard.
  • Multiple Locations - When you need to show weather info for more than one location.
  • Last Updated - Showing when the weather was last updated and using moment.js for a more friendly stamp.
  • Using data for styling - A quick example showing how to use the weather data to effect styling. In this case the background changes to either a blue (when the temp is lower) and an orange (when it is higher).
  • Data Dump - This isn't as usefull of a demo but it shows a full data dump of every single piece of data that simpleWeather returns. If you are having trouble getting something to show up, I would start here.

Screencast from @cloudstudio

On top of the above demos, @cloudstudio has created an awesome screencast on using simpleWeather that I recommend checking out, it's called Building a Weather App.


The Data

The table below shows every piece of data that is available for you. 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
alt.temp 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
alt.unit 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
alt.high 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
alt.low Returns the opposite from low (if Fahrenheit, this will return the temp in Celsuis). 8
text Returns a textual description of the condition for the day vs current. Formally `forecast`. 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.X Removed as of v3.0 in favor of `forecast`; to get data for tomorrow it would now be `weather.forecast[1]` 78
forecast[X].high Returns the forecasted high temp for X day out. (X = 0-4; 0 is today) 78
forecast[X].alt.high Returns the opposite from forecast.X.high (if Fahrenheit, this will return the temp in Celsuis). (X = 0-4; 0 is today) 25
forecast[X].low Returns the forecasted low temp for X day out. (X = 0-4; 0 is today) 41
forecast[X].alt.low Returns the opposite from forecast.X.low (if Fahrenheit, this will return the temp in Celsuis). (X = 0-4; 0 is today) 5
forecast[X].text Returns a textual description of the condition for X day. Formally `forecast`. (X = 0-4; 0 is today) Thunderstorms
forecast[X].code Returns the condition code for X day. View a list condition codes. (X = 0-4; 0 is today) 4
forecast[X].date Returns the date for X day. (X = 0-4; 0 is today) 12 Jan 2013
forecast[X].day Returns the day for X day. (X = 0-4; 0 is today) Sat
forecast[X].image Returns the full size image url for X day's condition code. (X = 0-4; 0 is today) View Image
forecast[X].thumbnail Returns the thumbnail image url for X day's condition code. (X = 0-4; 0 is today) View Image
city Returns the city name. Austin
country Returns the country name. 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

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 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.

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

As of v2.4.0 Yahoo! Weather returns a five day forecast. Reference the table above for `forecast[X]`.

4 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.

5 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.

6 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.

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

As of version 1.9 you are able to do this. See table data above for details.

8 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.