Rosen JS API リファレンス

はじめに

本ドキュメントは、駅すぱあと路線図の JavaScript ライブラリ rosen.js について網羅的に記述したリファレンス・マニュアルです。 対象読者として、JavaScript について基本的な知識を持った開発者を想定しています。

以下に、本ドキュメントを読むために必要な基礎知識を記述します。

Leaflet.js
rosen.js はオープンソースの地図ライブラリ Leaflet.js v1.0.3 を内包しています。 L.marker などの L から始まるメソッドは Leaflet.js に含まれるものです。 rosen.js のメソッドの中には Leaflet.js のオブジェクトを返すものがあり、それらのオブジェクトに対しては Leaflet.js がそのまま利用できます。 そのため、Leaflet.js の使用法を学習すると、本 API の応用範囲は大きく広がります。 Leaflet.js について詳しくは Leaflet.js 1.0.3 の API リファレンス を参照してください。
Promise
本 API では非同期処理を Promise を使って実現しています。 つまり非同期処理が入るメソッドは情報を戻り値で返すのではなく、戻り値に対して .then()、.catch() でコールバックを指定します。するとそのコールバックの引数として情報が入ってきます。 例えば、getStationByCode メソッドの使い方は下記のようになります:
// 正しくない例:
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オブジェクトについて調べた事などを参照してください。
サーバアクセスの可能性
と 書かれているメソッドは、本システムの API サーバに Ajax でアクセスする可能性があります。 rosen.js はAPIサーバから取得したデータを JavaScript の変数にキャッシュしますので、 同じ API を呼んでも 2 度目以降はサーバアクセスしない場合があります。
省略可能な引数
メソッドの説明において、options?のように「?」が付いている引数は省略可能です。

Rosen

本 API の中心となるクラス - 路線図の表示と管理を行います。

イニシャライザ

メソッド名 説明
Rosen(<String> id, <rosen options> options) Rosenクラスのイニシャライザ。アクセスキーの認証を行い、路線図を表示します。id には路線図を表示する div タグの id を指定します。

オプション

Rosen Options

オプション名 デフォルト 説明
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 スクロール可能なエリア名
指定可能な値
  • "kanto"
  • "sapporo"
  • "hakodate"
  • "sendai"
  • "toyama"
  • "fukui"
  • "nagoya"
  • "kansai"
  • "okayama"
  • "hiroshima"
  • "takamatsu"
  • "matsuyama"
  • "kouti"
  • "hakata"
  • "nagasaki"
  • "kumamoto"
  • "kagoshima"
  • "naha"
