Adding HTML5 Geolocation to Nerd Dinner with yepnope.js, and Modernizr

One of the new features of the recently updated Nerd Dinner project is the support for HTML5 Geolocation.

There are two JavaScript libraries that I used to accomplish this. The first is yepnope.js (http://yepnopejs.com/). Yepnope.js is an asynchronous resource loader. This means that you can load scripts based on the outcome of some condition. The second is Modernizr v1.7 (http://www.modernizr.com/). Modernizr detects a web browser’s ability to support various HTML5 and CSS3 features. Note: Modernizr v2 has yepnope.js built into the production version so you may want to consider using it in your project.

It’s important to remember that yepnope.js is an asynchronous resource loader. This means that the script you’re loading WON’T be available on page load or $(document).ready. What I did was create a common JavaScript function called getCurrentLocation in both javascript files and call that when the script load is completed.

The code in Nerd Dinner that kicks the Geolocation off is this:


So the whole thing works like this: First, the resource loader (yepnope.js) tests if the browser supports native geolocation by using Moderizr. If the browser does (yep) support geolocation natively, the geo.js gets loaded and the callback calls the geo.js version of getCurrentLocation.

geo.js

function getCurrentLocation() {
    try {
        // do native HTML5 geolocation
        navigator.geolocation.getCurrentPosition(showCurrentLocation, errorHandler)
    }
    catch (e) {
        // something happened, do it the old way
        NerdDinner.getCurrentLocationByIpAddress();
    }
}

// callback from geolocation
function showCurrentLocation(position) {
    // go update the location box
    NerdDinner.getCurrentLocationByLatLong(position.coords.latitude, position.coords.longitude);
}

Otherwise (nope), Nerd Dinner uses geo-polyfill.js and the callback calls his version of getCurrentLocation, which uses the browser’s IP address to query a geolocation service for the location data.

geo-polyfill.js

function getCurrentLocation() {
    // this is how we used to do it by calling a geolocation service using the client IP address
    NerdDinner.getCurrentLocationByIpAddress();
}

Finally both methods use the location data they got to populate the Location box. This behavior is in both the regular (Views/Home/Index.cshtml) and mobile (Views/Home/Index.Mobile.cshtml) versions.

If you want to learn more, I’d encourage you to go checkout the source for Nerd Dinner on CodePlex at http://nerddinner.codeplex.com/.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s