Because I needed one for various (non-profit) projects of my own, I’ve put together a small Postcode geocoding web service which collates partial data from various sources into what aims to be a full geocoder / reverse geocoder for UK postcodes.

Now, the term ‘geocoding’ can mean several very subtly different things depending on who you talk to. So to clarify, this is what the web service does.

1. It takes a full UK postcode
2. It returns a geographical location (lat/lng and optionally os/landranger grid references)
3. It also attempts to reverse geocode the street address via the Google Maps API (experimental)

Isn’t that Illegal?

Not anymore. Ordnance Survey have open sourced huge chunks of their data. This includes their CodePoint file which contains the coordinates of every single UK postcode.

Usage

There’s nothing complicated involved in calling the service. Simply make an HTTP request in the following format, where SW1A 2AA is your postcode; or more accurately that of 10 Downing Street.

Get the data in XML format
http://geo.jamiethompson.co.uk/SW1A2AA.xml

<result>
  <status>200</status>
  <postcode>SW1A 2AA</postcode>
  <geo>
    <os_x>530047</os_x>
    <os_y>179951</os_y>
    <lat>51.50354</lat>
    <lng>-0.127696</lng>
    <landranger>TQ300799</landranger>
    <accuracy>1</accuracy>
  </geo>
  <address>
    <street>Downing St</street>
    <locality>London</locality>
    <district>Westminster</district>
    <county>Greater London</county>
  </address>
</result>

The data is also available as JSON
http://geo.jamiethompson.co.uk/SW1A2AA.json

{
   "status":200,
   "postcode":"SW1A 2AA",
   "geo":{
      "os_x":"530047",
      "os_y":"179951",
      "lat":"51.50354",
      "lng":"-0.127696",
      "landranger":"TQ300799",
      "accuracy":"1"
   },
   "address":{
      "street":"Downing St",
      "locality":"London",
      "district":"Westminster",
      "county":"Greater London"
   }
}

and additionally as JSONP by specifying a callback
http://geo.jamiethompson.co.uk/SW1A2AA.json?callback=doStuff

Things You Should be Aware of

The data returned should be pretty self documenting but there’s a few things you should be aware of.

Although, more often than not you will receive a full dataset. The only guaranteed values are lat and lng. All other values of geo are optional. Additionally to this, if the accuracy level of a result is 2 then the coordinates relate to the broader postcode area rather than the postcode itself. An accuracy 2 result for the postcode JE3 8FA* will return the centre point of the JE3 8 area.

* All channel island postcodes are returned at accuracy level 2

Northern Ireland (BTXX XXX) postcodes don’t return ordnance survey osgrid coords. Lat/lng values however are accurate to level 1.

A final word

This is an experimental web service. Please don’t hammer it for anything humongous or commercial. The reverse geocoding is experimental and cannot be relied upon for anything super-serious at the moment. If you need this data commercially please do yourself (and me) a favour and check out the reasonably priced services offered by the likes of AFD (which I can personally recommend) or PostcodeAnywhere

Partly because I wanted to make something using the Twitter Search API, and partly because I wanted to do something relatively easy in PHP after spending far too long working with ASP, and because I hate Internet Explorer, I created icanhazrealbrowser.com

The site uses Twitter’s Search API to keep track of anyone ‘hating on’ Internet Explorer. These ‘disses’ are collated into a real-time compendium of hate.

It’s far from perfect, and produces a few false positives here and there, but it’s just a bit of fun.

Maybe someone will enjoy it.

Rick recently asked me help out with the redesign of the G&G Motorsport site. The task? An Ajax powered drop-down inline contact form available from any page. The solution? jQuery.

G&G Motorsports is an independent company specialising in the supply, fitting and calibration of engine control systems. The new site needed to serve up news, event and product information in a slick and stylish way, so a clunky old-school contact form just wasn’t going to cut the mustard.

To progressively enhance Rick’s custom Wordpress install , yet at the same time keep things simple, the contact anchors begin as simple mailtos which will always be available in the absence of JavaScript. jQuery is then used to attach some onclick events which show the hidden contact form with a slideDown effect.

The form itself is submitted via an Ajax callback to a standalone custom php script which receives and validates the form data, asynchronously serving a response back to the $.post callback which is then displayed in real-time to the user.

The new site can be seen on ggmotorsport.co.uk, or you can read more about the redesign over at ricknunn.com

Syndication Feeds

