Introduction
The HTML5 Geolocation API allows you to build location aware web applications that adjust themselves in some way so that the user is presented with data based on his geographical location. With the growing popularity of mobile devices, Geolocation API can be used to enhance user experience and provide services that utilize location information. Geolocation API can be programmed using JavaScript and can also be integrated with mapping services such as Google Maps or Bing Maps. This article shows how Geolocation API can be used to show the user’s location on Bing maps.
Geolocation API
The Geolocation API allows you to perform three operations namely – finding user’s location, track user’s location as he moves from one place to another, stop tracking user’s location. Geolocation API uses the geographic coordinate system to indicate a user location. Geographical coordinates consist of Latitude and Longitude values. The latitude and longitude coordinates are specified in decimal degrees. For example, the latitude and longitude values for Mumbai are 18.91667 and 72.9 respectively. The positive decimal numbers indicate north-east position whereas negative decimal numbers indicate south-west position.
The Geolocation API are encapsulated in a geolocation object available as a property on the navigator object of the browser window. The three tasks mentioned above are accomplished with the help of three methods, namely getCurrentPosition(), watchPosition() and clearWatch(). These three methods are described below:
- getCurrentPosition() : This method determines the current location of the user. It accepts a success function, an error function and an options object as parameters. The success function receives the latitude and longitude coordinates of the user location. The error function can be used to flag the user of an error while determining the location.
- watchPosition() : This method is similar to the getCurrentPosition() method but keeps monitoring the user location periodically unless the clearWatch() method is called. This method is suited for tracking the user movements as the user moves from one place to another.
- clearWatch() : This method is used to stop monitoring the user location triggered using the watchPosition() method.
Integrating Geolocation and Bing Maps
In order to integrate Geolocation API with Bing maps the following steps are needed:
- Obtain a Bing Maps API key.
- Refer the Bing Maps API library that allows you to program the Bing Maps in your web page.
- Embed a Bing Map into your ASP.NET web application.
- Integrate the Bing Maps API with Geolocation API to customize the map as per your need.
Now that you know the basics of Geolocation let’s develop a simple ASP.NET web forms application that shows the user’s location on a Bing Map.
Obtain a Bing Maps API Key
Bing Maps require that you have an API key to consume the mapping services in your web application. An API key is allotted for an account. You can obtain the API key from the Bing Maps web site. The example discussed here assume that you have obtained a valid Bing Maps API key. The following figure shows the area of the Bing Maps web site (https://www.bingmapsportal.com) where the API key can be obtained.
Bing Maps Key
Refer to the Bing Maps API Library that Allows You to Program the Bing Maps in Your Web Page
In order to make use of Bing Maps API you need to include a reference to the Bing Maps API library in your web form. So, create a new ASP.NET web site and add the following <script> reference to the <head> section of the default web form.
<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript"> </script>
Note that the Bing Maps documentation refers to the above library as AJAX Control but it’s actually a script library and can be referenced just like any other JavaScript library file.
Embed and Integrate a Bing Map into Your ASP.NET Web Application
Now add the following markup in the web form.
<body> <div id="divMap" style="position:relative;width:400px; height:400px;border:1px solid blue;"></div> </body>
The above markup simply places a <div> element (divMap) with height and width of 400px inside the <body>. The map will be displayed in this <div> element.
Next, add the following jQuery code in a <script> block.
$(document).ready(function () {
if (!Modernizr.geolocation) {
alert("This browser doesn't support the Geolocation API.");
return;
}
navigator.geolocation.getCurrentPosition(OnSuccess, OnError);
});
The above code first checks whether the browser supports Geolocation API. This is done using the Modernizr library. Make sure to include a reference to the Modernizr library before using the geolocation property of the Modernizr object. The getCurrentPosition() method of the geolocation object is then called by passing a success function (OnSuccess) and an error function (OnError). The OnSuccess function does the job of displaying user’s current location on the map and is shown below:
function OnSuccess(position) {
var curPos = new Microsoft.Maps.Location(position.coords.latitude, position.coords.longitude);
var calloutOptions = { title: "Location Information", description: "This is your current location." };
var callout = new Microsoft.Maps.Infobox(curPos, calloutOptions);
var mapOptions = {
credentials: '<%= ConfigurationManager.AppSettings["BingMapsAPIKey"] %>',
center: curPos,
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 8
};
var map = new Microsoft.Maps.Map($("#divMap").get(0), mapOptions);
map.entities.push(callout);
}
As you can see the OnSuccess uses Microsoft.Maps.Location object that encapsulates the latitude and longitude values obtained from the position.coords object. To highlight the user’s location you use an Infobox. An infobox is a callout that displays details about a location. An Infobox object is created with the current position and options object. The options object specifies the title and description of the Infobox. The mapOptions object encapsulates map specific settings such as credentials (Bing Map API key), center coordinates of the map, the type of map and the zoom level of the map. Note that in this example the Bing Maps API key is stored in the <appSettings> section of web.config file. A Map is then created by passing a DOM element reference of the <div> that acts as the map container and map options. The user location Infobox is displayed on the map by calling the push() method and passing the Infobox object as the parameter.
The OnError() function that handles any errors is shown below:
function OnError(err) {
alert(err.message);
var calloutOptions = { title: "Location Information", description: "This is the default location." };
var defaultPos = new Microsoft.Maps.Location(18.916667, 72.9);
var callout = new Microsoft.Maps.Infobox(defaultPos, calloutOptions);
map.entities.push(callout);
}
The OnError() function displays the error message in an alert box. It then displays an Infobox for a default location (Mumbai in this case – 18.916667, 72.9). The following figure shows a sample run of the web form:
Sample Run
Summary
Geolocation API allows you to develop location aware web applications. You can integrate Geolocation API and mapping services such as Bing Maps for variety of purposes, such as showing user location, tracking a user, marking a route and distance calculation. In this article you used Bing Maps to display a user’s location along with a customized Infobox. Bing Maps provides a rich set of programmable features that you can use to add location awareness and mapping features to your website.
About the Author:
Bipin Joshi is a blogger and author who writes about apparently unrelated topics – Yoga & technology! A former Software Consultant and Trainer by profession, Bipin has been programming since 1995 and working with .NET framework ever since its inception. He has authored or co-authored half a dozen books and numerous articles on .NET technologies. He has also penned a few books on Yoga. Having embraced the Yoga way of life he now writes about Yoga, life and technology on his website. He can also be reached there.
