駅すぱあと路線図JavaScriptライブラリrosen.jsを使って駅名検索・地図にマーカーを表示する
本記事はヴァル研究所の支援として作成された記事です
駅すぱあとは乗り換え案内サービスとして有名ですが、駅すぱあとの路線図を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サービスや業務システムなどさまざまな使い方ができそうです。
Discussion