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.
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');
}
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