本記事はヴァル研究所の支援として作成された記事です
駅すぱあとは乗り換え案内サービスとして有名ですが、駅すぱあとの路線図をWebページに埋め込むことができるのを知っているでしょうか。駅すぱあとの路線図をWebページに埋め込むことで、Webサイトへの訪問者が目的地までの経路を探しやすくなります。日本の大都市圏では電車での移動が多いので、路線図を中心とした地図は便利です。
そんな地図埋め込みを手軽に実現してくれるライブラリがrosen.jsです。これは駅すぱあと公式のライブラリであり、地図と駅・路線情報などを組み合わせてさまざまな可視化を行えます。
本記事では、rosen.jsを使って地図を日英表示してみました。外国人向けに路線図を提供する際には、英語対応が必須でしょう。
今回のコードについて
今回のコードはrosenjs-demo/english 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キーや開発環境が不要なサービスも用意されています。
初期化時に、英語の場合は apiSetting と tileSetting を指定します。 uiLanguage はサイドメニューの言語指定に利用しますので、サイドメニューを表示しない場合は指定不要です。
// URLのハッシュ（#）によって表示言語を切り替える
const uiLanguage = location.hash === '#en' ? 'en' : 'ja';
const options = {
apiKey: API_KEY, // APIキーは別途設定して使用する
uiLanguage,
sideMenuControl: true,
};
if (uiLanguage === 'en') {
options.apiSetting = 'https_en';
options.tileSetting = 'https_en';
};
// Rosenクラスのインスタンスを作成。地図の要素にAPIキーを使って表示
const rosen = new Rosen("map", options);
これで、 https://example.com/#en とすると英語版が、 https://example.com/ とすれば日本語版が表示されます。
実装例
今回の例を実現する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 id="map"></div>
<script src="app.js"></script>
</body>
</html>
そして、JavaScriptファイル app.js には以下のコードを記述します。
// ページが完全に読み込まれた後に実行されるイベントリスナー
document.addEventListener('DOMContentLoaded', () => {
const uiLanguage = location.hash === '#en' ? 'en' : 'ja';
const options = {
apiKey: API_KEY, // APIキーは別途設定して使用する
uiLanguage,
sideMenuControl: true,
};
if (uiLanguage === 'en') {
options.apiSetting = 'https_en';
options.tileSetting = 'https_en';
};
// Rosenクラスのインスタンスを作成。地図の要素にAPIキーを使って表示
const rosen = new Rosen("map", options);
});
他の機能
rosen.jsには他にもたくさんの機能があります。
- マーカーを立てる
- ポップアップ表示する
- 路線をハイライト表示する
- 最寄り駅を検索する
単純に表示するだけでなく、路線図を使って業務などにも役立てられるでしょう。
まとめ
今回は駅すぱあと路線図のJavaScriptライブラリであるrosen.jsを紹介しました。rosen.jsを使えば、駅を検索したり、駅同士を線で結ぶことができます。
ブラウザで簡単に使えますので、Webサービスや業務システムなどさまざまな使い方ができそうです。
Discussion