Skip to the following:

OS OpenSpace [logo]

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 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;
  3. function init()
  4. {
  5.     osMap = new OpenSpace.Map('map');
  6.     osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 10);
  7.  
  8.     var markers = new OpenLayers.Layer.Markers("Markers");
  9.     osMap.addLayer(markers);
  10.  
  11.     var pos, marker;
  12.     pos = new OpenSpace.MapPoint(438760, 114760);
  13.     marker = new OpenLayers.Marker(pos);
  14.     markers.addMarker(marker);
  15. }
  16. </script>

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:

  1. var osMap;

Now we define our init function:

  1. function init()
  2. {

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. osMap = new OpenSpace.Map('map');

We now set the centre of the map above Ordnance Survey head office.

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

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

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

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

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

And a marker at the above location:

  1. var marker = new OpenLayers.Marker(pos);

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

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

The full example can be found below.

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>Open Space Tutorial - Example 1</title>
  4. <script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=insert_your_api_key_here"></script>
  5. </head>
  6. <body onload="init()">
  7. <script type="text/javascript">
  8.     var osMap;
  10.     function init()
  11.     {
  12.         osMap = new OpenSpace.Map('map');
  13.         osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 10);
  15.         var markers = new OpenLayers.Layer.Markers("Markers");
  16.         osMap.addLayer(markers);
  18.         var pos = new OpenSpace.MapPoint(438760, 114760);
  19.         var marker = new OpenLayers.Marker(pos);
  20.         markers.addMarker(marker);
  21.     }
  23. </script>
  24. <h1>Displaying a marker on a map</h1>
  25. <div id="map" style="width: 500px; height: 300px; border: 1px solid black;"></div>
  26. </body>
  27. </html>