Adding Weather Info to a Drupal Site

Apr 24, 2015

Recently I needed to upgrade the weather widgets for kingsmountainonline.com,  a community site that I had built several years ago. I am using the Weather Underground service for getting weather data for our local elementary school and a three days weather forecast. Weather Underground provides preconfigured flash-based Weather Stickers but they don’t work on tablets, so they needed to be replaced.

The site is build with Drupal 7 so I assumed that “there must be a module for that”. Indeed a module for the Weather Underground exists and it is called... Wunderground Weather. At the time of this writing, the module version is 7.x-1.10 and it has a problem finding personal weather stations. You’ll have to install this patch if you want to use weather data from a personal weather station.

 

Get a Weather Underground Account

Before you install the module you’ll need to create an account at the Weather Underground website. You can sign up for free. The free account allows 500 API calls a day and 10 calls per minute but doesn’t offer any history information. The free account is fine for our community site.

 

Installing the Module

Installing and setting up the module is easy. After the module is enabled - on the modules form admin/modules - click on the Help dropdown and select Configure. Put your API key in field Wunderground API key and enter all other settings. Enter the amount of blocks you like to get. Each block can show weather data for a different station.

Click Save configuration.

 

Setup the Weather Block

Now you can finish the setup for each block on the blocks page admin/structure/block. Find your blocks and click on the respective configure link.

On the block configuration page you can select what info will be displayed and what icon sets the display will use. Most importantly, you’ll need to input the location of the weather station. This is simple if you are looking for the weather in San Francisco for example. Type in San Francisco, ca and the input field will auto complete to

San Francisco, California [/q/zmw:94101.1.99999].

If you are looking for a personal weather station you'll need to input its ID. If you know the station ID, skip this paragraph, if not read on.

 

Getting a Personal Weather Station (PWS) ID

If you want to find out which personal weather stations are available in your area you can use a Weather Underground geo lookup. You can read all about it here.

In short, you can do a lookup for your zip code. For example, for all weather stations in the zip code area 94062, enter into a browser address bar:

http://api.wunderground.com/api/<your api key>/forecast/geolookup/conditions/q/CA/94062.json

As a response the browser will display a large JSON file. Look for the part where the Personal Weather Stations (PWS) are listed. Each PWS has an ID. Find your PWS, get the ID and continue…

"pws": {
    "station": [
        {
            "neighborhood":"Bear Gulch Road",
            "city":"Redwood City",
            "state":"CA",
            "country":"US",
            "id":"KCAREDWO54",
            "lat":37.404102,
            "lon":-122.280525,
            "distance_km":0,
            "distance_mi":0
        },
        {
            "neighborhood":"Skywoods - Skylonda",
            "city":"Woodside",
            "state":"CA",
            "country":"US",
            "id":"KCAWOODS25",
            "lat":37.387856,
            "lon":-122.269104,
            "distance_km":2,
            "distance_mi":1
        },
        {
            "neighborhood":"Woodside",
            "city":"Woodside",
            "state":"CA",
            "country":"US",
            "id":"KCAWOODS6",
            "lat":37.420151,
            "lon":-122.249001,
            "distance_km":2,
            "distance_mi":1
        },
        ...

 

Enter the PWD Location

In my case, the ID is KCAWOODS27. The field will auto complete to

KCAWOODS27, Kings Mtn Swett Rd Near Skyline, Woodside, CA, US [/q/zmw:94062.4.99999].

After saving the block I can place it anywhere on the site.

 

Check out kingsmountainonline.com for an example of what this looks like. You’ll see two blocks, one with the current weather and one with a three day forecast.

 

Thank you Weather Underground. 

Add new comment