Jump to the following:

OS OpenSpace [logo]

Displaying a polygon on a map

OS OpenSpace map displaying a polygon overlay

How do we add a filled polygon 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. function init()
  5. {
  6.     // Creates the map centered on OSHQ
  7.  
  8.     osMap = new OpenSpace.Map('map');
  9.  
  10.     osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 6);
  11.  
  12.     var vectorLayer = new OpenLayers.Layer.Vector("Vector Layer");
  13.     osMap.addLayer(vectorLayer);
  14.  
  15.     /*
  16.     * Define polygon style
  17.     */
  18.     var style_green =
  19.     {
  20.         strokeColor: "#000000",
  21.         strokeOpacity: 1,
  22.         strokeWidth: 2,
  23.         fillColor: "#00FF00",
  24.         fillOpacity: 0.6
  25.     };
  26.  
  27.     // Define polygon area
  28.     var p1 = new OpenLayers.Geometry.Point(439000, 114000);
  29.     var p2 = new OpenLayers.Geometry.Point(440000, 115000);
  30.     var p3 = new OpenLayers.Geometry.Point(437000, 116000);
  31.     var p4 = new OpenLayers.Geometry.Point(436000, 115000);
  32.     var p5 = new OpenLayers.Geometry.Point(436500, 113000);
  33.  
  34.     var points = [];
  35.     points.push(p1);
  36.     points.push(p2);
  37.     points.push(p3);
  38.     points.push(p4);
  39.     points.push(p5);
  40.  
  41.     // create a polygon feature from a list of points
  42.     var linearRing = new OpenLayers.Geometry.LinearRing(points);
  43.     var polygonFeature = new OpenLayers.Feature.Vector(linearRing, null, style_green);
  44.  
  45.     vectorLayer.addFeatures([polygonFeature]);
  46. }
  47.  
  48. </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 polygon fill colour, border width and opacity:

  1. var style_green =
  2. {
  3.     strokeColor: "#000000",
  4.     strokeOpacity: 1,
  5.     strokeWidth: 2,
  6.     fillColor: "#00FF00",
  7.     fillOpacity: 0.6
  8. };

This defines the polygon manually from a list of points:

  1. // Define polygon area
  2. var p1 = new OpenLayers.Geometry.Point(439000, 114000);
  3. var p2 = new OpenLayers.Geometry.Point(440000, 115000);
  4. var p3 = new OpenLayers.Geometry.Point(437000, 116000);
  5. var p4 = new OpenLayers.Geometry.Point(436000, 115000);
  6. var p5 = new OpenLayers.Geometry.Point(436500, 113000);
  7.  
  8. var points = [];
  9. points.push(p1);
  10. points.push(p2);
  11. points.push(p3);
  12. points.push(p4);
  13. points.push(p5);

Create the polygon feature from the array of points:

  1. var linearRing = new OpenLayers.Geometry.LinearRing(points);
  2. var polygonFeature = new OpenLayers.Feature.Vector(linearRing, null, style_green);

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

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

The full example can be found below.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Open Space Tutorial - Example 5</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), 6);
        var vectorLayer = new OpenLayers.Layer.Vector("Vector Layer");
        osMap.addLayer(vectorLayer);
        /*
         * Define polygon styles
         */
        var style_green =
        {
            strokeColor: "#000000",
            strokeOpacity: 1,
            strokeWidth: 2,
            fillColor: "#00FF00",
            fillOpacity: 0.6
        };
        // Define polygon area
        var p1 = new OpenLayers.Geometry.Point(439000, 114000);
        var p2 = new OpenLayers.Geometry.Point(440000, 115000);
        var p3 = new OpenLayers.Geometry.Point(437000, 116000);
        var p4 = new OpenLayers.Geometry.Point(436000, 115000);
        var p5 = new OpenLayers.Geometry.Point(436500, 113000);
        var points = [];
        points.push(p1);
        points.push(p2);
        points.push(p3);
        points.push(p4);
        points.push(p5);
        // create a polygon feature from a list of points
        var linearRing = new OpenLayers.Geometry.LinearRing(points);
        var polygonFeature = new OpenLayers.Feature.Vector(linearRing, null, style_green);
        vectorLayer.addFeatures([polygonFeature]);
    }
</script>
</head>
<body onload="init();">
<h1>Displaying a polygon on a map</h1>
<div id="map" style="width: 500px; height: 300px; border: 1px solid black;"></div>
</body>
</html>