Ordnance Survey-based BigMap of the UK

·

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>