var osMap, lgpx;
// This function creates the map and is called by the div in the HTML
function init()
{
// Create new map
osMap = new OpenSpace.Map('map');
// Set map centre in National Grid Eastings and Northings and select zoom level 7
osMap.setCenter(new OpenSpace.MapPoint(392905, 433010), 7);
// Load the gpx route as a new GPX OpenLayers layer
lgpx = new OpenLayers.Layer.GML("gpx", "/res/gpxroute.gpx", {
format: OpenLayers.Format.GPX,
style: {strokeColor: "blue", strokeWidth: 3, strokeOpacity: 1},
projection: new OpenLayers.Projection("EPSG:4326")
});
// Add the gpx layer to the map
osMap.addLayer(lgpx);
}
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset="utf-8">
<title>Add a. gpx (GPS route) file</title>
<!-- Remember to insert your own API key in the URL below -->
<script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=FFF3760C96A84469E0430C6CA40A1131"></script>
<!-- If you use OS OpenSpace Pro or OS OnDemand WMTS then use the relevant following URL instead:
OS OpenSpace Pro - <script type="text/javascript" src="http://osopenspacepro.ordnancesurvey.co.uk/osmapapi/openspace.js?key=INSERT_YOUR_API_KEY_HERE"></script>
OS OnDemand WMTS - <script type="text/javascript" src="http://ondemandapi.ordnancesurvey.co.uk/osmapapi/openspace.js??key=INSERT_YOUR_API_KEY_HERE"></script>
-->
<style>
html, body {height: 100%;}
#map {width: 700px; height: 500px; border:1px solid black;}
</style>
</head>
<body onload="init()">
<h2>Add a .gpx (GPS route) file</h2>
<!-- The div below holds the map -->
<div id="map"></div>
</body>
</html>