Getting Started with the Firefox Geolocation API

As fun as it is playing around with all of the various browsers, part of me can’t help but wish they’d all implement the same features. We could get rid of WebKit-specific code, IE hacks, conditional comments, and so on.

On the other hand, certain browser-specific features can be a lot of fun to explore. Such is the case with the Firefox GeoLocation API.

It’s really easy to use and it’s got a variety of possibilities. Here’s how you can use it…

Get The Position

All of the Geolocation API’s are made available via JavaScript so all code will need to be written in said language.

To begin accessing the location API’s, you’ll need a reference to the geolocation object. The geolocation object exposes a method called getCurrentPosition that accepts a single function as a parameter. The initial setup of the code looks like this:

[cc lang=”javascript”]
navigator.geolocation.getCurrentPosition(function(oPosition) {
// …
}
[/cc]

All location information provided by the browser can be retrieved from the oPostition object that’s passed into the above function. At the most basic level, here’s how you can print out the information into a dialog:

[cc lang=”javascript”]
navigator.geolocation.getCurrentPosition(function(oPosition) {
var sLocationInfo = oPosition.coords.latitude + ‘n’ +
oPosition.coords.longitude + ‘n’ +
oPosition.address[‘streetNumber’] + ‘n’ +
oPosition.address[‘street’] + ‘n’ +
oPosition.address[‘premises’] + ‘n’ +
oPosition.address[‘city’] + ‘n’ +
oPosition.address[‘county’] + ‘n’ +
oPosition.address[‘region’] + ‘n’ +
oPosition.address[‘country’] + ‘n’ +
oPosition.address[‘countryCode’] + ‘n’ +
oPosition.address[‘postalCode’];
alert(sLocationInfo);
});
[/cc]

Handle The Exceptions

Finally, since not all browsers offer geolocation functionality, it’s worth handling the case in which the page doesn’t offer geolocation. This can be easily achieved with a basic conditional:

[cc lang=”javascript”]
if(navigator.geolocation !== null) {
navigator.geolocation.getCurrentPosition(function(oPosition) {
var sLocationInfo = oPosition.coords.latitude + ‘n’ +
oPosition.coords.longitude + ‘n’ +
oPosition.address[‘streetNumber’] + ‘n’ +
oPosition.address[‘street’] + ‘n’ +
oPosition.address[‘premises’] + ‘n’ +
oPosition.address[‘city’] + ‘n’ +
oPosition.address[‘county’] + ‘n’ +
oPosition.address[‘region’] + ‘n’ +
oPosition.address[‘country’] + ‘n’ +
oPosition.address[‘countryCode’] + ‘n’ +
oPosition.address[‘postalCode’];
alert(sLocationInfo);
});
} else {
alert(“Your browser doesn’t support the Geolocation API.”);
}
[/cc]

Easy enough, huh? I also recommend reading up more on the API in detail over at the Mozilla Geolocation page or browsing the Mozilla Developer Center article.

Of course, the downside to this particular API is that it’s native only to Firefox. This isn’t a problem if your team can target a specific browser as a platform for your application, but nothing beats having something available cross-browser.

Still, there’s a variety of ways to use this data: data logging for your visitors, integrating Google Maps,or writing a custom navigation software.

Tom

I write both code and content for this team and I love every minute of it.