Embedding an Ordnance Survey Map into a WordPress blog post

The government responded to the snappily titled Policy options for geographic information from Ordnance Survey consultation last week. One of the results of this is the opening up of the OS Open Space Application Programming Interface (API)

This means that lots of us will now have access to embed Ordnance Survey mapping into our blog posts. Just like I’ve done below, with the arrow pointing to Moseley Exchange. And to be honest it wasn’t too difficult to do.

First of all, I had to sign up for an API key. A handy hint here is to scroll down to the bottom of the sign up page to see if you can read the Captcha first. It caught me out a few times.

Secondly, I needed to find out how to produce a page that had a map centred on a point and with an arrow pointing to where I wanted it to go. To do that I went to the Open Space Developer area and copied the code from their first example.

I had to upload the resulting file into a directory on my web space in order to see it. What that meant was that I’d successfully copied the OS example and had a single web page, with their text and a map pointing to their building.

So next I wanted to change the map to point to where I wanted it. I could see that the Javascript that the OS provided included these lines

osMap.setCenter(new OpenSpace.MapPoint(407754, 287865), 10);
var markers = new OpenLayers.Layer.Markers(“Markers”);
osMap.addLayer(markers);
var pos = new OpenSpace.MapPoint(407754, 287865);

and so it seemed that the MapPoint(407754,287865) was the thing that I needed to change. Now I don’t have an OS map of Birmingham, so I was a bit stymied at this point. I asked on Twitter,

How do I convert a postcode to an OS reference?

and very quickly I had a response from @pezholio, who has built this rather nifty conversion utility on his UK Postcodes website.

So, I took Moseley Exchange’s postcode of B13 8JP and plugged it into the postcode converter and I got (407621, 283112). I changed both of the MapPoint related co-ordinates in the code quoted above. The first one of these is centring the map on the point and the second one is placing the marker there.

This means that I now have a map on a page which is now centred on Moseley Exchange. All I need to do now is to embed this into my blog post. Fortunately the forum on the OS site had a thread devoted to doing just this.

I downloaded and installed the Raw HTML plug in, disabled visual editing in WordPress – it is a user setting – and Disabled automatic paragraphs in the Raw HTML plug in settings.

And that was about it. I started a new post and copied the amended code into the WordPress editor and then started building this post around it.

And, if you’ve got this far you might just be interested to know that I’ll be talking about the recent OS Consultation and the government’s response to it at the Exchange on Monday, 12th April at 6.30 pm. Come along, it’ll be fun.