🛤️
駅すぱあと路線図JavaScriptライブラリrosen.jsを使って大回り乗車を描画する

アツシ@MOONGIFT
2024/12/12に公開
本記事はヴァル研究所の支援として作成された記事です
駅すぱあとは乗り換え案内サービスとして有名ですが、駅すぱあとの路線図をWebページに埋め込むことができるのを知っているでしょうか。駅すぱあとの路線図をWebページに埋め込むことで、Webサイトへの訪問者が目的地までの経路を探しやすくなります。日本の大都市圏では電車での移動が多いので、路線図を中心とした地図は便利です。
そんな地図埋め込みを手軽に実現してくれるライブラリがrosen.jsです。これは駅すぱあと公式のライブラリであり、地図と駅・路線情報などを組み合わせてさまざまな可視化を行えます。
本記事では、rosen.jsを使って大回り乗車を地図上に表示してみました。

 今回のコードについて今回のコードはrosenjs-demo/line at main · EkispertAPIMania/rosenjs-demoにアップロードしてあります。実装時の参考にしてください。

 大回り乗車とは？大回り乗車って何？200円でおつりが来る東京近郊電車旅 | テンツキ旅行｜添乗員付きツアーの専門窓口によれば、以下のように説明されています。
「大回り乗車」とは「大都市近郊区間内のみをご利用になる場合の特例」と呼ばれるもので、「大都市近郊区間内のみを普通乗車券または回数乗車券でご利用になる場合は、実際にご乗車になる経路にかかわらず、最も安くなる経路で計算した運賃で乗車することができる」というものです。
簡単に言えば、遠回りしても安い運賃で電車に乗れる仕組みです。JR東日本の公式サイトでも、この仕組みについて案内があります。

 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>

 下準備そして、地図を描画するDOMを用意します。
<div id="map"></div>
#map に対するスタイル設定を行います。これはサイトによって異なるでしょう。
#map {
	width: 100%;
	height: 100%;
}

 駅名の入力欄駅名を入力する欄をテキストエリアで用意します。
<!-- サンプルの大回り乗車 -->
<textarea id="stations" rows="10">東京
茅ケ崎
八王子
武蔵浦和
新宿
神田(東京都)
</textarea>
入力してあるのは、下記のコースです。

 注意点rosen.jsはLeaflet.jsを利用しています。Leaflet.jsはオープンソースの地図描画ライブラリになります（ライセンスはBSD-2-Clause licenseです）。
今回は駅名検索結果を1件のみ対象としています。この場合、「橋本」のようにさまざまな場所にある駅名だと、思っていた場所と異なる結果が返ってくる可能性があります。「橋本(神奈川県)」のように都道府県名が必要です。また、「茅ヶ崎」ではなく「茅ケ崎」と指定する必要がありました。
適切な結果が返ってくる名前の指定方法は、「駅すぱあと for web」を使うと分かりやすいです。

 rosen.jsの使い方
 初期化まず、rosen.jsを初期化します。APIキーが必要です。

APIキーは「駅すぱあと API」の有償契約のほか、フリープランお申し込みフォームからキーを申請することで利用を開始することができます。（フリープランでは、路線図は「100セッションまで/日」使えます。）
なお、手軽にブラウザで駅すぱあと路線図を試してみたい場合、「駅すぱあと路線図Playground」というAPIキーや開発環境が不要なサービスも用意されています。
const rosen = new Rosen("map", {            
	apiKey: "YOUR_API_KEY",    // アクセスキー
});

 駅コードを取得最初に駅コードを取得します。駅コードは rosen.searchStationsByName メソッドで取得できます。
// 入力された駅名の一覧を取得
const stations = document.querySelector('#stations').value.split('\n');
const res = await Promise.all(stations
	// 駅名を検索（stationNameMatchTypeはマッチ方法の指定。limitは検索結果件数）
	.map(station => rosen.searchStationsByName(station, {
		stationNameMatchType: 'forward', limit: 1
	})
));
// 駅情報からコードを取得
const codes = res.map(r => r[0].code);

 折れ線の表示駅同士を結ぶ折れ線を表示するには、rosen.addPolyline メソッドを使います。
// 取得した駅を結ぶ折れ線を地図上でハイライト表示
rosen.addPolyline(codes, {color: "#0000ff", weight: 3, opacity: 0.7});

 路線全体の表示折れ線全体を地図に表示する際には、駅コード一覧を fitBoundsByStationCodes に適用します。
// 駅のコードを使って地図の表示範囲を自動的に調整
rosen.fitBoundsByStationCodes(codes);

 実装例今回の例を実現する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>
			<!-- サンプルの大回り乗車 -->
			<textarea id="stations" rows="10">東京
茅ケ崎
八王子
武蔵浦和
新宿
神田(東京都)
</textarea>
			<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 stations = document.querySelector('#stations').value.split('\n');
    const res = await Promise.all(stations
      // 駅名を検索
      .map(station => rosen.searchStationsByName(station, {
        stationNameMatchType: 'forward', limit: 1
      })
    ));
    // 駅情報からコードを取得
    const codes = res.map(r => r[0].code);
    // 取得した駅を結ぶ折れ線を地図上でハイライト表示
    rosen.addPolyline(codes, {color: "#0000ff", weight: 3, opacity: 0.7});

    // 駅のコードを使って地図の表示範囲を自動的に調整
    rosen.fitBoundsByStationCodes(codes);
  });
});
描画後、拡大もできます。

 他の機能rosen.jsには他にもたくさんの機能があります。
マーカーを立てる
ポップアップ表示する
路線をハイライト表示する
最寄り駅を検索する
単純に表示するだけでなく、路線図を使って業務などにも役立てられるでしょう。

 まとめ今回は駅すぱあと路線図のJavaScriptライブラリであるrosen.jsを紹介しました。rosen.jsを使えば、駅を検索したり、駅同士を線で結ぶことができます。
ブラウザで簡単に使えますので、Webサービスや業務システムなどさまざまな使い方ができそうです。
全国路線図|駅すぱあと for web