From OS OpenData developer wiki
GB Trip DEV PRO
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>GB Trip DEV PRO</title>
<script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=INSERT YOUR API KEY HERE"></script>
<script type="text/javascript">
var osMap, points, features, gridProjection, currentPoint, startPt, endPt;
function init()
{
osMap = new OpenSpace.Map('map');
gridProjection = new OpenSpace.GridProjection();
currentPoint = 0;
points = [];
var doc = "gb_outline.gml";
loadGML(doc);
//var gml = new OpenLayers.Format.GML();
//points = gml.read(doc);
osMap.setCenter(new OpenSpace.MapPoint(528000, 178800), 1);
}
/**
* Method: loadGML
*/
function loadGML(url)
{
var results = OpenLayers.loadURL(url, null, this, requestSuccess, requestFailure);
}
/**
* Method: requestSuccess
* Process GML after it has been loaded.
* Called by initialise() and loadUrl() after the GML has been loaded.
*
* Parameters:
* request - {String}
*/
function requestSuccess(request)
{
var doc = request.responseXML;
if (!doc || request.fileType!="XML") {
doc = request.responseText;
}
var gml = new OpenLayers.Format.GML();
features = gml.read(doc);
OpenLayers.Console.log("features.length: " + features.length);
for (var i = 0; i < features.length; i++)
{
OpenLayers.Console.log("feature: ");
for (var j = 0; j < features[i].geometry.components.length; j++)
{
var point = features[i].geometry.components[j];
OpenLayers.Console.log("point: " + point.x + "," + point.y);
var lonlat = new OpenLayers.LonLat(point.x, point.y);
OpenLayers.Console.log("lonlat: " + lonlat.lon + "," + lonlat.lat);
var pt = gridProjection.getMapPointFromLonLat(lonlat);
OpenLayers.Console.log("pt: " + pt.getEasting() + "," + pt.getNorthing());
points.push(pt);
}
}
// Start the animation
doAnim();
};
function doAnim()
{
var thisPt = points[currentPoint % points.length];
var nextPt = points[(currentPoint + 1) % points.length];
currentPoint++;
//OpenLayers.Console.log("thisPt: " + thisPt.getEasting() + "," + thisPt.getNorthing());
//OpenLayers.Console.log("nextPt: " + nextPt.getEasting() + "," + nextPt.getNorthing());
animateBetween(thisPt, nextPt);
}
function animateBetween(thisPt, nextPt)
{
startPt = thisPt;
endPt = nextPt;
var dx = nextPt.getEasting() - thisPt.getEasting();
var dy = nextPt.getNorthing() - thisPt.getNorthing();
var dist = Math.sqrt(dx * dx + dy * dy);
//OpenLayers.Console.log("dist: " + dist);
var time = dist / 4;
// Set and override any options
var animOptions = { duration: time, onComplete: doAnim };
var anim = new Animator(animOptions);
//var func = OpenLayers.Function.bind(this.animatePanStep, this);
anim.addSubject(animateStep);
anim.play();
}
function animateStep(value)
{
var x = startPt.getEasting() + (endPt.getEasting() - startPt.getEasting()) * value;
var y = startPt.getNorthing() + (endPt.getNorthing() - startPt.getNorthing()) * value;
//OpenLayers.Console.log("step: " + x + "," + y);
osMap.setCenter(new OpenSpace.MapPoint(x, y),6);
}
/**
* Method: requestFailure
* Process a failed loading of GML.
* Called by initialise() and loadUrl() if there was a problem loading GML.
*
* Parameters:
* request - {String}
*/
function requestFailure(request)
{
alert("Error in loading GML file ");
};
</script>
</head>
<body onload="init()">
<div id="map" style="width: 600px; height: 400px; border: 1px solid black;">
</div>
</body>
</html>
