While looking at Kendo UI earlier this morning, I noticed one of their demos made use of GeoNames. I think I had heard of this site before but I had no idea the amount of cool stuff they had there. GeoNames provides a wealth of free geographical information. For example, countries, cities, states, time zones, etc. Again, all free. But on top of the pure data dumps they have some really cool web services. These services are free, but metered. You have to register and get a username, but once you do, it's pretty simple to use. What I found truly cool though was some of their more unique services. The neatest was findNearByWikipedia. Basically, if you provide a longitude and latitude, the API will find wikipedia articles of items that are near by that location. You can use this to return information about (possibly) interesting things near by the user. Here's a simple example.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//exit early if no geolocation
if(!navigator.geolocation) return;
//our generic error handler will just give a basic message
function handleError(e){
$("#status").append("<p>Sorry, I wasn't able to get your location!</p>");
}
function gotPosition(geo){
var latitude = geo.coords.latitude;
var longitude = geo.coords.longitude;
var apiUrl = "http://api.geonames.org/findNearbyWikipediaJSON?lat="+latitude+"&lng="+longitude+"&username=cfjedimaster&maxRows=10&callback=?";
$.getJSON(apiUrl, {}, function(res) {
if (res.hasOwnProperty("status")) {
$("#status").html("Sorry, I failed to work because: " + res.status.message);
return;
}
var s = "";
for (var i = 0; i < res.geonames.length; i++) {
s+= "<h2>"+res.geonames[i].title+"</h2><p>";
if(res.geonames[i].hasOwnProperty("thumbnailImg")) s += "<img src='"+res.geonames[i].thumbnailImg+"' align='left'>";
s += res.geonames[i].summary;
s += "<br clear='left'><a href='http://"+res.geonames[i].wikipediaUrl+"'>[Read More]</a></p>";
}
$("#status").html(s);
});
}
$("#status").html("<p>Getting your location. Please stand by.</p>");
navigator.geolocation.getCurrentPosition(gotPosition,handleError);
});
</script>
</head>
<body>
<div id="status"></div>
</body>
</html>
This page fires off a HTML5 geolocation request. Once it has it, it then uses jQuery's getJSON and JSON/P support to hit the API. Then it's a simple matter of rendering the results out to the user. You can demo this yourself below, but be warned, my free account will probably stop working if enough people hit the page.
