If there’s something in the HTML5 technology suite whose potential is inversely proportionate to its simplicity, it’s geolocation. The API is very simple and the opportunities haven’t begun to get tapped. My boss over at Tahzoo has a few mind-blowing ideas and he asked me to research the API and prepare a demo to see what our potential is. After I did my research and shared with the team, idea after idea started flowing out. So that’s why this is one of…many parts. First I’m going to lay out the basics here, and in other posts we’ll explore what to do with our foundation.
Prerequisites for Understanding Geolocation
- Basic level knowledge of HTML5
- Basic to Intermediate knowledge of JavaScript and jQuery
- Something that has GPS and an internet connection (I hear these newfangled smart phones do the trick)
About HTML5’s Geolocation API
It doesn’t have one. The Geolocation API is a separate spec from the HTML5 spec. However, because of the inherit awesomeness of HTML5 and this API, it’s fair to put them in the same suite of web awesomeness. Whether you’re reading a book or hitting a website on HTML5, you’ll see geolocation mentioned because it just kind of fits.
Once again, I’ll defer you to Remy Sharp and Bruce Lawson‘s book Introducing HTML5 for stuff I don’t address, or blatantly get wrong. I’m going to do my best to break this stuff down into terms I understand.
What you really get with it
Not a whole lot
You’re getting raw data like latitude, longitude, etcetera. You need another API or a case of Red Bull and masochistic tendencies to interpret the data you get back. I dived really deep into the Google Maps API, which will be a series of follow-up posts.
A chance to wish you paid attention in 8th grade science
You’re getting everything in meters or kilometers. So this is the one time I’ll say that it sucks to be an American. If Starbucks is 2 kilometers away, I have no idea if I should walk or drive. If my device is accurate within 70 meters, does that mean I’m close enough to follow my nose to Chick-Fil-A, or do I call for help?
Sketchy Accuracy
Another thing that I wondered is, “why the heck is my Mac more accurate than my phone; it doesn’t even have GPS!” It’s entirely up to the device to decide how to find you. Desktop machines might use WiFi triangulation or IP addresses. Cell phones might triangulate off of cell towers (which totally sucks if you’re inside— or in Kansas) or they’ll use GPS. There’s ways to push for high accuracy, but it’s up to the device to decide. If you’re planning on building applications with this, you need to account for device accuracy along the way.
The Geolocation API in a Nutshell
1. User Permissions
You can’t get a user’s location without asking permission. That means every browser will show a pop-up and ask permission. In fact, you should have gotten one if you visited this page for the first time. I hope you clicked yes, because otherwise the demo at the bottom isn’t going to work too well.
2. The Object
So, there’s only one object we’re working with, and that’s (navigator.geolocation). A generally good idea is to actually put it in an if statement so we can do something if we don’t get their location.
3. The API Methods
There’s three methods in the API. Two of them pretty much do the same thing.
getCurrentPosition gets the user’s position once, right after they’ve given the web browser permission.
watchPosition lets us get the user’s position at regular intervals
clearWatch does what it looks like. If we’re using watchPosition, we use this method to stop watching (because no one likes a creeper).
4. The Success Handler
Now the magic actually happens. So long as the user’s given us permission and there aren’t other issues, a success handler is called.We’re going to get back a position object and it’ll contain two properties: coords and timestamp.
The juicy stuff is in the coords property, so here’s a break down of what we get. There’s two “grades” of data. The first grade is in any browser that has geolocation support. The second may not have much support in all your browsers. Yet.
latitudelongitudeaccuracy
altitudealtitudeAccuracyheadingspeed
The Easiest Geolocation Demo Ever
Below I’ve got a basic table with four rows. We’re getting latitude, longitude, and accuracy. Because this is all HTML5, I’m getting spiffy and using the meter element to visually portray the accuracy. If you’re using FireFox, Safari, or IE, you won’t see the meter. Meter only plays well in Chrome and Opera right now.
| Lattitude | |
| Longitude | |
| Accuracy | |
| Accuracy |
The script is exactly what you would have imagined. I used the option to enable high accuracy, and then I assigned a variable to each property of coords. A dab o’ jQuery outputs my results into the table. Because accuracy comes back in meters, that means the greater the number, the worse the accuracy (accuracy within 5 meters gets you to the drive-thru, within 100 gets you a caffeine-withdrawal induced rage). If it’s over 100, I just label it as 100 — but otherwise we subtract it from 100 for meter.
navigator.geolocation.getCurrentPosition((position) =>{
enableHighAccuracy:true;
const coords = position.coords;
const { latitude, longitude } = coords;
let { accuracy } = coords;
document.getElementById('latt').innerText =latitude;
document.getElementById('longg').innerText = longitude;
document.getElementById('accuracy').innerText = accuracy;
//adjust for the meter (higher number = less)
if(accuracy >100){ accuracy = 100; };
accuracy = 100 - accuracy;
document.getElementById('acc-meter').value = accuracy;
});
Wouldn’t It Be Cool if I Could Play with It Right Now?
I just want to be fancy, so here’s a version you can edit in real-time. (Courtesy of our friend contenteditable). This is the honest-to-goodness script that detected your location today. Purdy, isn’t it?