サンプル
center Array null 初期表示の中心座標(例:[60457, 49448, 17]
zoom Number 17 初期表示のズームレベル(1018を指定可能)
minZoom Number 10 最小のズームレベル(1018を指定可能)
maxZoom Number 18 最大のズームレベル(1018を指定可能)
maxBoundsViscosity Number 1.0 1.0 の場合はboundsで指定した表示範囲外へスクロールできなくなります。0.0 の場合はスクロールは可能ですが引き戻される挙動になります。
centerStation Number null 初期表示の中央に表示する駅コード(例:22671)。centerよりこちらが優先します。
zoomControl Boolean true 路線図左上のズームコントロールの表示
tileSetting String "https" タイルサーバの言語・SSL設定
指定可能な値
  • "http"
  • "https"
  • "http_en"
  • "https_en"
apiSetting String "https" APIサーバの言語・SSL設定
指定可能な値
  • "http"
  • "https"
  • "http_en"
  • "https_en"
showAnnotationPopup Boolean false 注釈のポップアップを表示(デフォルトは表示しない)
showAnnotationPopupWithHighlight Boolean false 注釈のポップアップを表示する際に駅間を強調する(デフォルトは強調しない)
urlHash Boolean false URLに路線図の現在座標を表すハッシュ文字列(例:#17/61280/49640)を付与します。
uiLanguage String "ja" 路線図のユーザインタフェースの言語を設定します。サイドメニューに影響します。
指定可能な値
  • "ja"(日本語)
  • "en"(英語)

メソッド

メソッド名 戻り値 説明
on(<String> type, <Function> fn, <Object> context?) this 指定イベントにリスナーをセットします。
type(イベントタイプ)として指定可能な値
  • "selectStation"(駅を選択)
  • "selectLine"(路線を選択)
  • "selectSection"(駅間を選択)
  • "selectStationOrLine"(駅または路線を選択)
  • "selectStationOrSection"(駅または駅間を選択)
サーバアクセスの可能性なし
off(<String> type, <Function> fn, <Object> context?) this 指定イベントからリスナーを削除します。 サーバアクセスの可能性なし
setStationMarker(<Number> station_code, <Marker Options> options?) Promise object 指定した駅コードの駅にマーカーをセットします。 成功時コールバックの引数は L.Marker オブジェクトです。
unsetStationMarker(<Number> station_code) undefined 指定した駅コードの駅のマーカーを削除します。 サーバアクセスの可能性なし
setStationPopup(<Number> station_code, <Rosen.Popup> popup, <Boolean> zoom_to_station?) Promise object 指定した駅コードの駅にポップアップをセットします。 zoom_to_stationtrue を指定するとポップアップの位置へ自動的に移動します。 成功時コールバックの引数は L.Marker オブジェクトです。
unsetStationPopup(<Number> station_code) undefined 指定した駅コードの駅のポップアップを削除します。 サーバアクセスの可能性なし
setSectionPopup(<Number> section_code, <Rosen.Popup> popup) Promise object 指定した駅間コードの駅間にポップアップをセットします。 成功時コールバックの引数は L.Marker オブジェクトです。
unsetSectionPopup(<Number> section_code) undefined 指定した駅間コードの駅間のポップアップを削除します。 サーバアクセスの可能性なし
highlightLine(<Number> line_code, <path options> options?) Promise object 指定した路線コードの路線を強調します。 成功時コールバックの引数は強調対象の Line オブジェクトです。
highlightLines(<Array> line_code, <path options> options?) Promise object 配列で指定した路線コードの路線を強調します。 成功時コールバックの引数は Line オブジェクトの配列です。
unhighlightLine(<Number> line_code) undefined 指定した路線コードの路線の強調を削除します。 サーバアクセスの可能性なし
addPolyline(<Array> station_codes, <path options> options?) Promise object 複数の駅を結ぶ折れ線を描画します。station_codesには駅コードの配列を指定します。 成功時コールバックの引数は L.Polyline オブジェクトです。
removePolyline(<Array> station_codes) undefined 複数の駅を結ぶ折れ線を消去します。station_codesには駅コードの配列を指定します。 サーバアクセスの可能性なし
fitBoundsByLineCode(<Number> line_code) undefined 指定した路線コードの路線全体が画面に収まるように表示範囲・ズームを変更します。
fitBoundsByLineCodes(<Array> line_code) undefined 指定した複数の路線コードの路線全体が画面に収まるようにします。
highlightSections(<Array> section_codes, <path options> options?) Promise object 配列で指定した駅間コードの駅間を強調します。 成功時コールバックの引数は強調対象の Section オブジェクトです。
fitBoundsBySectionCodes(<Array> section_codes) undefined 配列で指定した駅間コードの駅間が画面に収まるようにします。
unhighlightSections(<Array> section_codes) undefined 指定した駅間コードの駅間の強調を削除します。 サーバアクセスの可能性なし
fitBoundsByStationCodes(<Array> station_codes) undefined 配列で指定した駅コードの駅が画面に収まるように表示範囲・ズームを変更します。
setSideMenuStationSelectEventListener(<Function> fn) undefined サイドメニューの駅検索で駅が選択されたときのコールバックを設定します。 コールバックの引数は Station オブジェクトです。 サーバアクセスの可能性なし
setSideMenuLineSelectEventListener(<Function> fn) undefined サイドメニューの路線検索で路線が選択されたときのコールバックを設定します。 コールバックの引数は Station オブジェクトです。 サーバアクセスの可能性なし
clearStationMarkers() undefined 全ての駅マーカーを削除します。 サーバアクセスの可能性なし
clearStationPopups() undefined 全ての駅ポップアップを削除します。 サーバアクセスの可能性なし
clearSectionPopups() undefined 全ての駅間ポップアップを削除します。 サーバアクセスの可能性なし
clearHighlights() undefined 全ての強調を解除します。 サーバアクセスの可能性なし
clearAll() undefined 全てのマーカー、ポップアップを削除し、強調を解除します。 サーバアクセスの可能性なし
getStationByCode(<Number> station_code) Promise object 駅コードから駅データを取得します。 成功時コールバックの引数は Station オブジェクトです。
getStationsByCode(<Array> station_codes) Promise object 複数の駅コードから駅データを取得します。 成功時コールバックの引数は Station オブジェクトの配列です。
getStationsByLineCode(<Number> lineCode) Promise object 路線コードから駅データを取得します。 成功時コールバックの引数は Station オブジェクトの配列です。 ソート順は路線上の順番です。
getVisibleStationCodes() Promise object 表示画面内にある駅の駅コードを取得します。 成功時コールバックの引数は駅コードの配列です。
getLineByCode(<Number> line_code) Promise object 路線コードから路線データを取得します。 成功時コールバックの引数は Line オブジェクトです。
getLinesByCode(<Array> line_codes) Promise object 複数の路線コードから路線データを取得します。 成功時コールバックの引数は Line オブジェクトの配列です。
getVisibleLineCodes() Promise object 表示画面内にある路線の路線コードを取得します。 成功時コールバックの引数は路線コードの配列です。
getSectionsByCode(<Array> section_codes) Promise object 複数の駅間コードから駅間データを取得します。 成功時コールバックの引数は Section オブジェクトの配列です。
getSectionsByLineCode(<Number> line_code) Promise object 路線コードを指定して駅間データを取得します。 成功時コールバックの引数は Section オブジェクトの配列です。
getSectionsByStations(<Number> line_code, <Number> start_station_code, <Number> end_station_code) Promise object 駅コードを指定してその間にある駅間データを取得します。 成功時コールバックの引数は Section オブジェクトの配列です。
getVisibleSectionCodes() Promise object 表示画面内にある駅間の駅間コードを取得します。 成功時コールバックの引数は駅間コードの配列です。
getStationsBySectionCode(<Number> section_code) Promise object 駅間コードを指定して駅間の両側の駅を取得します。 成功時コールバックの引数は Station オブジェクトの配列です。
getSectionsByPosCode(<Number> line_code, <Number> from_pos_code, <Number> to_pos_code) 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(<Boolean> highlight?) Promise object 注釈の駅間のポップアップを表示します。 highlighttrue の場合は強調をします。 成功時コールバックの引数は Annotation オブジェクトの配列です。
hideAnnotationPopup() undefined 注釈のポップアップを解除します。 サーバアクセスの可能性なし
setView(<Array> center, <Number> zoom, <move options> options?) this 路線図の中心座標とズームレベルを設定します。 サーバアクセスの可能性なし
setCenter(<Array> center, <move options> options?) this 路線図の中心座標を設定します。 サーバアクセスの可能性なし
searchStationsByName(<String> stationName, <station search options> options?) Promise object stationNameに指定された駅名で駅を検索します。
searchStationsByYomi(<String> stationYomi, <station search options> options?) Promise object stationNameに指定された駅名の読み(ひらがな)で駅を検索します。
searchStationsByPrefectureCode(<Number> prefectureCode, <station search options> options?) Promise object prefectureCodeに指定された都道府県コードで駅を検索します。
prefectureCodeとして指定可能な値
  • 1 (北海道)
  • 2 (青森県)
  • 3 (岩手県)
  • 4 (宮城県)
  • 5 (秋田県)
  • 6 (山形県)
  • 7 (福島県)
  • 8 (茨城県)
  • 9 (栃木県)
  • 10 (群馬県)
  • 11 (埼玉県)
  • 12 (千葉県)
  • 13 (東京都)
  • 14 (神奈川県)
  • 15 (新潟県)
  • 16 (富山県)
  • 17 (石川県)
  • 18 (福井県)
  • 19 (山梨県)
  • 20 (長野県)
  • 21 (岐阜県)
  • 22 (静岡県)
  • 23 (愛知県)
  • 24 (三重県)
  • 25 (滋賀県)
  • 26 (京都府)
  • 27 (大阪府)
  • 28 (兵庫県)
  • 29 (奈良県)
  • 30 (和歌山県)
  • 31 (鳥取県)
  • 32 (島根県)
  • 33 (岡山県)
  • 34 (広島県)
  • 35 (山口県)
  • 36 (徳島県)
  • 37 (香川県)
  • 38 (愛媛県)
  • 39 (高知県)
  • 40 (福岡県)
  • 41 (佐賀県)
  • 42 (長崎県)
  • 43 (熊本県)
  • 44 (大分県)
  • 45 (宮崎県)
  • 46 (鹿児島県)
  • 47 (沖縄県)
searchStationsByLatLng(<Number> lat, <Number> lng, <Number> range, <Number> limit) Promise object lat, lng で指定された緯度経度を中心に、range で指定された半径(メートル)内に存在する駅を検索します。
searchStations(<search station params object> params) Promise object 条件を組み合わせて駅を検索します。
searchLinesByName(<String> lineName, <line search options> options?) Promise object 路線名で路線を検索します。
searchLinesByPrefectureCode(<Number | Array> prefectureCode, <line search options> options?) Promise object 指定された都道府県を通過する路線を検索します。
searchLinesByCorporationCode(<Number | Array> corporationCode, <line search options> options?) Promise object 指定された会社によって運営される路線を検索します。
searchLinesByStationCode(<Number | Array> stationCode, <line search options> options?) Promise object 指定駅に乗り入れる路線を検索します。
searchLines(<search line params object> params) Promise object 条件を組み合わせて路線を検索します。
setCenterByStationCode(<Number> stationCode, <Number> zoom?, <pan options> options?) undefined stationCodeに指定された駅コードで駅を検索し、検索結果の駅が路線図の中心にくるように路線図をスクロールします。
getVersion() Promise object 本システムのバージョンを取得します。
getMapState() Object 現在のズームレベルと中心座標を返します。戻り値の例:

{
    zoom: zoom,
    center: [x, y, zoom]
}
サーバアクセスの可能性なし

getNearestStations(<location search options> options?) Promise object 引数がなしの場合、ブラウザから取得できる現在位置から最寄り駅を検索します。引数を指定した場合、与えた緯度経度から最寄り駅を検索します。 成功時コールバックの引数は Station オブジェクトと距離が入ったオブジェクトです。
setPopupAt(<Array> center, <RosenPopup> popup) this 路線図上の指定座標にポップアップを表示します。 centerの例:[59097, 49598, 17] サーバアクセスの可能性なし
unsetPopupAt(<RosenPopup> popup) this 路線図上の指定されたポップアップを削除します。 サーバアクセスの可能性なし
setMarkerAt(<Array> center, <marker options> options?) Promise 路線図上の指定座標にマーカーを表示します。 centerの例:[59097, 49598, 17]。 成功時コールバックの引数は生成されたマーカー(L.marker)です。 サーバアクセスの可能性なし
unsetMarkerAt(<RosenMarker> marker) this 路線図上の指定されたマーカーを削除します。 サーバアクセスの可能性なし
setZoom(<Number> zoom, <move options> options?) this 路線図のズームレベルを設定します。 サーバアクセスの可能性なし
clearCache() undefined APIサーバから取得したデータのキャッシュをクリアします。 サーバアクセスの可能性なし
showStationNumberMarkers(<Number> station_code) undefined 指定した駅コードの駅を通る路線を強調して、 路線上の駅ナンバーを存在するもののみ全て表示します。
showStationNumber(<Number> station_code, <Function> callback?, <boolean> show_line_name?, <Array> line_codes?) undefined 指定した駅コードの駅の駅ナンバーを表示します。 show_line_nametrue の場合、路線名の表示も行います。 line_codes に路線コードの配列を指定した場合、その路線における駅ナンバーだけが表示されます。
hideStationNumberMarkers() undefined 駅ナンバーの表示と強調を全てクリアします。 サーバアクセスの可能性なし

スタティックメソッド

メソッド名 戻り値 説明
Rosen.ddToDMS(<Number> decDegree) Object 10進数から度分秒へ変換します。 サーバアクセスの可能性なし
Rosen.getDMSLongitude(<Number> longitude) String 10進数の経度の表記を東西込みのDMS表記へ変換します。 サーバアクセスの可能性なし
Rosen.getDMSLatitude(<Number> latitude) String 10進数の緯度の表記を南北込みのDMS表記へ変換します。 サーバアクセスの可能性なし
Rosen.dmsToDD(<Number> degree, <Number> minute, <Number> second) Number 度分秒から10進数へ変換します。 サーバアクセスの可能性なし
Rosen.getLineCodeBySectionCode(<Number> section_code) Number 与えられた駅間コードから路線コードを取得します。 サーバアクセスの可能性なし

駅検索条件(searchLines)

searchStations で駅検索をするときに検索条件を指定するオブジェクトです。
var params = {
  stationName: 'とうきょう',
  stationNameYomi: true
};
rosen.searchStations(params).then(function (stations) { /*...*/ });
Property Type Description
stationCode Array | Number 駅コード
stationName String 駅名
stationNameMatchType String 駅名検索のマッチング方法
指定可能な値
  • "forward"(前方一致)
  • "partial"(部分一致)
stationNameYomi Boolean trueの場合はstationNameがよみがなにもマッチします。
lineCode Number 路線コード
lineName String 路線名
prefectureCode Number 都道府県コード
prefectureName String 都道府県名
corporationCode Number 会社コード
limit Number 検索数の上限

路線検索条件(searchLines)

searchLines で詳細な条件を指定して路線検索するときに使用できるオプションです。
var params = {
  include: {
    lineName: '東武'
  },
  exclude: {
    lineCode: 279 //東武東上線を除外
  },
  mask: {
    prefectureCode: 13 //東京都のみに絞り込み
  },
  lineNameMatchType: "partial"
};
rosen.searchLines(params).then(function (lines) { /*...*/ });
Property Type Description
include search line include params 路線検索のベースとなる検索条件
exclude search line exclude params 路線検索のベースから除外する条件
mask search line mask params 路線検索の結果から AND で絞り込みをする条件
lineNameMatchType String 路線名のマッチング方法
指定可能な値
  • "forward"(前方一致)
  • "partial"(部分一致)
limit Number 検索数の上限

路線検索条件(searchLines) - include

searchLines で詳細な条件を指定して路線検索するときに include 部で指定できるパラメータの一覧です。
Property Type Description
lineCode Array | Number 路線コード
lineName String 路線名
prefectureCode Number 都道府県コード
corporationCode Number 会社コード
stationCode Number 駅コード

路線検索条件(searchLines) - exclude

searchLines で詳細な条件を指定して路線検索するときに exclude 部で指定できるパラメータの一覧です。
Property Type Description
lineCode Array | Number 路線コード
corporationCode Number 会社コード

路線検索条件(searchLines) - mask

searchLines で詳細な条件を指定して路線検索するときに mask 部で指定できるパラメータの一覧です。
Property Type Description
prefectureCode Number 都道府県コード
corporationCode Number 会社コード
stationCode Number 駅コード

イベント

路線図で発生するイベントの一覧です。
イベント データ 説明
selectStation Event 駅をクリックしたときに発生するイベント。コールバックの引数には駅オブジェクトの配列が入ってきます。駅オブジェクトはクリックした点に近い順でソートされています。
selectLine Event 路線をクリックしたときに発生するイベント。コールバックの引数には路線オブジェクトの配列が入ってきます。路線オブジェクトのソート順は不定です。
selectSection Event 駅間をクリックしたときに発生するイベント。コールバックの引数には駅間オブジェクトの配列が入ってきます。駅間オブジェクトは駅間コード順でソートされています。
selectStationOrLine Event 駅または路線をクリックしたときに発生するイベント(付近に両方ある場合は駅が優先されます)。コールバックの引数は selectStation または selectLine の場合と同様です。
selectStationOrSection Event 駅または駅間をクリックしたときに発生するイベント(付近に両方ある場合は駅が優先)。コールバックの引数は selectStation または selectSection の場合と同様です。

移動オプション

路線図をスクロール・ズームさせるときのオプションです。
オプション名 デフォルト 説明
animate Boolean true 路線図移動時とズーム時のアニメーション(デフォルトはアニメーションあり)

位置情報検索オプション

位置情報を検索するときに指定できるオプションです。
オプション名 デフォルト 説明
latitude Number 0 緯度
longitude Number 0 経度
range Number 1000 半径(メートル)
limit Number 1000 検索数の上限

簡易駅検索条件

searchStationsByName などの簡易駅検索メソッドで指定できるオプションです。
オプション名 デフォルト 説明
stationNameMatchType String "forward" 駅名検索のマッチング方法
指定可能な値
  • "forward"(前方一致)
  • "partial"(部分一致)
limit Number undefined 検索数の上限

簡易路線検索条件

searchLinesByName などの簡易路線検索メソッドで指定できるオプションです。
オプション名 デフォルト 説明
lineNameMatchType String "partial" 路線名検索のマッチング方法
指定可能な値
  • "forward"(前方一致)
  • "partial"(部分一致)
limit Number undefined 検索数の上限

マーカーオプション

マーカーを設置する際に指定できるオプションです。 Leaflet.js の L.marker と同じオプションが指定できます。 詳細は Leaflet.js のドキュメントの marker-options を参考にしてください。 また下記のように指定すると円形のマーカーを表示できます。
{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 の場合は可能であればアニメーションをしながら移動します。

パスオプション

線を描画する際に指定できるオプションです。 Leaflet.js の Path と同じオプションが指定できます。 詳細は Leaflet.js のドキュメントの path-options を参考にしてください。
オプション名 デフォルト 説明
color String 路線固有の路線色 線の色(例:"#ff0000"
weight Number 3 線の太さ(例:3
opacity Number 1.0 透明度(0.01.0

Station

駅を表すクラス。

プロパティ

Property Type Description
code Number 駅コード(例:22671
name String 駅名(漢字表記)
yomi String 駅名(ひらがな表記)
station_type Number 駅種別
  • 1(鉄道駅)
  • 2(空港)
  • 3(鉄道駅かつ空港)
  • 8(港)
  • 9(鉄道駅かつ港)
prefecture_code Number 都道府県コード(JISコードに準拠)
latitude Number 緯度
longitude Number 経度
parent_station_code Number 重複駅でかつ子オブジェクトの場合は親の駅コード。そうでなければnull。
children_station_codes Array 重複駅でかつ親オブジェクトの場合は子の駅コードの配列。そうでなければ空の配列。
lines Array この駅を通る路線の Line オブジェクトの配列

Line

路線を表すクラス。(Station の子の場合のみ)と書かれているプロパティは、Station オブジェクトの子になっている場合のみ存在するプロパティです。 例えば station.lines[0].station_number は路線 lines[0] における駅ナンバーを表します。 同じ新宿駅であっても、山手線における駅ナンバーと都営新宿線における駅ナンバーは異なるためこのようになっています。

プロパティ

Property Type Description
name String 路線名
code Number 路線コード(例:302
color String 路線固有の路線色
station_number String 駅ナンバーを表す文字列(Station の子の場合のみ)
sort String 順序番号(Station の子の場合のみ)

Section

駅間を表すクラス。駅間とは、路線の上で隣り合う 2 駅の間の区間のことをいいます。

プロパティ

Property Type Description
code Number 駅間コード(例:3020100
color String 路線固有の路線色

Annotation

注釈を表すクラス。主に災害等で不通になっている区間を表示するために使われます。

プロパティ

Property Type Description
highlight_sections Array 強調をする駅間の配列
popup_section Section ポップアップを置く駅間の Section オブジェクト
suspension_reason String 停止理由
color String 強調色
weight Number 強調の太さ
line Line Line オブジェクト
start_station Station 開始駅
end_station Station 終了駅

RosenPopup

ポップアップクラス(抽象クラスなのでインスタンス化することはできません)。 ポップアップとは対象オブジェクト(マーカーまたは駅間)に付随する吹き出しのことで、対象オブジェクトをクリックすると表示・非表示が切り替わります。
Leaflet.js の L.Popup を継承しています。 L.Popup については Leaflet.js のドキュメントの Popup を参考にしてください。

メソッド

メソッド名 戻り値 説明
setContent(<String|HTMLElement> content) this ポップアップ内に表示する HTML を設定します。
setAnchor(<String> url) this ポップアップをクリックした際のリンクを設定します。
getAnchor() String ポップアップに設定されているリンクを取得します。

ImagePopup

画像を表示できるポップアップクラス。

使用例

var popup = Rosen.imagePopup().setComment('東京駅', {commentPosition:'below'});
popup.setImageUrl(`URL of 東京駅`);

オプション

Comment options

オプション名 デフォルト 説明
commentPosition String "above" テキストの位置
指定可能な値
  • "above"(画像の上)
  • "below"(画像の下)

メソッド

メソッド名 戻り値 説明
getImageUrl() String ポップアップに設定されている画像のURLを取得します。
setImageUrl(<String> imageUrl) this 画像のURLを設定します。
getComment() String ポップアップに設定されているテキストを取得します。
setComment(<String> comment, <comment options> options?) this ポップアップ内に表示するテキストを設定します。
getCommentPosition() String テキストの位置を取得します("above" or "below")。
メソッド名 戻り値 説明
setContent(<String|HTMLElement> content) this ポップアップ内に表示する HTML を設定します。
setAnchor(<String> url) this ポップアップをクリックした際のリンクを設定します。
getAnchor() String ポップアップに設定されているリンクを取得します。

TextPopup

テキストを表示できるポップアップクラス。

使用例

var popup = Rosen.textPopup().setComment('東京駅').setAnchor(`URL of 東京駅`);

メソッド

メソッド名 戻り値 説明
getComment() String ポップアップに設定されているテキストを取得します。
setComment(<String> comment) this ポップアップ内に表示するテキストを設定します。
メソッド名 戻り値 説明
setContent(<String|HTMLElement> content) this ポップアップ内に表示する HTML を設定します。
setAnchor(<String> url) this ポップアップをクリックした際のリンクを設定します。
getAnchor() String ポップアップに設定されているリンクを取得します。

HTMLPopup

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(<String|HTMLElement> element) this ポップアップ内に表示する HTML を設定します。
getHTML() HTMLElement ポップアップに設定されている HTML を取得します。
メソッド名 戻り値 説明
setContent(<String|HTMLElement> content) this ポップアップ内に表示する HTML を設定します。
setAnchor(<String> url) this ポップアップをクリックした際のリンクを設定します。
getAnchor() String ポップアップに設定されているリンクを取得します。