2018年01月29日

WikiLayersをリリースしました

Wikipediaを地図で見るアプリWikiLayersを公開しました。

WikiLayers

cieloazul310.github.io

WikiLayersとは

WikiLayers

WikiLayers（ウィキレイヤーズ）はWikipediaから座標を取得し地図で表示するアプリケーションです。

遊び方

検索フォームに表示したい記事のタイトル、またはURLを入れて検索（「水戸城」「 https://ja.wikipedia.org/wiki/偕楽園」など）
記事の座標を取得したら「地図に追加」を押す
「地図」を見る

検索例

Wikipediaの記事に座標がついているものであれば取得可能です。（座標があるのに取得できないものもあるので、どういうカラクリなのか今後調べたいです）

都市・地名: 水戸市、小名浜、ラスベガス、ポンペイなど
史跡・名所: 水戸城、偕楽園、法隆寺、コロッセウムなど
建築・土木: 東京タワー、トキワ荘、猿橋、サヴォア邸など
山岳・地形: 富士山、室戸岬、ヌル島、カイバル峠など
スタジアム: ケーズデンキスタジアム水戸、日立柏サッカー場、アザディ・スタジアムなど
歴史上の事件: 本能寺の変、池田屋事件、ワールシュタットの戦い、ウッドストック・フェスティバルなど

その他機能

URLによる検索では多国語に対応しています。
記事ページで選択した記事の本文を見ることができます。
8種類の背景地図が選べます。
GPSを使った現在地の表示ができます。
スマートフォンでWikiLayersをホーム画面に追加すると、全画面でWikiLayersを起動できます。
ローカルストレージに情報が保存されるので、アプリを離れても状態は維持されます。
設定ページで取得したアイテムからGeoJSONファイルを出力することができます。

きっかけ

Wikipediaには記事上の座標から他の地図サービスにリンクする GeoHack という機能があります。これはよく使っていて、例えば大河ドラマを見ながらお城の情報をWikipediaで見て、 GeoHack で地理院地図に飛んで位置や地形を確認する、ということをよくやっています。

地理院地図には色別標高図と傾斜量図というレイヤがあり、これを合成することでカシミール3Dのような綺麗な地形地図をWEB上で閲覧することができます。

色別標高図と傾斜量図の合成で表示した関東平野

http://maps.gsi.go.jp/#8/35.880149/139.836731/&ls=std%7Crelief%2C0.7%7Cslopemap&blend=11&disp=011&lcd=slopemap&vs=c0j0l0u0t0z0r0f0

ただし、この方法だと複数の箇所を調べたいとき、その度にWikipediaを検索する→GeoHackで地理院地図に飛ぶ→レイヤを調整する、という一連の作業が必要になるので非常に面倒です。

Wikipediaの座標をアイコンで複数表示できる地図があればいいなと思っていたので、ちょうど勉強中の React や Redux を使って、勉強がてら試しに作ってみました。

技術

create-react-app でシングル・ページ・アプリケーション(SPA)やプログレッシブ・ウェブ・アプリ(PWA)のつもりで作ってみました。

React , Redux , Material-UI , OpenLayers を中心として動いています。
React+Redux関連のコードは基本的にはReduxのチュートリアルにあるTodo AppやReddit APIをベースに作っています。
他にもReact RouterやRedux Persistなど導入したい機能にしたがって色々使ってみました。使用ライブラリの詳細はGitHubリポジトリの package.json を参照してください。