rui live note

WordPress、PHP、子育て、ブログ、将棋、コワーキング、子育て、群馬等に関する日々感じたことを書いているブログです

*

将棋棋士データベースで遊ぶ(4)〜OpenStreetMapで棋士出身地マップを作る〜

  • このエントリーをはてなブックマークに追加
  • Pocket

※この記事は「将棋 Advent Calendar 2016 – Adventar」の16日目です。

前回は棋士の出身地から都道府県別のグラフを作ってみましたが、今度は出身地のデータを利用して棋士を地図上にマッピングしてみようと思います!

棋士出身地マップ

最終的に出来上がったページはこちら。

棋士出身地マップ

棋士出身地マップ

マーカーをクリックすると棋士データベースから取得した棋士名、出身地、画像がポップアップで開くようになってます。

それにしても中座真七段ってすごい所からプロ入りを果たした方なんですね・・・、奨励会時代どんなに苦労されたことでしょう。

中座真七段

この地図何となくいじってるだけで結構楽しいので、どうぞお試しください。

出身地マップの作り方

地図の作り方をざっと流れで説明してみます。

地図は OpenStreetMap、地図上にマーカーを追加するのは Leaflet という JavaScript ライブラリを使いました。この組み合わせ、この程度のことがすごく簡単に作れてしまうのでとてもいい感じ。

以前の記事で作った全棋士データが入った kishi_all.json を元に、出身地から緯度・経度を取得したデータを追加して新たなデータ(map.json)を作ります。

そのデータを作るために組んだスクリプトはこちら。

スクリプト内の緯度・経度の取得には、こちらの Google Maps Geocoding API を使いました。

後は作られた json をマップページから読み込んで、Leaflet の機能でマーカー追加していけば出来上がりです。ページのソースはこんな感じです。

いやーこういう動きがあるものを作るのは楽しいですね。次回は違うものを作る予定でしたが、地図ネタでまた何か考えてみようかな・・・。

ad

この記事が気に入ったらシェアしてもらえると嬉しいです!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • follow us in feedly
  • RSS

  関連記事

電王戦タッグマッチ
電王戦タッグマッチ 2014 FinalRound 観に行ってきました

10月12日に開かれた「電王戦タッグマッチ2014 FinalRound」の観覧 …

6秒でわかる将棋
将棋の結果があっという間に確認できる「6秒で分かる将棋」Twitterアカウントが面白い

Twitter のタイムラインで目に入ってきた将棋アカウントが何とも面白いのでご …

桜
桜の開花予想が簡単にできる「600度の法則」とは!?

最近ぐっと暖かい日が増えてきて、いよいよ春間近だなあと実感する今日この頃です。 …

電王戦リベンジマッチ
大晦日に行われた「電王戦リベンジマッチ 森下卓九段 vs ツツカナ」の雑感

大晦日に行われた「電王戦リベンジマッチ 森下卓九段 vs ツツカナ」。すっかり時 …

防犯ブザーを鳴らす小学生
入学・入園の必須アイテム、子供向けの防犯ブザーってどんな商品が人気なの?

新学期を迎えるにあたって、うちの息子の学校から支給された防犯ブザーが壊れて鳴らな …

子ども
ドラゴンと少年と親と子どもたち

子どもたち一緒にいられる時間ってとても貴重なんだなあ、と改めて感じたことを書いて …

和凧
前橋の「上州空っ風凧揚げ大会」に行ってきました

2月15日、前橋で開かれた「第23回上州空っ風凧揚げ大会」に子どもたちと行ってき …

Gunma.web
Gunma.web #14 に参加してきました

群馬の Web 系勉強会の草分け的存在な Gunma.web、前々から参加したい …

チームラボアイランド 学ぶ!未来の遊園地
スズラン高崎店の「チームラボアイランド 学ぶ!未来の遊園地」に行ってきました

高崎のスズラン百貨店で夏休みイベントとして開催されている「チームラボアイランド …

人狼
第4回の人狼やってみよう会に参加してきました

※写真は、参加者のホリウチさんから頂いた木をカット加工した狼です。 4月17日に …