Create GPX Mark-up from a simple Route

From OS OpenData developer wiki

Share/Save/Bookmark
Jump to: navigation, search

Contents

Examples

OS OpenSpace Code Example

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Open Space Web-Map builder Code</title>
<!-- Download OpenSpace API using your key -->
<script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=insert_your_api_key_here"></script>
<script type= "text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/script/mapbuilder/basicmap.js"></script>
<script type="text/javascript">
//variables for routes
var linesLayer, points, lineFeature, lineString, routeMarkersLayer, routepos, routesize, routeoffset, routeicon;
var style_blue = {strokeColor: "#0000CD", strokeOpacity: 0.5, strokeWidth: 4.5};

function initmapbuilder()
{
//initiate the map
var options = {resolutions: [2500, 1000, 500, 200, 100, 50, 25, 10, 5, 4, 2.5, 2, 1]};
osMap = new OpenSpace.Map('map', options);

//set the center of the map and the zoom level
osMap.setCenter(new OpenSpace.MapPoint(468525,494585),6);
linesLayer = osMap.getVectorLayer();
// Set up layer for route markers
routeMarkersLayer = new OpenLayers.Layer.Markers("Route Markers");
//make a route
points = new Array();
points.push(new OpenLayers.Geometry.Point(468450,498910));
points.push(new OpenLayers.Geometry.Point(468525,497535));
points.push(new OpenLayers.Geometry.Point(468675,496835));
points.push(new OpenLayers.Geometry.Point(468900,496260));
points.push(new OpenLayers.Geometry.Point(469100,496110));
points.push(new OpenLayers.Geometry.Point(468925,495660));
points.push(new OpenLayers.Geometry.Point(469050,494910));
points.push(new OpenLayers.Geometry.Point(469250,494710));
points.push(new OpenLayers.Geometry.Point(469325,493935));
points.push(new OpenLayers.Geometry.Point(469475,492210));
// create a polyline feature from the array of points
lineString = new OpenLayers.Geometry.LineString(points);
lineFeature = new OpenLayers.Feature.Vector(lineString, null, style_blue);
linesLayer.addFeatures([lineFeature]);
osMap.addLayer(routeMarkersLayer);}
</script>
</head>
<body onload="initmapbuilder()">
<div id="map" style="border: 1px solid black; width:540px; height:440px;"></div>
</body>
</html>

OS OnDemand Code Example

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Open Space Web-Map builder Code</title>
<!-- Download OpenSpace API using your key -->
<script type="text/javascript" src="http://ondemandapi.ordnancesurvey.co.uk/osmapapi/openspace.js?key=insert_your_api_key_here"></script>
<script type= "text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/script/mapbuilder/basicmap.js"></script>
<script type="text/javascript">
//variables for routes
var linesLayer, points, lineFeature, lineString, routeMarkersLayer, routepos, routesize, routeoffset, routeicon;
var style_blue = {strokeColor: "#0000CD", strokeOpacity: 0.5, strokeWidth: 4.5};

function initmapbuilder()
{
//initiate the map
var options = {products: ["OV0", "OV1", "OV2", "MSR", "MS", "250KR", "250K", "50KR",  "50K", "VMDR", "VMD", "SVR", "SV"]};
osMap = new OpenSpace.Map('map',options);

//set the center of the map and the zoom level
osMap.setCenter(new OpenSpace.MapPoint(468525,494585),6);
linesLayer = osMap.getVectorLayer();
// Set up layer for route markers
routeMarkersLayer = new OpenLayers.Layer.Markers("Route Markers");
//make a route
points = new Array();
points.push(new OpenLayers.Geometry.Point(468450,498910));
points.push(new OpenLayers.Geometry.Point(468525,497535));
points.push(new OpenLayers.Geometry.Point(468675,496835));
points.push(new OpenLayers.Geometry.Point(468900,496260));
points.push(new OpenLayers.Geometry.Point(469100,496110));
points.push(new OpenLayers.Geometry.Point(468925,495660));
points.push(new OpenLayers.Geometry.Point(469050,494910));
points.push(new OpenLayers.Geometry.Point(469250,494710));
points.push(new OpenLayers.Geometry.Point(469325,493935));
points.push(new OpenLayers.Geometry.Point(469475,492210));
// create a polyline feature from the array of points
lineString = new OpenLayers.Geometry.LineString(points);
lineFeature = new OpenLayers.Feature.Vector(lineString, null, style_blue);
linesLayer.addFeatures([lineFeature]);
osMap.addLayer(routeMarkersLayer);}
</script>
</head>
<body onload="initmapbuilder()">
<div id="map" style="border: 1px solid black; width:540px; height:440px;"></div>
</body>
</html>

OS OpenSpace Pro Code Example

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Open Space Web-Map builder Code</title>
<!-- Download OpenSpace API using your key -->
<script type="text/javascript" src="http://openspacepro.ordnancesurvey.co.uk/osmapapi/openspace.js?key=insert_your_api_key_here"></script>
<script type= "text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/script/mapbuilder/basicmap.js"></script>
<script type="text/javascript">
//variables for routes
var linesLayer, points, lineFeature, lineString, routeMarkersLayer, routepos, routesize, routeoffset, routeicon;
var style_blue = {strokeColor: "#0000CD", strokeOpacity: 0.5, strokeWidth: 4.5};

function initmapbuilder()
{
//initiate the map
var options = {products: ["OV0", "OV1", "OV2", "MSR", "MS", "250KR", "250K", "50KR",  "50K", "VMDR", "VMD", "SVR", "SV"]};
osMap = new OpenSpace.Map('map',options);

//set the center of the map and the zoom level
osMap.setCenter(new OpenSpace.MapPoint(468525,494585),6);
linesLayer = osMap.getVectorLayer();
// Set up layer for route markers
routeMarkersLayer = new OpenLayers.Layer.Markers("Route Markers");
//make a route
points = new Array();
points.push(new OpenLayers.Geometry.Point(468450,498910));
points.push(new OpenLayers.Geometry.Point(468525,497535));
points.push(new OpenLayers.Geometry.Point(468675,496835));
points.push(new OpenLayers.Geometry.Point(468900,496260));
points.push(new OpenLayers.Geometry.Point(469100,496110));
points.push(new OpenLayers.Geometry.Point(468925,495660));
points.push(new OpenLayers.Geometry.Point(469050,494910));
points.push(new OpenLayers.Geometry.Point(469250,494710));
points.push(new OpenLayers.Geometry.Point(469325,493935));
points.push(new OpenLayers.Geometry.Point(469475,492210));
// create a polyline feature from the array of points
lineString = new OpenLayers.Geometry.LineString(points);
lineFeature = new OpenLayers.Feature.Vector(lineString, null, style_blue);
linesLayer.addFeatures([lineFeature]);
osMap.addLayer(routeMarkersLayer);}
</script>
</head>
<body onload="initmapbuilder()">
<div id="map" style="border: 1px solid black; width:540px; height:440px;"></div>
</body>
</html>
Retrieved from "http://osopenspacewiki.ordnancesurvey.co.uk/wiki/index.php?title=Create_GPX_Mark-up_from_a_simple_Route"
Personal tools
OS OpenData Content
OpenSpace and WMTS