login/register

Snip!t from collection of Alan Dix

see all channels for Alan Dix

Snip
summary

Take a trip around Great Britain's coast line
From OS OpenSpace developer wiki
Jump to: navigation, search
© Crown copyright and database rights 2010 Ordnance Sur ...
... </html>

Take a trip around Great Britain's coast line - OS OpenSpace developer wiki
http://osopenspacewiki.ordnancesurvey.co.uk/wiki/index.php?...

Categories

/Channels/techie/open data

[ go to category ]

For Snip

loading snip actions ...

For Page

loading url actions ...

Take a trip around Great Britain's coast line

From OS OpenSpace developer wiki

Jump to: navigation, search

© Crown copyright and database rights 2010 Ordnance Survey.   End User Licence Agreement

<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&amp;KEY=6694613F8B469C97E0405F0AF160360A&amp;URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&amp;SERVICE=WMS&amp;VERSION=1.1.1&amp;REQUEST=GetMap&amp;STYLES=&amp;EXCEPTIONS=application%2Fvnd.ogc.se_inimage&amp;LAYERS=25&amp;SRS=EPSG%3A27700&amp;BBOX=145000,605000,150000,610000&amp;WIDTH=200&amp;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&amp;KEY=6694613F8B469C97E0405F0AF160360A&amp;URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&amp;SERVICE=WMS&amp;VERSION=1.1.1&amp;REQUEST=GetMap&amp;STYLES=&amp;EXCEPTIONS=application%2Fvnd.ogc.se_inimage&amp;LAYERS=25&amp;SRS=EPSG%3A27700&amp;BBOX=160000,605000,165000,610000&amp;WIDTH=200&amp;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&amp;KEY=6694613F8B469C97E0405F0AF160360A&amp;URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&amp;SERVICE=WMS&amp;VERSION=1.1.1&amp;REQUEST=GetMap&amp;STYLES=&amp;EXCEPTIONS=application%2Fvnd.ogc.se_inimage&amp;LAYERS=25&amp;SRS=EPSG%3A27700&amp;BBOX=155000,605000,160000,610000&amp;WIDTH=200&amp;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&amp;KEY=6694613F8B469C97E0405F0AF160360A&amp;URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&amp;SERVICE=WMS&amp;VERSION=1.1.1&amp;REQUEST=GetMap&amp;STYLES=&amp;EXCEPTIONS=application%2Fvnd.ogc.se_inimage&amp;LAYERS=25&amp;SRS=EPSG%3A27700&amp;BBOX=155000,615000,160000,620000&amp;WIDTH=200&amp;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&amp;KEY=6694613F8B469C97E0405F0AF160360A&amp;URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&amp;SERVICE=WMS&amp;VERSION=1.1.1&amp;REQUEST=GetMap&amp;STYLES=&amp;EXCEPTIONS=application%2Fvnd.ogc.se_inimage&amp;LAYERS=25&amp;SRS=EPSG%3A27700&amp;BBOX=160000,615000,165000,620000&amp;WIDTH=200&amp;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&amp;KEY=6694613F8B469C97E0405F0AF160360A&amp;URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&amp;SERVICE=WMS&amp;VERSION=1.1.1&amp;REQUEST=GetMap&amp;STYLES=&amp;EXCEPTIONS=application%2Fvnd.ogc.se_inimage&amp;LAYERS=25&amp;SRS=EPSG%3A27700&amp;BBOX=145000,615000,150000,620000&amp;WIDTH=200&amp;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&amp;KEY=6694613F8B469C97E0405F0AF160360A&amp;URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&amp;SERVICE=WMS&amp;VERSION=1.1.1&amp;REQUEST=GetMap&amp;STYLES=&amp;EXCEPTIONS=application%2Fvnd.ogc.se_inimage&amp;LAYERS=25&amp;SRS=EPSG%3A27700&amp;BBOX=150000,615000,155000,620000&amp;WIDTH=200&amp;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&amp;KEY=6694613F8B469C97E0405F0AF160360A&amp;URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&amp;SERVICE=WMS&amp;VERSION=1.1.1&amp;REQUEST=GetMap&amp;STYLES=&amp;EXCEPTIONS=application%2Fvnd.ogc.se_inimage&amp;LAYERS=25&amp;SRS=EPSG%3A27700&amp;BBOX=150000,605000,155000,610000&amp;WIDTH=200&amp;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&amp;KEY=6694613F8B469C97E0405F0AF160360A&amp;URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&amp;SERVICE=WMS&amp;VERSION=1.1.1&amp;REQUEST=GetMap&amp;STYLES=&amp;EXCEPTIONS=application%2Fvnd.ogc.se_inimage&amp;LAYERS=25&amp;SRS=EPSG%3A27700&amp;BBOX=150000,610000,155000,615000&amp;WIDTH=200&amp;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&amp;KEY=6694613F8B469C97E0405F0AF160360A&amp;URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&amp;SERVICE=WMS&amp;VERSION=1.1.1&amp;REQUEST=GetMap&amp;STYLES=&amp;EXCEPTIONS=application%2Fvnd.ogc.se_inimage&amp;LAYERS=25&amp;SRS=EPSG%3A27700&amp;BBOX=145000,610000,150000,615000&amp;WIDTH=200&amp;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&amp;KEY=6694613F8B469C97E0405F0AF160360A&amp;URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&amp;SERVICE=WMS&amp;VERSION=1.1.1&amp;REQUEST=GetMap&amp;STYLES=&amp;EXCEPTIONS=application%2Fvnd.ogc.se_inimage&amp;LAYERS=25&amp;SRS=EPSG%3A27700&amp;BBOX=160000,610000,165000,615000&amp;WIDTH=200&amp;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&amp;KEY=6694613F8B469C97E0405F0AF160360A&amp;URL=http%3A%2F%2Fosopenspacewiki.ordnancesurvey.co.uk%2Fwiki%2Findex.php%3Ftitle%3DTake_a_trip_around_Great_Britain%2527s_coast_line&amp;SERVICE=WMS&amp;VERSION=1.1.1&amp;REQUEST=GetMap&amp;STYLES=&amp;EXCEPTIONS=application%2Fvnd.ogc.se_inimage&amp;LAYERS=25&amp;SRS=EPSG%3A27700&amp;BBOX=155000,610000,160000,615000&amp;WIDTH=200&amp;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>&#xa9; Crown copyright and database rights 2010 <span style="white-space: nowrap;">Ordnance Survey.</span> &nbsp;&nbsp;<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(&quot;http://openspace.ordnancesurvey.co.uk/osmapapi/img_versions/img_1.1/OS/control/zoom-scale.png&quot;); 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>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;GB Trip DEV PRO&lt;/title&gt; &lt;script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=INSERT YOUR API KEY HERE"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; 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 &lt; features.length; i++) { OpenLayers.Console.log("feature: "); for (var j = 0; j &lt; 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 "); }; &lt;/script&gt; &lt;/head&gt; &lt;body onload="init()"&gt; &lt;div id="map" style="width: 600px; height: 400px; border: 1px solid black;"&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </pre></div>