Retrieving and displaying data from Wikipedia with YQL

Ever since YQL announced support for Microformats as a data source, I wracked my brain for a cool code example. The solution came in the form of Bhasker V Kode commenting on Jonathan's blog:

Just noticed that microformat queries for wikipedia topics seem to be amazingly insightful.

select * from microformats where url =?http://? ++ Lang ++?.wikipedia.org/wiki/?++ SomeEntity

Examples of everything from hcards to geodata,etc :
2008 summer olympics
http://query.yahooapis.com/v1/public/yql?
q=select%20*%20from%20microformats%20
where%20url%20%3D%22http%3A%2F%2Fen.wikipedia.org%2Fwiki%2F2008_Summer_Olympics%22
&format=xml

Michael Arrington
http://query.yahooapis.com/v1/public/yql?
q=select%20*%20from%20microformats%20
where%20url%20%3D%22http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FMichael_Arrington%22
&format=xml

List of impact craters on Earth
http://query.yahooapis.com/v1/public/yql?
q=select%20*%20from%20microformats%20
where%20url%20%3D%22http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FList_of_impact_craters_on_Earth%22
&format=xml

Now if only there was some better form of name-entity relationship metadata from either YQL or wikipedia - it would be the icing on the cake.

~B )

I was especially intrigued by the list of Meteor impact craters as this one had vcard information with geo information - yummy hack fodder, that.

Now, using YQL and its JSON output, I can easily turn the information in the microformats into a list of locations with latitude and longitude and feed that into Yahoo Maps. The result of this is a wikipedia powered map of meteor impacts.

The code is far from rocket science:


<div id="map"></div>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?
v=3.8&appid=YD-8g8nS1E_JX4cg5VZ84djrJsYURhuXbm4">
</script>
<script type="text/javascript">
var meteora = function(){
function getloc(data){
var locs = data.query.results.result.adjunct[1].item;
var locations = [];
for(var i=0;i<locs.length;i++){
locations.push({
n:locs[i].type.meta.content,
lat:locs[i].type.item[1].type.meta[0].content,
lon:locs[i].type.item[1].type.meta[1].content
});
}
startMap(locations);
}
function startMap(locations){
var map = new YMap(document.getElementById('map'));
map.addTypeControl();
map.addZoomLong();
map.addPanControl();
map.drawZoomAndCenter('London,UK', 16); // where else?
for(var i=0;i<locations.length;i++){
var point = locations[i];
var geoPoint = new YGeoPoint(point.lat,point.lon);
var newMarker= new YMarker(geoPoint);
newMarker.addAutoExpand(point.n);
map.addOverlay(newMarker);
}
}
return {set:getloc};
}();
</script>
<script type="text/javascript" src="http://query.yahooapis.com/v1/public/yql?
q=select%20*%20from%20microformats%20where%20url%20%3D%22
http%3A%2F%2Fen.wikipedia.org%2Fwiki%2F
List_of_impact_craters_on_Earth%22&
format=json&callback=meteora.set">
</script>

The main trick is the last script node retrieving the microformats data, converting it to JSON and sending it to the getloc() method. In this one, I am retrieving the necessary data (name of the location and its latitude and longitude) and storing them in an array. The property chains (f.e. locs[i].type.item[1].type.meta[0].content) can be a bit daunting but using FireBug they are easy to grasp.

We then send the locations array to startMap(), which creates a simple Yahoo Map as explained in the maps documentation.

This is a very easy way to take content from Wikipedia for your mashups, and shows that marking up data in a predictable manner is a great way to allow developers to play with your information.

Chris Heilmann
Yahoo Developer Network