Well it’s taken me a while but we have an interactive Ordnance Survey map in the Tracks page showing the track locations and links to the relevant pages. View the map

Operation & Features – You can operate it by using the buttons in the top left, or click and drag with your mouse to pan and use the scroll wheel to zoom (while the cursor is over the map). Below the map a 6-figure grid reference of cursors current (or last) position is shown. Since the map zoom level can only go to 1:50,000 (1:50K), there is a link to open an OS Get-a-map(^TM) 1:25,000 (1:25K) using the Grid Reference from the centre of the map (that’s more detailed scale). On the map you should see red circles, these show the top of a track and clicking on them brings up small info note with a link to our Track page for it, two preview pictures and its ratings.

Limitations (Enter IE) – Having overcome many problems and ‘puzzling and puzzling ’til my puzzler was sore’, I finally got it working and then got it into the main part of the site (which was almost twice the work again). It works great in Firefox2, Firefox3 brings up a message about rendering (that one’s nothing to do with me) but should work fine, Internet Explorer 7 seems to show the map but not the red markers or route lines – UNLUCKY! – for now…
I have limited the map area to the Peak District, and the map system can only zoom to 1:50,000 (that’s the maps with red coloured rights of way), I also note more out dated than the 1:25K not showing some permissive bridleways and there’s no Open Access land.

Future Plans

• It wouldn’t be that hard to show a ride route and calculate the length automatically, so we’ll probably use it for showing the route when we plan a ride.
• Having a box to enter a grid reference would be useful and shouldn’t be too hard.
• It would cool to integrate the Google maps aerial view into the map.
• Letting members use it to post routes is potentially possible, but probably a long way off and there are already sites for that purpose using the same map technology.
• Write more Track pages so we can put more on the map!

How It Works – I didn’t write the map code, it uses the OS Openspace API which is a bit like Google maps, but it’s an OS map so it’s actually useful outside a town. It displays 9 tiles (map images) at a time (there is a limit to the number a site can use in a day) and it use Javascript.

A short tech guide to using OS Openspace in WordPress
I created a html version first from the examples on the OS Openspace site and got it working in that first. When I had markers with popups and then added lines I found the popups stopped working, this was because some of the examples are wrong eg:
var vectorLayer = new OpenLayers.Layer.Vector("Vector Layer");
osMap.addLayer(vectorLayer);
Since a vector layer has already created by default, it should be:
var vectorLayer = osMap.getVectorLayer();
For getting it into WordPress (which doesn’t like Javascript in posts and pages) I have the javascript in an external file and am calling it for one page using this method. Don’t forget to call the main OS hosted script first (using YOUR access key). But the call to main initialisation function has to come after the Map Div otherwise the it won’t see the Map Div. Using the Error Console in Firefox can help a lot with fault finding the problems. I got the very handy code for converting between 6 figure grid references from this well made map page.