Understanding Html5 GeoLocation API Part I
When building web applications, knowing users' current location has a lot of benefits.Following are some examples of real-time use cases of such API.
- A news channel website knowing the users current location can give higher preferences to the local news near to that user.
- A movie theater website can leverage users current location and list nearby movies being played.
- A taxi service can get your location and provided a faster taxi services.
Above are just some of many real time examples, where geolocation API can come really handy and greatly improve user experience.With introduction to HTML5 geolocation API, it is very easy to get users current approximate location. In this blog post we will quickly go through the basics of the new geolocation API.
So without any further discussion let's jump right into the discussion of the actual API. For this sample I will be using Visual Studio as my IDE, however it is not necessary at all for you guys to use it if you do not want to.
Creating Asp .Net Empty Web Application
Let us start by creating a new empty ASP.net Web application using Visual Studio 2012.
Once you have an empty web application, go ahead and add a new HTML page named index.html as shown in the screen shot below.
In the newly created HTML page lets add a reference to the jQuery using jQuery CDN. Also add a new Div in case you want to show some results from the geolocation API.
The Actual GeoLocation API
Now the actual geolocation API consist of three simple functions.
- getCurrentPosition
- watchPosition
- clearWatch
Today we will just concentrate on one of these three functions which is getCurrentPosition. you will find these functions within the geolocation *object, an attribute of the *Navigator object. so by using the navigator object of your DOM, you can get the geolocation object and in that object you will find these three functions.
Now let's go ahead and add following JavaScript code into our HTML page. So the first thing we do as is to check if navigator object has geolocation present in that, as soon as the document loads. This function basically checks if the browser is supporting geolocation or not. If it is we are invoking getCurrentPosition function on this object.
In the same function call we are also passing to more JavaScript functions, that will be executed in case of successful or unsuccessful determination of users location which are successGeo and failGeo respectively.
With these functions in place go ahead and browse your page and you will notice something interesting. Since users location is a personal data related to your user they need to consent/allow your application to track the location. I ran this page in Firefox and I was prompted with the following message.
Once you allow your page to track the location it will execute the successGeo JavaScript function. And in that function we are accessing coords object of the results. The result variable passed to this function is location.
In this coords object, we are looking for the following three properties. you should see the results in three different message boxes as shown in following screen shots. for privacy reasons I have removed the actual latitude and longitude values from the MessageBox.
- latitude
- longitude
- accuracy
This object also provides bunch of other useful information about users and their location. You can find the list of all the properties available as part of this object at W3Schools website.