Check out GeoNames

This post is more than 2 years old.

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("&lt;p&gt;Sorry, I wasn't able to get your location!&lt;/p&gt;");
}

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 &lt; res.geonames.length; i++) {
			s+= "&lt;h2&gt;"+res.geonames[i].title+"&lt;/h2&gt;&lt;p&gt;";
			if(res.geonames[i].hasOwnProperty("thumbnailImg")) s += "&lt;img src='"+res.geonames[i].thumbnailImg+"' align='left'&gt;";
			s += res.geonames[i].summary;
			s += "&lt;br clear='left'&gt;&lt;a href='http://"+res.geonames[i].wikipediaUrl+"'&gt;[Read More]&lt;/a&gt;&lt;/p&gt;";
		}
		$("#status").html(s);
	});
}

$("#status").html("&lt;p&gt;Getting your location. Please stand by.&lt;/p&gt;");		
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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Shiva posted on 12/1/2011 at 9:23 AM

Ray,

Really very cool feature with JSON and it is great to have lot of free API's.

Comment 2 by salvatore fusto posted on 12/1/2011 at 3:01 PM

Ray, imho this should be a perfect use case to write mvc-mvvm javascript code, templating the list rendering.
your post in awesome and very useful, of coursel.
Regards

Comment 3 by Raymond Camden posted on 12/1/2011 at 4:35 PM

Sal, what do you mean by mvc-mvvm? I know what mvc is - but I've not seen that before.

And yeah... I do string manip WAY too much. I played with jQuery Templates once, and AngularJS uses templating. I just can't be bothered most of the time for small demos like this. But it (my use of it I mean) IS a bit ugly.

Comment 4 by salvatore fusto posted on 12/1/2011 at 6:06 PM

Ray, you are a teacher for me and, i think, for a lot of others; i'm shure that many other developer, and i, are very interested in code writing best practices: this is the only sense of my comment.
MVVM: model-view-view-model: a sort of change of mvc pattern described by knockout.js( do you know? what about?)
My best compliment and thanking for your awesome blog and contents.
regards

Comment 5 by Raymond Camden posted on 12/1/2011 at 7:25 PM

Sal: Fair point. It's a struggle sometimes. When I blog on X, I try not to let things get in the way and distract folks. Sometimes that means I don't always follow 100% best practices, but I think for a blog entry you sometimes need to be more practical, know what I mean? It's like posting an HTML example and not having the _entire_ HTML page with doctype. If I wanted to quickly demo the <b> tag, for example, I'd be fine with <b>Ray</b> and _not_ a complete file, since 99% of the code wouldn't be truly relevant.

Hopefully that makes sense. ;)

So MVVM... knockout.js would be the best place to leanr about it?

Comment 6 by Shawn Bowman posted on 12/2/2011 at 5:43 AM

Very nice sir! Something else to figure out how and where I can use it...with tweaks of course :)

Comment 7 by Hugh Stevens posted on 12/2/2011 at 2:49 PM

I also watched the Kendo UI webinar yesterday. Would Kendo play with angularJS. It would be a very powerful combination

Comment 8 by salvatore fusto posted on 12/3/2011 at 2:22 PM

Ray, it's all right.
You can learn about mvvm on wikipedia, knockout.js describe this pattern as a way to make an ui and a model , an object, 2-way dependant: imho is an application of the observer pattern.
have a look to this framework, expecially to the 1.3 RC: i think it's very good, simple yet powerfull but your opinion would be better.
regards

Comment 9 by Keiller posted on 2/15/2012 at 11:41 PM

Thanks..this it will work for me.