Geolocation HTML5 using ArcGIS API for JavaScript

With the recent release of Internet Explorer 9 (IE9), I decided to create and test a sample application using the geolocation API in all four major browsers (Safari 5, Firefox 4, Chrome 10, and IE9) using HTML5 and JavaScript. Although there was some support for geolocation functionality prior to HTML5, there was no standardization.

How does it work?

The geolocation API is published through a geolocation object, which is a child object of the navigator object. If the object exists, geolocation services are available. Sounds simple, huh? As a matter fact, here is how to quickly test for geolocation:

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition

}

else {

alert(“Geolocation not supported on your browser.”);

}

So what information is being sent when you visit an application with geolocation support? The browser will ask if you want to share your location; if the user allows the application to acquire your location, then the browser will send your computer’s IP address and a collection of information of your surrounding Wi-Fi access points to their default location service provider (e.g., Google Location Services, Microsoft Location Services). This information includes MAC address, SSID, age, (how long ago in milliseconds since the Wi-Fi node was detected), and signal strength of all the Wi-Fi access points around you.

The location service then checks this information against a database, finds the location of all the access points provided, and using triangulation, returns your location. If no Wi-Fi access points are in range, or your computer does not have Wi-Fi, it may only use your computer’s IP to get an approximate location. The accuracy of geolocation varies, and in some cases, it may not be able to provide a location at all. More importantly, you will see different results across browsers.

The first thing that came to my mind about these location services was how they know where all these access points are located. Do you remember those Google cars driving around collecting Street View data? Well that was one way. Another company collecting data is Skyhook, which also has drivers driving around collecting data. Another way data is collected is cross-referencing Wi-Fi data with mobile cell towers and GPS data available from smartphones.

Test Results

First of all, I used our ArcGIS API for JavaScript version 2.3, which is an early preview of our API and is only for testing purposes. The reason why I used this version is that it will support IE9, which was released in early March along with our 2.2 version. All of my tests were done with a hard connection; they were Wi-Fi enabled but not connected to a wireless network.

IE9

My first test was with IE9, which was pretty accurate. My office is a little more left to the edge of the building but this location works for me.

Firefox

My next test was with Firefox and still on the same row but slightly more to the right.

Chrome

Here is where it got interesting: using Chrome, it located me outside the building. Just a minute ago I used Firefox, which uses Google Location Servicesjust like Chrome. I expected them to be identical in my location.

Safari

Last but not least, I used Safari, and if I am not mistaken, I think they use a different location service than the others. As you can see my location is still fairly close but not as accurate as IE9 or Firefox.

I had some of my colleagues test as well, who are located a couple of offices down the hall and they didn’t yield the same results as I did. In the image below I used our topographic map to show the detail of our campus location along with a blue dot representing my location. The geolocation marker is approximately 0.6 miles away. Since they did not receive the exact location as me, I decided to have them try it while connected to a wireless network. Below you can see they had better results when connected to a wireless network.

Hard Connection

Wireless Connection

In conclusion we learned the following:

• Geolocation API works in all four browsers that support HTML5.
• Location requests with Wi-Fi data are more accurate that those based on just an IP address alone.
• Result will vary across browsers, users, and I am sure where location data is scarce.
• The location becomes cached, which will improve the location services.

Although I did not touch upon mobile devices in this post, I did try this code with an iPhone and an iPad, and they both located me in the parking area of our building. I also tried testing it on my Motorola Droid x running Android 2.2 and Windows Phone Samsung, but they don’t have an HTML5 browser. However, once they do have full support for HTML5, it will be nice to write in HTML5 and JavaScript for mobile applications that can deliver features based on location services, for example, a map that can center based on where you actually are and display relevant data based on your surroundings.

Here is a geolocation sample that you can test for yourself, and if you have accurate or inaccurate results or discover something we didn’t, please feel free to share.