本記事はヴァル研究所の支援として作成された記事です
駅すぱあとは乗り換え案内サービスとして有名ですが、駅すぱあとの路線図をWebページに埋め込むことができるのを知っているでしょうか。駅すぱあとの路線図をWebページに埋め込むことで、Webサイトへの訪問者が目的地までの経路を探しやすくなります。日本の大都市圏では電車での移動が多いので、路線図を中心とした地図は便利です。
そんな地図埋め込みを手軽に実現してくれるライブラリがrosen.jsです。これは駅すぱあと公式のライブラリであり、地図と駅・路線情報などを組み合わせてさまざまな可視化を行えます。
本記事では、rosen.jsを使って路線図のハイライトを描く方法を紹介します。
今回のコードについて
今回のコードはEkispertAPIMania/rosenjs-demoにアップロードしてあります。実装時の参考にしてください。
rosen.jsのインストール
rosen.jsは以下のHTMLタグでインストールします。
<link rel="stylesheet" href="https://rmap.ekispert.jp/production/rosen.css" />
<script src="https://rmap.ekispert.jp/production/rosen.js"></script>
注意点
rosen.jsはLeafletを利用しています。Leaflet.jsはオープンソースの地図描画ライブラリになります（ライセンスはBSD-2-Clause licenseです）。
下準備
そして、地図を描画するDOMを用意します。
<div id="map"></div>
#map に対するスタイル設定を行います。これはサイトによって異なるでしょう。
#map {
width: 100%;
height: 100%;
}
rosen.jsの使い方
初期化
まず、rosen.jsを初期化します。APIキーが必要です。
APIキーは「駅すぱあと API」の有償契約のほか、フリープランお申し込みフォームからキーを申請することで利用を開始することができます。（フリープランでは、路線図は「100セッションまで/日」使えます。）
なお、手軽にブラウザで駅すぱあと路線図を含む「駅すぱあと API」を試してみたい場合、「駅すぱあと Playground」というAPIキーや開発環境が不要なサービスも提供されています。
const rosen = new Rosen("map", {
apiKey: "YOUR_API_KEY", // アクセスキー
});
路線図を検索
最初に路線図を検索します。路線図は searchLinesByName メソッドで検索します。検索は日本語でできます。
// 検索キーワード（HTMLフォームから取得）
const query = document.querySelector('[name="q"]').value;
const lines = await rosen.searchLinesByName(query);
結果がない（該当する路線がない）場合は、lines は空の配列になります。
if (lines.length === 0) {
alert('該当する路線がありません');
return;
}
路線図のハイライト
検索結果にある最初の路線図をハイライトします。
const { code } = lines[0];
rosen.highlightLine(code);
スタイルの変更
ハイライトする色は、デフォルトでは各路線図に設定されている色になります。2つ目の引数で、これを変更できます。
rosen.highlightLine(code, {
color: '#c73896',
opacity: 0.5,
weight: 15
});
```
### 路線全体の表示
路線全体を地図に表示する際には、路線の駅を一覧で取得し、その駅コードを `fitBoundsByStationCodes` に適用します。
```javascript
// 路線の駅を取得
const stations = await rosen.searchStations({
lineCode: code,
});
// 路線全体を表示
rosen.fitBoundsByStationCodes(stations.map(s => s.code));
実装例
今回の例を実現するHTMLコードは以下の通りです。路線を検索する入力欄を用意しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>rosen.js デモ（路線図ハイライト）</title>
<link rel="stylesheet" href="https://rmap.ekispert.jp/production/rosen.css" />
<script src="https://rmap.ekispert.jp/production/rosen.js"></script>
<style>
#map {
width: 100%;
height: 600px;
}
</style>
<script>
// 駅すぱあと路線図のAPIキー
window.API_KEY = 'YOUR_API_KEY';
</script>
</head>
<body>
<div>
<input type="text" name="q" />
<button>検索</button>
</div>
<div id="map"></div>
<script src="app.js"></script>
</body>
</html>
そして、JavaScriptファイル app.js には以下のコードを記述します。
// ページが完全に読み込まれた後に実行されるイベントリスナー
document.addEventListener('DOMContentLoaded', () => {
// Rosenクラスのインスタンスを作成。地図の要素にAPIキーを使って表示
const rosen = new Rosen("map", {
apiKey: API_KEY, // APIキーは別途設定して使用する
});
// ボタンがクリックされた時に実行されるイベントリスナー
document.querySelector('button').addEventListener('click', async (e) => {
// ページの再読み込みを防ぐ
e.preventDefault();
// ユーザーが入力した路線名を取得
const query = document.querySelector('[name="q"]').value;
// 入力された路線名で路線を検索（非同期処理）
const lines = await rosen.searchLinesByName(query);
// 該当する路線が見つからなかった場合、アラートを表示して処理を終了
if (lines.length === 0) {
alert('該当する路線がありません');
return;
}
// 検索結果の最初の路線のコードを取得
const { code } = lines[0];
// 取得した路線を地図上でハイライト表示
rosen.highlightLine(code);
// ハイライトした路線の駅を取得（非同期処理）
const stations = await rosen.searchStations({
lineCode: code, // 路線コードを使って駅情報を取得
});
// 駅のコードを使って地図の表示範囲を自動的に調整
rosen.fitBoundsByStationCodes(stations.map(s => s.code));
});
});
他の機能
rosen.jsには他にもたくさんの機能があります。
- マーカーを立てる
- ポップアップ表示する
- 複数の駅を線で結ぶ
- 最寄り駅を検索する
単純に表示するだけでなく、路線図を使って業務などにも役立てられるでしょう。
まとめ
今回は駅すぱあと路線図のJavaScriptライブラリであるrosen.jsを紹介しました。rosen.jsを使えば、簡単に地図と路線図を組み合わせた表示が実現できます。
ブラウザで簡単に使えますので、Webサービスや業務システムなどさまざまな使い方ができそうです。
Discussion