Using Ordnance Survey’s OpenSpace with WordPress

I recently started integrating maps on posts using the OpenSpace facility provided by the Ordnance Survey. After following the tutorial and messing about with the plug-in it mentions I gave up after hitting some limits and decided to roll my own manual approach. I thought I’d share the steps in case it might of interest to others. It works with the latest version of WordPress (3.5.2) on modern browsers but given how trivial it is, I wouldn’t expect problems with older versions of WP and browsers. It doesn’t need any other plug-ins, just the ability to make a trivial change to the functions.php file of your theme.

  1. In your WordPress theme edit the functions.php file and create a function as follows:

    function openSpace($attr, $content)
    {
    $result = ‘<iframe src=”‘ . $attr[“src”] . ‘” width=”600″ height=”500″ scrolling=”auto” frameborder=”1″></iframe>’;
    return $result;
    }

    This will just insert your map in an iframe of the given size: edit the dimensions to suit.

  2. Also in the functions.php file create a shortcode that uses it, as follows:
    add_shortcode('map', 'openSpace');
  3. Use the online MapBuilder application to create your map (make sure you login to ensure your API key gets used) and download the generated HTML to a file on your local machine (let’s call it Map.htm)
  4. Write a WordPress post and at the point you want the map use the Add Media option to upload the map HTML and insert it into the post. Switch to the HTML text view and you should see something like:
    <a href=”http://your-domain/wp-content/uploads/2013/06/Map.htm”>Map</a>
  5. Edit this to use the shortcode and strip out some junk leaving you with:
    [map src="/wp-content/uploads/2013/06/Map.htm"]
  6. Preview and admire your map.
  7. For further maps you just repeat using new names for the map files. (You only do the first two steps once, obviously.)

I hope this is of use to someone in incorporating the wonderful OS maps into your blog.