Adding a single boundary layer with default styling

OS OpenSpace map displaying a single boundary layer

How do we add a single boundary layer with default styling? First, we need to tell the browser to pull in the OS OpenSpace API:

<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:

<body onload="init();">

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

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

Then we add the map and the boundary:

<script type="text/javascript">
var osMap, boundaryLayer;
function init()
{
osMap = new OpenSpace.Map('map');
var options = {strategies: [new OpenSpace.Strategy.BBOX()],
area_code: ["CTY" ]
};
boundaryLayer = new OpenSpace.Layer.Boundary("Boundaries", options);
osMap.addLayer(boundaryLayer);
osMap.setCenter(new OpenSpace.MapPoint(400000, 200000), 2);
}
</script>

Let's break this up:

We start a script tag to contain our code:

<script type="text/javascript">

Then we create a map object variable, osMap and a boundaryLayer object variable, boundaryLayer:

var osMap, boundaryLayer;

Now we define our init function:

function init()
{

Then we create a new OS OpenSpace map object and pass it our 'map' element id. This is the HTML div that will hold the map:

osMap = new OpenSpace.Map('map');

Then we create an options variable that contains strategies that will be used to refine the boundaries that are returned. The bounding box strategy(OpenSpace.Strategy.BBOX()) is compulsory. The area_code is one such strategy of which there are others (see documentation). In this case we just wish to return only county boundaries (area_code = "CTY"):

var options = {strategies: [new OpenSpace.Strategy.BBOX()],
area_code: ["CTY" ]
};

Then we populate our boundaryLayer object using the syntax required to return boundaries and with the options that we have just defined:

boundaryLayer = new OpenSpace.Layer.Boundary("Boundaries", options);

Then we add the boundary layer to the map:

osMap.addLayer(boundaryLayer);

However, we then need to move the map around so that the boundaries are actually returned. This can be the same as the current location:

osMap.setCenter(new OpenSpace.MapPoint(400000, 200000), 2);
}

Finally close the script.

</script>

The full code can be found below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Open Space Tutorial - Example 12</title>
<script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=insert_your_api_key_here"></script>
<script type="text/javascript">
 var osMap, boundaryLayer;
 function init()
 {
    osMap = new OpenSpace.Map('map');
    var options = {strategies: [new OpenSpace.Strategy.BBOX()],
                area_code: ["CTY" ]
                            };
     boundaryLayer = new OpenSpace.Layer.Boundary("Boundaries", options);
     osMap.addLayer(boundaryLayer);
     osMap.setCenter(new OpenSpace.MapPoint(400000, 200000), 2);
  }
</script>
</head>
<body onload="init()">
<H1>Add a boundary</H1>
<div id="map" style="width: 500px; height: 300px; border: 1px solid black;"></div>
</body>
</html>

Adding a single boundary layer with default styling

Let's break this up:

API

Community

OS OpenSpace