5 Minute Hack – UK Centres Online Map


…earlier today…

jaggeree twitter post...

Note the time: 11.20

A few minutes later, I posted this:

in reply...

Again, note the time: 11.26

So what happened in between..?

1) I clicked through on Chris’ tweet to get to A little thing to help UK Online/Rewired State hackday / Jul 23rd 2010,

2) copied a link from there (http://ukonline-fakeapi.appspot.com/?postcode=ec1a4dd) to a JSON feed for list of UKOnline centres in the vicinity of a postcode that was the little thing @jaggeree wrote to help the UK Online/Rewired State hackday on August 7th.

3) Went to Yahoo Pipes, created a new pipe, grabbed:
– a Fetch Data block that can parse a JSON feed,
– a Create URL block into which I pasted the link, which was then automatically parameterised for me,
– a Text Entry box for a postcode value
wired them together, and had a look at the output of the JSON feed:

UK Online centres - Pipe Web Address: http://pipes.yahoo.com/ouseful/ukonlinecentres

It was then easy enough to add a couple more blocks (a Loop block containing a Location Builder block) to geocode the address of each centre:

Geocoding an address in Yahop pipes

Note the trick. The trick is to assign the output of the location builder block to y:location, This allows pipes to work a bit of magic… if a pipe detects y:location.lat and y:location.lon elements in feed items, it will generate a map view over the output of the pipe, and a link to a KML output from the pipe…

To finish off, let’s just create a feed description element to carry the phone number, email and address of the centre, and set the link to be its web address…

UK Online centres pipe - finishing off

Here’s the replacement term in the regular expression:
Phone: ${phone}<br />Email: ${email}<br />Address: ${address}

And if we now to to the homepage for the pipe – http://pipes.yahoo.com/ouseful/ukonlinecentres:

UK online centres pipe http://pipes.yahoo.com/ouseful/ukonlinecentres

Note that link to the KML…? Grab a copy of that:

right-clik, copy link address

go over to http://maps.google.com, and paste the KML link into the search box… then hit Search Maps…

KML in google maps

(You can also load the KML feed into Google Earth…)

One in the Google Maps environment, we can now grab a link to the Google mapped UK Online centres by postcode, or an iFrame embed code (which can be customised….)

Grabbing a link to, or iframe code for, a google map

If you grab the iframe code and go to somewhere like Netvibes, you can add an HTML widget to your dashboard:

netvibes html widger

paste the embed code into the widget:

Embed code in Netvibes universal widget

and then view the map on your Netvibes page (you made need to tweak the size of the width and height attributes of the iframe…):

Map in Netvibes widget

So, what we have here is:
– @jaggeree’s API doing something magical and getting the data from somewhere…
– geocoding and KML publication via a Yahoo Pipe
– map rendering using Google maps
– display via Netvibes

And no coding… (at least, not by me…)

As ever, it has taken me far longer to write this post than in did to create the pipe and send the link back to @jaggeree…

PS the URL of the KML file that you can paste into the Google Maps search box has the form:
for the postcode MK7 6AA. To use your own postcode, just edit this URL, replacing the space with a +, or omit it altogether (mk76aa). So for example, for the postcode CB3 9BB we would use the URL:
(upper/lower case is irrelevant) and just paste the URL into the Google maps search box.

Author: Tony Hirst

I'm a Senior Lecturer at The Open University, with an interest in #opendata policy and practice, as well as general web tinkering...

4 thoughts on “5 Minute Hack – UK Centres Online Map”

Comments are closed.

%d bloggers like this: