Skip to content
WhatWeather is a jQuery plugin which provides weather's data. It uses API to get, parse and deliver data in order to create weather's widgets.
JavaScript CSS PHP
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Bugs fixing Sep 12, 2013


WhatWeather is a jQuery plugin which provides weather's data. It uses API to get, parse and deliver data in order to create weather's widgets. WhatWeather provides data and let you manage the display. However, it uses Mustache. In this way, you can easely change the template of your widgets.


You may use WhatWeather under the terms of the of the GNU GPL licence [See LICENCE].

What it can do

The plugin can't do any things by itself. His job is to delivers weather's data. But it gives you an easy way to develop a weather widget. It is also a ready to use by including 3 widgets.

First widget Second widget third widget

You can get weather data from cities all over the world. The plugin uses the name of the city, geographic coordinate system, IP adresse or the HTML5 geolocation API. The plugin have also a client-server caching system by using Web Storage API and text file for the server side.


Find more exemples on this page.

Package content

  • js/whatweather-1.2.js
  • js/whatweather-1.2.min.js
  • css/webfonts/Climacons.ttf
  • css/webfonts/climacons-webfont.eot
  • css/webfonts/climacons-webfont.svg
  • css/webfonts/climacons-webfont.ttf
  • css/webfonts/climacons-webfont.woff
  • css/webfonts/climacons-font.css
  • css/style.css
  • get_weather.php


First, you must have a key API. You can have a free one at this page.

WhatWeather uses Climacons font to display weather's icons.

<link href='css/webfont/climacons-font.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery.min.2.0.0.js"></script>
<script type="text/javascript" src="js/mustache.js"></script>
<script type="text/javascript" src="js/whatweather-1.2.min.js"></script>

You also must edit the "get_weather" PHP file to add your private key.

// your private key
$yourKey  = "";


<script type="text/javascript">
    $("#container").whatWeather({city:"brussels,belgium", days:"5"});


###before() You can override this method in order to do something before the data's request. The method takes one argument: a jQuery element.

    city: "brussels,belgium", 
    days: "5", 
    before: function(el){
        el.text("Loading ...");

###after() After the request of the weather data, this method is called. The method takes one argument: a jQuery element.

    city: "brussels,belgium", 
    days: "5", 
    after: function(el){
      el.text("Data loaded !");

###success() When the Ajax request succeeded, this method is used to manipulate the data. The method takes 2 arguments: a jQuery element and JSON object which contains data weather.

    city: "brussels,belgium", 
    days: "5", 
    success: function(el, data){
      el.text("Request succeeded !");

###fail() The fail method is called if the request failed.

    city: "brussels,belgium", 
    days: "5", 
    fail: function(el){
      el.text("Request failed !");



key parameter is used for your private key.

$("#container").whatWeather({city:"brussels,belgium", days:"5"});


this parameter is used to identify each widget. It is a facultative parameter. If it is send, it will be used for the hashmap of web storage.

$("#container").whatWeather({id:"myFirstWidget",city:"brussels,belgium", days:"5"});


This parameter contains city's name and country's name. The both are separated by a coma.


If for any reason you want to specify geographic coordinates. You can use the latitude and longitude.


It is used with latitude parameter.


You can use the IP address to get the city's weather of the visitor. Default value is false.


You can also use the geolocation API of HTML5. Default value is false.


Number of days of forecast. Default value is 1 and the maximum is 5.


This parameter indicates if the request will be asynchronous. Default value is true.


The refresh parameter is used if you want to save data and don't send a request every page refresh. The value represent a second. Default value 600 (10 min).


The cache parameter is used for caching data from the server side. Default value is false. It is used with the refresh parameter


This is used for the defaults templates. You can specify a CSS class to change the design of the template. Default value is "widget-1". ###Regional options This options are used to translate the UI.


You can get the temperature in degrees Celsius or Fahrenheit. Default value is "C".


Default value is "Day".


Default value is "Max".


Default value is "Min".


Default value is "Loading error".


Default value is ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"].


Default value is ["January","February","March","April","May","June","July","August","September","October","November","December"].


Date format, default value is "{{d}}/{{m}}/{{Y}}".


Date format of the update data. Default value is "{{l}} {{M}} {{j}}, {{Y}}".


You can select which default template to use. Default value is 0.

You can’t perform that action at this time.