Skip to the following:

OS OpenSpace [logo]

Displaying a lon/lat marker on a map

OS OpenSpace map displaying a lon/lat marker

How do we display a longitude/latitude point 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.  
  4. function init()
  5. {
  6.     osMap = new OpenSpace.Map('map');
  7.  
  8.     osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 7);
  9.  
  10.     var markers = new OpenLayers.Layer.Markers("Markers");
  11.     osMap.addLayer(markers);
  12.  
  13.     var lonlat = new OpenLayers.LonLat(-1.434006, 50.9335005);
  14.     var gridProjection = new OpenSpace.GridProjection();
  15.     var pos = gridProjection.getMapPointFromLonLat(lonlat);
  16.  
  17.     var marker = new OpenLayers.Marker(pos);
  18.     markers.addMarker(marker);
  19. }
  20. </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), 7);

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 longitude/latitude position object holding the location of Ordnance Survey head office. An OS OpenSpace.GridProjection object is created to handle the transformation from longitude/latitude to British National Grid, and the transformed position is calculated:

  1. var lonlat = new OpenLayers.LonLat(-1.434006, 50.9335005);
  2. var gridProjection = new OpenSpace.GridProjection();
  3. var pos = gridProjection.getMapPointFromLonLat(lonlat);

A marker is created at the above location:

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

Finally, we add the marker to the markers layer, and close both the function and the 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 2</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">
  9.     var osMap;
  11.     function init()
  12.     {
  13.         osMap = new OpenSpace.Map('map');
  15.         osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 7);
  17.         var markers = new OpenLayers.Layer.Markers("Markers");
  18.         osMap.addLayer(markers);
  20.         var lonlat = new OpenLayers.LonLat(-1.434006, 50.9335005);
  21.         var gridProjection = new OpenSpace.GridProjection();
  22.         var pos = gridProjection.getMapPointFromLonLat(lonlat);
  24.         var marker = new OpenLayers.Marker(pos);
  25.         markers.addMarker(marker);
  26.     }
  27. </script>
  28. <h1>Displaying a point on a map</h1>
  29. <div id="map" style="width: 500px; height: 300px; border: 1px solid black;"></div>
  30. </body>
  31. </html>