Tutorial #19
Geolocation in HTML5 Intermediate   2013-11-14

Introduction

HTML5 has brought with it a load of new features that we can use in our sites to create exciting new applications. One of these is geolocation with which the browser is able to capture your physical location.

Geolocation is really important for mobile users. By combining that with maps, you can show your users where they are, give them directions to your business, track their bike rides and much more.

Geolocation is built right into the browser and is surprisingly easy to use. This tutorial shows you how to get the user's location and display it on a Google map, building on the code shown in Tutorial 15.

The demo screenshot will look something like this (but with your location, of course) :

Demo 1 screenshot for this tutorial


Step by Step

Running the demo is trivial, but note that it will ask you for permission to use your location the first time you run it. This is to preserve the privacy of users who do not want to be tracked.


Understanding the Code

I recommend that you look at Tutorial 15 first so you understand how to render a simple Google map. This demo moves that code into the function drawMap making the rest of the code easier to read.

Currently not all browsers support geolocation so we need to check the user's browser. Internet Explorer 8 is really the only one that you will encounter that fails the test.

geolocation does not involve any external JavaScript library - it is built into the browser. So we access is via the navigator object which represents the browser itself.

We test for the existence of navigator.geolocation. If it exists then the browser supports geolocation. If not then we issue an error message.

If it does exist, then we call navigator.geolocation.getCurrentPosition and pass it a function that defines what we do with the information.

Be aware that getCurrentPosition is an Asynchronous call - so you need to put the code that process the result into the callback function that you pass into this call.

The function is passed a GeoPositionobject. This has a timestamp that specifies when the location was determined, and a coords attribute, which itself is a hash of key/value pairs, that represents the location and other data.

The coords attribute has the following attributes:

latitude - the Latitude expressed in degrees in the WGS84 format.
longitude - the Longitude expressed in the same way.
accuracy - an estimate of the Accuracy of the location, expressed in meters.
altitude - the Altitude expressed in meters.
altitudeAccuracy - an estimate of the Accuracy of the Altitude, expressed in meters.
heading - the Direction the client device is pointed in, or moving in, expressed in degrees.
speed - the Speed the client device is moving at, expressed in meters per second.

Accuracy is very useful as it tells you how much confidence to put in the estimate of location. On my phone this value might be less than 100 meters, but from my desktop, with no GPS, the value is 2200 meters.

Don't trust the accuracy of the accuracy value! Use it to make a general judgement about the user's location. If the accuracy is, say, 100 meters or less then the location is probably correct. If it is more than 1000 meters then it is just in the general vicinity of the true location, for example in the same city.

Altitude may not be available on your device. It is on my iPhone, in which case there is also an altitudeAccuracy estimate which, like before, is best treated as a general guide.

If the device is moving then you may see Heading and Speed estimates. These are not available if the device is stationary.

The timestamp is a DOMTimestamp which we can convert to a readable format by passing it to a JavaScript Date object and then converting to a suitable format.

The code extracts the values from the position object and displays them as text in a div on the page.

It then passes the Lat/Long pair to the drawMap function which does what its name suggests.

There may be cases where the geolocation service fails. To handle this we pass a second function to the getCurrentPosition, an errorCallback which issues an error message.

Geolocation is intended to work with mobile devices. The browser talks to the GPS in your phone and returns the accurate Latitude and Longitude pair.

Things are different for Desktop browsers. These will try and figure your location based on your internet connection, your system settings, etc. It will not be accurate. On my desktop the browser is able to say that I am in Seattle and so returns a location in the center of the city.

The demo code is not optimized for mobile devices - the page might look a bit funky on your iPhone, etc., but it should work as expected

Here is an example of the demo when called from an iPhone in a moving vehicle:

Image 1 for this tutorial

You can see that the vehicle is moving North at a speed of around 9 miles per hour


Geolocation is really very simple to use - all the complexity of GPS, etc. takes place behind the scenes. Experiment with it in your pages and think how making your site location aware could help your users.

For more information take a look at:

Mozilla tutorial: Using Geolocation

W3C Geolocation API Specification


Code for this Tutorial


Share this tutorial


Related Tutorials

15 : Display a Google Map using JavaScript   (Intermediate)

22 : Using Metadata from Photographs   (Advanced)

24 : Geocoding with Google Maps   (Intermediate)


Comment on this Tutorial


comments powered by Disqus