Use the Geolocation API in Webapps

BANGALORE, INDIA: LBS (or 'Location based services') is the new buzzword when it comes to future applications, especially in the mobile domain. This is because it provides the users with an extra context, their current location. Many applications such as Gowalla, Google Maps and Flickr use it to enhance their applications. In this article, we'll see how you, as a developer, can harness this capability in your web applications by using the W3C Geolocation API.

What is geolocation?

Geolocation is the process used to find the user's current location. Many upcoming browsers, including leading mobile browsers like Opera Mobile 10.1 beta have built-in support for Geolocation.

There is an open web standard associated with geolocation, called the W3C Geolocation API. Web developers can use this API to add geolocation capabilities to their applications.

How is it better, and how does it work?

One of the ways in which W3C Geolocation API is better, is that its implementation in browsers makes determination of location much more accurate. Instead of relying just on the user's IP address, the browser also tries to see information about WiFi networks nearby as well as your IP data and sends it to a location services provider which compares it with its central database of WiFi hotspots and locations to find out where you are.

Another reason it is better is that it respects the user's privacy. Before determining the location, the browser always asks whether the user wants to share his or her location or not. If the user agrees, then the location information is shared, otherwise it is not. In this way, the user has complete control on his location information, and the only way an app would know the user's location would be if it was explicitly shared.

How to use it in a web app?

Using it in a web app is actually pretty easy. The W3C Geolocation API has a set of pretty straightforward functions you can use. Lets take a look at how to use it.

First of all, it is good to know whether the browser supports this capability or not. You can do so by using navigator.geoLocation.If it returns 'true', then the browser supports it, otherwise it doesn't. So your code should start with something like this:

If (navigator.geoLocation){

//have your geolocation specific code here

} else{

//Let user know that the browser does not support geolocation, and have a fallback content ready if necessary

}

So now you have the basic code to check whether the browser supports geolocation or not. Now we come to the actual implementation of finding out a user's location. One thing to know is that the user's location will be given in the form of a co-ordinate pair. One of the co-ordinates will be the longitude of the user, and the other the latitude.

{#PageBreak#}

For a one-time request of the user's location, we use the getCurrentPosisiton() function. Let's see how to use it...

If (navigator.geoLocation){

navigator.geoLocation.getCurrentPosition(successFunction, errorFunction);

}

In case the user accepts to share his location, and his location can be determined by the browser, the successFunction is called.

If you want the browser to periodically check for the user's position, and update itself if the user has changed location, then you can use watchPosition() function instead. It accepts the exact same parameters has getCurrentPosition().

Lets write a very simple function for the success function.

function successFunction(position){

var lat = position.coords.latitude;

var long = position.coords.longitude;

alert('Hi! Your latitude is :'+lat+' and longitude is '+long);

}

In the above function (which gets called in case the user decides to share his location, and the location is determined successfully), we extract the

longitude and latitude of the user and display it on the page as an alert() popup.

How to handle errors?

We have already written a success function in case all things go right. But we also need to write an error function in case the location cannot be determined.

Now, this can be because of multiple reasons. For example, the user may choose not to share his location information. Or for some reason or the other, the location could not be determined, or that simply there is a timeout while determining the location. There are error codes assigned to all these three reasons.

function errorFunction(position){

if (pos.PositionError = 1){

alert('It seems you have decided not to share your location');

}

if (pos.PositionError = 2){

alert('The location could not be determined by the browser. Try to reload the page to try again');

}

{#PageBreak#}

What next?

Once you have a co-ordinate pair of the user's location, you can use it to plug it in with various web service APIs available on the net to enhance your app. For example, once you have the user's co-ordinates, you can use it to display a map centered on the user's exact location.

An example of this is the page http://opera.com/livemap where the page will ask you to share your location, and if you do, then it shall load a Google map centered on your location, and as you zoom out, you'll be able to find other users who went to that page as well.

An interesting API is by Geonames.com,which has an API to give you the name of the place, once you have a location co-ordinate. Other APIs, such as those by Flickr, allow you to get various images based on that location, whereas Meetup.com's API can give you a list of meetups happening around a location provided it's got a co-ordinate pair. Once you have the co-ordinates of the user's location, then its really just a matter to mixing it with the right web APIs to come up with great enhancements to your application.

Conclusion

Geolocation is an exciting capability for developers to have. With this, they can add extra value to their web application by determining the user's location and providing information with that extra context in mind. Its also great for users as they get a better, more accurate reading of their location, and can deny sharing their location anytime, thus protecting their privacy. Major web services are already adopting geolocation as part of their applications using the W3C Geolocation API, and here's hoping that in the future, you will too!

Shwetank Dixit, Web evangelist, Opera Software