HTML and CSS Reference
In-Depth Information
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,
which I parse into a JavaScript object from which I read the street so that I can display it to the
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
<script src="/js/tiles.js"></script>
<script src="/js/location.js"></script>
<script src="/js/default.js"></script>
<div class="midtitle"><h2>Your location is: <span id="geo"></span></h2></div>
<div id="contentGrid">
<div id="leftContainer" class="gridLeft">
<h1 class="win-type-xx-large">Grocery List</h1>
Ti One of the pleasures of working with Metro using HTML5 and JavaScript is that you
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.
Search WWH ::

Custom Search