FIFAランキングをMapchartを使用して世界地図に表示してみる

以前の記事で紹介したGeoChatを使って、FIFAのランキングを世界地図に表示するものを作ってみました。

イメージ

GeoChartで世界地図を表示。赤い国程強いです。

マウスカーソルを当てると、その国のランキングが表示され、

クリックすると。

その国の代表チームのWikiページが表示されます。

中でどんな処理をしているか

ざっとまとめると。。

1. FIFAのページから拾ったJSONデータをJavaScriptで取り込み、国名[ランキング]の配列を作る。

1. 国の地域コード(ISO-3166-1)がまとまっているJSONデータを使用して、「01」で作った配列の国名をGoogle GeoChartが認識できる地域コードに変換する
2. Google GeochartのAPIを使用して、世界地図にFIFAランキングを表示する
3. selectHandlerを使って、タッチした国のサッカー代表チームWikiページを表示する

をやっています。

もっと詳しく！

興味ある方はGitHubのページを見てみて下さい！！
kazuhirosaji/maplinks · GitHub

実際に動かしてみる

xamppやapache等にダウンロードしたファイルを置いて、geochart.htmlを開けばOKです。