Make your HTML5 Application Location Aware using GeoLocation API and Bing Maps API

  • Article

This blog will show you how to make your HTML5 Application Location Aware using use the GeoLocation API with the Bing Maps AJAX Control.

Before we start you will need to obtain a Bing Maps Key.Please visit https://msdn.microsoft.com/en-us/library/ff428642.aspx to get a Bing Maps Key.

To begin, create an ASP.NET Empty Web Application as shown below.

Add a HTML Page to the project. You can right click on the ExampleGeoLocationBing project in Solution Explorer, click on Add and then click HTML Page as shown below.

Name the page default when requested to “Specify the Name for the Item” as shown below. Click on OK.

You should now see the default.html file created as shown below.

In the HTML document, add the onLoad attribute to the body element which will invoke the initializeGeoLocation function when the web page loads in the browser. In the body element, create a div element with an id “map”. The HTML code can be seen below.

 

Now add a script element in the head element of the HTML document for the Bing Maps AJAX Control.

<script src="https://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

Add a folder called Scripts to the ExampleGeoLocationBing project.

 

Right click the Scripts folder and add a JavaScript file as shown below.

 

Name the file GeoLocation when requested to Specify the Name for the Item. Click on OK. You should now see the GeoLocation.js file in the Scripts folder as shown below.

Open the GeoLocation.js file by double clicking on it. Add the code below for the GeoLocation API and the Bing Map API as shown below.

 

In the above code the initializeGeoLocation function creates the geolocation object by utilizing the navigator.geolocation variable. The geolocation object calls the getCurrentPosition method which determines the current position of the user. To this method we pass in the getPosition function. The getPosition function is passed the position object which contains the coords property. The coords property gets the coordinates object which has the latitude and longitude properties. The latitude and longitude properties get the latitude and longitude in decimal degrees.

The getPosition function also initializes a new instance of the Map class. We pass in the container element (which is the div element with map as its id) and the Bing Map Key as arguments. We initialize a new instance of the Location class, which takes the latitude and longitude as arguments. We then initialize a new instance of the Pushpin class which adds a pushpin on the map. We add the Pushpin to the entities property of the map. This will add a pushpin to the current latitude and longitude coordinates of the user returned by the Location class.

Next, we set the map view using the specified coordinates as the center and the zoom level.

Now, return to the default.html page and add a script element for the GeoLocation.js file to the head element. The code for the HTML page should look as shown below.

 

Set the default.html page as the start page. To do so, right click on the default.html file and select “Set As Start Page”.

Now press F5 to launch the application in a browser. You should see results similar to the one shown below.

 

If you wish to add some styling to the HTML content, add a new folder called Styles to the project ExampleGeoLocationBing. Right Click on the ExampleGeoLocationBing project in Solution Explorer, click on Add and then click on New Folder as shown below. Name the folder Styles.

Add a new Style Sheet to the Styles folder called default.css. Right Click on the Styles folder, Click on Add and then select Style Sheet as shown below.

Name the Style Sheet default when requested to “Specify the Name for the Item”. You should now see the default.css Style Sheet in the Styles folder as shown below.

 

 

Open the default.css Style Sheet and add the following code to it to center the body of the HTML and set the position, width and height of the div element with id map.

 

Now press F5 to launch the application in a browser. You should see results similar to the one shown below.