OS Openspace maps with multiple routes in WordPress
Some time last year I was contacted by a client who wanted a website that would allow the display of some paths on Ordnance Survey maps. Ideally, the path and how it was displayed should be controllable from WordPress. This started me out on a bit of a voyage of discovery…
A bit of investigation led me to the Ordnance Survey Openspace API, I started out (optimistically?) looking to see if anyone else had already done something in this space and found Jon Lynch’s plugin which works great but is limited to a single route on a map. My client reckoned 50 or more routes (and this is now 222…). Something a bit different was clearly needed. Here’s what I ended up with…
Custom Post Type
I started off by creating a custom post type for paths, and creating a number of custom fields to hold a grid reference for a marker, a path status (used to define the colour of the route on the map), a link to an uploaded GPX file, and an optional link to a ‘detail’ page for the path. This allows a non-technical user to create and edit paths. Incidentally, this site is invaluable for creating GPX files.
Retrieving the data to display
I retrieved the data from the database by adding a custom function to functions.php. This loops through all the paths, and returns the path data as an array. I then created a new page template for the map pages which sets the map cantre, and calls the custom function to echo the array into the Openspace javascript using json_encode(). The different path stylings are defined and then applied to each path.
This worked fine for relatively small numbers of paths, but beyond 39 paths iPads refused to display them (fine at 38, no dice at 39). Big thumbs up here for the Openspace support team, who recreated the problem and identified the cause as being related to the number of ajax calls to retrieve the path GPX files – this is the way the Openspace API works. Head scratching time again…
Now, I was never really happy with the number of calls to display the page (although it worked flawlessly on my laptop), and the solution was to combine the path GPX files into a single GPX file for each path status. I added another custom function which fires when a path is saved, which reads the creates a single GPX file by combining all the individual GPX file contents into a single file. Consequently the map page only has to make 3 ajax calls for GPX files instead of 200+, and iPads play nicely again.
So can I see it working then?
Yes.