From OS OpenData developer wiki

Adding a boundary layer with custom styling

How do we add a single boundary layer with custom styling?

First we need to tell the browser to pull in OS OpenSpace JavaScript API:

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

Next in the body of the page, we need to tell JavaScript to run 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: 800px; height: 600px; 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');
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" can be substituted with other area codes such as "UTY" or "DIS":

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>

Full Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>OS OpenSpace Tutorial - Example 2</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: 800px; height: 600px; border: 1px solid black;"></div>
</body>
</html>

Tutorial Ten

From OS OpenData developer wiki

Adding a boundary layer with custom styling

Let's break this up:

Full Code

Views

Personal tools

OS OpenData Content

OpenSpace and WMTS

Navigation

Search

Toolbox

ADMIN