Skip to the following:

OS OpenSpace [logo]

Displaying a line on a map

OS OpenSpace map displaying a line overlay

How do we add a line to the map? 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: 500px; height: 300px; border: 1px solid black;"></div>

Now we move on to the core of the code, actually instantiating and adding the map:

  1. <script type="text/javascript">
  2.  
  3. var osMap;
  4.  
  5. function init()
  6. {
  7.     // Creates the map centered on OSHQ
  8.  
  9.     osMap = new OpenSpace.Map('map');
  10.  
  11.     osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 8);
  12.  
  13.     var vectorLayer = new OpenLayers.Layer.Vector("Vector Layer");
  14.     osMap.addLayer(vectorLayer);
  15.  
  16.     /*
  17.     * Define the line style
  18.     */
  19.     var style_green =
  20.     {
  21.         strokeColor: "#00FF00",
  22.         strokeOpacity: 0.7,
  23.         strokeWidth: 6
  24.     };
  25.  
  26.     // Define the line
  27.     var p1 = new OpenLayers.Geometry.Point(438770, 114846);
  28.     var p2 = new OpenLayers.Geometry.Point(438816, 114874);
  29.     var p3 = new OpenLayers.Geometry.Point(438892, 114740);
  30.     var p4 = new OpenLayers.Geometry.Point(438898, 114810);
  31.     var p5 = new OpenLayers.Geometry.Point(439098, 115030);
  32.     var p6 = new OpenLayers.Geometry.Point(439184, 115012);
  33.     var p7 = new OpenLayers.Geometry.Point(439310, 115090);
  34.     var p8 = new OpenLayers.Geometry.Point(439398, 115068);
  35.     var p9 = new OpenLayers.Geometry.Point(439796, 115160);
  36.     var p10 = new OpenLayers.Geometry.Point(439882, 115206);
  37.     var p11 = new OpenLayers.Geometry.Point(439950, 115158);
  38.     var p12 = new OpenLayers.Geometry.Point(439870, 115048);
  39.  
  40.     var points = [];
  41.     points.push(p1);
  42.     points.push(p2);
  43.     points.push(p3);
  44.     points.push(p4);
  45.     points.push(p5);
  46.     points.push(p6);
  47.     points.push(p7);
  48.     points.push(p8);
  49.     points.push(p9);
  50.     points.push(p10);
  51.     points.push(p11);
  52.     points.push(p12);
  53.  
  54.     // create a line feature from a list of points
  55.     var lineString = new OpenLayers.Geometry.LineString(points);
  56.     var lineFeature = new OpenLayers.Feature.Vector(lineString, null, style_green);
  57.  
  58.     vectorLayer.addFeatures([lineFeature]);
  59. }
  60.  
  61. </script>

Let's break this up:

We start a script tag to contain our code:

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

Then we create a map object variable, osMap

:
  1. var osMap;

Now we define our init function:

  1. function init()
  2. {

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

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

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

Add a vector layer to the map:

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

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

  1. var style_green =
  2. {
  3.     strokeColor: "#00FF00",
  4.     strokeOpacity: 0.7,
  5.     strokeWidth: 6
  6. };

This defines the line manually from a list of points:

  1. // Define the line
  2. var p1 = new OpenLayers.Geometry.Point(438770, 114846);
  3. var p2 = new OpenLayers.Geometry.Point(438816, 114874);
  4. var p3 = new OpenLayers.Geometry.Point(438892, 114740);
  5. var p4 = new OpenLayers.Geometry.Point(438898, 114810);
  6. var p5 = new OpenLayers.Geometry.Point(439098, 115030);
  7. var p6 = new OpenLayers.Geometry.Point(439184, 115012);
  8. var p7 = new OpenLayers.Geometry.Point(439310, 115090);
  9. var p8 = new OpenLayers.Geometry.Point(439398, 115068);
  10. var p9 = new OpenLayers.Geometry.Point(439796, 115160);
  11. var p10 = new OpenLayers.Geometry.Point(439882, 115206);
  12. var p11 = new OpenLayers.Geometry.Point(439950, 115158);
  13. var p12 = new OpenLayers.Geometry.Point(439870, 115048);
  14.  
  15. var points = [];
  16. points.push(p1);
  17. points.push(p2);
  18. points.push(p3);
  19. points.push(p4);
  20. points.push(p5);
  21. points.push(p6);
  22. points.push(p7);
  23. points.push(p8);
  24. points.push(p9);
  25. points.push(p10);
  26. points.push(p11);
  27. points.push(p12);

Create the line feature from the array of points:

  1. var lineString = new OpenLayers.Geometry.LineString(points);
  2. 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.

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

The full example can be found below.

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>Open Space Tutorial - Example 4</title>
  4. <script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=insert_your_api_key_here"></script>
  6. <script type="text/javascript">
  8.     var osMap;
  10.     function init()
  11.     {
  12.         // Creates the map centered on OSHQ
  14.         osMap = new OpenSpace.Map('map');
  15.         osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 8);
  16.         var vectorLayer = new OpenLayers.Layer.Vector("Vector Layer");
  17.         osMap.addLayer(vectorLayer);
  19.         /*
  20.          * Define the line style
  21.          */
  22.         var style_green =
  23.         {
  24.             strokeColor: "#00FF00",
  25.             strokeOpacity: 0.7,
  26.             strokeWidth: 6,
  27.             pointRadius: 6,
  28.             pointerEvents: "visiblePainted"
  29.         };
  31.         // Define the line
  32.         var p1 = new OpenLayers.Geometry.Point(438770, 114846);
  33.         var p2 = new OpenLayers.Geometry.Point(438816, 114874);
  34.         var p3 = new OpenLayers.Geometry.Point(438892, 114740);
  35.         var p4 = new OpenLayers.Geometry.Point(438898, 114810);
  36.         var p5 = new OpenLayers.Geometry.Point(439098, 115030);
  37.         var p6 = new OpenLayers.Geometry.Point(439184, 115012);
  38.         var p7 = new OpenLayers.Geometry.Point(439310, 115090);
  39.         var p8 = new OpenLayers.Geometry.Point(439398, 115068);
  40.         var p9 = new OpenLayers.Geometry.Point(439796, 115160);
  41.         var p10 = new OpenLayers.Geometry.Point(439882, 115206);
  42.         var p11 = new OpenLayers.Geometry.Point(439950, 115158);
  43.         var p12 = new OpenLayers.Geometry.Point(439870, 115048);
  45.         var points = [];
  46.         points.push(p1);
  47.         points.push(p2);
  48.         points.push(p3);
  49.         points.push(p4);
  50.         points.push(p5);
  51.         points.push(p6);
  52.         points.push(p7);
  53.         points.push(p8);
  54.         points.push(p9);
  55.         points.push(p10);
  56.         points.push(p11);
  57.         points.push(p12);
  60.         // create a line feature from a list of points
  61.         var lineString = new OpenLayers.Geometry.LineString(points);
  62.         var lineFeature = new OpenLayers.Feature.Vector(lineString, null, style_green);
  64.         vectorLayer.addFeatures([lineFeature]);
  65.     }
  67. </script>
  68. </head>
  69. <body onload="init();">
  70.  <h1>Displaying a line on a map</h1>
  72.  <div id="map" style="width: 500px; height: 300px; border: 1px solid black;"></div>
  73. </body>
  74. </html>