Displaying a marker on a map

OS OpenSpace map displaying a marker

How do we display a marker on a map as above? First, we need to tell the browser to pull in the OS OpenSpace API:

<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:

<body onload="init();">

Next we need to add a map div element; this is the HTML element that will contain the map:

<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:

<script type="text/javascript">
var osMap;
function init()
{
osMap = new OpenSpace.Map('map');
osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 10);
var markers = new OpenLayers.Layer.Markers("Markers");
osMap.addLayer(markers);
var pos, marker;
pos = new OpenSpace.MapPoint(438760, 114760);
marker = new OpenLayers.Marker(pos);
markers.addMarker(marker);
}
</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 the centre of the map above Ordnance Survey head office.

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

We create a 'markers' layer and add it to the map:

var markers = new OpenLayers.Layer.Markers("Markers");
osMap.addLayer(markers);

Next we create a position object holding the location of Ordnance Survey head office:

var pos = new OpenSpace.MapPoint(438760, 114760);

And a marker at the above location:

var marker = new OpenLayers.Marker(pos);

Finally, we add the marker to the markers layer, close the function and script tag.

markers.addMarker(marker);
}
</script>

The full example can be found below.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Open Space Tutorial - Example 1</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');
        osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 10);
        var markers = new OpenLayers.Layer.Markers("Markers");
        osMap.addLayer(markers);
        var pos = new OpenSpace.MapPoint(438760, 114760);
        var marker = new OpenLayers.Marker(pos);
        markers.addMarker(marker);
    }
</script>
<h1>Displaying a marker on a map</h1>
<div id="map" style="width: 500px; height: 300px; border: 1px solid black;"></div>
</body>
</html>

Displaying a marker on a map

Let's break this up:

API

Community

OS OpenSpace