Now that I’ve spent the last two articles helping you to get your Metro user experience foundation created with CSS3 and Media Queries, it’s time to jump into one of the features of HTML5. Geolocation is perfectly suited for smartphones because location awareness is something they all have in common. Most people are under the impression that only native mobile apps have the power to reach into the platform APIs and retrieve a device’s current location. Luckily, with modern HTML5 browsers like Internet Explorer 9, web pages can use JavaScript to gather this same information. This API finds your location via the following methods:
- GPS: This is the most accurate method but it requires you to be outdoors and has a reputation for draining batteries.
- IP Address: There’s a location database that maps IP addresses to locations which may or may not be accurate depending on how far away your DHCP server is from your current location.
- Wi-Fi: This also maps IP addresses to locations but also triangulates between Access Points. It works indoors and may be relatively accurate.
- Cell Tower Triangulation: This also works indoors and can be fairly accurate depending on how far apart the closest cellular towers are.
Let’s take a look at a simple page containing HTML and JavaScript:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=yes” />
<meta name=”MobileOptimized” content=”width” />
<meta name=”HandheldFriendly” content=”true” />
<link rel=”stylesheet” href=”MetroLight.css”>
<title>Geolocation</title>
</head>
<body>
<p>CONTOSO TRACKER</p>
<h4>Simple Geolocation</h4>
<form>
<fieldset>
<legend>Track</legend>
<button type=”button” id=”locationButton” onclick=”getPosition()”>Get Location</button>
</fieldset>
</form>
<script>
function getPosition() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayLocation);
}
else {
alert(“No Geolocation Support”);
}
}
function displayLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert(“You’re at Latitude: ” + latitude + “, Longitude: ” + longitude);
}
</script>
</body>
</html>
As you can see, I’ve taken our HTML5 + Mobile Web boilerplate and included the Light Metro stylesheet to get started. Beyond that, it’s just a simple button designed to call a JavaScript function via the onclick event. For the sake of this example, I’ve done the unthinkable and have included the JavaScript inside the web page. Please never to this in production.
The onclick event calls the getPosition() function. The first thing you should notice is a bit of defensive coding where I test to see if the navigator.geolocation capability exists. If the target browser allows me to pass that test, I then call the getCurrentPosition() method and pass in a single arguement for the successCallback parameter. Don’t worry, I’ll dive into the other two parameters in the next article.
The displayLocation callback function is called once the device passes the coordinates back to the web page. After that, it’s a simple matter of retrieving the latitude and longitude values.
This first image below shows you what the mobile web page should look like when you run it on Windows Phone 7.5:
You should see the now-familair Light Metro UX. When you click the Get Location button, IE9 will popup a dialog asking your permission to allow the web page to access your location from Windows Phone as shown below:
This should give you comfort in knowing the Big Brother cannot anonymously track you. You can say Yes or No for each Geolocation request and you can check the checkbox to remember your choice for this particular web page. Once you’ve said Yes, the device will give you a lat/long as shown in the image below on the left:
In order to more easily test this on my PC with Visual Studio 2010 running, I used the Windows Phone emulator, plus the additional tools you get with the Windows Phone 7.1 SDK. By clicking on the Location tab, you can then click on the Bing map to get a Pushpin in a particular location. The coordinates for the pushpin are displayed in the Current Location section which should match what you see in the emulator. That’s all there is to it!
Congratulations! You can now get lat/long coordinates without building an app.
Keep coding,
-Rob
