Skip 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 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;
  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), 6);
  12.  
  13.     var vectorLayer = new OpenLayers.Layer.Vector("Vector Layer");
  14.     osMap.addLayer(vectorLayer);
  15.  
  16.     /*
  17.     * Define polygon style
  18.     */
  19.     var style_green =
  20.     {
  21.         strokeColor: "#000000",
  22.         strokeOpacity: 1,
  23.         strokeWidth: 2,
  24.         fillColor: "#00FF00",
  25.         fillOpacity: 0.6
  26.     };
  27.  
  28.     // Define polygon area
  29.     var p1 = new OpenLayers.Geometry.Point(439000, 114000);
  30.     var p2 = new OpenLayers.Geometry.Point(440000, 115000);
  31.     var p3 = new OpenLayers.Geometry.Point(437000, 116000);
  32.     var p4 = new OpenLayers.Geometry.Point(436000, 115000);
  33.     var p5 = new OpenLayers.Geometry.Point(436500, 113000);
  34.  
  35.     var points = [];
  36.     points.push(p1);
  37.     points.push(p2);
  38.     points.push(p3);
  39.     points.push(p4);
  40.     points.push(p5);
  41.  
  42.     // create a polygon feature from a list of points
  43.     var linearRing = new OpenLayers.Geometry.LinearRing(points);
  44.     var polygonFeature = new OpenLayers.Feature.Vector(linearRing, null, style_green);
  45.  
  46.     vectorLayer.addFeatures([polygonFeature]);
  47. }
  48.  
  49. </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.

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>Open Space Tutorial - Example 5</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), 6);
  16.         var vectorLayer = new OpenLayers.Layer.Vector("Vector Layer");
  17.         osMap.addLayer(vectorLayer);
  19.         /*
  20.          * Define polygon styles
  21.          */
  22.         var style_green =
  23.         {
  24.             strokeColor: "#000000",
  25.             strokeOpacity: 1,
  26.             strokeWidth: 2,
  27.             fillColor: "#00FF00",
  28.             fillOpacity: 0.6
  29.         };
  31.         // Define polygon area
  32.         var p1 = new OpenLayers.Geometry.Point(439000, 114000);
  33.         var p2 = new OpenLayers.Geometry.Point(440000, 115000);
  34.         var p3 = new OpenLayers.Geometry.Point(437000, 116000);
  35.         var p4 = new OpenLayers.Geometry.Point(436000, 115000);
  36.         var p5 = new OpenLayers.Geometry.Point(436500, 113000);
  38.         var points = [];
  39.         points.push(p1);
  40.         points.push(p2);
  41.         points.push(p3);
  42.         points.push(p4);
  43.         points.push(p5);
  45.         // create a polygon feature from a list of points
  46.         var linearRing = new OpenLayers.Geometry.LinearRing(points);
  47.         var polygonFeature = new OpenLayers.Feature.Vector(linearRing, null, style_green);
  49.         vectorLayer.addFeatures([polygonFeature]);
  50.     }
  52. </script>
  53. </head>
  54. <body onload="init();">
  55. <h1>Displaying a polygon on a map</h1>
  56. <div id="map" style="width: 500px; height: 300px; border: 1px solid black;"></div>
  57. </body>
  58. </html>