archmagus

Why is it so hard to find a Starbucks around here?!!

This is a fairly specialized topic, but it’s also an easy one, so let’s devote a quick blog post to it for the sake of thoroughness.  Maybe it will help some of you HTML5 web searchers out there. (Welcome, web searchers!)

Some of you may be wondering if an HTML5 app running on the iPhone has access to the devices latitude and longitude, or “geolocation.”  It does!  One of the new HTML5 APIs is called the Geolocation API, and it gives your JavaScript access to the device’s geolocation information just as a native app has access to it.

Fun fact #1: when you fetch the iPhone’s geolocation info, the little compass icon in the status bar appears, just as it does for a native app, to remind the user that your application is tracking where they are.

Fun fact #2: when you attempt to access the device’s geolocation info, the user will get a popup asking if they want to grant permission to your app to…you know…track where they are.  They may say “no.” A good app will be prepared for rejection.

Fun fact #3: many modern desktop browsers also support the geolocation API!  In my experience, the values a desktop computer comes up with as its best guess for where you are is a joke though.

Get on with it

Final fun fact: You know how when you’re using Google Maps on your phone to drop a pin on the map showing where you are and that pin moves back and forth a few times before it finally settles down?  You’re going to get that, too.  When you begin querying the iPhone for its location, it will take a little while before the iPhone can come up with a final value for you, so be prepared for the location to change on you even if the user is sitting still.

So how do you fetch the location of the device, assuming your user allows you access to this private information?  The call is pretty straightforward:

navigator.geolocation.getCurrentPosition(function(position){
            var lat  = position.coords.latitude;
            var long = position.coords.longitude;
            .
            .
            .
        }, function(error){ // second handler is the error callback
            switch(error.code)
            {
            case error.TIMEOUT:
                break;
            case error.POSITION_UNAVAILABLE:
                break;
            case error.PERMISSION_DENIED:
                break;
            }
});

The coordinates that are returned are (on the iPhone at least) floating point numbers that go down many, many decimal places.  In practice, I’ve found those decimal places give you a pretty decent idea of what house you’re at, but not enough resolution to tell you what room of the house you’re in. What you do with that information is up to you!  There are several tools available to help you put a latitude/longitude value on a JavaScript map, for example, but that reaches into general JavaScript programming and beyond the scope of this blog, at least for now.

Or you could help poor Spirit find the nearest Starbuck’s. Goodness knows it has earned a latte.