Language: HTML | XAML

Quickstart: detecting location using HTML5 (HTML)

Applies to Windows and Windows Phone

This quickstart shows you how to detect a user's geographical location, by using the W3C Geolocation API available in HTML5.

Objective: To learn how to detect a user's geographical location using HTML5.

Prerequisites

You should be familiar with HTML and JavaScript.

Time to complete: 20 minutes.

Instructions

1. 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.

2. Open Microsoft Visual Studio

Open an instance of Microsoft Visual Studio.

3. Create a New Project

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

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.

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 () {

                }));
        }
    };
(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("#requestPosition").addEventListener("click",
                        requestPosition);

                }));
        }
    };

    var nav = null;

    function requestPosition() {
        if (nav == null) {
            nav = window.navigator;
        }

        var geoloc = nav.geolocation;
        if (geoloc != null) {
            geoloc.getCurrentPosition(successCallback, errorCallback);
        }

    }

    function successCallback(position) {
        document.getElementById("latitude").innerHTML =
            position.coords.latitude;
        document.getElementById("longitude").innerHTML =
            position.coords.longitude;

    }

    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();
})();


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.


    <label for="latitude">Latitude: </label> <div id="latitude"></div><br />
    <label for="longitude">Longitude: </label> <div id="longitude"> </div><br />
    <div id="status"> </div><br />

    <button id="requestPosition">Get Latitude and Longitude</button><br />


7. Build the app

Choose Build > Build Solution to build the project.

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.

Summary

In this quickstart, you created a simple application that detected a user's location using HTML5. See the Building a Location-Aware Webpage topic for more information.

Related topics

Geolocation Sample
Bing Maps SDK Samples

 

 

Show:
© 2014 Microsoft