5 Minute Hack – UK Centres Online Map

So…

…earlier today…

Note the time: 11.20

A few minutes later, I posted this:

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:

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:

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…

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:

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

go over to http://maps.google.com, and paste the KML link into the search box… then hit Search 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….)

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

paste the embed code into the 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…):

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:
http://pipes.yahoo.com/ouseful/ukonlinecentres?_render=kml&postcode=mk7+6aa
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:
http://pipes.yahoo.com/ouseful/ukonlinecentres?_render=kml&postcode=CB3+9BB
or
http://pipes.yahoo.com/ouseful/ukonlinecentres?_render=kml&postcode=CB39BB
(upper/lower case is irrelevant) and just paste the URL into the Google maps search box.