Load Country Flag From Geonames API using JSONP technique

Question

This Request.JSON http://mootools.net/demos/?demo=Request.JSON using JSON data in a way like this,

var data = {"previews":[
  {"Countrycode":"us", "src":"us.jpg", "description":"desc will be here"},
  {"Countrycode":"uk", "src":"uk.jpg", "description":"desc will be here"},
]};

In the above method we use Countrycode & images by writing name of each image our self.

I'm looking for a method to use Geonames via http://api.geonames.org/export/geonamesData.js?username=orakzai to retrieve Countrycode and CountryFlags via http://www.geonames.org/flags/x/xx.gif where xx is 2 letter ISO country code

Solution 1

The flags are returned as GIF files instead of any sort of JSON. You would just use

<img id='myImage' src="http://www.geonames.org/flags/x/??.gif" />

But fill in the ?? with the country code that geonames uses.

You can put the tag in your page somewhere and use some javascript to change the URL to the one you have computed or you can figure the URL on your server and insert it as the HTML page is created.

If you want to do it in javascript, for example, in jQuery you would have something like this to change the URL on an already loaded image tag with id='myImage'

 $("#myImage").attr('src', "http://www.geonames.org/flags/x/" + countryCode + ".gif")

Solution 2

Similar service, like geonames.org:

var country_code = 'uk',
  img_uri = 'https://flagpedia.net/data/flags/normal/' + country_code + '.png';