javaScript: Twitter API integration with google Earth and maps
This relates to Data Driven Mapping applications and the Javascript HowTo section
Twitter API
Using the Twitter RESTful API, it is very straightforward to add relevant tweets to an infoWindow or infoBubble.
Narrowing down the the query through Twitter Fields
Deciding which tweets qualify is an important part of planning which to show in our vizMap applications. The first is based on the data applying to the current spot. The VizMap Tabs parameter sheet defines which data fields to use to filter tweets – any tweets which match the contents of the fields specified in Twitter Fields will be considered for inclusion. In the example below, the Employee Tab will consider including Tweets which mention the employees name. Any field, or comma separated list of fields, in the VizMap Dictionary can be used to filter tweets on.
These are stored in a google visualization table, just like all the other infoTab components, allowing me to re-use all the same code used to create viewTables.
if (ie['twitter']){
this.tTable = this.tweetTable();
}
mcpherInfoTab.prototype.tweetTable = function () {
return (this.viewTable ('twitter',false,false));
};
twitterradius
This is a parameter specified in VizMap Controlling Execution. If a value is specified here, then only tweets which originated within that values distance from the spot being shown are considered. Example syntax is 5mi or 1.7km.
twittermaxtweets
This is a parameter specified in VizMap Controlling Execution that limits the number of tweets returned to a small number. Remember that they are being displayed inside an infobubble, so should be no more than about 10.
twitterlanguage
http://search.twitter.com/search.json?q=(Dominic%20Strauss%20Khan)&geocode=40.755612,-73.982025,20mi&lang=en&rpp=10&page=1
and here is the code to create it.
mcpherItem.prototype.refreshTweets = function (conTab) {
var ie=conTab.infoElements['twitter'];
var qt=conTab.tTable;
var spot = this.spot;
var vm = spot.parent;
if (!ie)return(null);
ie.innerHTML='';
var sArg = "?";
var sRest = "http://search.twitter.com/search.json";
// create the query from any terms in the twitter table
var sQ ='';
if (qt){
for (var i =0; i < qt.getNumberOfRows(); i++) {
var sa='';
for (var j =0; j < qt.getNumberOfColumns(); j++) {
var s = qt.getValue(i,j).toString();
if (s) {
if(sa) sa += '+AND+';
sa += s ;
}
}
if (sa) {
if (sQ) sQ += '+OR+';
sQ += '(' + sa + ')';
}
}
}
if (sQ){
sRest += sArg + "q=" + sQ;
sArg = "&";
}
// location based
if (vm.control.twitterradius){
sRest += sArg + 'geocode=' + spot.lat + "," + spot.lng + "," + vm.control.twitterradius;
sArg = "&";
}
//language selected
if (vm.control.twitterlanguage){
sRest += sArg + 'lang=' + vm.control.twitterlanguage;
sArg = "&";
}
//limit
if (vm.control.twittermaxtweets){
sRest += sArg + 'rpp=' + vm.control.twittermaxtweets + '&page=1';
sArg = "&";
}
$.getJSON(encodeURI(sRest) + '&callback=?',
function(resp){
$(ie).append('<table><th class="mctweetheader" colspan=2>' +
'<a href="https://twitter.com/brucemcpherson">' +
'Follow ramblings.mcpher.com @brucemcpherson</a>' +
(vm.control.twitterradius ? '<br>Tweets within ' + vm.control.twitterradius + ' of ' + spot.title:'') +
'</th>');
$.each(resp.results, function(i,item){
$(ie).append('<tr><td class="mctweet">' +
'<img src="'+item.profile_image_url+ '" ' +
(mcpherIsNumber(vm.control.twitterimagewidth) ?
'width="' + vm.control.twitterimagewidth +'"' : '') +
'"</img></td>'+
'<td class="mctweet" rowspan="2">' + item.created_at+':'+item.text +
'</tr><tr><td class="mctweet">@' + item.from_user + ':</td>' +
'</tr>');
});
$(ie).append('</table>');
});
};