Language: HTML | XAML

How to respond to location updates using HTML5 (HTML)

Applies to Windows and Windows Phone

This topic shows you how to respond to changes in the user's geographic position, using the W3C Geolocation API in HTML5.

Prerequisites

You should be familiar with HTML and JavaScript.

Instructions

Step 1: Open Microsoft Visual Studio

Open an instance of Microsoft Visual Studio.

Step 2: Verify that location is enabled

Make sure that the device has access to your location. You can find this setting on Windows by going to the Settings charm, selecting Change PC Settings, then Privacy, then Location. On Windows Phone, go to Settings, select location and set Location services to on.

Step 3: Create a New Project

Create a new project, choosing a Blank App from the JavaScript/Store Apps project types.

Step 4: Declare the Location Capability

Double click on package.appxmanifest in Solution Explorer for both the Windows and Windows Phone projects. Select the Capabilities tab. Check Location in the Capabilities list.

Step 5: Replace the JavaScript code

In the Shared project, open default.js (/js/default.js). Replace the code in the file with the following.


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {

            args.setPromise(WinJS.UI.processAll().
                done(function () {

                    // Add an event handler to the button.
                    document.querySelector("#watchLoc").addEventListener("click",
                        watchloc);

                    // Add an event handler to the button.
                    document.querySelector("#stopWatching").addEventListener("click",
                        stopwatching);

                }));
        }
    };

    var loc = null;
    var watchId;

    function watchloc() {
        if (loc == null) {
            loc = window.navigator.geolocation;
        }
        if (loc != null) {
            watchId = loc.watchPosition(successCallback);
        }
    }

    function stopwatching() {
        loc.clearWatch(watchId);
    }

    function successCallback(pos) {
        document.getElementById('latitude').innerHTML = pos.coords.latitude;
        document.getElementById('longitude').innerHTML = pos.coords.longitude;
        document.getElementById('accuracy').innerHTML = pos.coords.accuracy;
    }

    function errorCallback(error) {
        var strMessage = "";

        // Check for known errors
        switch (error.code) {
            case error.PERMISSION_DENIED:
                strMessage = "Access to your location is turned off. " +
                    "Change your settings to turn it back on.";
                break;
            case error.POSITION_UNAVAILABLE:
                strMessage = "Data from location services is " +
                    "currently unavailable.";
                break;
            case error.TIMEOUT:
                strMessage = "Location could not be determined " +
                    "within a specified timeout period.";
                break;
            default:
                break;
        }
        document.getElementById("status").innerHTML = strMessage;
    }


    app.start();
})();


Step 6: Add the HTML for the apps

Open the default.html file for the Windows and Windows Phone projects, and copy the following HTML into inside the BODY tags of the file.


    Geolocation Event Sample<br />
    <br />

    <button id="watchLoc">Watch Location</button><br />
    <button id="stopWatching">Stop Watching</button><br />
    Latitude: <span id="latitude">Waiting for update...</span><br />
    Longitude: <span id="longitude">Waiting for update...</span><br />
    Accuracy: <span id="accuracy">Waiting for update...</span><br />
    <span id="status"> </span><br />


Step 7: Build the app

Choose Build > Build Solution to build the project.

Step 8: Test the app

  1. On the Debug menu, click Start Debugging to test the solution.
  2. On Windows, the first time you run the sample, you'll get a prompt that asks if the app can use your location. Choose the Allow option.
  3. Click the Get Location button to get the current location.

Note  If location data doesn't display, check the following:

  • Make sure you've enabled access to location by opening package.appxmanifest in Solution Explorer and checking Location in the Capabilities tab.
  • On Windows, if an administrator has disabled location services, your app won't be able to access the user's location. In the desktop Control Panel, open Change Location Settings and check if Turn on the Windows Location platform is checked.
  • On Windows Phone, the user can disable location in the Settings app. Go to the Settings app, select location and make sure that the Location services switch is toggled on.

Remarks

On Windows, you should test for location updates by using a Wi-Fi enabled computer, because the Windows Location Provider uses Wi-Fi triangulation to resolve the location. As the location is resolved, events that indicate updates are raised. If you use a computer that doesn't have Wi-Fi enabled, location will be based on IP address, and you might not get location update events.

Related topics

Geolocation Sample

 

 

Show:
© 2014 Microsoft