Geolocation in HTML5

Wherever you go, there you are. And sometimes knowing where you are makes all the difference (especially to a web app). In this chapter we’re going to show  you how to create web pages that are location aware—sometimes you’ll be able to  pinpoint your users down to the corner they’re standing on, and sometimes you’ll only  be able to determine the area of town they’re in (but you’ll still know the town!). Heck,  sometimes you won’t be able to determine anything about their location, which could be for technical reasons, or just because they don’t want you being so nosy. Go figure.
In any case, in this chapter we’re going to explore a JavaScript API: Geolocation. Grab the best location-aware device you have (even if it’s your desktop PC), and let’s get started.

A few questions

Q: I heard Geolocation isn’t a real API?
A: Geolocation is not considered a first-class member of the existing HTML5 standard, but that said, it is a standard of the W3C, widely supported and pretty much everyone includes Geolocation in the list of important HTML5 APIs. And it most certainly is a real JavaScript API!
Q: Is the Geolocation API the same as the Google Maps API?
A: No. They are completely different APIs. The Geolocation API is solely focused on getting you information about your position on the Earth. The Google Maps API is a JavaScript library offered by Google that gives you access to all their Google Maps functionality.
So, if you need to display your users location in a map, Google’s API gives you a convenient way to implement that functionality.
Q: Isn’t it a privacy concern to have my device reveal my location?
A: The Geolocation specification specifies that any browser must have the express permission of the user to make use of their location. So, if your code makes use of the Geolocation API, the first thing the browser will do is make sure it is okay with the user to share her location.
Q: How well supported is Geolocation?
A: Very well supported; in fact, it’s available in almost every modern browser including desktop and mobile. You’ll want to be sure you’re using the latest version of your browser; if you are, then you’re probably good to go.

To know where you are, you need a coordinate system, and you need one on the Earth’s surface. Luckily we have such a thing, and it uses latitude and longitude together as a coordinate system. Latitude specifies a north/sourth point on the Earth, and longitude, an east/west point. Latitude is measured from the equator, and longitude is measured from Greenwich, England. The job of the geolocation API is to give us the coordinates of where we are at any time, using these coordinates.

You’ve probably seen latitude and longitude specfied in both degrees/minutes/seconds, such as (47˚38’34’’, 122˚32’32’’), and in decimal values, such as (47.64, -122.54). With the Geolocation API we always use decimal values. If you need to convert degrees/minutes/seconds to decimal, you can use this function:

function degreesToDecimal(degrees, minutes, seconds) {
return degrees + (minutes / 60.0) + (seconds / 3600.0);
}

How the Geolocation API determines your location
You don’t have to have the newest smartphone to be location aware. Even desktop browsers are joining the game.

You might ask, how would a desktop browser determine its location if it doesn’t have GPS or any other fancy location technologies?
Well, all browsers (in devices and on your desktop) are using a few different ways to determine where you are, some more accurate than others. Let’s take a look:

GPS – Global Positioning System, supported by many newer mobile devices, provides extremely accurate location information based on satellites. Location data may include altitude, speed and heading information. To use it, though, your device has to be able to see the sky, and it can take a long time to get a location. GPS can also be hard on your batteries.
IP Address
Location information based on your IP address uses an external database to map the IP address to a physical location. The advantage of this approach is that it can work anywhere; however, often IP addresses are resolved to locations such as your ISP’s local office. Think of this method as being reliable to the city or sometimes neighborhood level.

Cell phone triangulation figures out your location based on your distance from one or more cell phone towers (obviously the more towers, the more accurate your location will be). This method can be fairly accurate and works indoors (unlike GPS); it also can be much quicker than GPS. Then again, if you’re in the middle of nowhere with only one cell tower, your accuracy is going to suffer.

WiFi positioning uses one or more WiFi access points to triangulate your location. This method can be very accurate, works indoors and is fast. Obviously it requires you are somewhat stationary (perhaps drinking a venti iced tea at a coffee house).

It’s cool we’ve got so many ways to know where we are. How am I going to know which method my device is using?
The short answer is “you’re not,” as the browser implementation is going to determine how location is determined. But
the good news is the browser can use any of these means to determine your location. In fact, a smart browser might first use cell phone triangulation, if it is available, to give you a rough idea of location, and then later give you a more accurate location with WiFi or GPS.
We’ll see that you don’t need to worry about how the location is being determined, and we’ll focus more on the accuracy
of your location instead. Based on the accuracy, you can determine how useful the location is going to be for you.

The Javascript:

window.onload = getMyLocation;

function getMyLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayLocation);
} else {
alert(“Oops, no geolocation support”);
}
}

function displayLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var div = document.getElementById(“location”);
div.innerHTML = “You are at Latitude: ” + latitude + “, Longitude: ” + longitude;
}

Now – how about computing the distance between two points?

Ever wanted to know how to compute the distance between two points on a sphere? To compute the distance between two coordinates most everyone uses the Haversine equation; you’ll find it implemented below. Feel free to use it anywhere you need to know the distance between two coordinates:

function computeDistance(startCoords, destCoords) {
var startLatRads = degreesToRadians(startCoords.latitude);
var startLongRads = degreesToRadians(startCoords.longitude);
var destLatRads = degreesToRadians(destCoords.latitude);
var destLongRads = degreesToRadians(destCoords.longitude);
var Radius = 6371; // radius of the Earth in km
var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) +
Math.cos(startLatRads) * Math.cos(destLatRads) *
Math.cos(startLongRads – destLongRads)) * Radius;
return distance;
}

function degreesToRadians(degrees) {
var radians = (degrees * Math.PI)/180;
return radians;
}

Now that we’ve got a function to compute the distance between two coordinates, let’s define our location here.
We’re going to define a literal object for the coordinates of our location. Add this as a global variable at the top of your .js file.

var ourCoords = {latitude: 52.464725,longitude:-0.735789};

function displayLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var div = document.getElementById(“location”);
div.innerHTML = “You are at Latitude: ” + latitude + “, Longitude: ” + longitude;
var km = computeDistance(position.coords, ourCoords);
var distance = document.getElementById(“distance”);
distance.innerHTML = “You are ” + km + ” km from the Easter Islands”;
}

Advertisements