HTML 5 – GEOLOCATION API

With the latest HTML5 editor’s draft version being published, today I will be discussing the new HTML 5 Geolocation API. The World Wide Web Consortium (W3C) have published a Geolocation API specification that allows a web page to query the user’s location using JavaScript to access objects exposed by the browser.

Firefox 3.5 was the first mainstream implementation of this API. Combined with Firefox Google did not waste any time, and it is now possible to share you location with the rest of the world, you may wish to click on the new “Show my Location” in Google Map.

In order to identify the location of a web user, web developer had to use the Server IP address, resulting is some level of inaccuracy. The following web site (http://whatismyipaddress.com/) provides a good illustration of the level of inaccuracy resulting with this technique, as you can experience by yourself.

As per presented in the following article HTML 5 and enabled browser (e.g. Firefox 3.5) do now offer a new generation of Geolocation with the new JavaScript API which is based on wireless Geolocation; much more accurate.

Thanks to the following simple set of JavaScript, you will be able to get very detailed location from where you are browsing; enabling true location based service!

This API will only work if you authorise it, in Firefox this manifests the following way.

<script language=”Javascript”>

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function(position) {

ZoomToLocation(position.coords.latitude, position.coords.longitude);

});

}

else {

if (document.getElementById(“GeoAPI”)) {

document.getElementById(“GeoAPI”).innerHTML = “I’m sorry but Geolocation services are not supported by your browser – use Firefox 3.5″;

document.getElementById(“GeoAPI”).style.color = “#FF0000″;

}

}

function ZoomToLocation (mylat, mylong) {

if (document.getElementById(“GeoAPI”)) {

//Implement a zoom to location

document.getElementById(“GeoAPI”).innerHTML = “mylat: ” + mylat + “ mylong: ” + mylong;

}

}

</script>

I have now integrated this solution with the ESRI JavaScript API. A fully working example is available at the following location: http://blog.geo-tag.info/Geolocation/Geolocation.htm.