本ドキュメントは、駅すぱあと路線図の JavaScript ライブラリ rosen.js について網羅的に記述したリファレンス・マニュアルです。 対象読者として、JavaScript について基本的な知識を持った開発者を想定しています。
rosen.jsの推奨環境は以下となります。
ブラウザ | 推奨バージョン |
---|---|
Firefox | バージョン61以降 |
Google Chrome | バージョン71以降 |
Microsoft Edge | バージョン17以降 |
Safari | バージョン11.1以降 |
※Internet Explorerは非推奨となりますのでご注意ください。
※TLS1.0/1.1の環境ではご利用いただけません。TLS1.2の環境でご利用ください。
以下に、本ドキュメントを読むために必要な基礎知識を記述します。
// 正しくない例:
var station_code = 22671;
var station = rosen.getStationByCode(station_code);
console.log(station); // stationに入っているオブジェクトは駅情報ではありません
// 正しい例:
var station_code = 22671;
rosen.getStationByCode(station_code).then(function (station) {
console.log(station); // stationに駅情報が入っています
});
本ドキュメントでメソッドの戻り値の欄に Promise object と書かれている場合は全て同様です。
Promiseについてより詳しくは、JavaScript Promiseの本やJavaScriptのPromiseオブジェクトについて調べた事などを参照してください。
options?
のように「?
」が付いている引数は省略可能です。
本 API の中心となるクラス - 路線図の表示と管理を行います。
メソッド名 | 説明 |
---|---|
Rosen( |
Rosenクラスのイニシャライザ。アクセスキーの認証を行い、路線図を表示します。id には路線図を表示する div タグの id を指定します。
|
オプション名 | 型 | デフォルト | 説明 |
---|---|---|---|
consoleViewControl |
Boolean
| false |
路線図左下のデバッグコンソールの表示(デフォルトは表示しない) |
sideMenuControl |
Boolean
| false |
路線図右上のサイドメニューの表示(デフォルトは表示しない) |
apiKey |
String
| null |
APIサーバへアクセスするためのキー |
retina |
Boolean
| true |
Retinaディスプレイの場合、高解像度のタイル画像を表示する(デフォルトは有効)。有効にすると表示はきれいになりますが、処理が遅くなります。 |
bounds |
Array
| null |
スクロール可能な範囲 (例:[[2228, 6720, 14], [4379, 8471, 14]]) サンプル |
area |
String
| null |
スクロール可能なエリア名 指定可能な値
サンプル
|
center |
Array
| null |
初期表示の中心座標(例:[60457, 49448, 17]) |
zoom |
Number
| 17 |
初期表示のズームレベル(10~18を指定可能) |
minZoom |
Number
| 10 |
最小のズームレベル(10〜18を指定可能) |
maxZoom |
Number
| 18 |
最大のズームレベル(10〜18を指定可能) |
maxBoundsViscosity |
Number
| 1.0 |
1.0 の場合はbounds で指定した表示範囲外へスクロールできなくなります。0.0 の場合はスクロールは可能ですが引き戻される挙動になります。 |
centerStation |
Number
| null |
初期表示の中央に表示する駅コード(例:22671)。center よりこちらが優先します。 |
zoomControl |
Boolean
| true |
路線図左上のズームコントロールの表示 |
tileSetting |
String
| "https" |
タイルサーバの言語・SSL設定 指定可能な値
|
apiSetting |
String
| "https" |
APIサーバの言語・SSL設定
指定可能な値
|
showAnnotationPopup |
Boolean
| false |
注釈のポップアップを表示(デフォルトは表示しない) |
showAnnotationPopupWithHighlight |
Boolean
| false |
注釈のポップアップを表示する際に駅間を強調する(デフォルトは強調しない) |
urlHash |
Boolean
| false |
URLに路線図の現在座標を表すハッシュ文字列(例:#17/61280/49640)を付与します。 |
uiLanguage |
String
| "ja" |
路線図のユーザインタフェースの言語を設定します。サイドメニューに影響します。 指定可能な値
|
メソッド名 | 戻り値 | 説明 |
---|---|---|
on( |
this |
指定イベントにリスナーをセットします。type (イベントタイプ)として指定可能な値
|
off( |
this |
指定イベントからリスナーを削除します。 サーバアクセスの可能性なし |
setStationMarker( |
Promise object |
指定した駅コードの駅にマーカーをセットします。 成功時コールバックの引数は L.Marker オブジェクトです。 |
unsetStationMarker( |
undefined |
指定した駅コードの駅のマーカーを削除します。 サーバアクセスの可能性なし |
setStationPopup( |
Promise object |
指定した駅コードの駅にポップアップをセットします。
zoom_to_station で true を指定するとポップアップの位置へ自動的に移動します。
成功時コールバックの引数は L.Marker オブジェクトです。
|
unsetStationPopup( |
undefined |
指定した駅コードの駅のポップアップを削除します。 サーバアクセスの可能性なし |
setSectionPopup( |
Promise object |
指定した駅間コードの駅間にポップアップをセットします。 成功時コールバックの引数は L.Marker オブジェクトです。 |
unsetSectionPopup( |
undefined |
指定した駅間コードの駅間のポップアップを削除します。 サーバアクセスの可能性なし |
highlightLine( |
Promise object |
指定した路線コードの路線を強調します。 成功時コールバックの引数は強調対象の Line オブジェクトです。 |
highlightLines( |
Promise object |
配列で指定した路線コードの路線を強調します。 成功時コールバックの引数は Line オブジェクトの配列です。 |
unhighlightLine( |
undefined |
指定した路線コードの路線の強調を削除します。 サーバアクセスの可能性なし |
addPolyline( |
Promise object |
複数の駅を結ぶ折れ線を描画します。station_codes には駅コードの配列を指定します。
成功時コールバックの引数は L.Polyline オブジェクトです。
|
removePolyline( |
undefined |
複数の駅を結ぶ折れ線を消去します。station_codes には駅コードの配列を指定します。
サーバアクセスの可能性なし |
fitBoundsByLineCode( |
undefined |
指定した路線コードの路線全体が画面に収まるように表示範囲・ズームを変更します。 |
fitBoundsByLineCodes( |
undefined |
指定した複数の路線コードの路線全体が画面に収まるようにします。 |
highlightSections( |
Promise object |
配列で指定した駅間コードの駅間を強調します。 成功時コールバックの引数は強調対象の Section オブジェクトです。 |
fitBoundsBySectionCodes( |
undefined |
配列で指定した駅間コードの駅間が画面に収まるようにします。 |
unhighlightSections( |
undefined |
指定した駅間コードの駅間の強調を削除します。 サーバアクセスの可能性なし |
fitBoundsByStationCodes( |
undefined |
配列で指定した駅コードの駅が画面に収まるように表示範囲・ズームを変更します。 |
setSideMenuStationSelectEventListener( |
undefined |
サイドメニューの駅検索で駅が選択されたときのコールバックを設定します。 コールバックの引数は Station オブジェクトです。 サーバアクセスの可能性なし |
setSideMenuLineSelectEventListener( |
undefined |
サイドメニューの路線検索で路線が選択されたときのコールバックを設定します。 コールバックの引数は Station オブジェクトです。 サーバアクセスの可能性なし |
clearStationMarkers() |
undefined |
全ての駅マーカーを削除します。 サーバアクセスの可能性なし |
clearStationPopups() |
undefined |
全ての駅ポップアップを削除します。 サーバアクセスの可能性なし |
clearSectionPopups() |
undefined |
全ての駅間ポップアップを削除します。 サーバアクセスの可能性なし |
clearHighlights() |
undefined |
全ての強調を解除します。 サーバアクセスの可能性なし |
clearAll() |
undefined |
全てのマーカー、ポップアップを削除し、強調を解除します。 サーバアクセスの可能性なし |
getStationByCode( |
Promise object |
駅コードから駅データを取得します。 成功時コールバックの引数は Station オブジェクトです。 |
getStationsByCode( |
Promise object |
複数の駅コードから駅データを取得します。 成功時コールバックの引数は Station オブジェクトの配列です。 |
getStationsByLineCode( |
Promise object |
路線コードから駅データを取得します。 成功時コールバックの引数は Station オブジェクトの配列です。 ソート順は路線上の順番です。 |
getVisibleStationCodes() |
Promise object |
表示画面内にある駅の駅コードを取得します。 成功時コールバックの引数は駅コードの配列です。 |
getLineByCode( |
Promise object |
路線コードから路線データを取得します。 成功時コールバックの引数は Line オブジェクトです。 |
getLinesByCode( |
Promise object |
複数の路線コードから路線データを取得します。 成功時コールバックの引数は Line オブジェクトの配列です。 |
getVisibleLineCodes() |
Promise object |
表示画面内にある路線の路線コードを取得します。 成功時コールバックの引数は路線コードの配列です。 |
getSectionsByCode( |
Promise object |
複数の駅間コードから駅間データを取得します。 成功時コールバックの引数は Section オブジェクトの配列です。 |
getSectionsByLineCode( |
Promise object |
路線コードを指定して駅間データを取得します。 成功時コールバックの引数は Section オブジェクトの配列です。 |
getSectionsByStations( |
Promise object |
駅コードを指定してその間にある駅間データを取得します。 成功時コールバックの引数は Section オブジェクトの配列です。 |
getVisibleSectionCodes() |
Promise object |
表示画面内にある駅間の駅間コードを取得します。 成功時コールバックの引数は駅間コードの配列です。 |
getStationsBySectionCode( |
Promise object |
駅間コードを指定して駅間の両側の駅を取得します。 成功時コールバックの引数は Station オブジェクトの配列です。 |
getSectionsByPosCode( |
Promise object |
路線コードと駅の駅間コードを指定してその間のすべての駅間を取得します。 成功時コールバックの引数は Section オブジェクトの配列です。 |
getCorporations() |
Promise object |
会社の一覧を取得します。 成功時コールバックの引数は取得したオブジェクト{code: corp_code, name: corp_name}の配列です。 |
getPrefectures() |
Promise object |
都道府県の一覧を取得します。 成功時コールバックの引数は取得したオブジェクト{code: pref_code, name: pref_name}の配列です。 |
getAnnotations() |
Promise object |
APIサーバから注釈のリストを取得します。 成功時コールバックの引数は Annotation オブジェクトの配列です。 |
showAnnotationPopup( |
Promise object |
注釈の駅間のポップアップを表示します。
highlight が true の場合は強調をします。
成功時コールバックの引数は Annotation オブジェクトの配列です。
|
hideAnnotationPopup() |
undefined |
注釈のポップアップを解除します。 サーバアクセスの可能性なし |
setView( |
this |
路線図の中心座標とズームレベルを設定します。 サーバアクセスの可能性なし |
setCenter( |
this |
路線図の中心座標を設定します。 サーバアクセスの可能性なし |
searchStationsByName( |
Promise object |
stationName に指定された駅名で駅を検索します。
|
searchStationsByYomi( |
Promise object |
stationName に指定された駅名の読み(ひらがな)で駅を検索します。
|
searchStationsByPrefectureCode( |
Promise object |
prefectureCode に指定された都道府県コードで駅を検索します。 prefectureCode として指定可能な値
|
searchStationsByLatLng( |
Promise object |
lat , lng で指定された緯度経度を中心に、range で指定された半径(メートル)内に存在する駅を検索します。
|
searchStations( |
Promise object |
条件を組み合わせて駅を検索します。 |
searchLinesByName( |
Promise object |
路線名で路線を検索します。 |
searchLinesByPrefectureCode( |
Promise object |
指定された都道府県を通過する路線を検索します。 |
searchLinesByCorporationCode( |
Promise object |
指定された会社によって運営される路線を検索します。 |
searchLinesByStationCode( |
Promise object |
指定駅に乗り入れる路線を検索します。 |
searchLines( |
Promise object |
条件を組み合わせて路線を検索します。 |
setCenterByStationCode( |
undefined |
stationCode に指定された駅コードで駅を検索し、検索結果の駅が路線図の中心にくるように路線図をスクロールします。
|
getVersion() |
Promise object |
本システムのバージョンを取得します。 |
getMapState() |
Object |
現在のズームレベルと中心座標を返します。戻り値の例:
{ zoom: zoom, center: [x, y, zoom] }サーバアクセスの可能性なし |
getNearestStations( |
Promise object |
引数がなしの場合、ブラウザから取得できる現在位置から最寄り駅を検索します。引数を指定した場合、与えた緯度経度から最寄り駅を検索します。 成功時コールバックの引数は Station オブジェクトと距離が入ったオブジェクトです。 |
setPopupAt( |
this |
路線図上の指定座標にポップアップを表示します。
center の例:[59097, 49598, 17]
サーバアクセスの可能性なし |
unsetPopupAt( |
this |
路線図上の指定されたポップアップを削除します。 サーバアクセスの可能性なし |
setMarkerAt( |
Promise |
路線図上の指定座標にマーカーを表示します。
center の例:[59097, 49598, 17]。
成功時コールバックの引数は生成されたマーカー(L.marker)です。
サーバアクセスの可能性なし |
unsetMarkerAt( |
this |
路線図上の指定されたマーカーを削除します。 サーバアクセスの可能性なし |
setZoom( |
this |
路線図のズームレベルを設定します。 サーバアクセスの可能性なし |
clearCache() |
undefined |
APIサーバから取得したデータのキャッシュをクリアします。 サーバアクセスの可能性なし |
showStationNumberMarkers( |
undefined |
指定した駅コードの駅を通る路線を強調して、 路線上の駅ナンバーを存在するもののみ全て表示します。 |
showStationNumber( |
undefined |
指定した駅コードの駅の駅ナンバーを表示します。
show_line_name が true の場合、路線名の表示も行います。
line_codes に路線コードの配列を指定した場合、その路線における駅ナンバーだけが表示されます。
|
hideStationNumberMarkers() |
undefined |
駅ナンバーの表示と強調を全てクリアします。 サーバアクセスの可能性なし |
メソッド名 | 戻り値 | 説明 |
---|---|---|
Rosen.ddToDMS( |
Object |
10進数から度分秒へ変換します。 サーバアクセスの可能性なし |
Rosen.getDMSLongitude( |
String |
10進数の経度の表記を東西込みのDMS表記へ変換します。 サーバアクセスの可能性なし |
Rosen.getDMSLatitude( |
String |
10進数の緯度の表記を南北込みのDMS表記へ変換します。 サーバアクセスの可能性なし |
Rosen.dmsToDD( |
Number |
度分秒から10進数へ変換します。 サーバアクセスの可能性なし |
Rosen.getLineCodeBySectionCode( |
Number |
与えられた駅間コードから路線コードを取得します。 サーバアクセスの可能性なし |
Property | Type | Description |
---|---|---|
stationCode
| ||
stationName
| ||
stationNameMatchType
| ||
stationNameYomi
| ||
lineCode
| ||
lineName
| ||
prefectureCode
| ||
prefectureName
| ||
corporationCode
| ||
limit
|
var params = {
include: {
lineName: '東武'
},
exclude: {
lineCode: 279 //東武東上線を除外
},
mask: {
prefectureCode: 13 //東京都のみに絞り込み
},
lineNameMatchType: "partial"
};
rosen.searchLines(params).then(function (lines) { /*...*/ });
Property | Type | Description |
---|---|---|
include
| ||
exclude
| ||
mask
| ||
lineNameMatchType
| ||
limit
|
Property | Type | Description |
---|---|---|
lineCode
| ||
lineName
| ||
prefectureCode
| ||
corporationCode
| ||
stationCode
|
Property | Type | Description |
---|---|---|
lineCode
| ||
corporationCode
|
Property | Type | Description |
---|---|---|
prefectureCode
| ||
corporationCode
| ||
stationCode
|
イベント | データ | 説明 |
---|---|---|
selectStation
| ||
selectLine
| ||
selectSection
| ||
selectStationOrLine
| ||
selectStationOrSection
|
オプション名 | 型 | デフォルト | 説明 |
---|---|---|---|
animate |
Boolean
| true |
路線図移動時とズーム時のアニメーション(デフォルトはアニメーションあり) |
オプション名 | 型 | デフォルト | 説明 |
---|---|---|---|
latitude |
Number
| 0 |
緯度 |
longitude |
Number
| 0 |
経度 |
range |
Number
| 1000 |
半径(メートル) |
limit |
Number
| 1000 |
検索数の上限 |
オプション名 | 型 | デフォルト | 説明 |
---|---|---|---|
stationNameMatchType |
String
| "forward" |
駅名検索のマッチング方法 指定可能な値
|
limit |
Number
| undefined |
検索数の上限 |
オプション名 | 型 | デフォルト | 説明 |
---|---|---|---|
lineNameMatchType |
String
| "partial" |
路線名検索のマッチング方法 指定可能な値
|
limit |
Number
| undefined |
検索数の上限 |
{type: "circle", radius: 100, color: "#0000ff", opacity: 0.3, className: "my_marker"}``
オプション名 | 型 | デフォルト | 説明 |
---|---|---|---|
icon |
L.Icon | L.DivIcon | Object
|
|
Leaflet.js の L.Icon オブジェクトをそのまま渡すことができます。type プロパティが指定されている場合は形状を指定するオプション値と解釈されます。 |
setCenterByStationCode
で路線図の中心を移動するときに指定できるオプションです。オプション名 | 型 | デフォルト | 説明 |
---|---|---|---|
animate |
Boolean
|
|
true の場合は可能であればアニメーションをしながら移動します。 |
オプション名 | 型 | デフォルト | 説明 |
---|---|---|---|
color |
String
| 路線固有の路線色 |
線の色(例:"#ff0000") |
weight |
Number
| 3 |
線の太さ(例:3) |
opacity |
Number
| 1.0 |
透明度(0.0〜1.0) |
駅を表すクラス。
Property | Type | Description |
---|---|---|
code
| ||
name
| ||
yomi
| ||
station_type
| ||
prefecture_code
| ||
latitude
| ||
longitude
| ||
parent_station_code
| ||
children_station_codes
| ||
lines
|
路線を表すクラス。(Station の子の場合のみ)と書かれているプロパティは、Station オブジェクトの子になっている場合のみ存在するプロパティです。 例えば station.lines[0].station_number は路線 lines[0] における駅ナンバーを表します。 同じ新宿駅であっても、山手線における駅ナンバーと都営新宿線における駅ナンバーは異なるためこのようになっています。
Property | Type | Description |
---|---|---|
name
| ||
code
| ||
color
| ||
station_number
| ||
sort
|
駅間を表すクラス。駅間とは、路線の上で隣り合う 2 駅の間の区間のことをいいます。
Property | Type | Description |
---|---|---|
code
| ||
color
|
注釈を表すクラス。主に災害等で不通になっている区間を表示するために使われます。
Property | Type | Description |
---|---|---|
highlight_sections
| ||
popup_section
| ||
suspension_reason
| ||
color
| ||
weight
| ||
line
| ||
start_station
| ||
end_station
|
ポップアップクラス(抽象クラスなのでインスタンス化することはできません)。
ポップアップとは対象オブジェクト(マーカーまたは駅間)に付随する吹き出しのことで、対象オブジェクトをクリックすると表示・非表示が切り替わります。
Leaflet.js の L.Popup を継承しています。
L.Popup については Leaflet.js のドキュメントの Popup を参考にしてください。
メソッド名 | 戻り値 | 説明 |
---|---|---|
setContent( |
this |
ポップアップ内に表示する HTML を設定します。 |
setAnchor( |
this |
ポップアップをクリックした際のリンクを設定します。 |
getAnchor() |
String |
ポップアップに設定されているリンクを取得します。 |
画像を表示できるポップアップクラス。
var popup = Rosen.imagePopup().setComment('東京駅', {commentPosition:'below'});
popup.setImageUrl(`URL of 東京駅`);
オプション名 | 型 | デフォルト | 説明 |
---|---|---|---|
commentPosition |
String
| "above" |
テキストの位置 指定可能な値
|
メソッド名 | 戻り値 | 説明 |
---|---|---|
getImageUrl() |
String |
ポップアップに設定されている画像のURLを取得します。 |
setImageUrl( |
this |
画像のURLを設定します。 |
getComment() |
String |
ポップアップに設定されているテキストを取得します。 |
setComment( |
this |
ポップアップ内に表示するテキストを設定します。 |
getCommentPosition() |
String |
テキストの位置を取得します("above" or "below")。 |
メソッド名 | 戻り値 | 説明 |
---|---|---|
setContent( |
this |
ポップアップ内に表示する HTML を設定します。 |
setAnchor( |
this |
ポップアップをクリックした際のリンクを設定します。 |
getAnchor() |
String |
ポップアップに設定されているリンクを取得します。 |
テキストを表示できるポップアップクラス。
var popup = Rosen.textPopup().setComment('東京駅').setAnchor(`URL of 東京駅`);
メソッド名 | 戻り値 | 説明 |
---|---|---|
getComment() |
String |
ポップアップに設定されているテキストを取得します。 |
setComment( |
this |
ポップアップ内に表示するテキストを設定します。 |
メソッド名 | 戻り値 | 説明 |
---|---|---|
setContent( |
this |
ポップアップ内に表示する HTML を設定します。 |
setAnchor( |
this |
ポップアップをクリックした際のリンクを設定します。 |
getAnchor() |
String |
ポップアップに設定されているリンクを取得します。 |
HTMLを表示できるポップアップクラス。
// HTML文字列をセットする方法
var popup = Rosen.htmlPopup().setHTML('<b>東京駅 <img src="tokyo.png"></b>');
// DOMをセットする方法
var p = document.createElement('p');
p.textContent("東京駅");
var popup = Rosen.htmlPopup().setHTML(p);
メソッド名 | 戻り値 | 説明 |
---|---|---|
setHTML( |
this |
ポップアップ内に表示する HTML を設定します。 |
getHTML() |
HTMLElement |
ポップアップに設定されている HTML を取得します。 |
メソッド名 | 戻り値 | 説明 |
---|---|---|
setContent( |
this |
ポップアップ内に表示する HTML を設定します。 |
setAnchor( |
this |
ポップアップをクリックした際のリンクを設定します。 |
getAnchor() |
String |
ポップアップに設定されているリンクを取得します。 |