Jump to the following:

OS OpenSpace [logo]

Creating thematic boundaries

OS OpenSpace map displaying thematic boundaries

A very useful application of boundary data is to use them to create thematic maps, based upon some external data for example income per ward. Although, this example uses some simple fictictious values, the principles can be applied to real data. The data needs to be held in .csv format and uses a primary key (ADMIN_UNIT_ID) to link to the boundaries.

First create a .csv file as follows. Note you will need to set the path of this file in the code:

ADMIN_UNIT_IDMY_VALUE
414232
414252
414283
414223
414314
414294
414215
414275
414245
414267
414307

The styling is acomplished as in the this example or using a Styled Layer Descriptor(SLD) that is held externaly to the HTML document.

Second, 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: 502px; height: 304px; border: 1px solid black;"></div>

Then we add the map and the European boundaries:

  1. <script type="text/javascript">
  2.  var osMap, store, boundaryLayer, ruleLow, ruleMedium, ruleHigh, context;
  3.  var dataTable = {};
  4.  var primaryKey = "ADMIN_UNIT_ID";
  5.  var valueKey = "MY_VALUE";
  6.  function init()
  7.  {
  8.   osMap = new OpenSpace.Map('map');
  9.   readCSV();
  10.   boundaryLayer = createBoundaryLayer();
  11.   osMap.addLayer(boundaryLayer);
  12.   osMap.setCenter(new OpenSpace.MapPoint(390000, 550000), 0);
  13.  }
  14.  function readCSV()
  15.  {
  16.   store = new dojox.data.CsvStore({url: "MY_VALUES.csv", label: primaryKey});
  17.   var request = store.fetch({onComplete: gotCSVData});
  18.  }
  19.  function gotCSVData(items, request)
  20.  {
  21.   for (var i = 0; i < items.length; i++)
  22.      {
  23.       var item = items[i];
  24.       var row = {};
  25.       var attrs = store.getAttributes(item);
  26.       for (var key in attrs)
  27.          {
  28.           var value = store.getValue(item, attrs[key]);
  29.     if (OpenLayers.String.isNumeric(value))
  30.              value = parseFloat(value);
  31.              row[attrs[key]] = value;
  32.          }
  33.       dataTable[store.getValue(item, primaryKey)] = row;
  34.      }
  35.  }
  36.  function createBoundaryLayer()
  37.  {
  38.   var context = function(feature)
  39.   {
  40.    var key = feature.attributes[primaryKey];
  41.    var value = dataTable[key];
  42.    return value;
  43.   };
  44.   var style = new OpenLayers.Style();
  45.   var ruleLow = new OpenLayers.Rule(
  46.   {
  47.    context: context,
  48.    filter: new OpenLayers.Filter.Comparison(
  49.    {
  50.     type: OpenLayers.Filter.Comparison.LESS_THAN,
  51.  property: "MY_VALUE",
  52.     value: 5
  53.    }),
  54.    symbolizer: {fillColor: "red", fillOpacity: 0.4, strokeColor: "black"}
  55.   });
  56.   var ruleMedium = new OpenLayers.Rule(
  57.   {
  58.    context: context,
  59.    filter: new OpenLayers.Filter.Comparison(
  60.    {
  61.     type: OpenLayers.Filter.Comparison.EQUAL_TO,
  62.     property: "MY_VALUE",
  63.     value: 5
  64.    }),
  65.    symbolizer: {fillColor: "yellow", fillOpacity: 0.4, strokeColor: "black"}
  66.   });
  67.   var ruleHigh = new OpenLayers.Rule(
  68.   {
  69.    context: context,
  70.    filter: new OpenLayers.Filter.Comparison(
  71.    {
  72.     type: OpenLayers.Filter.Comparison.GREATER_THAN_OR_EQUAL_TO,
  73.     property: "MY_VALUE",
  74.     value: 6
  75.    }),
  76.    symbolizer: {fillColor: "green", fillOpacity: 0.4, strokeColor: "black"}
  77.   });
  78.   style.addRules([ruleLow, ruleMedium, ruleHigh]);
  79.   var styleMap = new OpenLayers.StyleMap(style);
  80.   styleMap.addUniqueValueRules("default", valueKey, context);
  81.   boundaryLayer = new OpenSpace.Layer.Boundary("Boundaries", {
  82.    strategies: [new OpenSpace.Strategy.BBOX()],
  83.    area_code: ["EUR"],
  84.    styleMap: styleMap });
  85.   return boundaryLayer;
  86.  }
  87. </script>

Let's break this up:

We start a script tag to contain our code:

  1. <script type="text/javascript">

Then we declare our global variables:

  1. var osMap, store, boundaryLayer, ruleLow, ruleMedium, ruleHigh, context;
  2.  var dataTable = {};
  3.  var primaryKey = "ADMIN_UNIT_ID";
  4.  var valueKey = "MY_VALUE";

Now we define our init function:

  1. function init()
  2. {

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:

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

Then we call the function that reads our csv file into a data table:

  1. readCSV();

Call the function that creates a boundary layer based on values stored in the data table:

  1. boundaryLayer = createBoundaryLayer();

And add it to the map:

  1. osMap.addLayer(boundaryLayer);
  2.  osMap.setCenter(new OpenSpace.MapPoint(390000, 550000), 0);
  3.  }

This function reads the .csv data

  1. function readCSV()
  2.  {
  3.   store = new dojox.data.CsvStore({url: "MY_VALUES.csv", label: primaryKey});
  4.   var request = store.fetch({onComplete: gotCSVData});
  5.  }

This function reads the data into a data table object i.e. temporary extra attributes for boundary features, whose id matches the selected id in the .csv file:

  1. function gotCSVData(items, request)
  2.  {
  3.   for (var i = 0; i < items.length; i++)
  4.      {
  5.       var item = items[i];
  6.       var row = {};
  7.       var attrs = store.getAttributes(item);
  8.       for (var key in attrs)
  9.          {
  10.           var value = store.getValue(item, attrs[key]);
  11.     if (OpenLayers.String.isNumeric(value))
  12.              value = parseFloat(value);
  13.              row[attrs[key]] = value;
  14.          }
  15.       dataTable[store.getValue(item, primaryKey)] = row;
  16.      }
  17.  }

This is the function that is used to create the boundary layer:

  1. function createBoundaryLayer()
  2.  {

Each boundary feature is sent to this variable and its value returned to the rule:

  1. var context = function(feature)
  2.   {
  3.    var key = feature.attributes[primaryKey];
  4.    var value = dataTable[key];
  5.    return value;
  6.   };

Define a new style:

  1. var style = new OpenLayers.Style();

Add rules that define how we want to style our .csv data:

  1. var ruleLow = new OpenLayers.Rule(
  2.   {
  3.    context: context,
  4.    filter: new OpenLayers.Filter.Comparison(
  5.    {
  6.     type: OpenLayers.Filter.Comparison.LESS_THAN,
  7.  property: "MY_VALUE",
  8.     value: 5
  9.    }),
  10.    symbolizer: {fillColor: "red", fillOpacity: 0.4, strokeColor: "black"}
  11.   });
  12.   var ruleMedium = new OpenLayers.Rule(
  13.   {
  14.    context: context,
  15.    filter: new OpenLayers.Filter.Comparison(
  16.    {
  17.     type: OpenLayers.Filter.Comparison.EQUAL_TO,
  18.     property: "MY_VALUE",
  19.     value: 5
  20.    }),
  21.    symbolizer: {fillColor: "yellow", fillOpacity: 0.4, strokeColor: "black"}
  22.   });
  23.   var ruleHigh = new OpenLayers.Rule(
  24.   {
  25.    context: context,
  26.    filter: new OpenLayers.Filter.Comparison(
  27.    {
  28.     type: OpenLayers.Filter.Comparison.GREATER_THAN_OR_EQUAL_TO,
  29.     property: "MY_VALUE",
  30.     value: 6
  31.    }),
  32.    symbolizer: {fillColor: "green", fillOpacity: 0.4, strokeColor: "black"}
  33.   });

Add these rules to the style:

  1. style.addRules([ruleLow, ruleMedium, ruleHigh]);

And then the style map:

  1. var styleMap = new OpenLayers.StyleMap(style);

Add value rules to our style map:

  1. styleMap.addUniqueValueRules("default", valueKey, context);

Create the boundary layer and return it to the init function:

  1. boundaryLayer = new OpenSpace.Layer.Boundary("Boundaries", {
  2.    strategies: [new OpenSpace.Strategy.BBOX()],
  3.    area_code: ["EUR"],
  4.    styleMap: styleMap });
  5.   return boundaryLayer;
  6.  }

