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.
Archived Comments
Ray,
Really very cool feature with JSON and it is great to have lot of free API's.
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
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.
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
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?
Very nice sir! Something else to figure out how and where I can use it...with tweaks of course :)
I also watched the Kendo UI webinar yesterday. Would Kendo play with angularJS. It would be a very powerful combination
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
Thanks..this it will work for me.