HTML and CSS Reference
When I get the location data, I make an Ajax call using the WinJS.xhr object, which is a
Promise wrapper around the standard browser XmlHttpRequest object. My Ajax request is to a
reverse geocoding service, which allows me to translate the latitude and longitude information
from the geolocation service into a street address. The geocoding service returns a JSON string,
user, along with a timestamp indicating the last location update.
Ti ■ I have used the OpenStreetMap geocoding service because it doesn't require a unique
account token. This means you can run the example without having to create a Google Maps or
Bing Maps account.
I have added some simple elements to the default.html file so that I can display the loca-
tion to the user. You can see the additions in Listing 5-3.
Listing 5-3. Adding Elements to default.html to Display Location Information
<div class="midtitle"><h2>Your location is: <span id="geo"></span></h2></div>
<div id="leftContainer" class="gridLeft">
<h1 class="win-type-xx-large">Grocery List</h1>
can choose between the HTML5 and Windows APIs for some key areas of functionality, including
geolocation. I have used the Windows API in this example, but the HTML5 equivalent would have
worked just as well.
Controlling the Task
I am describing the geolocation and Ajax requests only in passing because the point of this
example is the creation of a periodically repeating background task. It doesn't really matter
what the task does. The most important part of the location.js file is the startTracking and
stopTracking functions. When I call the startTracking function, I create a new Promise object
that represents the overall background task.