Display a GPX Track on an OS Map


The Ordnance Survey now have a free map drawing system, similar to Google Maps, from http://openspace.ordnancesurvey.co.uk/  just request a free API key. As an example we have written a simple JavaScript program to display your GPX track on a map, e.g. http://osgb.ndrw.co.uk/gpx_track/gpx_track.html?test.gpx The tracks will be displayed on a 1:50000 scale map.

What is needed

  • A Web Site and Domain name.
  • An Ordnance Survey API key.
  • A GPS Unit, and a Data Cable.
  • Software to get a track from the GPS, e.g. G7ToWin (free ware).
  • To know how to upload files to your web site.

What do you need to do?

It is assumed you know how to create a GPX file of your track, if not G7ToWin is very simple to use, just upload the track from your GPS unit and Save As a GPX file.

There are just 3 files, a web page  gpx_track.html, and the JavaScript file gpx_track.js, and a test GPX file test.gpx download the zip file from here (23 KB)>/p>

Edit gpx_track.html, replace our API key with yours, if you want to modify the map size change the 600 values to a size you prefer:->/p>

<div id="map" style="width: 600px; height: 600px; border: 1px solid black;"></div>

That is it you have finished, unless you want to change some parts of the JavaScript file, but the default values will work for a test, the only lines that need changing are:-

var gbCheckTime = false;   // set to true to enable time checking
var gbDebug     = false;   // false to turn off debugging
var gTimeInc    = 20000;   // Milliseconds between way points


gbCheckTime A GPX track can have thousands of way points in it, to reduce the amount, which speeds up the drawing the track via your browser, set this to:-


It is recommended that this is used, I have my GPS set to save way points every 20 seconds, this considerably reduces the memory the GPS unit requires, and produces a much smaller GPX file. I tend to use my GPS when I am walking, in 20 seconds I have not walked very far.
gbDebug To output some debug info set this to:-


gTimeInc The time, in milliseconds, between way points.

The assumption is made that the track way points start from the earliest to the latest, sometimes this may not be the case. If you use G7toWin check that the first track element does not have today's date and time, if it is simply delete this element by right clicking on it.



Just add the full name of the GPX file after the question mark.


  • Make sure you have read the FAQ on the Ordnance Survey website.
  • GPX  time field 1s assumed to be in this format <time>2006-01-18T12:52:22Z</time>.
  • We are not JavaScript programmers, so please don't criticise our code! It is designed to be an example that you can use to write your own application.
  • It is assumed that a <Bounds> element is inŘhe GPX file, this is used to center the track onto the map, if G7toWin is used one will be in the GPX file.
  • JavaScript is notoriously browser dependent so it is possible it will not work on your browser/PC/Version of Windows, it has been tested with IE6, IE7 Opera (9.25, 9.26), the OS API works with Firefox but this JavaScript does not work very well if there are a large number of way points Firefox tends to grind to a halt. Also some version of Firefox insist the suffix of the file is .xml so a .gpx file will fail, simply rename it, and it will work!

Sample GPX File

The GPX file should look something like this, it is a text file so it can be viewed in any text editor.

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<gpx xmlns= ...>
    <link href="http://www.gpsinformation.org/ronh/g7towin.htm">
    <bounds minlat="53.33" minlon="-1.732" maxlat="53.36" maxlon="-1.64"/>
      <name>ACTIVE LOG</name>
      <type>Track black</type>
         <trkpt lat="53.330619335" lon="-1.661531925">
         <trkpt lat="53.330619335" lon="-1.661531925">

Custom Search