Jump to the following:

Ordnance Survey logo

Discover Ordnance Survey

Skip primary navigation
Site Search
Skip secondary navigation

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 displayng information connected to a marker tutorial script tags, with the following:


<source lang="html4strict" enclose="pre" highlight="5"> 
<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> 
</source>

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:


var points = [];

Define our particular line styling, including width and colour of the line:


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); points.push(p9); points.push(p10); points.push(p11); points.push(p12);

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>
Skip supplementary navigation

For general enquiries, complaints, feedback or suggestions, email: customerservices@ordnancesurvey.co.uk or call us on 08456 05 05 05