Jump to the following:

Ordnance Survey logo

Discover Ordnance Survey

Skip primary navigation
Site Search
Skip secondary navigation

Adding a boundary layer with custom styling

How do we add a single boundary layer with custom styling? We are going to build on displaying a marker tutorial. In this tutorial we created an HTML document with all the appropriate tags and included a DIV tag which gave instructions on how to display the map. The heavy lifting is all done within the javascript section (between the script…/script tags). The instructions in this document will deal with this core of the code. Essentially we will be replacing the content of displaying a marker tutorialscript tags, with the following:


<script type="text/javascript">
var osMap, boundaryLayer;
function init()
{
osMap = new OpenSpace.Map('map');
boundaryLayer = createBoundaryLayer();
osMap.addLayer(boundaryLayer);
osMap.setCenter(new OpenSpace.MapPoint(450000, 200000), 2);
}
function createBoundaryLayer()
{
var symbolizer = OpenLayers.Util.applyDefaults({ },
OpenLayers.Feature.Vector.style["default"]);
var styleMap = new OpenLayers.StyleMap(symbolizer);
var lookup = {
"CTY": {
fillColor: "green",
fillOpacity: 0.6,
strokeColor: "white",
strokeWidth: 2,
strokeOpacity: 0.8
}
};
styleMap.addUniqueValueRules("default", "AREA_CODE", lookup);
var boundaryLayer = new OpenSpace.Layer.Boundary("Boundaries", {
strategies: [new OpenSpace.Strategy.BBOX()],
area_code: ["CTY"],
styleMap: styleMap
});
return boundaryLayer;
}
</script>

Let's break this up

We start a script tag to contain our code:


<script type="text/javascript">

Then we declare our variables:


var osMap, boundaryLayer;

Now we define our init function:


function init()
{

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


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

Next we create a boundary layer with styling, by calling the appropriate function:


boundaryLayer = createBoundaryLayer();

The boundary layer that we created is added to the map:


osMap.addLayer(boundaryLayer);
osMap.setCenter(new OpenSpace.MapPoint(450000, 200000), 2);
}

This is a function that creates a boundary in the browser. Note that "CTY" (for county) can be substituted with other area codes such as "UTY" (Unitary Authority) or "DIS" (District):


function createBoundaryLayer()
{

The set up the style for symbolizer based on default styles:


var symbolizer = OpenLayers.Util.applyDefaults({ },
OpenLayers.Feature.Vector.style["default"]);

Then create a new styleMap, based on the symbolizer from above:


var styleMap = new OpenLayers.StyleMap(symbolizer);

Then create a mapping between feature attribute and symbolizer:


var lookup = {
"CTY": {
fillColor: "green",
fillOpacity: 0.6,
strokeColor: "white",
strokeWidth: 2,
strokeOpacity: 0.8
}
};

Next add rules to the default symbolizer that apply for the AREA_CODE attribute


styleMap.addUniqueValueRules("default", "AREA_CODE", lookup);

Here we define our boundary layer based on the above:


var boundaryLayer = new OpenSpace.Layer.Boundary("Boundaries", {
strategies: [new OpenSpace.Strategy.BBOX()],
area_code: ["CTY"],
styleMap: styleMap
});

Then return the boundaryLayer to where the function was called:


return boundaryLayer;
}

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 10</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">
// Create a map object variable (osMap) and a boundaryLayer object variable (boundaryLayer).
   var osMap, boundaryLayer;

   function init()
   {
   // Create a new OS OpenSpace map object and pass it to our 'map' element id.
      osMap = new OpenSpace.Map('map');

   // Create a boundary layer with styling, by calling the appropriate function.
      boundaryLayer = createBoundaryLayer();

   // Add the boundary layer to the map.
      osMap.addLayer(boundaryLayer);

   // Set the centre of the map.
      osMap.setCenter(new OpenSpace.MapPoint(450000, 200000), 2);
   }

   function createBoundaryLayer()
   {
   // Set-up default symbolizer and a new style map.
      var symbolizer = OpenLayers.Util.applyDefaults({ }, OpenLayers.Feature.Vector.style["default"]);
      var styleMap = new OpenLayers.StyleMap(symbolizer);

   // Define the custom styling.
      var lookup = {
                    "CTY": {
                              fillColor: "green",
                              fillOpacity: 0.6,
                              strokeColor: "white",
                              strokeWidth: 2,
                              strokeOpacity: 0.8
                           }
                   };

   // Add rules to the style map.
      styleMap.addUniqueValueRules("default", "AREA_CODE", lookup);

   // Define the boundary layer with the strategies that are required (and with the above styling).
      var boundaryLayer = new OpenSpace.Layer.Boundary("Boundaries", {
                    strategies: [new OpenSpace.Strategy.BBOX()],
                    area_code: ["CTY"],
                    styleMap: styleMap
                });

   // Return the boundary layer to where the function was called.
      return boundaryLayer;
   }
</script>
</head>
<body onload="init();">
<h1>Adding a single boundary layer with custom styling</h1>
<div id="map" style="width: 500px; height: 300px; border: 1px solid black;"></div>
</body>
</html>
Skip supplementary navigation

For general enquiries, complaints, feedback or suggestions, email: customerservices@ordnancesurvey.co.uk or call us on 08456 05 05 05