Skip to the following:

OS OpenSpace [logo]

Using different map options

OS OpenSpace map using different map options

How do we display a map with different options such as a restricted number of map layers and map extent? 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.     var osMap;
  3.     function init()
  4.     {
  5.         var options = {resolutions: [10, 5],
  6.                        maxExtent: new OpenSpace.MapBounds(400000, 100000, 450000, 150000) );
  7.         osMap = new OpenSpace.Map('map', options);
  8.         osMap.setCenter(new OpenSpace.MapPoint(438760,114760), 1);
  9.     }
  10. </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 an options object that holds a limited set of map resolutions and a maximum bounding extent to show the map. A new OS OpenSpace map object is created by passing in our 'map' HTML div element id and the map options.

  1. var options = {resolutions: [10, 5],
  2.                maxExtent: new OpenSpace.MapBounds(400000, 100000, 450000, 150000) );
  3. osMap = new OpenSpace.Map('map', options);

We now set the centre of the map and set the initial map zoom level to 1 (corresponding to the second defined layer in the resolutions array).

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

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 10</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.         // Change default map[ options to just have two zoom levels
  12.         // and a limited map extent
  13.         var options = {resolutions: [10, 5],
  14.                        maxExtent: new OpenSpace.MapBounds(400000, 100000, 450000, 150000) };
  15.         osMap = new OpenSpace.Map('map', options);
  16.         osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 1);
  17.     }
  18. </script>
  19. <h1>Using different map options</h1>
  20. <div id="map" style="width: 500px; height: 300px; border: 1px solid black;"></div>
  21. </body>
  22. </html>