Quickstart: detecting the user's location (Windows Store apps using JavaScript and HTML) (Windows)

1 out of 2 rated this helpful - Rate this topic

This tutorial discusses the steps that are required to detect a user's geographical location by using the Windows Runtime Geolocation API.

Objective: You will learn the simplest way to detect a user's geographical location. In this tutorial, you create a simple app that makes a one-time request for location data. Calling getGeoPositionAsync only once, as this example does, may be sufficient for apps that use location for a one-time task, such as geotagging an email message. If location is essential for your app, or if your app requires location updates, your app should handle location events as discussed in How to respond to location updates.

Prerequisites

You should be familiar with HTML and JavaScript.

Instructions

1. Verify that location is enabled

Open Control Panel, choose Privacy, and set Allow apps to use my location to On.

2. Open Microsoft Visual Studio 2012

Open an instance of Microsoft Visual Studio 2012.

3. Create a New Project

In the New Project dialog box, choose a blank application from the JavaScript project types.

4. Declare the Location Capability

Double click on package.appxmanifest in solution explorer. Select the Capabilities tab. Check Location in the Capabilities list.

5. Insert the Application JavaScript and HTML

Open your Default.html and copy the following HTML into it, replacing its original contents.

JavaScript


<!DOCTYPE html>
<html>
<head>
<title>Windows Geolocation Example</title>
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script type = "text/javascript" >

var loc = null;

function getloc() {
    if (loc == null) {
        loc = new Windows.Devices.Geolocation.Geolocator();
    }
    if (loc != null) {
        loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
    }
}

function getPositionHandler(pos) {
    document.getElementById('latitude').innerHTML = pos.coordinate.latitude;
    document.getElementById('longitude').innerHTML = pos.coordinate.longitude;
    document.getElementById('accuracy').innerHTML = pos.coordinate.accuracy;
    document.getElementById('geolocatorStatus').innerHTML =
            getStatusString(loc.locationStatus);
}

function errorHandler(e) {        
    document.getElementById('errormsg').innerHTML = e.message;
    // Display an appropriate error message based on the location status.
    document.getElementById('geolocatorStatus').innerHTML =
        getStatusString(loc.locationStatus);    
}

function getStatusString(locStatus) {
    switch (locStatus) {
        case Windows.Devices.Geolocation.PositionStatus.ready:
            // Location data is available
            return "Location is available.";        
            break;
        case Windows.Devices.Geolocation.PositionStatus.initializing:
            // This status indicates that a GPS is still acquiring a fix
            return "A GPS device is still initializing."; 
            break;
        case Windows.Devices.Geolocation.PositionStatus.noData:
            // No location data is currently available 
            return "Data from location services is currently unavailable.";       
            break;
        case Windows.Devices.Geolocation.PositionStatus.disabled:
            // The app doesn't have permission to access location,
            // either because location has been turned off.
            return "Your location is currently turned off. " +
                "Change your settings through the Settings charm " +
                " to turn it back on.";
            break;
        case Windows.Devices.Geolocation.PositionStatus.notInitialized:
            // This status indicates that the app has not yet requested
            // location data by calling GetGeolocationAsync() or 
            // registering an event handler for the positionChanged event. 
            return "Location status is not initialized because " +
                "the app has not requested location data.";
            break;
        case Windows.Devices.Geolocation.PositionStatus.notAvailable:
            // Location is not available on this version of Windows
            return "You do not have the required location services " +
                "present on your system.";
            break;
        default:
            break;
    }
}
</script>
</head>
<body>
<p>
Click "Get Location" to get geolocation data.<br />
<input type="button" onclick="getloc()" value="Get Location" /><br />

Latitude: <span id="latitude"></span><br />
Longitude: <span id="longitude"></span><br />
Accuracy (in meters): <span id="accuracy"></span><br /><br />
Location Status:<span id="geolocatorStatus"></span><br />
Error Message: <span id="errormsg"></span><br />
</p>
</body>
</html>

6. Build the App

On the Build menu, click Build Solution to build the project.

7. Test the App

On the Debug menu, click Start Debugging to test the solution.
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.
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.
If an administrator has disabled location services, your app won't be able to access the user's location. In Control Panel, open Change Location Settings and confirm that Turn on the Windows Location platform is checked.

Summary and next steps

In this quickstart, you created a simple app for detecting the user's current location.

The request for location is initiated in the following code, which creates a Geolocator object, calls getGeoPositionAsync, and specifies handlers for success and failure:

JavaScript


function getloc() {
    if (loc == null) {
        loc = new Windows.Devices.Geolocation.Geolocator();
    }
    if (loc != null) {
        loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
    }
}

The getPositionHandler function displays the latitude, longitude, and accuracy if location is available:

JavaScript


function getPositionHandler(pos) {
    document.getElementById('latitude').innerHTML = pos.coordinate.latitude;
    document.getElementById('longitude').innerHTML = pos.coordinate.longitude;
    document.getElementById('accuracy').innerHTML = pos.coordinate.accuracy;
    document.getElementById('geolocatorStatus').innerHTML =
            getStatusString(loc.locationStatus);
}

The errorHandler function calls the helper function getStatusString to display an appropriate status message if location detection is unsuccessful:

JavaScript


function errorHandler(e) {        
    document.getElementById('errormsg').innerHTML = e.message;
    // Display an appropriate error message based on the location status.
    document.getElementById('geolocatorStatus').innerHTML =
        getStatusString(loc.locationStatus);    
}

In How to Respond to Location Updates, you'll learn how to handle changes to the user's location.

Quickstart: detecting the user's location (Windows Store apps using JavaScript and HTML)

Prerequisites

Instructions

1. Verify that location is enabled

2. Open Microsoft Visual Studio 2012

3. Create a New Project

4. Declare the Location Capability

5. Insert the Application JavaScript and HTML

6. Build the App

7. Test the App

Summary and next steps

Related topics