Using Twitter in Earth and Maps

javaScript: Twitter API integration with  google Earth and maps get it now

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

This is a parameter specified in VizMap Controlling Execution that limits the number of tweets to a particular standard language code, such as en, fr and so on. If omitted, all languages are included. 

Here is the code for refreshing tweets. Unlike the other infotab contents, which are all set up just once on initialization, this is refreshed each time a tab view is changed. This is to allow new tweets to be shown whenever they happen.  A simple generated request will look something like this


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>');
  });
 };

Using jQuery

Note that jQuery is used here. Normally I just stick to plain javaScript, but in this case jQuery makes it easier to deal with handling the REST response. 



Comments