How to respond to location updates (Windows Store apps using JavaScript and HTML) (Windows)

1 out of 1 rated this helpful - Rate this topic

This topic explains how to respond to changes in the user's location.

What you need to know

Technologies

Windows Runtime

Prerequisites

You should be familiar with HTML and JavaScript.

Instructions

Step 1: Verify that location is enabled

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

Step 2: Open Microsoft Visual Studio 2012

Open an instance of Microsoft Visual Studio 2012.

Step 3: Create a New Project

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

Step 4: Declare the Location Capability

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

Step 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>Example: Responding to Location Updates</title>
    <link rel="stylesheet" type="text/css" href="winjs/css/ui-light.css" />
    <script type="text/javascript">
        var loc = null;

        function trackloc() {
            if (loc == null) {
                loc = new Windows.Devices.Geolocation.Geolocator();
            }
            if (loc != null) {
                loc.addEventListener("positionchanged", onPositionChanged);
                loc.addEventListener("statuschanged", onStatusChanged);
                // display initial status, in case location is turned off.
                document.getElementById('geolocatorStatus').innerHTML =
                    getStatusString(loc.locationStatus);
            }
        }

        function stoptracking() {
            if (loc != null) {
                loc.removeEventListener("positionchanged", onPositionChanged);
            }
        }

        function onPositionChanged(args) {
            var pos = args.position;
            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);
        }

        // Handle change in status to display an appropriate message.        
        function onStatusChanged(args) {
            var newStatus = args.status;
            document.getElementById('geolocatorStatus').innerHTML =
                getStatusString(newStatus);
        }

        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.";
                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:
                    return "Unknown status.";
            }
        }

</script>
</head>
<body>
<p>Geolocation Event Sample</p><br />
<span id="status"></span><br />
<input type="button" onclick="trackloc()" value="Track Location" /><br />
<input type="button" onclick="stoptracking()" value="Stop Tracking" /><br />
Latitude: <span id="latitude">Waiting for update...</span><br />
Longitude:  <span id="longitude">Waiting for update...</span><br />
Accuracy (in meters): <span id="accuracy">Waiting for update...</span><br />
Location Status: <span id="geolocatorStatus"></span><br />
</body>
</html>

Step 6: Build the App

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

Step 7: Test the App

On the Debug menu, click Start Debugging to test the solution.
Click the Get Location button to get the current location.

Remarks

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.

If your application only needs to get geolocation data once, rather than subscribing to updates, use the GetGeopositionAsync method as described in Quickstart: Detecting location using the Windows Runtime Geolocation API.

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 ensure that Turn on the Windows Location platform is checked.

How to respond to location updates (Windows Store apps using JavaScript and HTML)