Che Hodgins // Musings on Web Development

Tag Archive for ‘firefox’

Advanced Geolocation

June 30, 2009geolocation, javascript, webView Comments

I write this in honor of the Firefox web browser. I still remember when it was first released November 9th, 2004, and gave me hope for a better, nicer, non-IE world. Today, Firefox 3.5 is released. Building upon nearly 5 years of success, they have continued innovating and I thank them for making the web a better place.

Feel free to Skip to the demo.

I previously wrote about using IP based Geolocation. Although this method is widely used, the downsides are obvious: inaccurate results, proxies, false positives, and a lack of privacy control for the end user.

The Future of Geolocation

The new generation of browsers are implementing the Geolocation API specification. This gives the browser the job of figuring out where you are. There are some positive points and negative points to this. Firstly, the position of the user can be more accurate. In IP-based Geolocation, the only data available is the IP address. The browser has access to much more precise data such as WiFi networks and GPS devices (iPhone!). Secondly, privacy settings. The browser should be able to ask the user if they will allow such information to be shared, ideally even the level of accuracy that should be shown. This is possible if implemented in the browser. One negative point is something we are all familiar with: cross-browser compatibility. Different implementations in different web browser will make developers miserable, but hey, that’s what standards are for, right? :)

Browser Support

As of today a few web browsers support geolocation. Here’s the status of the mainstream browsers:

  • Firefox: Available in version 3.5, released today.
  • iPhone Safari: Available in OS3.
  • IE: Experimental in version 8.
  • Opera: Available in nightly builds since March 2009.
  • Chrome: Available through Google Gears API
  • Safari: Unknown.

Here is how to request a users location (see line 26 for the goods):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function knownLocation(position) {

    var latitude, longitude;
    if (position.coords) { // iPhone
        latitude = position.coords.latitude;
        longitude = position.coords.longitude;
    } else { // Firefox
        latitude = position.latitude;
        longitude = position.longitude;
    }

    var div = document.getElementById('geo');
    div.innerHTML = div.innerHTML + "Latitude: " + latitude + "<br/>Longitude: " + longitude;
}

function unknownLocation() {
    var div = document.getElementById('geo');
    div.innerHTML = div.innerHTML + "Unknown Location";
}

window.onload = function() {
    var div = document.getElementById('geo');
    div.innerHTML = div.innerHTML + "Browser: " + navigator.appName + " (" + navigator.appVersion + ")<br/>";

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(knownLocation, unknownLocation);
    } else {
        div.innerHTML = div.innerHTML + "Browser not supported";
    }
};

This then prompts the user for their approval:

Geolocation in Firefox 3.5

Similarly, on the iPhone:

Conclusion

This is really cool. With geolocation implemented in the browser, great precision can be achieved. For example, on the iPhone the GPS is used, so visiting the demo page from my living room gives different coordinates than when visiting from my kitchen. I can imagine many useful applications of this. Another thing I love is that I can deny my location to certain sites, which I will absolutely use on certain sites.

Tags: , , ,