Since the beginning of time citynoise.org has had an RSS 0.91 feed, and a broken one at that, but the most recent upgrade has provided solid and stable feeds in a variety of formats including RRS 1.0, RSS 2.0 and ATOM. On top of this Peter has implemented a nice Twitter feed using… um twitterfeed

The old RSS URL points at the new RSS 0.91 feed so there’s no need to update your bookmarks/aggregator/whatever. Unless you want to.

Namespaces and hackable URLS

An important part of any social site IMO is the URL scheme. Hackable urls, that is URLS which the user can inuitively modify to navigate the site in a way which suits them, are integral to this. To this end the “articles by location” pages which were previously in the format

http://citynoise.org/hood/london@uk

are now in the format

http://citynoise.org/place/uk/london
This makes it much more obvious that the URLs are ‘hackable’ in that you can remove the ‘london’ segment and use http://citynoise.org/place/uk to view all articles in the UK.

All pages are still available at their old “hood” addresses for backwards compatibility.

Climbing The Technorati Tree

Every new post is now automatically submitted to Technorati and a handful of other aggregators. This should ensure maximum exposure for new posts especially if they’re tagged correctly. The next step here would be ensuring posters tag their posts adequately. It makes all the difference.

[[wiki:topic here]] style Wikipedia links also now configured to work as tags within the ‘blogosphere’, though this isn’t yet detailed anywhere on the site.

More to come soon…

Currently it’s a work in progress and utilizes an extended version of Stewart’s Dynamic Heading Generator PHP script. The plugin will attempt to replace the text of an element such as a heading with text generated in a specified font in the same colour and size as specified in the CSS. It will generate one image per word allowing word-wrap to occur.

There is currently a known issue with IE (all versions) when using jitr with em based font sizes. Internet Explorer reports a size which does not represent the equivalent font size in pixels.

Syntax:

jitr(String fontfilename, String backgroundColor)

jitr returns the jQuery object so that it can be chained.

There is currently however one major part of the process which lies outside of the plugin. To avoid a flicker of unstyled content on document.ready, it is necessary to include a stylesheet (hide.css) which sets the elements which are to be replaced to have ‘visibility: hidden’. As each element is image replaced, it’s CSS visibility is reset to visible.

Example hide.css

h1, h2, h3 {
	visibility:hidden;
}

Simply including this stylesheet in the head would have adverse side-effects for visitors without JavaScript though. The CSS above would hide all the headings and the plugin, not being run, would not then reset them to visible. I have decided for the time being that the only solution i can see which will work, although slightly clunky is to use a document.write to include hide.css only when JavaScript is enabled.

<script type="text/javascript">
    document.write('<link rel="stylesheet" href="/path/to/hide.css" ' +
    'type="text/css" media="screen" />');
</script>

Of course, had I bothered to test it at all using Safari I might have noticed it myself. But that’s not the point. So, thanks Rickzor.

So, the problem is that the plugin, when run through Safari, is failing to determine a background colour resulting in the images being anti-aliased onto black.

The function gpc which handles the determination of background-color is supposed to walk back up the DOM starting from the parent element all the way back up to html. I’ll have to look into why this doesn’t occur corectly in Safari.

The Code

function gpc(node) {
for ( ; node && node.nodeName.toLowerCase() !=
'html'; node = node.parentNode ) {
var v = jQuery.css(node,'backgroundColor');
if ( v.indexOf('rgb') >= 0 ) {
rgb = v.match(/\d+/g);
return hex2(rgb[0]) + hex2(rgb[1]) + hex2(rgb[2]);
}
if ( v && v != 'transparent' )
return v;
}
return 'ffffff';
};
The very same problem has in fact already been noticed by Dave Methvin of jQuery Corner, who suggests explicity setting a background-color on the parent element.

Of course, this isn’t ideal, and in some cases setting a background colour is not possible. To workaround this i’m planning on modifying the plugin to allow you to pass an explicit background colour at runtime if necessary, which will override the colour obtained from the DOM. This would also have the added benefit of allowing you to fine tune the antialiasing when the text being replaced sits above a background image.

stuartalansigns.com

Stuartalansigns.com was developed in pure XHTML/CSS on a simple PHP backend. It also utilses some basic SEO techniques.

Unobtrusive JavaScript ‘lightbox’ style image galleries were employed to meet the clients need to add large numbers of photos in an elegant and well thought out manner.