Jump to the following:

We use cookies to improve this website. Read about cookies

Gazetteer search

How do we use the OpenSpace gazetteer search facility? We are going to build on the displaying information connected to a marker tutorial.

In fact, in this tutorial we created an HTML document with all the appropriate tags and included a DIV tag which gave instructions on how to display the map. The heavy lifting is all done within the javascript section (between the script…/script tags).

The instructions in this document will deal with this core of the code. Essentially we will be replacing the content of the displaying information connected to a marker tutorial script tags, with the following:

<script type="text/javascript">
var osMap;
function init()
{
osMap = new OpenSpace.Map('map');
//set-up the gazetteer service
var osGaz = new OpenSpace.Gazetteer;
/*this can be entered via user input but as an example we will pre-define
the name that we are searching for */
var placeStr = "Tideswell";
//pass any matches of the name to a function(gazOptions)
var gazArray = osGaz.getLocations(placeStr, gazOptions);
}
function gazOptions(searchVal)
{
//in this case there is only one match so we zoom to it, if there are more we can offer them to the user to select
osMap.setCenter(searchVal[0].location, 7);
}
</script>

Let's break this up.

We start a script tag to contain our code:

<script type="text/javascript">

Then we create a map object variable, osMap:

var osMap;

Now we define our init function:

function init()
{

Create a new OS OpenSpace map object and pass it our 'map' element id:

osMap = new OpenSpace.Map('map');

This is the HTML div that will hold the map.

We now set-up the gazetteer service:

var osGaz = new OpenSpace.Gazetteer;

This can be entered via user input but as an example we will pre-define the name that we are searching for:

var placeStr = "Tideswell";

Pass any matches of the name to a function(gazOptions) and close the init function:

var gazArray = osGaz.getLocations(placeStr, gazOptions);
}

Define our the function(gazOptions). Within the function, and in this case, there is only one match so we zoom to it, if there are more we could offer them to the user to select:

function gazOptions(searchVal)
{
osMap.setCenter(searchVal[0].location, 7);
}
Close the script tag. 
</script>

The full example can be found below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Open Space Tutorial 4</title>
<script type="text/javascript"
src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=insert_your_api_key_here"></script>
</head>
<body onload="init()">
<script type="text/javascript">
var osMap;
function init()
{
osMap = new OpenSpace.Map('map');
//set-up the gazetteer service
var osGaz = new OpenSpace.Gazetteer;
/*this can be entered via user input but as an example we will pre-define
the name that we are searching for */
var placeStr = "Tideswell";
//pass any matches of the name to a function(gazOptions)
var gazArray = osGaz.getLocations(placeStr, gazOptions);
}
function gazOptions(searchVal)
{
//in this case there is only one match so we zoom to it, if there are more
we can offer them to the user to select
osMap.setCenter(searchVal[0].location, 7);
}
</script>
<h1>Doing a gazetteer search</h1>
<div id="map" style="width: 500px; height: 300px; border: 1px solid black;"></div>
</body>
</html>

We hope you find this useful.

Back to top
© Ordnance Survey 2016
Be sure to take a look at our Terms of Use and Privacy Policy