Building on Datapoint: Weather With Icons

I wrote the other day about the new datapoint API from the MetOffice (there were some great links to other weather APIs in the comments, if you like weather). I’ve been using it to create a detailed forecast of the weather over the next few days, mixing in some lovely weather icons by Adam Whitcroft, from The Noun Project (the same site that the icons on my own site came from) – so I have something like this for each kind of weather:


To achieve this, I hit the datapoint API from PHP (but if you use any other scripting language this should be easy enough to follow):


$leeds_site_id = '352241';
$fcast_url = '' . $leeds_site_id . '?res=3hourly&amp;key=' . $api_key;
$fcast = json_decode(file_get_contents($fcast_url), true);
foreach($fcast&#91;'SiteRep'&#93;&#91;'DV'&#93;&#91;'Location'&#93;&#91;'Period'&#93; as $day) {
    $fdate = new DateTime($day&#91;'value'&#93;);
    echo $fdate-&gt;format('D jS M') . "\n";;
    foreach($day&#91;'Rep'&#93; as $slot) {
        if($slot&#91;'$'&#93; &gt; 0) {
            // makes 3, 12 into 0300 and 1200 respectively
            echo str_pad(($slot&#91;'$'&#93; / 60) . "00", 4, "0", STR_PAD_LEFT);
        } else {
            // avoid divide by zero
            echo "0000";
        echo ": "
            . "<img src="images/" />&nbsp;"
            . $weathers[$slot['W']] . "<br />\n";

// lovely nounproject icons need some attribution
echo $attr;

I live in Leeds so I’ve used the site_id for that city (annoyingly they don’t seem to document them, just request all locations for one time period and then grab whichever one you want is my advice). When you build the URL like this, the response is in JSON format so I convert that quickly to an array and then foreach over the various forecasts. One challenge is figuring out what time the forecast relates to, I’m certain this can’t be the most elegant solution but it does seem to work!

I also added pretty images, by taking the list of weather types and grabbing some icons to work with those. So my HTML output ends up (not styled because I’m pasting it into the middle of my blog, but you get the idea) looking like this:

Tue 18th Dec
1500:  Overcast
1800:  Cloudy
2100:  Cloudy
Wed 19th Dec
0000:  Mist
0300:  Overcast
0600:  Overcast
0900:  Overcast
1200:  Overcast
1500:  Heavy rain
1800:  Heavy rain
2100:  Heavy rain
Thu 20th Dec
0000:  Heavy rain
0300:  Heavy rain
0600:  Heavy rain
0900:  Heavy rain
1200:  Light rain
1500:  Heavy rain
1800:  Light rain
2100:  Overcast
Fri 21st Dec
0000:  Cloudy
0300:  Cloudy
0600:  Cloudy
0900:  Cloudy
1200:  Cloudy
1500:  Partly cloudy (day)
1800:  Partly cloudy (night)
2100:  Partly cloudy (night)
Sat 22nd Dec
0000:  Cloudy
0300:  Cloudy
0600:  Cloudy
0900:  Light rain
1200:  Heavy rain
1500:  Heavy rain
1800:  Light rain
2100:  Light rain
Icons by Adam Whitcroft, from The Noun Project

This is a nice way of illustrating one of the data fields that comes from the datapoint API, and I love the excellent icons, they are wonderfully clear and well made (most of the icons on this site are noun project icons). In fact you could use any of the various data points with any output mechanism you please … my next datapoint post will probably be about how I use this data with my blink(1) :)

One thought on “Building on Datapoint: Weather With Icons

Leave a Reply

Please use [code] and [/code] around any source code you wish to share.

This site uses Akismet to reduce spam. Learn how your comment data is processed.