Jump 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 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.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Open Space Tutorial - Example 4</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;
    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,
            pointRadius: 6,
            pointerEvents: "visiblePainted"
        };
        // 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>