Skip to the following:

OS OpenSpace [logo]

Displaying the position of the cursor

OS OpenSpace map displaying the position of the cursor

How do we display the position of the cursor on the 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.         var screenOverlay = new OpenSpace.Layer.ScreenOverlay("coords");
  10.         screenOverlay.setPosition(new OpenLayers.Pixel(240, 10));
  11.         osMap.addLayer(screenOverlay);
  12.  
  13.         osMap.setCenter(new OpenSpace.MapPoint(438760,114760), 8);
  14.  
  15.         var gridProjection = new OpenSpace.GridProjection();
  16.  
  17.         osMap.events.register("mousemove", osMap, function(e) {
  18.             var pt = osMap.getLonLatFromViewPortPx(e.xy);
  19.             var lonlat = gridProjection.getLonLatFromMapPoint(pt);
  20.             screenOverlay.setHTML("<DIV style=\"width: 250px; height=75px; color: white; background-color: #222; font-size: 20px\">" +
  21.                                   "E: " + pt.lon + "<BR>" +
  22.                                   "N: " + pt.lat + "<BR>" +
  23.                                   "LON: " + lonlat.lon + "<BR>" +
  24.                                   "LAT: " + lonlat.lat + " </DIV>");
  25.         });
  26.     }
  27.  
  28. </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');

Create a screen overlay called "coords" and position it ten pixels from the right and top of the map window. Add this as a new layer to the map. This layer will then remain at the same position relative to the map window as the map is scrolled underneath.

  1. var screenOverlay = new OpenSpace.Layer.ScreenOverlay("coords");
  2. screenOverlay.setPosition(new OpenLayers.Pixel(240, 10));
  3. osMap.addLayer(screenOverlay);

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

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

We create an object to handle the coordinate transformation.

  1. var gridProjection = new OpenSpace.GridProjection();

The next piece of code registers an event handler to observe mousemove events. Whenever the mouse is moved within the map window, the following anonymous function is called with the details of the mouse event. The mouse position is then converted into a map position via the OpenLayers function getLonLatFromViewportPx(). This returns a point in the coordinate system of the map base layer, in our case that is British National Grid. We can then transform that point back into longitude/latitude by calling our previously defined convertor function. Finally the details are displayed in the screen overlay by setting the HTML contents.

  1. osMap.events.register("mousemove", osMap, function(e) {
  2. var pt = osMap.getLonLatFromViewPortPx(e.xy);
  3. var lonlat = gridProjection.getLonLatFromMapPoint(pt);
  4. screenOverlay.setHTML("<DIV style=\"width: 250px; height=75px; color: white; background-color: #222; font-size: 20px\">" +
  5.     "E: " + pt.lon + "<BR>" +
  6.     "N: " + pt.lat + "<BR>" +
  7.     "LON: " + lonlat.lon + "<BR>" +
  8.     "LAT: " + lonlat.lat + " </DIV>");
  9. });

Finally, we close the function and script tag.

  1. }
  2. </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 7</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.         var screenOverlay = new OpenSpace.Layer.ScreenOverlay("coords");
  14.         screenOverlay.setPosition(new OpenLayers.Pixel(240, 10));
  15.         osMap.addLayer(screenOverlay);
  16.         osMap.setCenter(new OpenSpace.MapPoint(438760,114760), 8);
  18.         var gridProjection = new OpenSpace.GridProjection();
  20.         osMap.events.register("mousemove", osMap, function(e) {
  21.         var pt = osMap.getLonLatFromViewPortPx(e.xy);
  22.         var lonlat = gridProjection.getLonLatFromMapPoint(pt);
  23.         screenOverlay.setHTML("<DIV style=\"width: 250px; height=75px; color: white; background-color: #222; font-size: 20px\">" +
  24.                               "E: " + pt.lon + "<BR>" +
  25.                               "N: " + pt.lat + "<BR>" +
  26.                               "LON: " + lonlat.lon + "<BR>" +
  27.                               " LAT: " + lonlat.lat + " </DIV>");
  28.         });
  29.     }
  30. </script>
  31. <h1>Displaying the position of the cursor</h1>
  32. <div id="map" style="width: 500px; height: 300px; border: 1px solid black;"></div>
  33. </body>
  34. </html>