Help us understand the problem. What is going on with this article?

Yahoo! JavaScriptマップAPIで鉄道路線図を表示する

More than 1 year has passed since last update.

概要

YOLP(地図):Yahoo! JavaScriptマップAPI のスタイル地図レイヤーを利用して鉄道路線図を表示する。

動作サンプルのスクリーンショット

railwaymap1.png

railwaymap2.png

railwaymap3.png

鉄道路線図を表示するソースコード

<!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>

参考資料

niwasawa
迷子になりがちな地図・位置情報系プログラマ。
http://niwasawa.hatenablog.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした