Jump to the following:

OS OpenSpace [logo]

Adding hover functionality to boundaries

OS OpenSpace map displaying Westminster constituencies

One thing we may want to do is add hover functionality to boundaries and display information about them such as their name. We will use Westminster constituencies, in this example. First, 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: 600px; height: 400px; border: 1px solid black;"></div>

Then we add the map and the boundary:

  1. var osMap, boundaryLayer, hoverControl, lookup;
  2. function init()
  3.  {
  4.   osMap = new OpenSpace.Map('map');
  5.   boundaryLayer = createBoundaryLayer();
  6.   osMap.addLayer(boundaryLayer);
  7.   osMap.setCenter(new OpenSpace.MapPoint(400000, 430000), 5);
  8.   hoverControl = new OpenLayers.Control.SelectFeature(boundaryLayer,
  9.    {multiple: false, hover:true, onSelect: onFeatureHover, onUnselect: offFeature });
  10.   osMap.addControl(hoverControl);
  11.   hoverControl.activate();
  12.  }
  13. function onFeatureHover(feature)
  14.  {
  15.    if (typeof(hoverControl.handlers) != "undefined")
  16.       {
  17.         hoverControl.handlers.feature.stopDown = false;
  18.       }
  19.   document.getElementById('boundaryname').value = feature.attributes.NAME;
  20.  }
  21. function offFeature()
  22.  {
  23.   document.getElementById('boundaryname').value = "";
  24.  }
  25.  function createBoundaryLayer()
  26.  {
  27.   var symbolizer = OpenLayers.Util.applyDefaults(
  28.      { }, OpenLayers.Feature.Vector.style["default"]);
  29.   var styleMap = new OpenLayers.StyleMap(symbolizer);
  30.   var lookup = {
  31.         "WMC": {
  32.                   fillColor: "green",
  33.                   fillOpacity: 0.2,
  34.                   strokeColor: "black",
  35.                   strokeWidth: 3,
  36.                   strokeOpacity: 0.7
  37.                } };
  38.   styleMap.addUniqueValueRules("default", "AREA_CODE",
  39.                                  lookup);
  40.   var boundaryLayer = new OpenSpace.Layer.Boundary("Boundaries", {
  41.         strategies: [new OpenSpace.Strategy.BBOX()],
  42.         area_code: ["WMC"],
  43.         styleMap: styleMap });
  44.   return boundaryLayer;
  45.  }
  46. </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, boundaryLayer, hoverControl, lookup;

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');

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

  1. boundaryLayer = createBoundaryLayer();

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

  1. osMap.addLayer(boundaryLayer);
  2.  osMap.setCenter(new OpenSpace.MapPoint(400000, 430000), 5);

Next create a new OpenLayers control with hover functionality. When the feature is selected(onSelect: 0nFeatureHover), the function 0nFeatureHover is called:

  1. hoverControl = new OpenLayers.Control.SelectFeature(boundaryLayer,
  2.  {multiple: false, hover:true, onSelect: onFeatureHover, onUnselect: offFeature });

The control is added to the map and activated:

  1. osMap.addControl(hoverControl);
  2.  hoverControl.activate();

This function is called when a boundary is selected by moving over it with the mouse. The feature i.e. the boundary is passed from the control that was defined above:

  1. function onFeatureHover(feature)
  2. {

This is needed to re-activate the ability to pan the map:

  1. if (typeof(hoverControl.handlers) != "undefined")
  2.      {
  3.      hoverControl.handlers.feature.stopDown = false;
  4.      }

Then we populate our text field with the selected boundary name:

  1. document.getElementById('boundaryname').value = featureName;
  2.  }

This function is used to clear the text field should the mouse be over the sea or no boundaries are displayed:

  1. function offFeature()
  2.  {
  3.   document.getElementById('boundaryname').value = "";
  4.  }

This is the function that creates a boundary in the browser. Note that &WMC& can be substituted with other area codes such as &EUR& or &CTY&:

  1. function createBoundaryLayer()
  2.             {

Then set up the styles for symbolizer based on default styles:

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

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

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

Then create a mapping between feature attribute and symbolizer:

  1. var lookup = {
  2.         "WMC": {
  3.                   fillColor: "green",
  4.                   fillOpacity: 0.2,
  5.                   strokeColor: "black",
  6.                   strokeWidth: 3,
  7.                   strokeOpacity: 0.7
  8.                } };

Next we add rules to the styleMap:

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

Here we define our boundary layer, based on the above:

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

Then return the boundaryLayer to the init function:

  1. return boundaryLayer;
  2.  }

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 13</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, hoverControl, lookup, currentZoom;
 function init()
 {
  osMap = new OpenSpace.Map('map');
  boundaryLayer = createBoundaryLayer();
  osMap.addLayer(boundaryLayer);
  osMap.setCenter(new OpenSpace.MapPoint(400000, 430000), 5);
  hoverControl = new OpenLayers.Control.SelectFeature(boundaryLayer,
   {multiple: false, hover:true, onSelect: onFeatureHover, onUnselect: offFeature });
  osMap.addControl(hoverControl);
  hoverControl.activate();
 }
 function onFeatureHover(feature)
 {
  if (typeof(hoverControl.handlers) != "undefined")
     {
     hoverControl.handlers.feature.stopDown = false;
     }
  document.getElementById('boundaryname').value = feature.attributes.NAME;
 }
function offFeature()
 {
  document.getElementById('boundaryname').value = "";
 }
 function createBoundaryLayer()
 {
  var symbolizer = OpenLayers.Util.applyDefaults(
     { }, OpenLayers.Feature.Vector.style["default"]);
  var styleMap = new OpenLayers.StyleMap(symbolizer);
  var lookup = {
        "WMC": {
                  fillColor: "green",
                  fillOpacity: 0.2,
                  strokeColor: "black",
                  strokeWidth: 3,
                  strokeOpacity: 0.7
               } };
  styleMap.addUniqueValueRules("default", "AREA_CODE",
                                 lookup);
  var boundaryLayer = new OpenSpace.Layer.Boundary("Boundaries", {
        strategies: [new OpenSpace.Strategy.BBOX()],
        area_code: ["WMC"],
        styleMap: styleMap });
  return boundaryLayer;
 }
</script>
</style>
</head>
<body onload="init()">
<div id="map" style="width: 600px; height: 400px; border: 1px solid black;"></div>
<form name="form1" method="post" id="boundaryForm" action="">
<input name="textfield" type="text" id="boundaryname" size="70">
</form>
</body>
</html>