Hello, location aware world!

With the advent of geolocation services and mapping APIs, web sites and applications are popping up daily providing the following types location aware software:

• Games and social applications, (e.g., Foursquare, Twitter, Trip It, Facebook, etc...)
• Search applications for local services (e.g., restaurants, shops, entertainment, etc...)
• Navigation & maps
• Package shipping/tracking & transportation services
• Personal health & fitness
• More...

Notice there's a good mix of both business and consumer applications that benefit from using geolocation. Fortunately, for developers, location aware web sites and apps are easy to create with web standards like HTML5, JavaScript, and CSS. On top of that, APIs like Bing  or Google Maps make great companions to these sites - and don't forget 3rd party APIs such as Foursquare or Yelp.

How location aware web sites work

Geolocation apps work by detecting the user's location via positional data that it receives from a geolocation source.

There are three basic steps to the process:

1. The client browses to a web page that attempts to access the geolocation source.
2. The app requests permission to send access the geolocation source.
3. If the user permits, the app or web site can access and use the user's positional data. (If not, an error occurs. See below

Once you have obtained the user's coordinates from the API, you can display maps, give directions,show nearby points of interest

However, keep in mind that the device is the deciding factor regarding the accuracy of the positional data. For example, using a 3G smart phone should yield more accurate results than a desktop machine that connects through an ISP a mile away, using an IP address based method. Devices can use one or more of these methods:

• Coordinate triangulation
• Global Positioning System (GPS)
• Wi-Fi with MAC addresses from RFID, Wi-Fi, and Bluetooth
• IP address
• GSM or CDMA cell phone IDs
• Custom sources: Some phone manufacturers like Nokia

Many smart phones provide a way for users to switch between sources such as 3G or WIFI.

Obtaining the user's positional data using the HTML5 Geolocation API.

For creating web sites either straight-up JavaScript or jQuery will work fine with the geolocation API. It's quite small, with only three methods:

Before obtaining the user's coordinates, a call to Modernizr performs feature detection for geolocation support. If the browser supports geolocation, the code calls the watchPosition() method, and passes success and error callback methods as arguments. Below is the code sample outlining  the call to watchPosition().

$(function () {

    var watchID;

    $("#watch").click(function () {

        if (Modernizr.geolocation) {

            var nav = window.navigator;

            if (nav != null) {

                var geoloc = nav.geolocation;

                watchID = geoloc.watchPosition(successCallback, errorCallback);

            }

        }

        else

        { $("#message").text("You'll need to enter your address manually."); }

    });   

});

A successful completion of the watchPosition() method triggers the successCallback() method. At this time, the code can access the positional data returned from the Geolocation service in order to display Bing maps, list nearby attractions, or whatever is required. Below shows code that obtains the user's coordinates, then displays the latitude and longitude in a web page <div> element (<div id="message">). Notice that the position argument  is populated with data, however not all the properties will contain values (e.g., altitude), depending on the capabilities the device and service.

function successCallback(position) {

    var latitude = position.coords.latitude;

    var longitude = position.coords.longitude;

    $("#message").text("There you are at " + latitude + " " + longitude);

}

Of course, the code won't always run successfully. There are many things that can get in the way: bad weather, permission denied, timeouts, no cell reception, and gremlins, to name a few.

Dealing with errors and timeouts

The errorCallback() function does what you might expect, it runs when an error occurs. There are three frequently occurring errors to look for when the errorCallback() executes:

1. PERMISSION_DENIED
2. POSITION_UNAVAILABLE 
3. TIMEOUT

A switch statement works nicely to determine the error source and take corrective action, as each case checks value in the error.code property against a set of constants that correspond to error numbers.

function handle_errors(error) {

    switch (error.code) {

        case error.PERMISSION_DENIED: 

            alert("User did not share geolocation data");

            break;

        case error.POSITION_UNAVAILABLE: 

            alert("Could not detect current position");

            break;

        case error.TIMEOUT: 

            alert("Time out");

            break;

        default: 

            alert("Unknown error");

            break;

    }

} 

Summary

Location aware web sites are becoming more important than ever before, and since the W3C Geolocation API is a standard, it works with any technology ranging from plain HTML to ASP.NET.

To get started creating location aware sites, check out the following resources:

W3C Geolocation Introduction

Geolocation APIs & client side frameworks on Code Project