Peter Mourfield

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:

[code lang=javascript]
<br /><script type="text/javascript">
$(document).ready(function () {
yepnope({
test: Modernizr.geolocation,
yep: '@Url.Content("~/Scripts/geo.js")',
nope: '@Url.Content("~/Scripts/geo-polyfill.js")',
callback: function (url, result, key) {
getCurrentLocation();
}
});
});
</script>

[/code]

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

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

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

[/code]

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.

javascript
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/.