Latest Tweet

HTML5 is watching you… with geolocation!

Posted by Alex on September 20, 2011

Where am I?

Hot or Cold

Hot or Cold?

Today I want to talk about something very near and dear to all of our hearts. HTML5. We hear the term more and more often now and too many times people think of it as a replacement for the Flash splash page animations of old. But NO, there is so much more that we get with HTML5. One of the awesome new additions to web standards development is ¬†browser based geolocation. Now any website, with your permission of course, can know your relative location, allowing for all manner of location-based badassery. Need to know where your local zombie-apocalypse bunker is? NOW YOU CAN! Need to know where the closest Xavier’s School for Gifted Youngsters is? NOW YOU CAN! More importantly, now you can play the most technologically advanced version of Hot or Cold the world has ever seen with nothing more than your phone and its mobile browser!

Where geocaching uses gps to find something in the real world, I wanted to create something that lets you find data in the digital world, based on your real life location. This is where Geotrapper comes in. It starts out by simply setting your location and telling you how far away your target is. From then on, every time you hit the locate button, the old-timey gauge will tell you whether you’re getting hotter or colder and update’s the distance meter. When you get to the right location a treasure chest appears and gives you a prize! Watch the video below for a simple demo of the app in action, and read on for a few tips and tricks that I learned while building it.

The Right Tool for the Right Job

A lot of the location demos and tutorials I found show off the getCurrentPosition function of the geolocation API, but when it came down to it that function wasn’t accurate enough for what I wanted. I was building this app based on the mobile Safari browser inside of iOS which tended to give getCurrentPosition the first data it could find. The problem with this is that iOS seems to pull location data first from nearby wi-fi towers, then cell tower triangulation, and lastly GPS. The watchPosition function is MUCH more useful here because it updates your location every time your location changes OR increases in accuracy, which is exactly what we want.

Math is Fun!

One of the other really important things about location based apps is ultimately knowing the distance between point A and point B. The geolocation api actually returns the users longitude and latitude, the rest is all up to you! There are two things you’re going to need to put the pieces together. You’ll need point B’s coordinates, and you’ll need to calculate the distance. As far as getting point B’s coordinates, you need to utilize something called geocoding, which¬†basically means taking an address and turning it into long/lat data. You can find online geocoding tools for one-off situations, but for everything else, there’s the Google Geocoding API. Now that we know where we’re going, how far away are we? For this you just need to use the appropriate function for your language of choice. Here are a couple of examples in JavaScript and PHP. You put coordinates in, and you get distance in meters out.

There you go! Now go and create amazing web applications that know where you are. Here are some slightly more detailed resources that should help you out.

http://diveintohtml5.org/geolocation.html
http://mobile.tutsplus.com/tutorials/mobile-web-apps/html5-geolocation/