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」群馬大会に行ってきました

8月17日にイオンモール太田で開かれた、コロツアー2014群馬大会に行ってきまし …

妖怪ウォッチ
妖怪ウォッチの「ようかい体操第一」4番の歌詞がまさかの内容で子ども大喜びだった件

ようかい体操第一 ついこないだまでオレカバトルに大はまりしてたと思いきや、今は妖 …

電王戦FINAL
将棋電王戦FINAL、AWAKE巨瀬さん衝撃の投了で阿久津八段が勝利した第5局の感想。

将棋の電王戦FINAL第5局 阿久津主税八段 vs AWAKE の対局は、21手 …

ピザ
ランチパスポート3店目。高崎市「PIZZERIA BACI」のナポリランチに大満足!

ランチパスポートを使ったお得なワンコインランチ、3店目は高崎市内の慈光通りにある …

人狼
アワアワ感が楽しかった!二回目の人狼ゲームイベントに参加してきました。

さる2月7日、第2回目の「人狼やってみよう会」を開催し、自分も参加してきました。 …

アドベントカレンダー
今年は2つのアドベントカレンダーに参加してみます

今年もいよいよ12月を残すばかりという季節になりました。 ブログをやっていて12 …

eyecatch
今度はD3.jsで2016夏の甲子園出場校選手の出身都道府県を可視化してみました

先日、Google Developers の Sankey Diagram ライ …

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

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

棋士データベース
棋士データベースで遊ぶ(1)〜棋士データをスクレイピング〜

※この記事は「将棋 Advent Calendar 2016 – A …

ぐんま秋祭り将棋大会
初めて参加したリアル将棋大会を振り返って(「第二回ぐんま秋祭り将棋大会」にて)

※この記事は「将棋 Advent Calendar 2016 – A …