Jump to the following:

We use cookies to improve this website. Read about cookies

OS OpenSpace: Showing an Animated Route

Supplied by our customer BigMentor

The following is an example of an animated route using data collected from GPX Data Loggers and Route Finders. The contents have been saved as a GPX file then uploaded and reformatted into a database.

The script below shows the HTML element only:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Showing GPX file contents</title>


</head>
<body onload="init();" style="background:  #ffffcc;text-align: left;font-family: arial, helvetica, geneva, sans-serif;">
<table>
	<tr>
		<td colspan="3" align="center">
		<h1>Showing Animated Journey
		<BR>
		<% =cJourneyName %></h1>
		</td>
	</tr>
 
 
	<tr>
		<td width="400px">
		<input type="button" value="Click Here to Start the Journey" onClick="do_Step1();">
		</td>
 
 
		<td>
		      
		</td>
 
 
		<td width="400px">
		<input type="text" size="50" name="date_time" id="date_time" readonly="readonly">
		</td>
	</tr>
 
 
	<tr>
		<td width="400px">
		<input type="text" size="50" name="speed" id="speed" readonly="readonly">
		</td>
 
 
		<td>
		      
		</td>
 
 
		<td width="400px">
		<input type="text" size="50" name="elevation" id="elevation" readonly="readonly">
		</td>
	</tr>
</table>

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

<P>
<B>JOURNEY NOTES</B>
<hr size="3" color="blue">
<% =cNotes %>
<hr size="3" color="blue">

</body>
</html>

Now insert the JavaScript

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Showing GPX file contents</title>
<script type="text/javascript" 
    src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=insert your own key here"></script>
<script type="text/javascript">
 
    var osMap;
 
        var points = [];

        var style_green = {strokeColor: "#0000FF", strokeOpacity: 0.7, strokeWidth: 3, pointRadius: 3};

	var osMap;

    function init()
    {
        // Creates the map centered on OSHQ
        osMap = new OpenSpace.Map('map');
        osMap.setCenter(new OpenSpace.MapPoint(<% =cMapPoint %>), <% =cZoomNo %>);
        var vectorLayer = new OpenLayers.Layer.Vector("Vector Layer");
        osMap.addLayer(vectorLayer);


    }
 

  
<% =cVar %>



</script>
</head>
<body onload="init();" style="background:  #ffffcc;text-align: left;font-family: arial, helvetica, geneva, sans-serif;">
<table>
	<tr>
		<td colspan="3" align="center">
		<h1>Showing Animated Journey
		<BR>
		<% =cJourneyName %></h1>
		</td>
	</tr>
 
 
	<tr>
		<td width="400px">
		<input type="button" value="Click Here to Start the Journey" onClick="do_Step1();">
		</td>
 
 
		<td>
		      
		</td>
 
 
		<td width="400px">
		<input type="text" size="50" name="date_time" id="date_time" readonly="readonly">
		</td>
	</tr>
 
 
	<tr>
		<td width="400px">
		<input type="text" size="50" name="speed" id="speed" readonly="readonly">
		</td>
 
 
		<td>
		      
		</td>
 
 
		<td width="400px">
		<input type="text" size="50" name="elevation" id="elevation" readonly="readonly">
		</td>
	</tr>
</table>

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

<P>
<B>JOURNEY NOTES</B>
<hr size="3" color="blue">
<% =cNotes %>
<hr size="3" color="blue">
<script type="text/javascript">

	var theDTime = document.getElementById("date_time");
	var theSpeed = document.getElementById("speed");
	var theElevation = document.getElementById("elevation");
 
</script>

<img src="http://www.sst-counters.co.uk/counter1.asp?c_id=C464661">

</body>
</html>

Take a look at http://sst-maps.co.uk/SIMPLEanimRoute.asp and see it work.

You will notice that the extension is .ASP not .HTM or .HTML

.ASP stands for Active Server Page which is a WebPage that does some processing before it creates and serves the HTML script to the Internet Browser.

(.ASPX and .PHP are some of the other types of WebPages that do processing as well as .ASP)

Code content explanation

The SIMPLEanimRoute.asp page collects the "Header Information" and puts it into two Variables, they are:

cJourneyName

and

cNotes

The contents of those variables are inserted into the HTML script by:

and

It also creates a block of JavaScript in the cVar variable for each of the Route Points.

Have a look at the Source for http://sst-maps.co.uk/SIMPLEanimRoute.asp to see the blocks of JavaScript that have been created.

Have a look at http://sst-maps.co.uk/selectjourney.asp

Click on the help button for guidance.

If you are still baffled, a rambling video guide can be found at http://www.byerswritings.co.uk/talk06.htm

(Scroll down and use the second link)

We hope you find this useful

Back to top
© Ordnance Survey 2016
Be sure to take a look at our Terms of Use and Privacy Policy