Snip
|
Take a trip around Great Britain's coast line
|
|---|
Categories |
|
|---|
For Snip |
loading snip actions ... |
|---|---|
For Page |
loading url actions ... |
Take a trip around Great Britain's coast line
From OS OpenSpace developer wiki
<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>
HTML |
<h1 id="firstHeading" class="firstHeading">Take a trip around Great Britain's coast line</h1> <div id="bodyContent"> <h3 id="siteSub">From OS OpenSpace developer wiki</h3> <div id="contentSub"></div> <div id="jump-to-nav">Jump to: <a href="#column-one">navigation</a>, <a href="#searchInput">search</a></div> <!-- start content --> <p> <script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=6694613F8B469C97E0405F0AF160360A"></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), 3); } /** * 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> </p><div class="olMap" id="map" style="width: 600px; height: 400px; border: 1px solid black;"> <div class="olMapViewport olControlDragPanActive olControlZoomBoxActive olControlNavigationActive olControlKeyboardDefaultsActive" style="position: relative; overflow: hidden; width: 100%; height: 100%;" id="map_OpenLayers_ViewPort"><div style="position: absolute; z-index: 749; left: 11792px; top: 20496px;" id="map_OpenLayers_Container"><div class="olLayerDiv" dir="ltr" style="position: absolute; width: 100%; height: 100%; z-index: 100;" id="OpenSpace.Layer.WMS_26"><div style="overflow: hidden; position: absolute; z-index: 1; left: -11950px; top: -20185px; width: 200px; height: 200px;"><img src="http://openspace.ordnancesurvey.co.uk/osmapapi/ts?FORMAT=image%2Fpng&KEY=6694613F8B469C97E0405F0AF160360A&URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&EXCEPTIONS=application%2Fvnd.ogc.se_inimage&LAYERS=25&SRS=EPSG%3A27700&BBOX=145000,605000,150000,610000&WIDTH=200&HEIGHT=200" class="olTileImage" style="width: 200px; height: 200px; position: relative; background-color: transparent;" id="OpenLayersDiv243"></div><div style="overflow: hidden; position: absolute; z-index: 1; left: -11350px; top: -20185px; width: 200px; height: 200px;"><img src="http://openspace.ordnancesurvey.co.uk/osmapapi/ts?FORMAT=image%2Fpng&KEY=6694613F8B469C97E0405F0AF160360A&URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&EXCEPTIONS=application%2Fvnd.ogc.se_inimage&LAYERS=25&SRS=EPSG%3A27700&BBOX=160000,605000,165000,610000&WIDTH=200&HEIGHT=200" class="olTileImage" style="width: 200px; height: 200px; position: relative; background-color: transparent;" id="OpenLayersDiv245"></div><div style="overflow: hidden; position: absolute; z-index: 1; left: -11550px; top: -20185px; width: 200px; height: 200px;"><img src="http://openspace.ordnancesurvey.co.uk/osmapapi/ts?FORMAT=image%2Fpng&KEY=6694613F8B469C97E0405F0AF160360A&URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&EXCEPTIONS=application%2Fvnd.ogc.se_inimage&LAYERS=25&SRS=EPSG%3A27700&BBOX=155000,605000,160000,610000&WIDTH=200&HEIGHT=200" class="olTileImage" style="width: 200px; height: 200px; position: relative; background-color: transparent;" id="OpenLayersDiv247"></div><div style="overflow: hidden; position: absolute; z-index: 1; left: -11550px; top: -20585px; width: 200px; height: 200px;"><img src="http://openspace.ordnancesurvey.co.uk/osmapapi/ts?FORMAT=image%2Fpng&KEY=6694613F8B469C97E0405F0AF160360A&URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&EXCEPTIONS=application%2Fvnd.ogc.se_inimage&LAYERS=25&SRS=EPSG%3A27700&BBOX=155000,615000,160000,620000&WIDTH=200&HEIGHT=200" class="olTileImage" style="width: 200px; height: 200px; position: relative; background-color: transparent;" id="OpenLayersDiv249"></div><div style="overflow: hidden; position: absolute; z-index: 1; left: -11350px; top: -20585px; width: 200px; height: 200px;"><img src="http://openspace.ordnancesurvey.co.uk/osmapapi/ts?FORMAT=image%2Fpng&KEY=6694613F8B469C97E0405F0AF160360A&URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&EXCEPTIONS=application%2Fvnd.ogc.se_inimage&LAYERS=25&SRS=EPSG%3A27700&BBOX=160000,615000,165000,620000&WIDTH=200&HEIGHT=200" class="olTileImage" style="width: 200px; height: 200px; position: relative; background-color: transparent;" id="OpenLayersDiv251"></div><div style="overflow: hidden; position: absolute; z-index: 1; left: -11950px; top: -20585px; width: 200px; height: 200px;"><img src="http://openspace.ordnancesurvey.co.uk/osmapapi/ts?FORMAT=image%2Fpng&KEY=6694613F8B469C97E0405F0AF160360A&URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&EXCEPTIONS=application%2Fvnd.ogc.se_inimage&LAYERS=25&SRS=EPSG%3A27700&BBOX=145000,615000,150000,620000&WIDTH=200&HEIGHT=200" class="olTileImage" style="width: 200px; height: 200px; position: relative; background-color: transparent;" id="OpenLayersDiv253"></div><div style="overflow: hidden; position: absolute; z-index: 1; left: -11750px; top: -20585px; width: 200px; height: 200px;"><img src="http://openspace.ordnancesurvey.co.uk/osmapapi/ts?FORMAT=image%2Fpng&KEY=6694613F8B469C97E0405F0AF160360A&URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&EXCEPTIONS=application%2Fvnd.ogc.se_inimage&LAYERS=25&SRS=EPSG%3A27700&BBOX=150000,615000,155000,620000&WIDTH=200&HEIGHT=200" class="olTileImage" style="width: 200px; height: 200px; position: relative; background-color: transparent;" id="OpenLayersDiv255"></div><div style="overflow: hidden; position: absolute; z-index: 1; left: -11750px; top: -20185px; width: 200px; height: 200px;"><img src="http://openspace.ordnancesurvey.co.uk/osmapapi/ts?FORMAT=image%2Fpng&KEY=6694613F8B469C97E0405F0AF160360A&URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&EXCEPTIONS=application%2Fvnd.ogc.se_inimage&LAYERS=25&SRS=EPSG%3A27700&BBOX=150000,605000,155000,610000&WIDTH=200&HEIGHT=200" class="olTileImage" style="width: 200px; height: 200px; position: relative; background-color: transparent;" id="OpenLayersDiv257"></div><div style="overflow: hidden; position: absolute; z-index: 1; left: -11750px; top: -20385px; width: 200px; height: 200px;"><img src="http://openspace.ordnancesurvey.co.uk/osmapapi/ts?FORMAT=image%2Fpng&KEY=6694613F8B469C97E0405F0AF160360A&URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&EXCEPTIONS=application%2Fvnd.ogc.se_inimage&LAYERS=25&SRS=EPSG%3A27700&BBOX=150000,610000,155000,615000&WIDTH=200&HEIGHT=200" class="olTileImage" style="width: 200px; height: 200px; position: relative; background-color: transparent;" id="OpenLayersDiv259"></div><div style="overflow: hidden; position: absolute; z-index: 1; left: -11950px; top: -20385px; width: 200px; height: 200px;"><img src="http://openspace.ordnancesurvey.co.uk/osmapapi/ts?FORMAT=image%2Fpng&KEY=6694613F8B469C97E0405F0AF160360A&URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&EXCEPTIONS=application%2Fvnd.ogc.se_inimage&LAYERS=25&SRS=EPSG%3A27700&BBOX=145000,610000,150000,615000&WIDTH=200&HEIGHT=200" class="olTileImage" style="width: 200px; height: 200px; position: relative; background-color: transparent;" id="OpenLayersDiv261"></div><div style="overflow: hidden; position: absolute; z-index: 1; left: -11350px; top: -20385px; width: 200px; height: 200px;"><img src="http://openspace.ordnancesurvey.co.uk/osmapapi/ts?FORMAT=image%2Fpng&KEY=6694613F8B469C97E0405F0AF160360A&URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&EXCEPTIONS=application%2Fvnd.ogc.se_inimage&LAYERS=25&SRS=EPSG%3A27700&BBOX=160000,610000,165000,615000&WIDTH=200&HEIGHT=200" class="olTileImage" style="width: 200px; height: 200px; position: relative; background-color: transparent;" id="OpenLayersDiv263"></div><div style="overflow: hidden; position: absolute; z-index: 1; left: -11550px; top: -20385px; width: 200px; height: 200px;"><img src="http://openspace.ordnancesurvey.co.uk/osmapapi/ts?FORMAT=image%2Fpng&KEY=6694613F8B469C97E0405F0AF160360A&URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&EXCEPTIONS=application%2Fvnd.ogc.se_inimage&LAYERS=25&SRS=EPSG%3A27700&BBOX=155000,610000,160000,615000&WIDTH=200&HEIGHT=200" class="olTileImage" style="width: 200px; height: 200px; position: relative; background-color: transparent;" id="OpenLayersDiv265"></div></div><div class="olLayerDiv" dir="ltr" style="position: absolute; width: 100%; height: 100%; z-index: 330; left: -11792px; top: -20496px;" id="OpenLayers.Layer.Vector_53"><svg viewBox="0 0 600 400" height="400" width="600" id="OpenLayers.Layer.Vector_53_svgRoot"><g transform="translate(7056.54, 7608.87)" style="visibility: visible;" id="OpenLayers.Layer.Vector_53_root"><g id="OpenLayers.Layer.Vector_53_vroot"></g><g id="OpenLayers.Layer.Vector_53_troot"></g></g></svg></div><div class="olLayerDiv" dir="ltr" style="position: absolute; width: 100%; height: 100%; z-index: 335;" id="OpenLayers.Layer.Markers_55"></div></div><div unselectable="on" class="OpenSpaceControlCopyrightCollection olControlNoSelect" style="position: absolute; overflow: hidden; z-index: 1005;" id="OpenSpace.Control.CopyrightCollection_10"><p>© Crown copyright and database rights 2010 <span style="white-space: nowrap;">Ordnance Survey.</span> <span style="white-space: nowrap;"><a href="http://openspace.ordnancesurvey.co.uk/openspace/developeragreement.html#enduserlicense" target="_blank">End User Licence Agreement</a></span></p></div><div style="position: absolute; z-index: 1005;" id="OpenSpaceControlPoweredBy"><img src="http://openspace.ordnancesurvey.co.uk/osmapapi/img_versions/img_1.1/OS/poweredby.png" style="position: relative;" id="OpenSpaceControlPoweredBy_innerImage"></div><div unselectable="on" class="olControlArgParser olControlNoSelect" style="position: absolute; z-index: 1005;" id="OpenLayers.Control.ArgParser_12"></div><div unselectable="on" class="OpenSpaceControlLargeMapControl olControlNoSelect" style="position: absolute; left: 4px; top: 4px; z-index: 1006;" id="OpenSpace.Control.LargeMapControl_28"><div style="position: absolute; left: 20px; top: 21px; width: 29px; height: 27px;" id="OS_Control_Pan_bkg"><img src="http://openspace.ordnancesurvey.co.uk/osmapapi/img_versions/img_1.1/OS/control/pan-o.png" style="position: relative; width: 29px; height: 27px;" id="OS_Control_Pan_bkg_innerImage"></div><div style="position: absolute; left: 20px; top: 0px; width: 29px; height: 21px;" id="OpenSpace.Control.LargeMapControl_28_panup"><img src="http://openspace.ordnancesurvey.co.uk/osmapapi/img_versions/img_1.1/OS/control/pan-n.png" style="position: relative; width: 29px; height: 21px;" id="OpenSpace.Control.LargeMapControl_28_panup_innerImage"></div><div style="position: absolute; left: 49px; top: 21px; width: 20px; height: 27px;" id="OpenSpace.Control.LargeMapControl_28_panright"><img src="http://openspace.ordnancesurvey.co.uk/osmapapi/img_versions/img_1.1/OS/control/pan-e.png" style="position: relative; width: 20px; height: 27px;" id="OpenSpace.Control.LargeMapControl_28_panright_innerImage"></div><div style="position: absolute; left: 20px; top: 48px; width: 29px; height: 20px;" id="OpenSpace.Control.LargeMapControl_28_pandown"><img src="http://openspace.ordnancesurvey.co.uk/osmapapi/img_versions/img_1.1/OS/control/pan-s.png" style="position: relative; width: 29px; height: 20px;" id="OpenSpace.Control.LargeMapControl_28_pandown_innerImage"></div><div style="position: absolute; left: 0px; top: 21px; width: 20px; height: 27px;" id="OpenSpace.Control.LargeMapControl_28_panleft"><img src="http://openspace.ordnancesurvey.co.uk/osmapapi/img_versions/img_1.1/OS/control/pan-w.png" style="position: relative; width: 20px; height: 27px;" id="OpenSpace.Control.LargeMapControl_28_panleft_innerImage"></div><div style="position: absolute; left: 17px; top: 74px; width: 35px; height: 34px;" id="OpenSpace.Control.LargeMapControl_28_zoomin"><img src="http://openspace.ordnancesurvey.co.uk/osmapapi/img_versions/img_1.1/OS/control/zoom-in.png" style="position: relative; width: 35px; height: 34px;" id="OpenSpace.Control.LargeMapControl_28_zoomin_innerImage"></div><div id="OpenLayers_Control_PanZoomBar_ZoombarOpenLayers.Map_13" style="background-image: url("http://openspace.ordnancesurvey.co.uk/osmapapi/img_versions/img_1.1/OS/control/zoom-scale.png"); left: 23px; top: 104px; width: 22px; height: 132px; position: absolute;"></div><div style="position: absolute; left: 12px; top: 149px; width: 44px; height: 17px;" id="OpenLayers_Control_PanZoomBar_SliderOpenLayers.Map_13"><img src="http://openspace.ordnancesurvey.co.uk/osmapapi/img_versions/img_1.1/OS/control/zoom-pointer.png" style="position: relative; width: 44px; height: 17px;" id="OpenLayers_Control_PanZoomBar_SliderOpenLayers.Map_13_innerImage"></div><div style="position: absolute; left: 17px; top: 229px; width: 35px; height: 34px;" id="OpenSpace.Control.LargeMapControl_28_zoomout"><img src="http://openspace.ordnancesurvey.co.uk/osmapapi/img_versions/img_1.1/OS/control/zoom-out.png" style="position: relative; width: 35px; height: 34px;" id="OpenSpace.Control.LargeMapControl_28_zoomout_innerImage"></div></div></div></div> <pre><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> </pre></div> |
|---|
