Jump to the following:

Ordnance Survey logo

Discover Ordnance Survey

Skip primary navigation
Site Search
Skip secondary navigation

Gazetteer search

How do we use the OpenSpace gazetteer search facility? We are going to build on 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 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. This is the HTML div that will hold the map.


osMap = new OpenSpace.Map('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>
Skip supplementary navigation

For general enquiries, complaints, feedback or suggestions, email: customerservices@ordnancesurvey.co.uk or call us on 08456 05 05 05