London Olympics 2012. Poor buggers. Frustrating User Experiences: Tough Captchas
Aug 25

Using the W3C Geolocation API Specification today; Extending WhereAreYou

Ajax, Gears, Tech with tags: , , Add comments

Last week I shared the WhereAreYou? application that used the Ajax APIs ClientLocation API to access your location via your IP address.

At the same time, we announced support for the Gears Geolocation API that can calculate your address using a GPS device, WiFi info, cell tower ids, and IP address lookups.

Add to all of that, the W3C Geolocation API that Andrei Popescu of the Gears team is editing. You will notice that it looks similar to the Gears API, with subtle differences. The ClientLocation API is quite different.

To make life easier, I decided to put together a shim called GeoMeta that give you the W3C Geolocation API, and happens to use the other APIs under the hood.

If you have the Geolocation API native in your browser (no one does yet, future proof!) that will be used. If you have Gears, that API will be used, and finally, with nothing the ClientLocation API will be used behind the scenes.

To you the API will look similar:

// navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)
navigator.geolocation.getCurrentPosition(function(position) {
      var location = [position.address.city, position.address.region, position.address.country].join(', ');
      createMap(position.latitude, position.longitude, location);
}, function() {
      document.getElementById('cantfindyou').innerHTML = "Crap, I don't know. Good hiding!";
});

At least, that is what I would like. Unfortunately, there are a few little differences that leak through.

  • The W3C API only seems to give you a lat / long, so you have to do the geocoding to get address info
  • The Gears API gives you an additional gearsAddress object attached to the resulting position object. This can contain a lot of information on the resulting area (street address to city to …) however for certain providers the API returns that as null, the same as the W3C standard
  • That gearsAddress object has slightly different information from the address data that the ClientLocation API returns.

To give you control when you need it, you can ask the navigator.geolocation object what type it is. navigator.geolocation.type will be null if it is native, but ‘Gears’ or ‘ClientLocation’ if a shim kicks in. You can also check navigator.geolocation.shim to see if it is augmented code.

Implementation

There is some fun implementation code in there if you poke around. For example, for the ClientLocation API, when you make a call, it will be added to a queue if the Google Loader hasn’t fully loaded yet, and it will kick off that call when finished. Dealing with dynamically creating <script src> as a loading mechanism sure is fun!

I like the idea of jumping straight to the W3C standard and updating the shim as the APIs change. That way, when browsers catch up, the code will still work using the native APIs and you don’t have to change a thing.

Where are you?

4 Responses to “Using the W3C Geolocation API Specification today; Extending WhereAreYou”

  1. Wes Biggs Says:

    Hey Dion, cool stuff and I like the futureproofing. You might be interested in checking out the geolocation-to-web work I’m doing on iPhone at http://lbs.tralfamadore.com/. I think with a little effort and a few caveats it could be made to resemble the W3C API as well.

  2. dion Says:

    Wes,

    Very cool man. Yeah, if you would like to write a shim so the same API works for that service, I am happy to merge it or whatever….

    Cheers,

    Dion

  3. Wes Biggs Says:

    Done. Writeup at http://www.tralfamadore.com/2008/08/w3c-geolocation-api-on-iphone-with.html.

  4. Shino Mathew Says:

    Is there a way using which my desktop java application can find out the geo location and the IP address? I am within a LAN which has a static IP and my PC has an IP specific to the LAN in which I am into. Please help if possible…thanks in advance

Leave a Reply

Spam is a pain, I am sorry to have to do this to you, but can you answer the question below?

Q: Type in the word 'ajax'