Discover Everything about the Weather with the Wunderground API Plug-in

Posted: April 24th, 2013Author:

The Wunderground API allows you to receive information about weather conditions, forecasts, historical information about weather, etc. To make it easier to use the API in, we created a plug-in with some ready-made services which use the Wunderground API.

To add this plug-in to an app, you just need to follow these steps in

  1. From the builder, select Create New and then From Plug-in.
  2. Click the check box for Weather/Wunderground API, and then click the Import selected plugins button.
  3. Open Services/Wunderground_Settings and set your API key. If you don’t have one, get it from
  4. Open Project/App Settings and set Start Page to Wunderground_startScreen and Theme to jqm-classic.

Once you’ve created a new app based on this plug-in, you actually have a simple ready-to-run demo app. Just click the Test button in the right upper corner of the screen to see it work. In this tutorial, we’ll first walk through the sample app included with the plug-in. Then, we’ll show you, “under the hood,” some of how to the API is used in developing the app.

The App

The application is quite simple. It has only one page. When the application loads, it tries to determine your location and show the information about current weather conditions near you. Later, you can enter any city name in the input field and press “Show” button. After that, the application will show current weather conditions in the first city, which name corresponds to the entered query.


Under the Hood

Now that we’ve walked through the app, let’s take a peek under the hood.


Services from the plug-in are linked to UI components as part of the design of the app. The following REST services defined in the Wunderground API plug-in are used in the app.

Wunderground_Autocomplete service

The Wunderground_Autocomplete service returns a list of locations or hurricanes which match against a partial query. For example, searching for San F will return San Francisco, California, San Fernando del Valle de Catamarca, Argentina, and San Felipe de Puerto Plata, Dominican Republic, among others.

The request options include the ability to query for cities, hurricanes, or both. The results can be used to form Weather API queries or to link directly to Wunderground resources.

This service does not require an API key.

REST Service Settings displays the URL, main settings, and whether a proxy is used as shown below:


Request tab contains the parameter sent to the Wunderground_Autocomplete service (the only obligatory parameter is “query”):


The service can be instantly tested and the response can be created automatically based on the returned response (in JSON format):


Response parameters:


The l response parameter represents the location and can be used in other Wunderground services to construct URLs for API calls.

Wunderground_Conditions service

The Wunderground_Conditions service returns the current temperature, weather condition, humidity, wind, ‘feels like’ temperature, barometric pressure, and visibility.

Service settings are the following:


The {link} value which defines the location is substituted in mapping when the service is running. When the app is launched, this parameter is given a /q/autoip value, which allows receiving current weather conditions in user’s location.

The service can also be tested, for example with /q/autoip as a link parameter.

Response parameters, which represent full information about current weather conditions, can also be created automatically.

Mapping the UI to the Services

The final part in the app design is mapping service parameters to UI components and local storage variables. Here’s the mapping of request parameters of Wunderground_Autocomplete service. The query input parameter is taken from cityInput input field.


The next image shows the mapping of response parameters of Wunderground_Autocomplete service. The l parameter is saved to local storage variable link.


Wunderground_Conditions service is called after the Wunderground_Autocomplete service execution is successfully completed. The link input parameter is mapped with the local storage variable link.


Wunderground_Conditions service output parameters are mapped to UI components to display weather data.