Jump to the following:

We use cookies to improve this website. Read about cookies

Adding a boundary layer with custom styling

How do we add a single boundary layer with custom styling? We are going to build on the 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. 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 the script 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);
}

Next page

Back to top
© Ordnance Survey 2016
Be sure to take a look at our Terms of Use and Privacy Policy