Jump to the following:

We use cookies to improve this website. Read about cookies

Displaying a line on a map

How do we add a line to the map? We are going to build on displayng information connected to 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. 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 displayng information connected to a marker tutorial 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 create a map object variable, osMap and a vectorlayer object variable:

var osMap, vectorLayer;

Now we define our init function:

function init() {

Create a new OS OpenSpace map object and pass it our 'map' element id. This is the HTML div that will hold the map.

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

We now set the centre of the map above Ordnance Survey head office:

osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 8);

Add a vector layer to the map:

var vectorLayer = new OpenLayers.Layer.Vector("Vector Layer"); osMap.addLayer(vectorLayer); 

Create an array to hold the line point coordinates and define our particular line styling, including width and colour of the line:

var points = [];
var style_green = { strokeColor: "#00FF00", strokeOpacity: 0.7, strokeWidth: 6 };

This defines the line manually from a list of points:

// Define the line 
var p1 = new OpenLayers.Geometry.Point(438770, 114846); 
var p2 = new OpenLayers.Geometry.Point(438816, 114874); 
var p3 = new OpenLayers.Geometry.Point(438892, 114740); 
var p4 = new OpenLayers.Geometry.Point(438898, 114810); 
var p5 = new OpenLayers.Geometry.Point(439098, 115030); 
var p6 = new OpenLayers.Geometry.Point(439184, 115012); 
var p7 = new OpenLayers.Geometry.Point(439310, 115090); 
var p8 = new OpenLayers.Geometry.Point(439398, 115068); 
var p9 = new OpenLayers.Geometry.Point(439796, 115160); 
var p10 = new OpenLayers.Geometry.Point(439882, 115206); 
var p11 = new OpenLayers.Geometry.Point(439950, 115158); 
var p12 = new OpenLayers.Geometry.Point(439870, 115048); 
var points = []; points.push(p1); points.push(p2); points.push(p3); points.push(p4); points.push(p5); points.push(p6); points.push(p7); points.push(p8); 

Create the line feature from the array of points:

var lineString = new OpenLayers.Geometry.LineString(points); var lineFeature = new OpenLayers.Feature.Vector(lineString, null, style_green);

Finally, we add the line feature to the vector layer, and close both the function and the script tag.

vectorLayer.addFeatures([lineFeature]); } </script> 

The full example can be found below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Open Space Tutorial 8</title>
<script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key= insert_your_api_key_here"></script>
</head>
<body onload="init()">
<script type="text/javascript"> 
var osMap; function init() { 
// Creates the map centered on OSHQ 
	osMap = new OpenSpace.Map('map'); 
	osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 8); 
	var vectorLayer = new OpenLayers.Layer.Vector("Vector Layer"); 
	osMap.addLayer(vectorLayer); 
// Define the line style
var style_green = { strokeColor: "#00FF00", strokeOpacity: 0.7, strokeWidth: 6 }; 
// Define the line 
var p1 = new OpenLayers.Geometry.Point(438770, 114846); 
var p2 = new OpenLayers.Geometry.Point(438816, 114874); 
var p3 = new OpenLayers.Geometry.Point(438892, 114740); 
var p4 = new OpenLayers.Geometry.Point(438898, 114810); 
var p5 = new OpenLayers.Geometry.Point(439098, 115030); 
var p6 = new OpenLayers.Geometry.Point(439184, 115012); 
var p7 = new OpenLayers.Geometry.Point(439310, 115090); 
var p8 = new OpenLayers.Geometry.Point(439398, 115068); 
var p9 = new OpenLayers.Geometry.Point(439796, 115160); 
var p10 = new OpenLayers.Geometry.Point(439882, 115206); 
var p11 = new OpenLayers.Geometry.Point(439950, 115158); 
var p12 = new OpenLayers.Geometry.Point(439870, 115048); 
var points = []; points.push(p1); points.push(p2); points.push(p3); points.push(p4); points.push(p5); points.push(p6); points.push(p7); points.push(p8); points.push(p9); points.push(p10); points.push(p11); points.push(p12); 
// create a line feature from a list of points 
var lineString = new OpenLayers.Geometry.LineString(points); 
var lineFeature = new OpenLayers.Feature.Vector(lineString, null, style_green); 
vectorLayer.addFeatures([lineFeature]); } 
</script>
</head>
<body onload="init();">
<h1>Displaying a line on a map</h1>
<div id="map" style="width: 500px; height: 300px; border: 1px solid black;"></div>
</body>
</html> 

We hope you find this useful.

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