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

Language: JavaScript and HTML | VB/C#/C++ and XAML

0 out of 1 rated this helpful - Rate this topic

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 2012

Open an instance of Microsoft Visual Studio 2012.

Step 2: Verify that location is enabled

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

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 file Default.html and copy the following HTML into this file (replacing its original contents).

JavaScript


<!DOCTYPE html>
<html>
<head>
<title>W3C Geolocation API Example</title>

<script type="text/javascript">
var loc = null;
var watchId;

    function watchloc() {
        if (loc == null) {
            loc = window.navigator.geolocation;
        }
        if (loc != null){
            watchId = loc.watchPosition(successCallback);
        }
    }
    
    function stopwatching() {
        loc.removeEventListener(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;
    }
</script>
</head>

<body>
Geolocation Event Sample<br />
<br />

<input type="button" onclick="watchloc()" value="Watch Location" /><br />
<input type="button" onclick="stopwatching()" value="Stop watching" /><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>
</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.
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 Watch 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 the desktop Control Panel, open Change Location Settings and check if Turn on the Windows Location platform is checked.

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.

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