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>
</head>
<body>
<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