Skip to the following:

OS OpenSpace [logo]

Displaying the map control in another position

OS OpenSpace map displaying the map control top left

How do we display the position of the cursor on the map as above? First, we need to tell the browser to pull in the OS OpenSpace JavaScript API:

  1. <script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=insert_your_api_key_here"></script>

Next, in the body, we need to tell JavaScript to run our initialisation function on loading the page:

  1. <body onload="init();">

Next we need to add a map div element; this is the HTML element that will contain the map:

  1. <div id="map" style="width: 500px; height: 300px; border: 1px solid black;"></div>

Now we move on to the core of the code, actually instantiating and adding the map:

  1. <script type="text/javascript">
  2.  
  3.     var osMap;
  4.  
  5.     function init()
  6.     {
  7.         var controls = [new OpenLayers.Control.Navigation(),
  8.                         new OpenLayers.Control.KeyboardDefaults(),
  9.                         new OpenSpace.Control.CopyrightCollection(),
  10.                         new OpenLayers.Control.ArgParser()];
  11.  
  12.         osMap = new OpenSpace.Map('map', {controls: controls});
  13.  
  14.         // Anchor position at the top right
  15.         var position = new OpenSpace.Control.ControlPosition(OpenSpace.Control.ControlAnchor.ANCHOR_TOP_RIGHT);
  16.         osMap.addControl(new OpenSpace.Control.LargeMapControl(), position);
  17.  
  18.         osMap.setCenter(new OpenSpace.MapPoint(438760,114760), 8);
  19.     }
  20.  
  21. </script>

Let's break this up:

We start a script tag to contain our code:

  1. <script type="text/javascript">

Then we create a map object variable, osMap:

  1. var osMap;

Now we define our init function:

  1. function init()
  2. {

Create a new OS OpenSpace map object and pass it our 'map' HTML div element id. Add a set of basic controls (excluding the pan/zoom control).

  1. var controls = [new OpenLayers.Control.Navigation(),
  2.                 new OpenLayers.Control.KeyboardDefaults(),
  3.                 new OpenSpace.Control.CopyrightCollection(),
  4.                 new OpenLayers.Control.ArgParser()];
  5. osMap = new OpenSpace.Map('map', {controls: controls});

Now we create an anchor point for the control at the top right of the map window. We then add the large map pan zoom control to the map with the given position.

  1. // Anchor position at the top right
  2. var position = new OpenSpace.Control.ControlPosition(OpenSpace.Control.ControlAnchor.ANCHOR_TOP_RIGHT);
  3. osMap.addControl(new OpenSpace.Control.LargeMapControl(), position);

We now set the centre of the map and the zoom level to 4.

  1. osMap osMap.setCenter(new OpenSpace.MapPoint(400000,100000), 8);

Finally, we close the function and script tag.

  1. }
  2. </script>

The full example can be found below.

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>Open Space Tutorial - Example 8</title>
  4. <script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=insert_your_api_key_here"></script>
  5. </head>
  6. <body onload="init()">
  7. <script type="text/javascript">
  8.     var osMap;
  9.     function init()
  10.     {
  11.         var controls = [new OpenLayers.Control.Navigation(),
  12.                         new OpenLayers.Control.KeyboardDefaults(),
  13.                         new OpenSpace.Control.CopyrightCollection(),
  14.                         new OpenLayers.Control.ArgParser()];
  16.         osMap = new OpenSpace.Map('map', {controls: controls});
  18.         // Anchor position at the top right
  19.         var position = new OpenSpace.Control.ControlPosition(OpenSpace.Control.ControlAnchor.ANCHOR_TOP_RIGHT);
  20.         osMap.addControl(new OpenSpace.Control.LargeMapControl(), position);
  22.         osMap.setCenter(new OpenLayers.LonLat(400000, 100000), 4);
  23.     }
  24. </script>
  25. <h1>Displaying the map pan zoom control in a different position</h1>
  26. <div id="map" style="width: 500px; height: 300px; border: 1px solid black;"></div>
  27. </body>
  28. </html>