Telerik blogs

Location Awareness in about 2 minutes with Windows 8–HTML

MichaelCrump by Michael Crump
September 24, 2012 Mobile 0 Comments


Introduction

I was working on a mapping application for Windows 8 – HTML using the Bing SDK and needed to pass the latitude and longitude into it. I began searching for a straightforward way to get the location and had to read through pages of documentation before finally finding it. Here it is in case you want to use it in your own apps.

Default.html

Just replace the <body> tag as shown below: 

   1: <body> 
   2:     Latitude: <div id="latitude"></div><br />
   3:     Longitude: <div id="longitude"></div><br />
   4:     Accuracy: <div id="accuracy"></div><br /><br />
   5: </body>
We have simply added a few divs that represent the latitude, longitude and accuracy.

default.js

   1: // For an introduction to the Blank template, see the following documentation:
   2: // http://go.microsoft.com/fwlink/?LinkId=232509
   3: (function () {
   4: "use strict";
   5:  
   6: var loc;
   7:  
   8:     WinJS.Binding.optimizeBindingReferences = true;
   9:  
  10: var app = WinJS.Application;
  11: var activation = Windows.ApplicationModel.Activation;
  12:     loc = new Windows.Devices.Geolocation.Geolocator();
  13:     loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
  14:  
  15: function getPositionHandler(pos) {
  16:         document.getElementById('latitude').innerHTML = pos.coordinate.latitude;
  17:         document.getElementById('longitude').innerHTML = pos.coordinate.longitude;
  18:         document.getElementById('accuracy').innerHTML = pos.coordinate.accuracy;
  19:     }
  20:  
  21: function errorHandler(e) {
  22: // TODO: Handle Error     
  23:     }
  24:  
  25:     app.onactivated = function (args) {
  26: if (args.detail.kind === activation.ActivationKind.launch) {
  27: if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
  28: // TODO: This application has been newly launched. Initialize
  29: // your application here.
  30:             } else {
  31: // TODO: This application has been reactivated from suspension.
  32: // Restore application state here.
  33:             }
  34:             args.setPromise(WinJS.UI.processAll());
  35:         }
  36:     };
  37:  
  38:     app.oncheckpoint = function (args) {
  39: // TODO: This application is about to be suspended. Save any state
  40: // that needs to persist across suspensions here. You might use the
  41: // WinJS.Application.sessionState object, which is automatically
  42: // saved and restored across suspension. If you need to complete an
  43: // asynchronous operation before your application is suspended, call
  44: // args.setPromise().
  45:     };
  46:  
  47:     app.start();
  48: 
  49:  
  50: })();
 

From the default.js page, you can see that we declare loc as a variable, then create a new instance of Windows.Devices.Geolocation.Geolocator(). After that we make a call to getGeopositionAsync and pass it a function that will contain the position and another function that contains the error handler. The pos.coordinate.latitude, longitude and accuracy are simply added to our divs on the default.html.

Application Manifest

The last piece is placing a checkbox in the “Location” for capabilities which is found in the package.appxmanifest as shown below:

image

One thing to note here is that this does not require you to have a PC with various sensors like GPS. It is using Wi-Fi triangulation and IP address to determine where you are. From my test, it is very accurate!!!

Run it!

Now when we run our application, we will see the app asking permission to use our location. We should select “Allow” here.

image

Then we will see the latitude, longitude and accuracy in our Windows 8 –HTML Application. (I obfuscated my location because it was so accurate!)

image

Of course, your users may elect to turn off location at any point by using the Settings charms and toggling the Location switch as shown below:

image

Wrap-up

I am having a lot of fun with location and sensors at the moment. So much fun, that I plan on creating a session around it for 2013. I’m just waiting for some solid hardware to come out. I hope this helped! Thanks for reading.

Win8_Download

App Dev
MichaelCrump
About the Author

Michael Crump

is a Microsoft MVP, Pluralsight and MSDN author as well as an international speaker. He works at Telerik with a focus on everything mobile.  You can follow him on Twitter at @mbcrump or keep up with his various blogs by visiting his Telerik Blog or his Personal Blog.

Comments

Comments are disabled in preview mode.