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, TX by James Fleeting.
Last updated on January 29, 2016
More ways to install
bower install simpleWeatherSee the Pen simpleWeather.demo.js by James Fleeting (@fleeting) on CodePen.
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.
Over the past year or two I've compiled several demos from requests which you are lucky enough to have access to.
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 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 |
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.
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.
As of v2.4.0 Yahoo! Weather returns a five day forecast. Reference the table above for `forecast[X]`.
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.
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.
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.
As of version 1.9 you are able to do this. See table data above for details.
If you have any issues with simpleWeather you can submit an issue on GitHub. Please provide detail on the issue and jsfiddle your code.
