HTML5 Part 4: Geolocation

HTML5, or whatever it’s going to be called, brings on a whole bunch of new things to use. So far, I have gone over the Canvas tag, the ContentEditable attribute and Drag and Drop. The more I learn about HTML5, the more I understand that it’s not just about new tags and depreciating old tags anymore, it’s also about standardizing APIs. While I mentioned in the Canvas article how we have gone from just learning how and where to place HTML markup, we now have to learn the APIs that really bring out the Web 2.0+ experience. In order to do that, you really really need to learn a scripting language such as JavaScript. With that said, let’s dive into a simple lesson of Geolocation.

In order to show you another feature of how Geolocation works, I worked a Google static map into the example. You can check out my HTML5/CSS 3 test page to see Geolocation in action. Remember this: In order for Geolocation to work, you must agree to allow your browser to share your location with the script. The script I made is button executed, so people going to the page to see something else don’t start panicking because a warning bar is popping up in their browser window. Every browser I tested, popped up a warning bar asking you if you want to share your location data. Geolocation only works if you allow it to work.

This was tested in the following on a computer with a wired connection: Google Chrome 9 11.0.696.77, Mozilla Firefox 3.6.13, Opera 11, Safari for Windows 5.0.3, Internet Explorer 9 RC. This was also tested in the following GPS-enabled, mobile device browsers: Safari iOS4 (iPod Touch), Maemo browser and Mozilla Mobile Firefox (Nokia n900) using my home wireless internet connection and mobile broadband connection.

The simplest explanation

Here is the code

function geoPos() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(getCoords, errHandler, {maximumAge:60000});
}
else {
alert("Your browser does not support Geolocation");
}
function getCoords(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
document.getElementById("geolocationInfo").innerHTML = "Latitude:" + lat + "<br />Longitude:"  + long + "<br />Accuracy:" + acc;
document.getElementById("geolocationMap").innerHTML = '<img src="http://maps.google.com/maps/api/staticmap?center=' + lat + ',' + long + '&markers=color:blue|label:G|' + lat + ',' + long + '&zoom=13&size=300x300&sensor=false" />';
}
function errHandler(virheKoodi) {
if(virheKoodi.code >= 0) {
alert(virheKoodi.code);
return false;
}
}
}

Firstly, we need to test to make sure that the browser supports Geolocation. You can test the navigator.geolocation object. If it so happens that the browser does support Geolocation, then you can use the method getCurrentPosition(functionToRun, errorHandler, optionalOptions).

Error handling

If an error occurs, the errHandler(virheKoodi) function captures the error code (virheKoodi in the example – it’s Finnish), and then pops up the error number code in a popup window. The errors are:

  • 0 – Some unknown error
  • 1 – If the user does not allow the browser to share the location, then this code is returned.
  • 2 – Unable to provide a location because of some error
  • 3 – The process times out (thanks to a specified timeout) before a position can be acquired.

Getting the location information

If no error code is returned, then our script runs the getCoords(position) function. The function retrieves the position information which you can declare in variables to do whatever. For example, if you are using Google or Bing maps, you can retrieve the latitude and longitude information, as I did in the example, and use that information to retrieve a static or embedded map from either service.

Some information

In place of getCurrentPosition(), you can use the watchPosition(functionToRun, errorHandler,optionalOptions) method. This works the same as getCurrentPosition() but it runs just like using setTimeout(). You can also stop it from running using clearWatch(). You can use watchPosition() if you plan on catering to mobile services that depend on GPS positioning while on-the-move. Your device’s GPS will feed the method new coordinates [when your position changes or more accurate geographical data has been retrieved] which will run whatever function you are using with it. Using getCurrentPosition() only provides the position you are at one time.

I tested out watchPosition() using my iPod and n900 but I decided not to add it to the HTML5 test page. I only wanted to show a simple example of Geolocation in action. And no, it did work as expected! 😀

Using Geolocation using a wired connection [and without a GPS device], I found that the geographical position seems to be where the satellite office of my internet provider is based in this city is somewhat random (see comments below) depending on the browser. Also, while I was installing a printer for my sister-in-law (who lives out in the middle of nowhere), I tested Geolocation using her internet cell service USB dongle (mokkula in Finnish). The position ended up being in Helsinki, despite the fact that she lives almost four hours from there. Strange stuff but, this should be noted.

Regardless of what you have read, while this is working in Google Chrome, it is not working in the current version (5.0.3) of Safari for Windows. I have seen other people complaining about it and I assume they have submitted a bug report to Apple. If this changes, I will remove this paragraph.

Further Geolocation reading

Advertisements

About gopha

Gopha is a web programmer, techie and heir to several Nigerian fortunes. In his spare time he likes to game, spend time with his wife, daughters and dogs. He eats [far too much], watches TV and lift weights. He also like to take moonlit walks on the beach and sing songs next to a roaring campfire, in a white sweater with his acoustic guitar. View all posts by gopha

7 responses to “HTML5 Part 4: Geolocation

  • rob

    Just tried one computer with IE9 and Chrome and each reported quite a different location.
    15,000ft between the two points, funny thing is, the mean point between the two is almost spot on jut 500ft off.

    • gopha

      Thanks for pointing that out. The results with Chrome and IE on my computer show that on Chrome the spot that is marked is the center of the city and it is the exact spot that Google Maps has marked. In IE9, the spot is on the other side of downtown – 1 km from the Chrome spot. There are houses at that location, no ISP satellite office. So, I seem to be wrong about where the spot ends up when using Geolocation on a wired internet connection. I’ll need to edit that paragraph…

  • testJames

    Interesting. FF 5, Chrome 12, and Safari 5 were all spot on. IE 9 put me somewhere near to my company’s address, which is in another city. I am using a company VPN.

    • gopha

      The results are interesting and they seem to depend on a number of factors. Maybe it’s safe to say that – for the moment – Geolocation API shouldn’t be used for anything except some type of mobile location service.

  • New York Forum

    “Your browser does not support Geolocation” was the message we received. While on Google.com, we were able to share our location so we do not feel it was our IE browser running on Vista.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: