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
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:-
Click on “Find My Location” and you would see a warning in the below as follows:-
Click on “Allow Once” and then it reloads the page and then fills up the TextBox with your current location.
So, with few simple steps, we can find the actual location of the users through the Geolocation API and using Bing Maps SDK.
Cheers!!!