Finally close the script:

  1. </script>

The full code can be found below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>OpenSpace Tutorial - Example 14</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, store, boundaryLayer, ruleLow, ruleMedium, ruleHigh, context;
 var dataTable = {};
 var primaryKey = "ADMIN_UNIT_ID";
 var valueKey = "MY_VALUE";
 function init()
 {
  osMap = new OpenSpace.Map('map');
  readCSV();
  boundaryLayer = createBoundaryLayer();
  osMap.addLayer(boundaryLayer);
  osMap.setCenter(new OpenSpace.MapPoint(390000, 550000), 0);
 }
function readCSV()
 {
  store = new dojox.data.CsvStore({url: "MY_VALUES.csv", label: primaryKey});
  var request = store.fetch({onComplete: gotCSVData});
 }
 function gotCSVData(items, request)
 {
  for (var i = 0; i < items.length; i++)
     {
      var item = items[i];
      var row = {};
      var attrs = store.getAttributes(item);
      for (var key in attrs)
         {
          var value = store.getValue(item, attrs[key]);
    if (OpenLayers.String.isNumeric(value))
             value = parseFloat(value);
             row[attrs[key]] = value;
         }
      dataTable[store.getValue(item, primaryKey)] = row;
     }
 }
 function createBoundaryLayer()
 {
  var context = function(feature)
  {
   var key = feature.attributes[primaryKey];
   var value = dataTable[key];
   return value;
  };
  var style = new OpenLayers.Style();
  //add rules that take return from feature fed into context
  var ruleLow = new OpenLayers.Rule(
  {
   context: context,
   filter: new OpenLayers.Filter.Comparison(
   {
    type: OpenLayers.Filter.Comparison.LESS_THAN,
 property: "MY_VALUE",
    value: 5
   }),
   symbolizer: {fillColor: "red", fillOpacity: 0.4, strokeColor: "black"}
  });
  var ruleMedium = new OpenLayers.Rule(
  {
   context: context,
   filter: new OpenLayers.Filter.Comparison(
   {
    type: OpenLayers.Filter.Comparison.EQUAL_TO,
    property: "MY_VALUE",
    value: 5
   }),
   symbolizer: {fillColor: "yellow", fillOpacity: 0.4, strokeColor: "black"}
  });
  var ruleHigh = new OpenLayers.Rule(
  {
   context: context,
   filter: new OpenLayers.Filter.Comparison(
   {
    type: OpenLayers.Filter.Comparison.GREATER_THAN_OR_EQUAL_TO,
    property: "MY_VALUE",
    value: 6
   }),
   symbolizer: {fillColor: "green", fillOpacity: 0.4, strokeColor: "black"}
  });
  style.addRules([ruleLow, ruleMedium, ruleHigh]);
  var styleMap = new OpenLayers.StyleMap(style);
  styleMap.addUniqueValueRules("default", valueKey, context);
  boundaryLayer = new OpenSpace.Layer.Boundary("Boundaries", {
   strategies: [new OpenSpace.Strategy.BBOX()],
   area_code: ["EUR"],
   styleMap: styleMap });
  return boundaryLayer;
 }
</script>
</head>
<body onload="init()">
<H1><font size="3" face="Verdana">
</font></H1>
<div id="map" style="width: 502px; height: 304px; border: 1px solid black;">
</div>
</body>
</html>