🛤️

駅すぱあと路線図JavaScriptライブラリrosen.jsを使って駅名検索・地図にマーカーを表示する

2025/01/28に公開

本記事はヴァル研究所の支援として作成された記事です

駅すぱあとは乗り換え案内サービスとして有名ですが、駅すぱあとの路線図をWebページに埋め込むことができるのを知っているでしょうか。駅すぱあとの路線図をWebページに埋め込むことで、Webサイトへの訪問者が目的地までの経路を探しやすくなります。日本の大都市圏では電車での移動が多いので、路線図を中心とした地図は便利です。

そんな地図埋め込みを手軽に実現してくれるライブラリがrosen.jsです。これは駅すぱあと公式のライブラリであり、地図と駅・路線情報などを組み合わせてさまざまな可視化を行えます。

本記事では、rosen.jsを使って駅名を検索し、その駅を地図上にマーカーで表示する方法を紹介します。

今回のコードについて

今回のコードはrosenjs-demo/search at main · 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>  

下準備

そして、地図を描画するDOMを用意します。

<div id="map"></div>  

map に対するスタイル設定を行います。これはサイトによって異なるでしょう。

map {  
	width: 100%;  
	height: 100%;  
}  

注意点

rosen.jsはLeaflet.jsを利用しています。Leaflet.jsはオープンソースの地図描画ライブラリになります(ライセンスはBSD-2-Clause licenseです)。

rosen.jsの使い方

初期化

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

APIキーは「駅すぱあと API」の有償契約のほか、フリープランお申し込みフォームからキーを申請することで利用を開始することができます。(フリープランでは、路線図は「100セッションまで/日」使えます。)

なお、手軽にブラウザで駅すぱあと路線図を試してみたい場合、「駅すぱあと路線図Playground」というAPIキーや開発環境が不要なサービスも用意されています。

const options = {
  apiKey: API_KEY,  // APIキーは別途設定して使用する
};
// Rosenクラスのインスタンスを作成。地図の要素にAPIキーを使って表示
const rosen = new Rosen("map", options);

実装例

今回の例を実現する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>
			<select name="stations">
				<option>検索を行ってください</option>
			</select>
		</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キーは別途設定して使用する
  });
});

駅名検索

駅名の検索は rosen.searchStations というメソッドで行います。ボタンをクリックした際のイベントで、検索を実行します。そして、検索結果をセレクトボックスに表示します。

// ボタンがクリックされた時に実行されるイベントリスナー
document.querySelector('button').addEventListener('click', async (e) => {
  // ページの再読み込みを防ぐ
  e.preventDefault();

  // ユーザーが入力した駅名を取得
  const stationName = document.querySelector('[name="q"]').value;
  // 駅名を検索
  const res = await rosen.searchStations({
    stationName,
    stationNameMatchType: "partial", // 部分一致で検索
  });
  // 検索結果をセレクトボックスに表示
  document.querySelector('[name="stations"]').innerHTML = res.map(s => `
    <option value="${s.code}">${s.name}</option>
  `).join('');
});

なお、検索結果は以下のようなオブジェクトで返ってきます(途中途中、省略しています)。

[
	{
		"code": 23114,
		"name": "金沢八景(横浜シーサイドライン)",
		"yomi": "かなざわはっけい",
		"station_type": 1,
		"prefecture_code": 14,
		"latitude": 35.33153861111112,
		"longitude": 139.62054055555555,
		"parent_station_code": 23113,
		"children_station_codes": [],
		"station_rects": {
			"10": {
				"symbol_rect": {
					"type": "Polygon",
					"coordinates": [
						[
							[
								467.028564453,
								415.251495361
							],
              ...
						]
					]
				}
			},
      ...
		},
		"available_zooms": [
			10,
      ...
			19
		],
		"max_zoom": 19,
		"min_zoom": 10,
		"lines": [
			{
				"code": 491,
				"name": "横浜シーサイドライン",
				"sort": 230,
				"station_number": "14",
				"color": "f5a100"
			},
      ...
		],
		"_initHooksCalled": true
	},
]

マーカーを表示

セレクトボックスで駅を選択した際に、その駅にマーカーを表示します。rosen.setStationMarker でマーカーを立て、 rosen.setCenterByStationCode で地図をその駅を中心に表示します。

// 駅が選択された時に実行されるイベントリスナー
document.querySelector('[name="stations"]').addEventListener('change', async (e) => {
  const stationCode = e.target.value;
  // 駅にマーカーを表示
  rosen.setStationMarker(stationCode);
  // 駅を中心に地図を表示
  rosen.setCenterByStationCode(stationCode);
});

他の機能

rosen.jsには他にもたくさんの機能があります。

  • ポップアップ表示する
  • 路線をハイライト表示する
  • 最寄り駅を検索する
  • 日英表示を切り替える

単純に表示するだけでなく、路線図を使って業務などにも役立てられるでしょう。

まとめ

今回は駅すぱあと路線図のJavaScriptライブラリであるrosen.jsを紹介しました。rosen.jsを使えば、駅を検索したり、駅同士を線で結ぶことができます。

ブラウザで簡単に使えますので、Webサービスや業務システムなどさまざまな使い方ができそうです。

全国路線図|駅すぱあと for web

Discussion