GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ。

*

駅すぱあと路線図API Hacks! D3.jsを使ってSVGをオーバーレイする。

     - D3v4, leaflet.js, turf.js

はてなブックマーク - 駅すぱあと路線図API Hacks! D3.jsを使ってSVGをオーバーレイする。
Pocket

新しい地図サービスが始まったとき、誰もが気になるのは「この地図サービスでD3.jsは使えるのだろうか?」という点でしょう。心配ありません。駅すぱあと路線図でD3.jsは使えますよ!

日本全国シームレスな鉄道路線図API「駅すぱあと路線図」、ヴァル研究所が無償提供を開始

駅すぱあと路線図APIのアクセスキーを取得したので、さっそく遊んでみました。
とりあえず、D3を使うまでの解説を載せておきます。

※ exampleはフリープランを利用して作成しているため1日100セッションを越えると動作しなくなります。

ゲットスタート

駅すぱあと路線図APIは、汎用地図ライブラリのleaflet.jsを利用しているとのことなので、まずはベーシックなサンプルを作成してD3.jsを使うのに必要となるオブジェクトにアクセスできるか確認します。
開発用のドキュメントやサンプルコードは下記ページにて公開されています。
駅すぱあと路線図 – 駅すぱあとワールド

アクセスキーは、上記ページよりフリープランに申し込むことで取得できます。

example

駅スパート路線図Hacks.1

路線図が表示されているページで開発者ツールのコンソールを開き「L」を入力実行するとグローバルにleafletオブジェクトが読み込まれていることが確認できます。
また、mapオブジェクトはrosen._mapに保存されていることが解りました。
この二つのオブジェクトにアクセスできれば、leaflet.jsの機能やD3.jsをオーバーレイすることが問題なくできます。

座標取得

駅すぱあと路線図は、デフォルメされた日本地図上に路線が描画されています。そのためleaflet上で使用されている座標も一般的な緯度経度ではない可能性があります。
そこで、mapオブジェクトにクリックイベントを仕込み、クリックした場所の座標を取得し確認します。

example

駅スパート路線図Hacks.1

東京駅をクリックすると、[-0.378570556640625, 0.4677581787109375]という座標が取得できました。
とりあえず位置座標を取得できたので、次はD3.jsを使ってSVGをオーバーレイしてみます。

D3でサークルを載せる

上記コードで取得した座標を元に、D3.jsを使ってサークルを描画してみます。
leafletのlatLngToLayerPointメソッドを使うことで、位置座標から画面上の座標へと変換できるので、その値を用いてSVG上にサークルを描画します。

example

駅スパート路線図Hacks.3

Trufでバッファを生成する

さて、サークルを表示することはできましたが、あくまで単なる円なのでパン・ズームに連動しません。
そこでturf.jsを使って100mバッファのGeoJSONを生成しD3.jsを使って表示してみます。
駅すぱあと用に生成したカスタムプロジェクションをgeoPath関数にバインドすることで、GeoJSONをオーバーレイすることができます。

example

駅スパート路線図Hacks.4

GeoJSONエディタを作成する

GeoJSONをオーバーレイすることができたので、あとは駅すぱあと路線図に独自のGeoJSONを作成できれば、ほぼD3でやりたいことはできそうです。
そこで、駅すぱあと路線図用のGeoJSONを作成するために、leaflet.drawプラグインをつかってエディタを作成します。
これで、路線図上をトレースしてGeoJSONを作成できるようになります。

※ なお、地図をトレースするのはいろいろと問題があるかもしれません。怒られたり訴えられたり殴られたりしたら止めます。

example

駅スパート路線図Hacks.5

drawプラグインで生成されるGeoJSONはcoordinatesの中身がlonglat形式になっているので、latlong形式に変更して出力しています。
とりあえず、群馬県のポリゴンを作成してみました。

D3を使ってGeojson表示

上記エディタで作成したGeoJSONをD3を使って路線図上にオーバーレイします。
基本的にはturf.jsで生成したGeoJSONを表示するのとかわりません。

example

駅スパート路線図Hacks.7

無事、地図上に群馬県のポリゴンが表示されました。

これで、D3.jsを使って路線図上にさまざまなビジュアライゼーションをオーバーレイできることが確認できました。

はてなブックマーク - 駅すぱあと路線図API Hacks! D3.jsを使ってSVGをオーバーレイする。
Pocket

 - D3v4, leaflet.js, turf.js

  関連記事

charlotte Maps
Charlotte(シャーロット)2話に出てきた地図のleaflet版作った。

地理院地図……お前、地理院地図じゃないか! というわけで、leaflet版作って …

道路上のマーカー
「ポケモンGOみたいなゲーム作って〜」と言われたときのために、巨人(Google)の力をかりて、道路上にランダムにマーカーを設置する。

そろそろ、世間では「ポケモンGOみたいの作ってー作ってー」という無茶振りと、それ …

Leaflet.jsで作成した地図上にお天気情報をオーバーレイする
Leaflet.jsで作成した地図上にお天気情報をオーバーレイする

以前、「Google Map上に雲と天気を表示する」という記事を書きましたが、残 …

leaflet and Google custom style
Leaflet.jsでGoogle Maps を表示する

「Leafletでグーグルマップって使えないんですか?」という質問が多かったので …

javascript Proxy Object
【D3.js】proxyを使ってデータセットが変更されたらチャートを再描画する。

D3.jsを使ってデータビジュアライゼーションを作成するときにありがちな処理とし …

turf Aggregation example
ブラウザおよびnode.jsのための高度な地理空間データ分析ライブラリ「turf.js」

選択した範囲内の家賃相場を求めるとかいろんなことに使えます。 example T …

turf.js along
[Turf.js]ラインに沿って任意の距離を移動する

example スライダーで選択した距離だけ各ライン上に沿ってマーカーが移動しま …

leaflet css filter
[leaflet]地図タイル画像にCSSフィルターを適用する

example こちらの記事では、重ねたレイヤーをCSSクリップを使って表示領域 …

ベクトルタイルマップ
[D3+Leaflet]国土地理院さん渾身のベクトルタイルで遊んでみた。

ベクトルタイルの提供実験について|国土地理院 FOSS4G 2014 Hokka …

turf hexgrid
[Turf.js]ヘックス(六角形)で統計情報を地図上に視覚化する

example 表示されている範囲内にヘックス(六角形)を敷き詰め、各セルに含ま …