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

  関連記事

ソトワーキング
あまりに天気が良かったのでソトワーキングしてきました。開放的で気持ちいい!

もう暦は10月になりましたが、最高気温は29度まで上がり空は清々しい秋晴れ、とい …

ブラスバンド
【#ブラバン甲子園】高校野球観戦のお供にブラバン応援ツイート中継「ブラバンde甲子園」がマニアックで面白い!

日々熱戦が繰り広げられている夏の甲子園、きっとみなさんも地元校や贔屓校の応援で盛 …

将棋の駒
チープな普及用の将棋盤・駒が欲しい

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

Takasaki free Wi-Fi
高崎駅で無料無線LAN「Takasaki Free Wi-Fi」が始まったので試してみた

先日、高崎市と NTT 東日本が組んで「Takasaki Free Wi-Fi」 …

電王戦
コンピュータ将棋の歴史を紐解くのに「ルポ 電王戦」はおすすめの一冊

話題の新書「ルポ 電王戦―人間 vs. コンピュータの真実」を読みました。 タイ …

wordpress-logo-stacked-rgb
WordPressもくもく勉強会@群馬 #4 を開催しました

WordPressもくもく勉強会@群馬 #4 : ATND 自分の中で毎月最終木 …

名刺
前川企画印刷さんから頼んでいたブロガー名刺が届きました

以前、前川企画印刷さんに依頼していたブロガー名刺ができあがりました。 前川企画印 …

パトカー
子供向けの防犯ブザー売れ筋商品まとめ【2015年4月版】

4月になり小学校、幼稚園・保育園の新年度が始まりました。 新年度になると学校で必 …

妖怪ウォッチ2 真打
クリスマス商戦の真打ち登場か?3DS「妖怪ウォッチ2」の第3弾「妖怪ウォッチ2 真打」が12月13日発売に!

我が家の息子も絶賛ハマリ中の 3DS のゲーム「妖怪ウォッチ2」ですが、「元祖」 …

gopher
高崎で開かれたGo言語の勉強会「Takasaki.go#1」に参加してきました

群馬県内ではおそらく初めてと思われる Go 言語の勉強会「Takasaki.go …