From OS OpenData developer wiki
Examples
OS OpenSpace Code Examples
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=YOUR_API_KEY_HERE"></script>
<script type="text/javascript">
<!--
var osMap;
function init()
{
osMap = new OpenLayers.Map('map', OpenSpace.DEFAULT_MAPOPTIONS);
var wmsLayer = new OpenSpace.Layer.WMS();
osMap.addLayer(wmsLayer);
osMap.addControl(new OpenSpace.Control.LargeMapControl());
var mapOverlay = new OpenSpace.Layer.MapOverlay("logo");
mapOverlay.setHTML('<img src="logo.gif" style="width: 100%; height: 100%;"/>');
mapOverlay.setPosition(new OpenLayers.LonLat(400000, 100000));
mapOverlay.setSize(new OpenLayers.Size(20000, 10000));
osMap.addLayer(mapOverlay);
osMap.setCenter(new OpenLayers.LonLat(400000, 100000), 4);
}
// -->
</script>
</head>
<body onload="init()">
<div id="map" style="width: 800px; height: 600px; border: 1px solid black;">
</div>
</body>
</html>
OS OnDemand Code Examples
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ondemandapi.ordnancesurvey.co.uk/osmapapi/openspace.js?key=YOUR_API_KEY_HERE"></script>
<script type="text/javascript">
<!--
var osMap;
function init()
{
osMap = new OpenLayers.Map('map', OpenSpace.DEFAULT_MAPOPTIONS);
var wmsLayer = new OpenSpace.Layer.WMS();
osMap.addLayer(wmsLayer);
osMap.addControl(new OpenSpace.Control.LargeMapControl());
var mapOverlay = new OpenSpace.Layer.MapOverlay("logo");
mapOverlay.setHTML('<img src="logo.gif" style="width: 100%; height: 100%;"/>');
mapOverlay.setPosition(new OpenLayers.LonLat(400000, 100000));
mapOverlay.setSize(new OpenLayers.Size(20000, 10000));
osMap.addLayer(mapOverlay);
osMap.setCenter(new OpenLayers.LonLat(400000, 100000), 4);
}
// -->
</script>
</head>
<body onload="init()">
<div id="map" style="width: 800px; height: 600px; border: 1px solid black;">
</div>
</body>
</html>
OS OpenSpace Pro Code Examples
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://openspacepro.ordnancesurvey.co.uk/osmapapi/openspace.js?key=YOUR_API_KEY_HERE"></script>
<script type="text/javascript">
<!--
var osMap;
function init()
{
osMap = new OpenLayers.Map('map', OpenSpace.DEFAULT_MAPOPTIONS);
var wmsLayer = new OpenSpace.Layer.WMS();
osMap.addLayer(wmsLayer);
osMap.addControl(new OpenSpace.Control.LargeMapControl());
var mapOverlay = new OpenSpace.Layer.MapOverlay("logo");
mapOverlay.setHTML('<img src="logo.gif" style="width: 100%; height: 100%;"/>');
mapOverlay.setPosition(new OpenLayers.LonLat(400000, 100000));
mapOverlay.setSize(new OpenLayers.Size(20000, 10000));
osMap.addLayer(mapOverlay);
osMap.setCenter(new OpenLayers.LonLat(400000, 100000), 4);
}
// -->
</script>
</head>
<body onload="init()">
<div id="map" style="width: 800px; height: 600px; border: 1px solid black;">
</div>
</body>
</html>
