From OS OpenData developer wiki
Examples:
Boundaries with a hover style control
Selecting boundaries with a hover control
OS OpenSpace Code Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Boundaries with a hover style control</title>
<script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=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();
// Create a new OpenLayers control with hover functionality.
// When the feature is selected (onSelect: onFeatureHover), the function onFeatureHover is called.
var hoverControl = new OpenLayers.Control.SelectFeature(boundaryLayer, {hover:true, onSelect: onFeatureHover});
// Add the (hover) control to the map and activate.
osMap.addControl(hoverControl);
hoverControl.activate();
// 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 onFeatureHover(feature)
{
// This function is called when a boundary is selected by hovering over it with the mouse.
// The feature (i.e. the boundary) is passed from the control that was defined above.
selectedFeature = feature;
// The name attribute of the feature is read into a variable and the text box is updated with this value.
var bndyName = feature.attributes.NAME
document.getElementById('bndyname').value = bndyName;
}
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>Selecting boundaries with a hover control</h1>
<div id="map" style="width: 800px; height: 600px; border: 1px solid black;"></div>
<form name="form1" method="post" action="">
<input name="textfield" type="text" id="bndyname" size="30">
</form>
</body>
</html>
OS OnDemand Code Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Boundaries with a hover style control</title>
<script type="text/javascript" src="http://ondemandapi.ordnancesurvey.co.uk/osmapapi/openspace.js?key=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();
// Create a new OpenLayers control with hover functionality.
// When the feature is selected (onSelect: onFeatureHover), the function onFeatureHover is called.
var hoverControl = new OpenLayers.Control.SelectFeature(boundaryLayer, {hover:true, onSelect: onFeatureHover});
// Add the (hover) control to the map and activate.
osMap.addControl(hoverControl);
hoverControl.activate();
// 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 onFeatureHover(feature)
{
// This function is called when a boundary is selected by hovering over it with the mouse.
// The feature (i.e. the boundary) is passed from the control that was defined above.
selectedFeature = feature;
// The name attribute of the feature is read into a variable and the text box is updated with this value.
var bndyName = feature.attributes.NAME
document.getElementById('bndyname').value = bndyName;
}
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>Selecting boundaries with a hover control</h1>
<div id="map" style="width: 800px; height: 600px; border: 1px solid black;"></div>
<form name="form1" method="post" action="">
<input name="textfield" type="text" id="bndyname" size="30">
</form>
</body>
</html>
OS OpenSpace Pro Code Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Boundaries with a hover style control</title>
<script type="text/javascript" src="http://openspacepro.ordnancesurvey.co.uk/osmapapi/openspace.js?key=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();
// Create a new OpenLayers control with hover functionality.
// When the feature is selected (onSelect: onFeatureHover), the function onFeatureHover is called.
var hoverControl = new OpenLayers.Control.SelectFeature(boundaryLayer, {hover:true, onSelect: onFeatureHover});
// Add the (hover) control to the map and activate.
osMap.addControl(hoverControl);
hoverControl.activate();
// 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 onFeatureHover(feature)
{
// This function is called when a boundary is selected by hovering over it with the mouse.
// The feature (i.e. the boundary) is passed from the control that was defined above.
selectedFeature = feature;
// The name attribute of the feature is read into a variable and the text box is updated with this value.
var bndyName = feature.attributes.NAME
document.getElementById('bndyname').value = bndyName;
}
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>Selecting boundaries with a hover control</h1>
<div id="map" style="width: 800px; height: 600px; border: 1px solid black;"></div>
<form name="form1" method="post" action="">
<input name="textfield" type="text" id="bndyname" size="30">
</form>
</body>
</html>
