OpenWeatherMap and Transform

The OpenWeatherMap API can provide feeds of JSON data for weather conditions and a short term forecast for free (signup is required, see below). Transform can read in these feeds, convert the data to HTML and display it on your WordPress site. The instructions below describe how to bring it all together.

Sign Up for a Free OpenWeatherMap.org Account

The first step is to sign up with OpenWeatherMap.org for a free account (paid accounts will give you access to longer range forecasts, historical data and other features). Go to https://home.openweathermap.org/users/sign_up and sign up for a free account.

Get Your API Key

Once you have an account, log into openweathermap.org then go to https://home.openweathermap.org/api_keys. Here you’ll see an API key for your account that must be transmitted with each of your API requests. Copy the value of the API key.

Create a Transform Setting to Store Your API Key

We’ll store the API key’s value into a setting in Transform. This will allow changing of the API key in one place while using that key for multiple feeds (eg, a feed for a forecast and a feed for current conditions). Go into the WordPress dashboard and open Transform Instances -> Settings, then enter the following information:

Settings Pop-up

Replace “[API key here]” with the value of your API key. Click on “Update Setting” to save this setting; when we need to use this setting we’ll refer to it by its name, OpenWeatherMap_API_Key.

Create a Feed Type

Now open Transform Instances -> Feed Types and click the “Add New” button at the top of the page. We’ll be adding a new feed type which will unify our feeds and displays. Enter the following information into the pop-up window:

Feed Type Name: OpenWeatherMapAPI
Feed Type Description: OpenWeatherMap API
Feed Type MIME Type: application/json

The OpenWeatherMap API returns all data as a JSON structure which we’ll convert to HTML using a Dust template as described in the next step.

Add a New Dust Template

We now create a template that will be used to display the data from the OpenWeatherMap feed. Open Transform Instances -> Displays then click on the “Add New” button. Enter the following information into the pop-up window:

Feed Type: OpenWatherMapAPI
Display Name: Current Weather
Display Description: Current Weather
Display Type: Text
Text:

Current Weather for {name}

<div style="vertical-align: middle;">
 {#weather}
 <img src="http://openweathermap.org/img/w/{icon}.png" alt="{main}" style="float: left;" /><div style="font-size: large">{main}{/weather} and {main.temp}&#176;</div>
</div>

This display is plain text (as opposed to a URL or file path) that is a Dust display to show the name of the location, the icon for the current weather, a description of the current weather (eg, “Cloudy”) and the temperature.

Feed Me!

Now we create a feed that will use our API key to make a request for a feed from OpenWeatherMap.org. Open Transform Instances -> Feeds and click the “Add New” button. Enter the following information into the pop-up window:

Feed Type: OpenWeatherMapAPI
Feed Name: Current Weather for Augusta
Feed Description: Pulls the current weather for Augusta, ME from the OpenWeatherMaps API
Feed Source: Web
Feed URI: https://api.openweathermap.org/data/2.5/weather?id=4957003&APPID=${SETTING.OpenWeatherMap_API_Key}&units=imperial
Feed Method: GET

Note that the “Feed URI” sets APPID to ${SETTING.OpenWeatherMap_API_Key}; this is the value of our API Key setting. The “id” parameter is the ID for Augusta, ME and the “units” parameter returns temperatures in Imperial units. For more information about these and other parameters see the OpenWeatherMap API documentation.

Bring it Together: Feed and Instance

At this point we have a feed and a display so we can create a Transform instance that can be dropped in a page. Go to Transform Instances and click the “Add New” button at the top of the page. Name the instance “Current Weather for Augusta”, select the “Current Weather for Augusta” feed and the “Current Weather” display and click on the “Add New Instance” button. This new instance will be available to add to any page or post.

Drop the Instance on a Post or Page:

To add the instance, edit a page or post and click on the “Add a Transform” button. Select the “Current Weather for Augusta” instance and click the “Insert” button. The instance shortcode will be added to the page; if you click the “Update” button to publish your change and then view the page you should see the current weather for Augusta, ME:

Current Weather for Augusta
Clouds
Clouds and 44.87°