May 2015 – Rachel Appel

Location aware services and applications are becoming more important than ever before, as smartphones, tablets, and other fully featured mobile devices become ubiquitous. The W3C Geolocation API gives developers an easy way to integrate client side location aware services within their web pages.

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:

The client browses to a web page that attempts to access the geolocation source.
The app requests permission to send access the geolocation source.
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:

Method	Description
clearWatch	Stops listening for updates to the current geographical location.
getCurrentPosition	Obtains the geographic position, in terms of latitude and longitude coordinates.
watchPosition	Begins listening for updates to the current geographical location of the device running the client. Use this method to listen for location updates.

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

});

});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

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:

PERMISSION_DENIED
POSITION_UNAVAILABLE
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

Rachel Appel

Software and stuff

Month: May 2015

Use the W3C Geolocation API to create location aware web sites