Jump to the following:

OS OpenSpace [logo]

Postcode search

OS OpenSpace map displaying a postcode search

How do we find the location of a postcode or a postcode sector and centre the map on it? The following example allows entry of a correctly spelt postcode e.g. SO16 4GU or SO164GU or a postcode sector e.g. SO16.

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.  var osMap, postcodeService;
  3.  function init()
  4.  {
  5.   osMap = new OpenSpace.Map('map');
  6.   osMap.setCenter(new OpenSpace.MapPoint(438760,114760), 9);
  7.   postcodeService = new OpenSpace.Postcode();
  8.  }
  9.  function searchPostcode()
  10.  {
  11.   var query = document.getElementById("postcode");
  12.   postcodeService.getLonLat(query.value, onResult);
  13.   return false;
  14.  }
  15.  function onResult(mapPoint)
  16.  {
  17.   osMap.setCenter(mapPoint, 7);
  18.  }

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 and a variable for the postcode search facility, postcodeService:

var osMap, postcodeService;

Now we define our init function:

function init() {

Then 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. var osMap, postcodeService;

Next we centre the map on our choice of location and zoom level:

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

Then we start up the postcode service which is where we search Code-Point® for a match:

  1. postcodeService = new OpenSpace.Postcode();

This function is called when the user clicks the 'go' button.

  1. function searchPostcode()
  2.  {

The input value to the form is read into a variable:

  1. var query = document.getElementById("postcode");

The postcode service is searched to see if there is a match and if there is a MapPoint is sent to a function (onResult in this case):

  1. postcodeService.getLonLat(query.value, onResult);
  2.   return false;
  3.  }

Finally, if the postcode or sector was found the map is centred at the centroid of the Code-Point® polygon and at a zoom level of our choosing:

  1. function onResult(mapPoint)
  2. {
  3.   osMap.setCenter(mapPoint, 7);
  4. }

The full code can be found below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Open Space Tutorial - Example 11</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, postcodeService;
 function init()
 {
  osMap = new OpenSpace.Map('map');
  osMap.setCenter(new OpenSpace.MapPoint(438760,114760), 9);
  postcodeService = new OpenSpace.Postcode();
 }
 function searchPostcode()
 {
  var query = document.getElementById("postcode");
  postcodeService.getLonLat(query.value, onResult);
  return false;
 }
 function onResult(mapPoint)
 {
  osMap.setCenter(mapPoint, 7);
 }
</script>
</head>
<body onload="init()">
<div id="map" style="width: 500px; height: 300px; border: 1px solid black;"></div>
<form onsubmit="return searchPostcode();">
<span><b>Enter postcode or postcode sector:</b></span>
<input type="text" value="" id="postcode" size="10" maxlength="10"/>
<input type="button" value="Go" onclick="searchPostcode();"/>
</form>
</body>
</html>