Where am I?
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!
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.