Home

About us

News & insights

Join us

Contact

Link arrowLink arrow

All articles

Technology

Bing Maps AJAX & HTML5 GeoLocation API

Anthony Marshall
Anthony Marshall
23 Jun 2011
blog post featured image

In the second in our series on mobile mapping with Bing Maps AJAX V7 we are going to show you one of the great features of HTML5 that you can start using right now on mobile devices. Where the desktop may take years before all users have access to the features of HTML5 the vast majority of smartphone users already have HTML5 compatible browsers.

HTML5 GeoLocation API

HTML5’s geolocation API allows you to request a users location by prompting the user to optionally share their location information with your website. It is currently supported on:

image

With WP7 hopefully coming soon. Rather than repeat the entire documentation for the geolocation API lets show you how to use it in a code example. Here is an example JavaScript method we have written that we can call to get the user location.

  1. function GetLocation() {
  2.     //check if location api supported
  3.     if (!!navigator.geolocation) {
  4.         
  5.         //request current location
  6.         navigator.geolocation.getCurrentPosition(UpdateLocation,HandleErrors);
  7.     }
  8. }

 

Notice the line “!!navigator.geolocation” this is checking that the browser supports the geolocation api, you should of course in a real application show some kind of message if they do not. Once we have checked if the browser has support we simply call the “navigator.geolocation.getCurrentPosition” method passing in two method names (we will write those in a moment) the first to handle the location response and the second to handle any errors.

The first of the two methods which handles a valid location response looks like this:

  1. function UpdateLocation(position) {
  2.     var latitude = position.coords.latitude;
  3.     var longitude = position.coords.longitude;
  4.  
  5.     //move map to new location and zoom in
  6.     map.setView({ center: { latitude: latitude, longitude: longitude }, zoom: 16, mapTypeId: Microsoft.Maps.MapTypeId.aerial });
  7. }


As you can see it accepts a position parameter from which we can get the user latitude and longitude. We the set our Bing Map to the new location, and in this example zoom the map in on that location.

The next method handles any errors that might occur, this is a very basic example which you would want to expand upon in production:

  1. function HandleErrors(error) {
  2.     //handle geolocation errors and alert user
  3.     switch (error.code) {
  4.         case error.PERMISSION_DENIED: alert("user did not share geolocation data");
  5.             break;
  6.  
  7.         case error.POSITION_UNAVAILABLE: alert("could not detect current position");
  8.             break;
  9.  
  10.         case error.TIMEOUT: alert("retrieving position timed out");
  11.             break;
  12.  
  13.         default: alert("unknown error");
  14.             break;
  15.     }  
  16. }


As you can see it shows a relevant JavaScript alert informing the user of what the error was. Note that one of these errors is simply that the user has not decided to share their location with you website.

Finally here is the entire complete code so you can see how these methods are called, and how the basic Bing Map is setup for mobile display:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4.     <title>Geolocation default</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
  7.     <script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
  8.     <script type="text/javascript">
  9.         var map = null;
  10.  
  11.         function GetMap() {
  12.             map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'YOURBINGMAPSKEY' });
  13.             GetLocation();
  14.         }
  15.  
  16.         function GetLocation() {
  17.             //check if location api supported
  18.             if (!!navigator.geolocation) {
  19.                 
  20.                 //request current location
  21.                 navigator.geolocation.getCurrentPosition(UpdateLocation,HandleErrors);
  22.             }
  23.         }
  24.  
  25.         function UpdateLocation(position) {
  26.             var latitude = position.coords.latitude;
  27.             var longitude = position.coords.longitude;
  28.  
  29.             //move map to new location and zoom in
  30.             map.setView({ center: { latitude: latitude, longitude: longitude }, zoom: 16, mapTypeId: Microsoft.Maps.MapTypeId.aerial });
  31.         }
  32.  
  33.         function HandleErrors(error) {
  34.             //handle geolocation errors and alert user
  35.             switch (error.code) {
  36.                 case error.PERMISSION_DENIED: alert("user did not share geolocation data");
  37.                     break;
  38.  
  39.                 case error.POSITION_UNAVAILABLE: alert("could not detect current position");
  40.                     break;
  41.  
  42.                 case error.TIMEOUT: alert("retrieving position timed out");
  43.                     break;
  44.  
  45.                 default: alert("unknown error");
  46.                     break;
  47.             }  
  48.         }
  49.  
  50.     </script>
  51.     
  52. </head>
  53. <body onload="GetMap();" style="padding:0;margin:0;">
  54.  
  55.     <div id="myMap" style="position: absolute; width: 100%; height: 100%;">
  56.     </div>
  57.  
  58. </body>
  59. </html>

You can see a live demo at https://bit.ly/j6dT0S which will work on your mobile device, or HTML5 enabled desktop browser.

Let’s change lives together

Link arrowLink arrow

Get in touch

earthware logo
Close chatbot
Open chatbot
Open chatbot