ko31 ※この記事は「将棋 Advent Calendar 2016 – Adventar」の16日目です。
前回は棋士の出身地から都道府県別のグラフを作ってみましたが、今度は出身地のデータを利用して棋士を地図上にマッピングしてみようと思います！
棋士出身地マップ
最終的に出来上がったページはこちら。
マーカーをクリックすると棋士データベースから取得した棋士名、出身地、画像がポップアップで開くようになってます。
それにしても中座真七段ってすごい所からプロ入りを果たした方なんですね・・・、奨励会時代どんなに苦労されたことでしょう。
この地図何となくいじってるだけで結構楽しいので、どうぞお試しください。
出身地マップの作り方
地図の作り方をざっと流れで説明してみます。
地図は OpenStreetMap、地図上にマーカーを追加するのは Leaflet という JavaScript ライブラリを使いました。この組み合わせ、この程度のことがすごく簡単に作れてしまうのでとてもいい感じ。
以前の記事で作った全棋士データが入った kishi_all.json を元に、出身地から緯度・経度を取得したデータを追加して新たなデータ（map.json）を作ります。
そのデータを作るために組んだスクリプトはこちら。
スクリプト内の緯度・経度の取得には、こちらの Google Maps Geocoding API を使いました。
後は作られた json をマップページから読み込んで、Leaflet の機能でマーカー追加していけば出来上がりです。ページのソースはこんな感じです。
いやーこういう動きがあるものを作るのは楽しいですね。次回は違うものを作る予定でしたが、地図ネタでまた何か考えてみようかな・・・。