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

  関連記事

交差点
転職によって人の繋がりを広げられると感じたこと

私事ですが、去る4月をもちまして5年余り勤めた会社を退職し、この5月からまた新し …

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

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

将棋
将棋ウォーズの対局履歴をスクレイピングしてURL保存するツールを作りました

将棋ウォーズの対局履歴ページは、悔しい負け方をした対局の一人感想戦をしたり、棋譜 …

アイキャッチ
客先常駐を辞めて転職する前に学んでおきたい5つのこと

こんな記事がはてブで話題になっていましたね。 IT業界で客先常駐という働き方はも …

前橋
前橋市で大雪災害等の基本的な情報を収集するためのサイトまとめ

2週連続の記録的大雪となった群馬県。私が住む前橋も観測史上最大の73cmという積 …

電王戦FINAL
11/26に開かれた将棋電王戦FINAL記者発表会の内容まとめ

11/26に将棋電王戦FINAL記者発表会が開かれました。 来春に行われる電王戦 …

徒競走
いざ本番!運動会に向けてうちの子が今年取り組んだかけっこ対策について

すっかり季節も秋めいて、あちこちで運動会が開かれるシーズンですね。 うちの長男は …

情報処理技術者試験
2013年春・情報処理技術者試験プロジェクトマネージャ試験のふりかえり

先のエントリ(情報処理試験当日に力を発揮するための地味だけど役に立つかもしれない …

俺の四川
ランチパスポート2店目。高崎市「俺の四川」の麻婆豆腐セット

ランチパスポートを使ったお得なワンコインランチ、2店目は高崎市内中央銀座通りにあ …

前橋こども図書館
私が前橋こども図書館を愛してやまない9つの理由

地元前橋にある「前橋こども図書館」が大好きです。 前橋こども図書館 もともと書店 …