ヅラッシュ！ by NI-Lab.

JavaScriptだけで地図の上にTwitterのつぶやきを表示する：マピオンラボ(Javascript) を参考にして、 YOLP JavaScriptマップAPI を使って地図上に Twitter のつぶやきを表示してみた。
⇒ 地図上で位置情報ツイート検索

参考までに、 JavaScript のコードをここに抜粋。

var map; // 地図
var tweets = {}; // ツイートがすでに地図上にあるかチェック用(key=id_str)
 
window.onload = function() {
 
  // 地図初期化
  map = new Y.Map("map", {
    configure : {
      doubleClickZoom : false,
      scrollWheelZoom : true,
      singleClickPan : true,
      dragging : true
    }
  });
  map.addLayerSet(Y.LayerSetId.EARTHQUAKEPHOTO, new Y.LayerSet('震災後写真', [new Y.EarthQuakePhotoLayer()]));
 
  // 最初の場所
  map.drawMap(new Y.LatLng(35.68972384783109, 139.70025644779037), 12);
 
  // 地図上にいろんなコントロールを追加
  map.addControl(new Y.ScaleControl());
  map.addControl(new Y.LayerSetControl());
  map.addControl(
    new Y.SliderZoomControlVertical(),
    new Y.ControlPosition(Y.ControlPosition.TOP_RIGHT, new Y.Size(50, 50))
  );
  map.addControl(
    new Y.SearchControl(),
    new Y.ControlPosition(Y.ControlPosition.TOP_LEFT, new Y.Size(0, 0))
  );
  map.addControl(
    new Y.AddressCategoryControl(),
    new Y.ControlPosition(Y.ControlPosition.BOTTOM_LEFT, new Y.Size(0, 0))
  );
 
  // ダブルクリックでツイート検索
  map.bind('dblclick', twitterSearch);
}
 
function twitterSearch(latlng) {
 
  // JSONPなツイート検索
  var url = "http://search.twitter.com/search.json?geocode=" + latlng.lat() + "," + latlng.lng() + ",10km&rpp=100&callback=twitterCallback";
 
  // 古いの消さなきゃ・・・
  var searchtweetsid = "searchtweets";
  var old = document.getElementById(searchtweetsid);
  if(old){
      document.getElementsByTagName('head')[0].removeChild(old);
  }
 
  // 新しいの作らなきゃ・・・
  var script = document.createElement("script");
  script.id = searchtweetsid;
  script.src = url;
  script.type = "text/javascript";
  document.getElementsByTagName('head')[0].appendChild(script);
}
 
function twitterCallback(e) {
 
  //map.clearFeatures(); // 検索するたびに前の検索結果を消すならこれ
 
  if (e && e.results) {
    for (var i = 0, len = e.results.length; i < len; i++) {
      var result = e.results[i];
 
      // 位置情報を持っているか
      if(result.geo){
 
          // すでに地図上に存在するツイートは追加しない
          if(!tweets[result.id_str]){
 
              // Twitterのアイコンを表示
              var icon = new Y.Icon(e.results[i].profile_image_url);
              var marker = new Y.Marker(new Y.LatLng(result.geo.coordinates[0], result.geo.coordinates[1]), {icon: icon});
 
              // クリックされたときにフキダシを表示
              marker.bindInfoWindow("<div>" + result.text + "</div>");
 
              // 地図上に追加
              map.addFeature(marker);
 
              // 地図上に存在するツイート一覧にツイートIDを追加
              tweets[result.id_str] = result.id_str;
          }
      }
    }
  }
}

サーバ側のコードを書かないで JavaScript でここまでできるなんて便利。

⇒ 地図上で位置情報ツイート検索

Ref.
- JavaScriptだけで地図の上にTwitterのつぶやきを表示する：マピオンラボ(Javascript)
- Yahoo!デベロッパーネットワーク - YOLP（地図） - JavaScriptマップ
- GET search | Twitter Developers

tags: twitter yahoo_maps_api location

Posted by NI-Lab. (@nilab)