Skip to the following:

OS OpenSpace [logo]

Displaying a small map control

OS OpenSpace map displaying a small map control

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.         // Add the small map control
  15.         osMap.addControl(new OpenSpace.Control.SmallMapControl());
  16.  
  17.         osMap.setCenter(new OpenSpace.MapPoint(438760,114760), 8);
  18.     }
  19.  
  20. </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' element id. Add a set of basic controls to the map (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});

We then add the small map pan zoom control to the map at the default position of top left.

  1. // Add the small map control
  2. osMap.addControl(new OpenSpace.Control.SmallMapControl());

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 9</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.         // Add the small map control
  19.         osMap.addControl(new OpenSpace.Control.SmallMapControl());
  21.         osMap.setCenter(new OpenLayers.LonLat(400000, 100000), 4);
  22.     }
  23. </script>
  24. <h1>Displaying the small map pan zoom control</h1>
  25. <div id="map" style="width: 500px; height: 300px; border: 1px solid black;"></div>
  26. </body>
  27. </html>