Windows Dev Center

Detect location using HTML5 (HTML)

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

Before your app can access location, Location must be enabled on the device. In the Settings app, check that the following location privacy settings are turned on:

  • Location for this device... is turned on (not applicable in Windows 10 Mobile Insider Preview)
  • The location services setting, Location, is turned on
  • Under Choose apps that can use your location, your app is set 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. Enable the location capability

Double click on package.appxmanifest in Solution Explorer for both the Windows and Windows Phone projects, and select the Capabilities tab. Then check Location in the Capabilities list. This adds the Location device capability to the package manifest file.


  <Capabilities>
    <!-- DeviceCapability elements must follow Capability elements (if present) -->
    <DeviceCapability Name="location"/>
  </Capabilities>

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

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

Windows 10 Insider Preview geolocation sample
Windows 8.1 geolocation sample
Bing Maps SDK Samples

 

 

Show:
© 2015 Microsoft