Skip to the following:

OS OpenSpace [logo]

Displaying a custom marker on a map

OS OpenSpace map displaying a custom marker

How do we display a custom 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.  
  3. var osMap;
  4.  
  5. function init()
  6. {
  7.     osMap = new OpenSpace.Map('map');
  8.  
  9.     osMap.setCenter(new OpenSpace.MapPoint(439300, 114760), 8);
  10.  
  11.     var markers = new OpenLayers.Layer.Markers("Markers");
  12.     osMap.addLayer(markers);
  13.  
  14.     // Default icon
  15.     var pos = new OpenSpace.MapPoint(438760, 114760);
  16.     var marker = new OpenLayers.Marker(pos);
  17.  
  18.     markers.addMarker(marker);
  19.  
  20.     // Different icon
  21.     var size = new OpenLayers.Size(50, 50);
  22.     var offset = new OpenLayers.Pixel(-size.w / 2, -size.h / 2);
  23.     icon = new OpenLayers.Icon('house.gif', size, offset);
  24.     pos = new OpenSpace.MapPoint(439870, 115048);
  25.     marker = new OpenLayers.Marker(pos, icon);
  26.  
  27.     markers.addMarker(marker);
  28. }
  29.  
  30. </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 somewhere between the two points we are about to define:

  1. osMap.setCenter(new OpenSpace.MapPoint(439300, 114760), 3);

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);

Create a default marker at the above location:

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

Add the marker to the markers layer:

  1. markers.addMarker(marker);

Create an icon containing the custom image we want to show on the map. The icon has its size specified and the offset the image needs to be shifted to appear over the chosen point:

  1. var size = new OpenLayers.Size(50, 50);
  2. var offset = new OpenLayers.Pixel(-size.w / 2, -size.h / 2);
  3. icon = new OpenLayers.Icon('house.gif', size, offset);

The second marker is at a different position:

  1. pos = new OpenSpace.MapPoint(439870, 115048);

Create the second marker:

  1. marker = new OpenLayers.Marker(pos, icon);

Finally add the second 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 6</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;
  9.     function init()
  10.     {
  11.         osMap = new OpenSpace.Map('map');
  13.         osMap.setCenter(new OpenSpace.MapPoint(439300, 114760), 8);
  15.         var markers = new OpenLayers.Layer.Markers("Markers");
  16.         osMap.addLayer(markers);
  18.         // Default icon
  19.         var pos = new OpenSpace.MapPoint(438760, 114760);
  20.         var marker = new OpenLayers.Marker(pos);
  22.         markers.addMarker(marker);
  24.         // Different icon
  25.         var size = new OpenLayers.Size(50, 50);
  26.         var offset = new OpenLayers.Pixel(-size.w / 2, -size.h / 2);
  27.         icon = new OpenLayers.Icon('house.gif', size, offset);
  28.         pos = new OpenSpace.MapPoint(439870, 115048);
  29.         marker = new OpenLayers.Marker(pos, icon);
  31.         markers.addMarker(marker);
  32.     }
  33. </script>
  34. <h1>Displaying a custom marker on a map</h1>
  35. <div id="map" style="width: 500px; height: 300px; border: 1px solid black;"></div>
  36. </body>
  37. </html>