Following on from my Google BigMap, here's an Ordnance Survey version for the UK, using the OpenSpace API, which is based on OpenLayers.
Warning: high zoom levels take a while to load and use a lot of memory. You may also need to slide the map over a little to fit the top-left corner in - I haven't found a way to position it correctly yet.
Still looking for a way to save the whole page as an image... Update: Screengrab! works perfectly.
If you want to make a really big map, please host it on your own server using your own API key. Here's the code:
<?php
$zoom = $_REQUEST['zoom'] ? (int) $_REQUEST['zoom'] : 3;
switch ($zoom){
case 1:
$x = 700; $y = 1300;
break;
case 2:
$x = 1400; $y = 2600;
break;
case 3:
$x = 3500; $y = 6500;
break;
case 4:
$x = 7000; $y = 13000;
break;
case 5:
$x = 14000; $y = 26000;
break;
}
/*
* outline of Great Britain (zoom level 0);
* overview of Great Britain (zoom level 1-2);
* MiniScale® (zoom level 3-4);
* 1:250 000 Scale Colour Raster (zoom level 5-6);
* 1:50 000 Scale Colour Raster (zoom level 7-8); and
* OS Street View® (zoom level 9-10).
*/
?>
<html>
<head>
<title>Big Map of the UK</title>
<style type="text/css"> .OpenSpaceControlCopyrightCollection, .OpenSpaceControlLargeMapControl { display: none } </style>
</head>
<body style="margin:0;padding:0;">
<div id="map" style="width:<?php print $x ?>px; height:<?php print $y ?>px;"></div>
<script src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=YOUR_API_KEY" type="text/javascript"></script>
<script type="text/javascript">
// hack for Safari 3.1 and Firefox 3 - fixed in OpenLayers 2.6
OpenLayers.Renderer.SVG.prototype.supported = function() {
var svgFeature = "http://www.w3.org/TR/SVG11/feature#";
return (document.implementation && (document.implementation.hasFeature("org.w3c.svg", "1.0") || document.implementation.hasFeature(svgFeature + "SVG", "1.1") || document.implementation.hasFeature(svgFeature + "BasicStructure", "1.1") ));
};
// the important bit
var map = new OpenSpace.Map("map");
map.zoomTo(<?php print $zoom ?>);
</script>
<!--
<div id="mouseCoords" style="position:fixed; top:0; right:0; z-index:999999; background:#fff; text-align:right"></div>
<script language="javascript">
// used for measuring dimensions of the map
var mouseCoords = document.getElementById("mouseCoords");
document.addEventListener("mousemove", function(e){ mouseCoords.innerHTML = "X:"+ e.pageX + "<br>Y:" + e.pageY; }, true);
</script>
-->
</body>
</html>