HTML5 Geolocation in Britain

Mobile
28th May 2012

Geolocation is a key component of most mobile mapping web applications.  With more smartphone applications being built in both native APIs and in the compact JavaScript API, there is an increasing need to provide geolocation functionality for British maps using the British National Grid projection. There have been geolocation samples in the ArcGIS API for JavaScript for some time now and the amount of code needed to add geolocation to your javascript application is very small.

navigator.geolocation.getCurrentPosition(locate); 

function locate(position){ 	
    alert('Lat: '+position.coords.latitude+' '+
          'Lon: '+position.coords.latitude); 
}

Geolocation is being added to web apps widely, but until now, it was not straight forward to do this when working with British National Grid basemaps; this is due to the ~100m offset of points that are converted from Latitude & Longitude to Eastings & Northings when using the default projection route.  The default datum transformation used by ArcGIS Server when converting between WGS84 and OSGB36 is not the normal transformation option that we choose to use for most of our work; this has meant that applications using British National Grid basemaps and HTML5 geolocation will have an offset of around 100m when plotting a geolocated point on a map.

The old solution

ArcGIS Server SOAP API has provided the ability to perform accurate projection transformations for some time including custom transformations based on OSTN02 NTv2 which is an extremely accurate transformation between British national Grid and WGS 84 (and ETRS 89).  However, the SOAP API is cumbersome for a JavaScript application to access and not the method used by the rest of the JavaScript API.

The new stuff

ArcGIS Server 10.1 introduces the option of defining the datum transformation to be applied on projected geometries.  This new option gives us in the UK the ability to use our preferred OSGB 1936 To WGS 1984 Petroleum datum transformation which is generally accurate enough for smartphone geolocation scenarios.  This option exists with the new ArcGIS Server 10.1 Geometry Service however it has not yet been added as an option to the JavaScript API (at version 2.8) when projecting points.  As an interim measure (i.e. until the ArcGIS API for JavaScript adds this 10.1 functionality) I have created a sample using the Esri UK Datahub maps (British National Grid) and a little bit of magic to force the API to use the petroleum datum transformation.

The Sample

Below you will see a demo of the method mentioned above; click on the geolocation icon to locate yourself.  You will need to be running a modern browser which supports geolocation (IE9+, Chrome, Firefox etc…).

Download the code sample here.

The key code to note in the sample download is:

//  Use the hosted 10.1 Beta ArcGIS Server Geometry Service for the demo
gsvc = new esri.tasks.GeometryService(
   "http://servicesbeta4.esri.com/arcgis/rest/services/Geometry/GeometryServer"
);
//  create a new point from the geolocation location
var point = new esri.geometry.Point(
	location.coords.longitude, location.coords.latitude, 
	new esri.SpatialReference({
		wkid: 4326
	})
);
//  set the output spatial reference for the project method
var outSR = new esri.SpatialReference({
	wkid: 27700
});
//  tack on two parameters in the query object - these will be added to the url and will give us a more accurate transformation
gsvc._url.query = dojo.mixin(gsvc._url.query, {
	//  set the datum transformation to OSGB_1936_To_WGS_1984_Petroleum (1314)
	//  the options are listed here: http://servicesbeta2.esri.com/arcgis/sdk/rest/dattrans.html
	transformation: 1314,
	//  we are transforming backwards in this case
	//  FROM WGS84 TO OSGB36
	transformForward: false
});
//  call the geometry service project method as you would normally
gsvc.project([point], outSR, function (projectedPoints) {
	//  get the projected point
	pt = projectedPoints[0];
	//  add it to the map
	addGraphic(pt);
	//  zoom the map to the added point
	map.centerAndZoom(pt, 17);
});

This code has been supplied as an interim measure until the datum transformation method is supported in the JavaScript API. Now let’s make some mobile web applications in BNG.

Sam Larsen
Mobile