Tutorial One
From OS OpenData developer wiki
Displaying a marker on a map
How do we display a marker on a map as above?
In this example, we will start with a simple HTML document header and include a title for our
page:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>OpenSpace Foundation Tutorial - Example 1</title>
Now, we need to tell the browser to pull in the OS OpenSpace JavaScript 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 close the head tag and tell JavaScript to run our initialisation function on loading the page:
</head> <body onload="init();">
Now we move on to the core of the code, actually instantiating and adding the map (see below for a detailed breakdown of this code):
<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>
Next we’ll add some text to our web page
<h1>Displaying a marker on a map</h1>
Now 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>
Finally we’ll close the HTML document.
</body> </html>
Let's break up the core code:
We start a script tag to contain our code:
<script type="text/javascript"> </source>
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> OpenSpace Foundation 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>
