概要
YOLP(地図):Yahoo! JavaScriptマップAPI のスタイル地図レイヤーを利用して鉄道路線図を表示する。
動作サンプルのスクリーンショット
鉄道路線図を表示するソースコード
<!DOCTYPE html>
<html lang="ja" style="width: 100%; height: 100%">
<head>
<title>Rails Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body style="width: 100%; height: 100%; margin:0; padding:0;">
<div id="map" style="width:100%; height:100%"></div>
<script type="text/javascript" charset="utf-8" src="https://map.yahooapis.jp/js/V1/jsapi?appid=<YOUR APPLICATON ID>"></script>
<script type="text/javascript">
window.onload = function(){
// スタイル地図レイヤーを生成
// 地図の図式には鉄道路線(railway)を指定
var railwayMapLayer = new Y.StyleMapLayer("railway");
// 鉄道路線のレイヤーセット(IDとレイヤーセット)
var RAILWAY_LAYER_SET_ID = "myRailway";
var railwayLayerSet = new Y.LayerSet("鉄道路線", [railwayMapLayer]);
// 使用するレイヤーセット群を用意
var layerSets = {};
layerSets[RAILWAY_LAYER_SET_ID] = railwayLayerSet;
layerSets[Y.LayerSetId.NORMAL] = new Y.LayerSet("地図", [new Y.NormalLayer()]);
// 地図オブジェクトを生成
var map = new Y.Map("map", {
layerSets: layerSets, // レイヤーセット群を指定
configure : { // 各種設定
doubleClickZoom : true,
scrollWheelZoom : true,
singleClickPan : true,
hybridPhoto : true,
continuousZoom : true
}
});
// 各種コントロール
map.addControl(new Y.ScaleControl());
map.addControl(new Y.ZoomControl());
map.addControl(new Y.LayerSetControl());
// 地図を描画
map.drawMap(new Y.LatLng(35.170634, 136.881751), 14, RAILWAY_LAYER_SET_ID);
}
</script>
</body>
</html>