HTML5 geolocation demo

Written on 20 October 2011, 05:39pm

Tagged with: ,

1. Test if the browser supports navigation:

if (navigator.geolocation) {  
  /* geolocation available */  
} else {  
  /* geolocation not supported by this browser */  
//---or use Modernizr
 if (Modernizr.geolocation) {
//---or be geek

2. Getting the current position: navigator.geolocation.getCurrentPosition()

The getCurrentPosition() method initiates an asynchronous request to detect the user’s position, and queries the positioning hardware to get up-to-date information. When the position is determined, a specified callback routine is executed. You can optionally provide a second callback to be executed if an error occurs. A third, optional, parameter is an options interface where you can set the maximum age of the position returned and the time to wait for a request. [#]

		{enableHighAccuracy:true, timeout:30000, maximumAge:60000 }

3. Geolocation success callback function

The success callback function will be called with a single parameter, an object with two properties: coords and timestamp.

The timestamp is just that, the date and time when the location was calculated. (Since this is all happening asynchronously, you can’t really know when that will happen in advance. It might take some time for the user to read the infobar and agree to share their location. Devices with dedicated GPS hardware may take some more time to connect to a GPS satellite. And so on.)
The coords object has properties like latitude and longitude which are exactly what they sound like: the user’s physical location in the world. [#]

function geo_success(position) 
	var latitude = position.coords.latitude;
	var longitude = position.coords.longitude;
	//show the position on a map

4. Geolocation error fallback function

If anything goes wrong, your error callback function will be called with a PositionError object, with two properties: code and message.
The code property will be one of:

  • PERMISSION_DENIED (1) if the user does not want to share the location.
  • POSITION_UNAVAILABLE (2) if the network is down or the positioning satellites can’t be contacted.
  • TIMEOUT (3) if the network is up but it takes too long to calculate the user’s position.
  • UNKNOWN_ERROR (0) if anything else goes wrong.
function geo_error(error)
		case error.TIMEOUT:
			alert ('Timeout');
			alert ('Position unavailable');
			alert ('Permission denied');
		case error.UNKNOWN_ERROR:
			alert ('Unknown error');


5. Geolocation options

The third argument of navigator.geolocation.getCurrentPosition is a PositionOptions object with the following properties:

  • enableHighAccuracy (boolean, default false)
  • timeout (long, represents milliseconds, no default value)
  • maximumAge (long, represents milliseconds, default 0)

So, the following object tells the browser to get the exact location, wait at most 30 seconds for it, and to answer immediately if it already calculated the position in the past 60 seconds:

{enableHighAccuracy:true, timeout:30000, maximumAge:60000}

Note: The timeout timer doesn’t start counting down until after the user gives permission to even try to calculate their position.

6. Watch current position: watchPosition()

The watchPosition() function has the same structure as getCurrentPosition(). It takes two callback functions, a required one for success and an optional one for error conditions, and it can also take an optional PositionOptions object that has all the same properties you just learned about. The difference is that your callback function will be called every time the user’s location changes. There is no need to actively poll their position. The device will determine the optimal polling interval, and it will call your callback function whenever it determines that the user’s position has changed. You can use this to update a visible marker on a map, provide instructions on where to go next, etc.

The watchPosition() function itself returns a number. You should probably store this number somewhere. If you ever want to stop watching the user’s location change, you can call the clearWatch() method and pass it this number, and the device will stop calling your callback function. If you’ve ever used the setInterval() and clearInterval() functions in JavaScript, this works the same way. [#]

Comments (2)

Leave a response