Using HTML5 Geolocation API in ASP.NET Application

UPDATE

The below sample just showcases the locality sample.  The complete set of attributes exposed which include PostalCode, CountryRegion, Address etc., are available at http://msdn.microsoft.com/en-us/library/ff701710.aspx

This is the third in the series of posts I am doing on HTML5 for ASP.NET Developers

Geolocation is one of the popular features of HTML5 that’s being touted as a favorite for building location aware applications.  It helps to a great extent not just for Web Applications that run on PCs, but also for Web Applications that run on Devices.  Since browser on the phone is no longer a rare thing, it always helps to identify the location of the user carrying the phone and build applications that cater to the specific geo (example: providing deals available nearby etc.,)

The actual call required for our sample is quite simple.  Geolocation works only on IE9 and above.  So, if you haven’t installed already, you can download and install IE9 from here

For the sake of our sample, lets create an ASP.NET Web Forms Application using Visual Studio 2010 (File – New – Project – ASP.NET Web Application)

By default it creates a Site.Master and Default.aspx page which inherits from the master page.  Also, jQuery is included as a part of the scripts.  So, lets pull the jQuery files on to the Master Page.

So, as of now, I have opened up the Site.Master and also expanded the Scripts folder in the project explorer and dragged the jQuery-1.4.1.min.js file onto the Site.Master

image

 

Then, open up the Default.aspx page and add the following lines of code

<input type="button" id="btnFindMyLocation" value="Find My Location" />
       <input type="text" id="txtLocation" />

The Geolocation API provides the Latitude and Longitude co-ordinates.  Using that, we would like to get the current location by using the Bing Maps SDK.  Hence, we need a Bing Maps SDK token.  It can be obtained from http://www.bing.com/toolbox/bingdeveloper/

Click on “Sign-in Bing Maps” and use existing Live ID credentials.  Once signed-in, it asks you a few details.  Fill out those details and then it presents a dashboard.  On the top left menu, you can find the “Create or View Keys”.

Click on it, and follow the steps to get the token.  Your token would be typically a GUID of considerable length.  This we would need to pass on to the SDK and get the location.

Coming back to our Default Page, add the following snippet somewhere above the input tags which we added earlier.

<script type="text/javascript">
   $(function () {
   $("#btnFindMyLocation").click(function () {
       // find lat/long with geo api
       if (navigator.geolocation) {
           navigator.geolocation.getCurrentPosition(function (pos) {
               // query city from Bing Maps API
               var url = "
http://dev.virtualearth.net/REST/v1/Locations/" + pos.coords.latitude + "," + pos.coords.longitude + "?&key=REPLACE YOUR BING MAP SDK KEY";
               $.ajax({
                   url: url,
                   dataType: "jsonp",
                   jsonp: "jsonp",
                   success: function (data) {
                       $("#txtLocation").val(data.resourceSets[0].resources[0].address.locality);
                   }
               });

           }, function () {
               alert("Unable to find your location");
           });
       } else {
           alert("Your browser does not support GeoLocation API! ");
       }
   });
   });
   </script>

Make sure you change the RED text in the code above with the actual Bing Maps SDK Key that you obtain from the Developer Portal.  Once this is done, you can run the page.  It presents an UI as below:-

image

Click on “Find My Location” and you would see a warning in the below as follows:-

image

Click on “Allow Once” and then it reloads the page and then fills up the TextBox with your current location.

image

So, with few simple steps, we can find the actual location of the users through the Geolocation API and using Bing Maps SDK.

Cheers!!!

Print | posted on Monday, October 17, 2011 6:24 PM

Comments on this post

# re: Using HTML5 Geolocation API in ASP.NET Application

Requesting Gravatar...
Hi Sir,
I creted Bing MAP Key and replaced it in the cod egiven above. But am getting my locality as Hyderabad where as am in banglore. Kindly assist me.
Left by Basavaraj on Nov 19, 2011 6:57 PM

# re: Using HTML5 Geolocation API in ASP.NET Application

Requesting Gravatar...
awesome cool little trick, thanks man
Left by Personal Path To Pregnancy on Jan 10, 2012 7:26 AM

# re: Using HTML5 Geolocation API in ASP.NET Application

Requesting Gravatar...
Thank you so much for this blog! And this is a great post use in ASP.NET Application.
Left by Video Wall Software on Jan 12, 2012 1:47 PM

# California Criminal Background Check

Requesting Gravatar...
I creted Google MAP Key and improved it in the cod egiven above. But am getting my place as Hyderabad where as am in banglore. Please details me.
Left by California Criminal Background C on Aug 01, 2012 1:05 PM

Your comment:

 (will show your gravatar)