YOLP(地図)

Yahoo! JavaScriptマップAPI

リクエストURL
JavaScript
http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi

目次




Getting Started

Yahoo! JavaScriptマップAPI(以下、JavaScriptマップAPI)はウェブページに地図を表示するためのAPIです。
以下のような特徴があります。

  • Yahoo!ロコの地図と同じ地図を表示できます。
  • JavaScriptで地図を動的に操作し複雑な処理が可能です。
  • 地図上にアイコンや線など図形を描画できます。
  • インターネット上に公開された地理情報をAPIプロキシを通して、地図上に読み込み表示することが可能です。
  • iPhoneなどのスマートフォンに搭載されたブラウザにもスクロール地図を表示可能です。
  • スマートフォンの場合は、スマートフォン用の地図で表示されます。
  • ユーザーのディスプレイの解像度(dpi)に最適な拡大率で、どんな解像度のディスプレイでも全く同じ大きさ及び画像品質で地図を表示されます。

ここではまず一番シンプルな地図を表示するサンプルを示します。

アプリケーションIDの取得

JavaScriptマップAPIを利用するためには、アプリケーションIDの取得が必要です。
以下の手順に従ってアプリケーションIDを取得してください。

  1. Yahoo! JAPAN IDを取得
    アプリケーションIDを取得するためには、Yahoo! JAPAN IDが必要です。
    もしYahoo! JAPAN IDをお持ちでない場合は、こちらから取 得してください。
    お持ちの場合はこのステップは必要ありません。
  2. アプリケーションIDを登録
    次に、こちらからアプリケーションIDを登録してください。
    アプリケーションIDは、API利用者、またその使用状況を把握し、スパム行為などの妨害行為を防ぐために使用されます。
    なお登録したアプリケーションIDはこちらで一覧・管理できます。

一番シンプルな地図の表示

アプリケーションIDが取得できたら、JavaScriptマップAPIを利用できます。
以下のコードをHTMLファイルとして記述しブラウザで表示してみてください。
その際に、【アプリケーションID】の部分を取得したアプリケーションIDに書き換えてください。
以降のサンプルもすべて同様です。

<!DOCTYPE html>
<html>
<body>
<div id="map" style="width:400px; height:300px"></div>

<script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=【アプリケーションID】"></script>
<script type="text/javascript">
window.onload = function(){
    var ymap = new Y.Map("map");
    ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL);
}

</script>
</body>
</html>

以下のような地図が表示されると思います。




スマートフォンで利用する

JavaScriptマップAPIは、iPhoneやAndroid端末をはじめとするタッチデバイスを採用したスマートフォンに対応しています。
スマートフォンの場合は、スマートフォン用の地図で表示されます。

スマートフォン用地図とは

スマートフォン用地図

PC用地図

PCの大きな画面で見る情報量の多い地図とは異なり、小さい画面のスマートフォンでの利用を前提に新たに追加した地図デザインです。
外出時に現地で利用される頻度が高いと想定し、その場で素早く周辺の情報を認識できることを目指し、「シンプルで軽くて親しみやすい」をテーマにデザインしました。

スマートフォン用地図の主な特徴
  • ビル名やマンション名よりも、交差点や建物の1階部分にあるコンビニエンスストアやファストフード店、銀行などを優先して表示。
  • 認識しにくい長い文字やわかりにくい地形図記号を、直感的に理解しやすいピクトグラムアイコン(絵文字アイコン)に置き換え。
  • ぱっと見ただけで認識できるユニバーサルフォントを使用し、レイアウトも横書き主体で見やすい。
  • 道路や建物がはっきり見えるように余分なデザインを排除、地図データも軽量化しより軽快な操作を実現。

スマートフォンでもPC用の地図を表示したい場合
操作オプションの設定によってスマートフォンでPC用地図を表示する事もできます。
その場合は以下のように設定してください。


//初期化時にPC用地図を指定する。
var map = new Y.Map("map",{
        configure : {
            mapType : Y.Map.TYPE.STANDARD
        }
    });

//または、Map.setConfigureでPC用地図を指定する。
map.setConfigure('mapType', Y.Map.TYPE.STANDARD);

※PCでスマートフォン用の地図を表示する事もできます。 詳細は 操作オプションの設定

マルチ解像度対応

ユーザーのディスプレイの解像度(dpi)に合わせて最適な拡大率で表示することにより、様々な解像度のディスプレイで同等の大きさの地図が表示されます。

マルチ解像度対応の主な特徴
  • どんな端末でもユーザーにとって「同じ見た目」で地図を利用することができます。
  • 文字だけでなく道路や鉄道などの形状も見やすさが向上します。

スマートフォン用の機能

スマートフォンに搭載されたブラウザでAPIが読み込まれたとき、次の機能が有効になります。

  • タッチ操作による地図スクロール
  • ピンチ操作による地図縮尺の変更(一部の端末機種のみ)

これらの機能を活用するには、APIを利用するHTMLのhead要素の中に、meta要素で次のように記述して、ページの拡大率を等倍に、多くのスマートフォンブラウザでデフォルトのページ拡大縮小機能を無効にしてください。

<head>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
</head>

タッチ操作による地図スクロール

地図面を指でタッチしながらドラッグさせることで、地図をスクロールできます。
スクロール完了後は、Y.Mapオブジェクトよりmoveendイベントが通知されます。
また、地図面を指でタッチしてスクロールしなかった際に、Y.Mapオブジェクトよりclickイベントが通知されます。

この機能がサポートされているかどうかを調べるには、Y.Util.Platform.isSupportTouchScrollの値を参照します。

if (Y.Util.Platform.isSupportTouchScroll) {
    alert("タッチスクロール機能がサポートされている端末です");
}

ピンチ操作による地図縮尺の変更

地図面を2本の指でタッチしたまま指の間隔を広げることで地図縮尺を詳細なズームレベルに、指の間隔を狭めることで地図縮尺を広域なズームレベルに変更できます。
縮尺変更後は、Y.Mapオブジェクトよりzoomendイベントが通知されます。

この機能がサポートされているかどうかを調べるには、Y.Util.Platform.isSupportPinchZoomの値を参照します。現在は、Android端末ではサポートされていません。Android端末にも 対応した地図アプリケーションとしてAPIを使うときは、縮尺の変更が可能になるようにY.ZoomControlなどを利用してください。

if (Y.Util.Platform.isSupportPinchZoom) {
    alert("ピンチズーム機能がサポートされている端末です");
} else {
    //ピンチズーム機能が使えないスマートフォン端末への対応
    ymap.addControl(new Y.ZoomControl());
}

Android端末での制限事項

Android端末では、以下の機能が提供されません。

  • Android2.xでのピンチズーム機能
  • Y.PolylineY.PolygonY.Circleオブジェクトからのクリックイベント通知



地図を表示する

ここではJavaScriptマップAPIを使って地図を表示する機能について詳細に解説します。

Y.Mapオブジェクト

JavaScriptマップAPIのメインとなるのはY.Mapオブジェクトです。
引数に地図のコンテナとなるブロック要素のidを指定して、Y.Mapをnewすることで地図が初期化されます。
ただしこの段階ではまだ内部的な準備ができただけで、地図は表示されません。

<script type="text/javascript">
var ymap = new Y.Map("map");
</script>

地図のコンテナとなるDOMオブジェクト

JavaScriptマップAPIによる地図は、任意のブロック要素をコンテナとしてその中に構築されます。
コンテナとなる要素には、自動的にposition:relative、overflow:hiddenといったスタイルが適用されます。
幅・高さやborderなどは任意に設定してください。

<div id="map" style="width:400px; height:300px"></div>

地図を表示するメソッド

初期化した地図を表示するには、Y.MapオブジェクトのdrawMap()メソッドを使用します。
drawMap()メソッドには3つの引数を渡せます。順に、

  • 中心の緯度経度
  • ズームレベル
  • レイヤーセットID

となります。中心の緯度経度は必須で、残り2つは任意です。

ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL);

地図に表示される場所の指定

地図に表示される場所の指定は、Y.LatLngオブジェクトを使って緯度経度で指定します。
Y.LatLngオブジェクトのコンストラクタに緯度、経度の順で指定してください。
緯度経度は度単位の数値として指定します。
また、測地系は世界測地系です。

new Y.LatLng(35.66572, 139.73100);

ズームレベル

ズームレベルを指定することで、地図を任意の縮尺で表示できます。
標準地図では1~20まで指定でき、数値が大きくなるほど詳細な縮尺になります。
ただしレイヤーセットIDによって指定できる値の範囲は異なります。
標準地図で東京ミッドタウンを中心としたサンプルイメージは以下の通りです。

ズームレベル サンプルイメージ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

レイヤーセットID

Y.Map.drawMap()メソッドにレイヤーセットIDを指定することで、表示する地図の種類を変更できます。
レイヤーセットIDはY.LayerSetIdオブジェクトのメンバーとして定義されています。
指定できるレイヤーセットIDと内容は以下の通りです。

レイヤーセットID 種類、サンプルイメージ 指定可能なズームレベル
Y.LayerSetId.NORMAL 標準地図

標準地図
1~20
海外におけるズームレベル11~20は、OSM(OpenStreetMap)を表示します。
Y.LayerSetId.PHOTO 航空写真

航空写真
1~21
海外におけるズームレベル11~21は、ズームレベル10を表示します。
Y.LayerSetId.B1 地下街

地下街
19~21
Y.LayerSetId.OSM
オプションで有効に設定する必要があります
OpenStreetMap

OpenStreetMap
1~20

例えば航空写真を表示する場合は以下のように指定します。

ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.PHOTO);

震災後の航空写真を利用する

JavaScriptマップAPIでは、国土地理院が公開している「東北地方太平洋沖地震による被災地の空中写真」を元にした震災後の航空写真をレイヤーセットとして利用することができます。2011年3月から4月にかけて撮影された航空写真で、被災地の状況を記録・把握するために有効です。

このレイヤーセットは他のレイヤーセットとは異なり、Y.Map.drawMap()メソッドにレイヤーセットIDを指定するだけではなく、Y.LayerSetオブジェクトを生成しY.Map.addLayerSet()メソッドで明示的に追加する必要があります。また、地下街のレイヤーセットと同様、地図の中心点に震災後の写真データがある場合のみ利用可能となっています。

以下のコードは仙台空港の震災後の航空写真をスクロール地図に表示する完全なサンプルです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="map" style="width:480px; height:320px;"></div>
<script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=【アプリケーションID】"></script>

<script type="text/javascript">
window.onload = function(){
    var ymap = new Y.Map('map');
    ymap.addLayerSet(Y.LayerSetId.EARTHQUAKEPHOTO, new Y.LayerSet('震災後写真', [new Y.EarthQuakePhotoLayer()]));
    ymap.addControl(new Y.SliderZoomControlVertical());
    ymap.addControl(new Y.LayerSetControl());
    ymap.drawMap(new Y.LatLng(38.1383,140.9292), 17, Y.LayerSetId.EARTHQUAKEPHOTO);
}
</script>
</body>
</html>


雨雲レーダーを表示する

JavaScriptマップAPIでは、地図上に最新の雨雲レーダー情報を重ねて表示することができます。

表示方法
  • オーバーレイボタンからの操作で表示

  • JavaScriptマップAPIは、デフォルトで雨雲レーダーが表示できる選択ボタンが追加されています。雨雲レーダーをON/OFFすることで表示の切り替えが可能になります。

ズームレベル サンプルイメージ
 6  雨雲レーダーサンプル画像01
 15  雨雲レーダーサンプル画像02
  • JavaScriptでの操作

  • 雨雲レーダーはJavaScriptからも表示の切り替えが可能になっています。MapConfigureに対してtrue/falseを設定することで表示の切り替えが可能になります。

var map = new Y.Map("map", {
    configure : {
        weatherOverlay: true
    }
});
map.drawMap(new Y.LatLng(34.7015,135.4965), 8, Y.LayerSetId.NORMAL);

または、

map.setConfigure('weatherOverlay', true);

非表示方法

JavaScriptマップAPIでは、デフォルトでオーバーレイボタンが表示されます。そのため必要のない場合は以下の方法で非表示設定を行ってください。

new Y.LayerSetControl({enableOverlayButton: false});

または、

var lsc = new Y.LayerSetControl();
lsc.setEnableOverlayButton(false);

凡例
降水強度(mm/h)
  1.0未満
  1.0以上、2.0未満
  2.0以上、4.0未満
  4.0以上、8.0未満
  8.0以上、12.0未満
  12.0以上、16.0未満
  16.0以上、24.0未満
  24.0以上、32.0未満
  32.0以上、40.0未満
  40.0以上、48.0未満
  48.0以上、56.0未満
  56.0以上、64.0未満
  64.0以上、80.0未満
  80.0以上

※降水強度は、気象レーダーで観測された降水の強さを時間雨量(mm/h)に換算した値で、実際の雨量とは異なります。


対応ズームレベル

ズームレベルが15以下の場合のみ雨雲レーダーは表示されます。15より大きい場合は非表示となるためご注意ください。

詳細な操作について

雨雲レーダーを詳細に操作するためには、専用の操作クラスWeatherMapLayerを使用します。このクラスを使用することで、Yahoo!天気・災害Yahoo!ロコ - 地図の雨雲レーダーのようなサイトを作成することができます。

提供される機能としては、

  • 好きな地図図式と重ね合わせが可能
  • 自動更新機能
  • 雨雲レーダーの情報日時の取得・表示
  • 最新の観測時間から、120分前までの降水強度実測値データと60分後までの降水強度予測値データの表示
  • アニメーション機能

以下のコードはWeatherMapLayerを用いたサンプルです。

<html>
<head>
<title>天気</title>
<script src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=[取得したAppId]" type="text/javascript"  charset="UTF-8" ></script>
<script>
<!--
window.onload = function() {
    var map = new Y.Map("map", {
    configure : {
        doubleClickZoom : true,
        scrollWheelZoom : true,
        dragging : true
        }
    });
    //天気レイヤ作成
    var weather = new Y.WeatherMapLayer({
        "opacity": 0.6,
    });
    //天気レイヤを重ねる地図レイヤを作成(今回のサンプルでは通常地図を設定)
    var maplayer = new Y.NormalLayer();
    //地図 + 天気レイヤを追加
    map.addLayerSet("weather", new Y.LayerSet("地図+天気", [maplayer, weather]));
    //レイヤを選択するコントロールを追加
    //プルダウンメニューから選択できる雨雲レーダーをOffにします。
    map.addControl(new Y.LayerSetControl({enableOverlayButton: false}));
    //スライダーバーを追加
    map.addControl(new Y.SliderZoomControlHorizontal());
    //地図を描画
    map.drawMap(new Y.LatLng(35.665627,139.730738), 6, "weather");
    //天気データを更新
    weather.UpdateWeather();
    //5分間毎に自動更新するように設定
    weather.setAutoUpdateInterval(5);
    //自動更新スタート
    weather.startAutoUpdate();
}
//-->
</script>
 
</head>
<body>
5分間隔で雨雲が更新されます。
<div id="map" style="width:800px; height:600px;"></div>
</body>
</html>

WeatherMapLayerに関する詳細についてはレファレンスを参照してください。




地図を操作する

JavaScriptマップAPIで表示した地図は、マウスなどで操作できます。
初期状態では、地図面をドラッグすることで地図を移動できます。
縮尺を切り替えたり、マウスホイールやキーボードで操作できるようにするためには、Y.Mapオブジェクトへの操作オプションの設定や、「コントロール」と呼ばれる操作用インターフェースの追加を行います。

操作オプションの設定

操作オプションはY.Mapオブジェクトの初期化時の第二引数で指定できます。
第二引数オブジェクトをobjとしたとき、obj.configure.オプション名にboolean値を指定します。
mapTypeを設定する場合はY.Map.TYPE.STANDARDまたはY.Map.TYPE.SMARTPHONEを指定します。
以下のサンプルコードは、

  • ダブルクリックでその位置を中心に地図の縮尺を拡大
  • マウスホイールによる地図の縮尺の切り替え
  • シングルクリックでその位置を中心に地図をスクロール
  • マウスドラッグによる地図のスクロールを禁止

する設定となります。

var ymap = new Y.Map("map", {
    configure : {
        doubleClickZoom : true,
        scrollWheelZoom : true,
        singleClickPan : true,
        dragging : false
    }
});

configureに指定可能なパラメータは以下の通りです。

パラメータ名 内容 デフォルト値
doubleClickZoom ダブルクリックで地図のズームインを有効にします。 false
(無効)
scrollWheelZoom マウスのスクロールホイールによるズーム処理を有効にします。 false
(無効)
singleClickPan シングルクリックで地図を移動します。 false
(無効)
dragging ドラッグ操作で地図を移動可能にします。 true
(有効)
continuousZoom ズーム時に、滑らかなアニメーション処理を有効にします。 false
(無効)
hybridPhoto 航空写真レイヤーセットを写真と注記のハイブリッド表示とします。 false
(無効)
enableFlickScroll マウス、タッチパネルを短時間で弾いた際に、慣性スクロールさせます。 true
(有効)
enableOpenStreetMap OpenStreetMapレイヤーセットが選択できるよう有効にします。 false
(無効)
mapType 地図(Y.LayerSetId.NORMAL)のタイプを設定します。
Y.Map.TYPE.STANDARD
(PC用地図)
Y.Map.TYPE.SMARTPHONE
(スマートフォン用地図)
PCの場合
Y.Map.TYPE.STANDARD
スマートフォンの場合
Y.Map.TYPE.SMARTPHONE
weatherOverlay 雨雲レーダーレイヤーを表示します。 false
(無効)

また、操作オプションは地図の初期化後もY.Map.setConfigure()メソッドで設定できます。
以下のコードでは、前述のサンプルで禁止されたマウスドラッグによる地図のスクロールを再び許可しています。

ymap.setConfigure("dragging", true);

現在の設定値は、Y.Map.getConfigure()メソッドで取得できます。

//航空写真レイヤーセットのハイブリッド表示が無効であるとき、有効にします。
if (!ymap.getConfigure("hybridPhoto")) {
    ymap.setConfigure("hybridPhoto", true);
}

コントロールの追加

縮尺を切り替えたり航空写真を表示したりするためのユーザーインターフェースを「コントロール」と呼びます。
初期状態ではコントロールは何も登録されていません。
コントロールはY.Map.addControl()メソッドで追加できます。

var control = new Y.LayerSetControl();
ymap.addControl(control);

またY.Map.removeControl()メソッドで追加済みのコントロールを削除できます。

ymap.removeControl(control);

利用可能なコントロールは以下の通りです。

コントロール名 説明、サンプルイメージ
Y.CenterMarkControl 地図の中心位置を表示します

Y.HomeControl 地図の初期位置をホームアイコンとして表示します

Y.LayerSetControl 地図のレイヤセットを切り替えるためのボタンを表示します

Y.ScaleControl 地図上の距離の目安となるスケールバーを表示します

Y.ZoomControl 地図の縮尺を変更するためのシンプルなボタンを表示します

Y.SliderZoomControlHorizontal 地図の縮尺を変更するための横長スライダー形式のユーザーインターフェースを表示します

Y.SliderZoomControlVertical 地図の縮尺を変更するための縦長スライダー形式のユーザーインターフェースを表示します

Y.SearchControl 地図検索のユーザーインターフェースを表示します




地図上にアイコンや図形を表示する

JavaScriptマップAPIは地図上にアイコンや図形を表示できます。
利用可能な種類は以下になります。

種類 説明、サンプルイメージ
Y.Label 文字をラベルとして表示します

Y.Marker 地点をアイコン画像で表示します

Y.Polyline 複数の点で構成される線を表示します

Y.Polygon 複数の点で囲まれた多角形を表示します

Y.Circle 円、あるいは楕円(だえん)を表示します

文字を表示(Y.Label)

Y.Labelを使うことで、地図上に小さなフキダシの形で文字を表示できます。
第一引数に表示する位置をY.LatLngオブジェクトとして、第二引数に表示したい文字列を渡し、Y.Labelオブジェクトを生成します。
生成したオブジェクトをY.Map.addFeature()メソッドで追加すればラベルが表示されます。

var label = new Y.Label(new Y.LatLng(35.64997652994234,139.72116702175174), "打ち上げ会場");
ymap.addFeature(label);

アイコンを表示(Y.Marker)

Y.Markerを使うことで、地図上にマーカーとしてアイコンを表示できます。
第一引数に表示する位置をY.LatLngオブジェクトとして渡し、Y.Markerオブジェクトを生成します。
生成したオブジェクトをY.Map.addFeature()メソッドで追加すれば標準のアイコンでマーカーが表示されます。

var marker = new Y.Marker(new Y.LatLng(35.64997652994234,139.72116702175174));
ymap.addFeature(marker);

もし任意の画像をアイコンとして表示したい場合は、Y.Markerの初期化時の第二引数で指定できます。
第二引数をobjとしたとき、Y.Iconのオブジェクトを生成し、それをobj.iconとして渡します。

var icon = new Y.Icon('http://i.yimg.jp/images/map/yy/images/icon/yy_aicon_06_32pix.gif');
var marker = new Y.Marker(new Y.LatLng(35.64997652994234,139.72116702175174), {icon: icon});
ymap.addFeature(marker);

線を表示(Y.Polyline)

Y.Polylineを使うことで、地図上に線を表示できます。
第一引数に線を構成する点をY.LatLngオブジェクトの配列として渡し、Y.Polylineオブジェクトを生成します。
生成したオブジェクトをY.Map.addFeature()メソッドで追加すれば地図上に線が表示されます。

var latlngs = [
    new Y.LatLng(35.650876676313125,139.72215675687852),
    new Y.LatLng(35.65078295694602,139.72216212129663),
    new Y.LatLng(35.650713212229476,139.72212188816138),
    new Y.LatLng(35.65043205322328,139.72116165733408),
    new Y.LatLng(35.64999832537358,139.72135209417374)
];
var polyline = new Y.Polyline(latlngs);
ymap.addFeature(polyline);

なお、線の描画スタイルはY.Styleを用いて設定できます。
まずY.Styleオブジェクトを、第一引数に色を示す文字列(HTMLのRRGGBB形式)、第二引数に線の太さを示すピクセル値、第三引数に透過率を0~1.0の範囲で指定して生成します。
Y.Polylineのコンストラクタの第二引数をobjとしたとき、obj.strokeStyleとしてY.Styleオブジェクトを渡してください。

var style = new Y.Style("00ff00", 8, 0.5);
var latlngs = [
    new Y.LatLng(35.650876676313125,139.72215675687852),
    new Y.LatLng(35.65078295694602,139.72216212129663),
    new Y.LatLng(35.650713212229476,139.72212188816138),
    new Y.LatLng(35.65043205322328,139.72116165733408),
    new Y.LatLng(35.64999832537358,139.72135209417374)
];
var polyline = new Y.Polyline(latlngs, {strokeStyle: style});
ymap.addFeature(polyline);

多角形を表示(Y.Polygon)

Y.Polygonを使うことで、地図上に多角形を表示できます。
Y.Polylineと同様、第一引数に線を構成する点をY.LatLngオブジェクトの配列として渡し、Y.Polygonオブジェクトを生成します。終点と始点は自動的に結ばれます。
生成したオブジェクトをY.Map.addFeature()メソッドで追加すれば地図上に線が表示されます。
また、Y.Polylineと同様にスタイルが指定できます。Y.Polygonは境界線のスタイルとしてstrokeStyle、塗りのスタイルとしてfillStyleの2つを指定できます。

var latlngs = [
    new Y.LatLng(35.650384103526534,139.72117775058697),
    new Y.LatLng(35.65004845484345,139.7200404939649),
    new Y.LatLng(35.64993729815054,139.71998953199355),
    new Y.LatLng(35.64933138247737,139.72024434184988),
    new Y.LatLng(35.64962562267677,139.7211723861691),
    new Y.LatLng(35.6494316422226,139.72126089906655),
    new Y.LatLng(35.64950138805811,139.72153984880407),
    new Y.LatLng(35.64962126357061,139.72152643775897)
];
var polygon = new Y.Polygon(latlngs,{
    strokeStyle: new Y.Style("00ff00", 4, 0.7),
    fillStyle: new Y.Style("00ff00", null, 0.2)
});
ymap.addFeature( polygon );

円を表示(Y.Circle)

Y.Circleを使うことで、地図上に円、あるいは楕円(だえん)を表示することが出来ます。
第一引数には円の中心の緯度経度を指定します。
第二引数に円の半径をY.Sizeオブジェクトで指定します。Y.Sizeのコンストラクタには東西方向の半径、南北方向の半径の順に指定します。単位はピクセル値です。
第三引数のオプションにはY.Polygonと同様にstrokeStyleおよびfillStyleを指定できます。

var strokeStyle = new Y.Style("00ff00", 4, 0.7);
var fillStyle   = new Y.Style("00ff00", null, 0.2);
var circle = new Y.Circle(new Y.LatLng(35.64997652994234,139.72116702175174), new Y.Size(100, 100), {
    strokeStyle: strokeStyle,
    fillStyle:fillStyle
});
ymap.addFeature(circle);

長径100ピクセル短径50ピクセルの楕円(だえん)とした例が以下になります。

var circle = new Y.Circle(new Y.LatLng(35.64997652994234,139.72116702175174), new Y.Size(100, 50));
ymap.addFeature(circle);

なお、半径はデフォルトのピクセル値だけでなく、実距離のキロメートル値で指定することもできます。
この場合、地図の縮尺が変わると、円の見た目の大きさが自動的に変化します。
ピクセル値で指定している場合は縮尺が変わっても円の見た目の大きさは変化しません。
キロメートル値で半径を指定する場合には、第三引数のオプションでunitを文字列で指定してください。
指定可能な値は以下の通りです。

unit 意味
"km" キロメートル値で半径を指定
"pixel" ピクセル値で半径を指定

半径100mの円を描く例は以下の通りです。地図の縮尺を変更して試してみてください。

var strokeStyle = new Y.Style("00ff00", 4, 0.7);
var fillStyle   = new Y.Style("00ff00", null, 0.2);
var circle = new Y.Circle(new Y.LatLng(35.64997652994234,139.72116702175174), new Y.Size(0.1, 0.1), {
    unit:"km",
    strokeStyle: strokeStyle,
    fillStyle:fillStyle
});

アイコンや図形を削除する

追加したアイコンや図形を削除するには、Y.Map.removeFeature()メソッドを使用します。
removeFeature()メソッドにはY.MarkerY.Polylineといったオブジェクトそのものを引数として渡します。
削除する予定のあるオブジェクトは退避しておいてください。

//追加してすぐ削除
var marker = new Y.Marker(new Y.LatLng(35.64997652994234,139.72116702175174));
ymap.addFeature(marker);
ymap.removeFeature(marker);



JavaScriptで地図を操作する

JavaScriptマップAPIでは地図の生成後にも、表示位置や縮尺などを動的に変更できます。
ユーザーの入力に応じて地図を操作したり、検索結果を表示するために地図を移動するなどの実装を行うために利用してください。
地図操作のためのAPIには以下のようなものがあります。

地図の初期表示

Y.Map.drawMap()メソッド、Y.Map.drawBounds()メソッドは、地図の初期化後はじめて地図面を表示する際に用います。
drawMap()メソッドは中心位置の緯度経度(Y.LatLng)と表示する縮尺、および表示したい地図面のレイヤーセットIDを指定します。

ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL);

drawBounds()メソッドは、中心位置の代わりに表示したい地図の範囲をY.LatLngBoundsで指定します。縮尺は、範囲を含む縮尺の中で最も詳細なものが自動的に選択されます。

ymap.drawBounds(new Y.LatLngBounds(new Y.LatLng(35.64474545441354,139.71258395290408), new Y.LatLng(35.6552072629389,139.72975009059942)), Y.LayerSetId.NORMAL);

中心位置や縮尺の変更

地図の中心位置を変更するにはY.Map.panTo()メソッドを利用します。
panTo()メソッドは2つの引数を取ります。順に

  • 中心の緯度経度(Y.LatLng)
  • アニメーション処理の有無(boolean)

となります。中心の緯度経度のみ必須で、アニメーション処理の有無については省略時はfalseとなります。

ymap.panTo(new Y.LatLng(35.66572, 139.73100), true);

panTo()メソッドは中心位置を変更するだけで、縮尺を変更することはできません。
縮尺を変更する、また縮尺と中心位置を同時に変更する場合はY.Map.setZoom()メソッドを用います。
setZoom()メソッドは4つの引数を取ります。順に

  • ズームレベル(number)
  • アニメーション処理の有無(boolean)
  • 基準位置の緯度経度(Y.LatLng)
  • 基準位置を中心に移動するか(boolean)

となります。
基準位置の緯度経度は、指定するとその位置のピクセル座標が変わらないように地図の縮尺を変更します。
例えばユーザーがクリックした位置を動かすことなく縮尺を変更するスムーズなインターフェースを実現することが可能です。

var p = new Y.LatLng(35.64997652994234,139.72116702175174);
ymap.setZoom(20, true, p, false);

また第四引数をtrueにした場合、基準位置を地図の中心に移動した上で縮尺を変更します。

new Y.LatLng(35.64997652994234,139.72116702175174)
ymap.setZoom(20, true, p, true);

縮尺を1つ上げる、または下げる場合は簡易メソッドとしてY.Map.zoomIn()とY.Map.zoomOut()が用意されています。
引数無しで呼び出した場合、現在の中心位置を維持したまま縮尺を変更します。
Y.ZoomControlを追加することで表示される「+」「-」ボタンと同様の挙動になります。

ymap.zoomIn();

ymap.zoomOut();

zoomIn()およびzoomOut()にも、setZoom()と同様に、

  • 基準位置の緯度経度(Y.LatLng)
  • アニメーション処理の有無(boolean)
  • 基準位置を中心に移動するか(boolean)

を指定できます。引数の順番がsetZoom()と異なるので注意してください。
以下は、アニメーションを有効にし、基準位置を地図の中心に移動した上で縮尺を1つ上げるサンプルです。

new Y.LatLng(35.64997652994234,139.72116702175174)
ymap.zoomIn(p, true, true);

地図の種類の変更

Y.Map.setLayerSetID()メソッドを呼ぶことで表示する地図の種類を、Y.Mapの初期化後にも変更できます。

//初期化済みの地図を航空写真に切り替えます。
ymap.setLayerSet(Y.LayerSetId.PHOTO);

地図のサイズの更新

JavaScriptマップAPIの地図は、コンテナとなるDOMオブジェクトの中心が地図の中心になるように自動的に調整されて初期化されます。
初期化後にコンテナとなるDOMオブジェクトの大きさを変更した場合は、Y.Map.updateSize()を呼ぶことで中心位置の補正を行う必要があります。

以下はブラウザの画面一杯に地図を表示するサンプルです。
ウィンドウのリサイズイベント時に、Y.Map.updateSize()を呼んで中心位置を補正しています。
ymap.updateSize()をコメントアウトして挙動の違いを確認してみてください。

<!DOCTYPE html>
<html>
<body style="margin:0;padding:0;">
<div id="map" style="width:100%; height:100%"></div>

<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=【アプリケーションID】"></script>

<script type="text/javascript">
window.onload = function(){
    var ymap = new Y.Map("map");
    ymap.addControl(new Y.CenterMarkControl());
    ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL);

    $(window).bind("resize", function(e){
        ymap.updateSize();
    });
}
</script>
</body>
</html>

緯度経度やズームレベルの取得

JavaScriptマップAPIは現在の地図の状態を取得する手段を提供しています。

Y.Map.getCenter()は、現在の中心位置の緯度経度をY.LatLngオブジェクトで返します。
以下はY.Mapの初期化後、地図の中心位置を取得して表示するサンプルです。

<!DOCTYPE html>
<html>
<body>
<div id="map" style="width:400px; height:300px;"></div>
<span id="output"></span>

<script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=【アプリケーションID】"></script>

<script type="text/javascript">
window.onload = function(){
        var ymap = new Y.Map("map");
        ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL);

        document.getElementById("output").innerHTML = ymap.getCenter();
}
</script>
</body>
</html>

Y.Map.getZoom()は、現在の地図のズームレベルを取得します。
以下はY.Mapの初期化後、地図のズームレベルを取得して表示するサンプルです。

<!DOCTYPE html>
<html>
<body>
<div id="map" style="width:400px; height:300px;"></div>
<span id="output"></span>

<script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=【アプリケーションID】"></script>

<script type="text/javascript">
window.onload = function(){
        var ymap = new Y.Map("map");
        ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL);

        document.getElementById("output").innerHTML = ymap.getZoom();
}
</script>
</body>
</html>

座標系の変換

地図の座標は緯度経度で指定しますが、JavaScript中で取得するマウスのクリック位置などはピクセル座標です。
これらを相互に変換するメソッドが用意されています。
Y.Map.fromContainerPixelToLatLng()は、地図のコンテナとなるDOMオブジェクトの左上を(0,0)としたピクセル座標から、緯度経度座標に変換するメソッドです。
Y.Map.fromLatLngToContainerPixel()はその逆で、緯度経度座標から地図のコンテナとなるDOMオブジェクトのピクセル座標へと変換します。

以下は地図上のマウスカーソルの位置を、緯度経度に変換して表示するサンプルです。

<!DOCTYPE html>
<html>
<body>
<div id="map" style="width:400px; height:300px;"></div>
<div id="output"></div>
</div>

<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=【アプリケーションID】"></script>
<script type="text/javascript">
window.onload = function(){
    var ymap = new Y.Map("map");
    ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL);

    $('#map').bind("mousemove", function(e){
        var pos = $(this).position();
        var x = e.pageX - pos.left;
        var y = e.pageY - pos.top;
        var ll = ymap.fromContainerPixelToLatLng(new Y.Point(x, y));
        $('#output').html(x + ',' + y + '->' + ll.toString());
    });
}
</script>
</body>
</html>



イベントを利用する

JavaScriptマップAPIは、地図の移動やクリックなど、ユーザーの操作に対してさまざまなイベントを発生させています。
イベントに対する処理を記述することで、よりインタラクティブなサービスを構築できます。

イベントハンドラの登録

イベント発生時の処理を行うイベントハンドラは、Y.MapY.Markerなどのbind()メソッドを利用して登録します。

bind()メソッドは引数に

  • イベント名(文字列)
  • イベントハンドラ(関数オブジェクト)

を指定します。地図上でマウスをクリックした際のイベントハンドラを登録するサンプルは以下の通りです。

ymap.bind('click', function(latlng){
    alert(latlng.toString());
});

なおイベントハンドラ内では、対象となったオブジェクトがthisとして評価されます。
以下はY.Markerがクリックされた場合、それぞれの緯度経度を取得して表示するサンプルです。

var markerClicked = function(){
    var ll = this.getLatLng();
    alert(ll.toString());
}
var marker_a = new Y.Marker(new Y.LatLng(35.66497038132953,139.7285538253784));
var marker_b = new Y.Marker(new Y.LatLng(35.66648704437695,139.73132186508175));

marker_a.bind('click', markerClicked);
marker_b.bind('click', markerClicked);

ymap.addFeature(marker_a);
ymap.addFeature(marker_b);

イベントハンドラの削除

設定したイベントハンドラはunbind()メソッドで削除できます。
unbind()メソッドの引数にはbind()メソッドの戻り値として返されるイベントリスナーオブジェクトを指定します。
以下はclickのイベントハンドラ内でunbind()メソッドを呼ぶことで、一度だけクリックイベントを受け付けるようにしたサンプルです。

var markerClicked = function(){
    var eventlistener = this.__eventlistener__;
    this.unbind(eventlistener);
    alert("unbind event listener");
}
var marker_a = new Y.Marker(new Y.LatLng(35.66497038132953,139.7285538253784));
var marker_b = new Y.Marker(new Y.LatLng(35.66648704437695,139.73132186508175));

marker_a.__eventlistener__ = marker_a.bind('click', markerClicked);
marker_b.__eventlistener__ = marker_b.bind('click', markerClicked);

ymap.addFeature(marker_a);
ymap.addFeature(marker_b);

イベントの種類

JavaScriptマップAPIで利用可能な主なイベントは以下の通りです。

Y.Map

イベント名 イベントハンドラに渡される引数 説明
click クリック位置の緯度経度(Y.LatLng) 地図がクリックされたときに発生します。クリックされた位置の緯度経度値が渡されます。
dblclick クリック位置の緯度経度(Y.LatLng) 地図がダブルクリックされたときに発生します。クリックされた位置の緯度経度値が渡されます。
layersetchanged 新しいレイヤーセット(Y.LayerSet)、変更前のレイヤーセット(Y.LayerSet) 地図のレイヤーセットが変更されたときに発生します。変更後と変更前のレイヤーセットのオブジェクトが渡されます。
movestart   マウスによるドラッグやY.Map.panTo()メソッドなどによって地図の中心位置が変化する直前に発生します。
moveend   マウスによるドラッグやY.Map.panTo()メソッドなどによって地図の中心位置が変化した直後に発生します。この時点で中心位置の値は更新されていますので、Y.Map.getCenter()を呼ぶことで新しい中心位置の緯度経度が取得できます。
zoomstart   コントロールの操作やY.Map.setZoom()メソッドなどによって地図の縮尺値が変更される直前に発生します。
zoomend   コントロールの操作やY.Map.setZoom()メソッドなどによって地図の縮尺値が変更された直後に発生します。 この時点で縮尺値は更新されていますので、Y.Map.getZoom()を呼ぶことで新しいズームレベルの値が取得できます。
load   Y.Map.drawMap()やY.Map.drawBounds()などによって最初の地図描画が行われたときに発生します。

Y.Label Y.Marker Y.Polyline Y.Polygon Y.Circle共通

イベント名 イベントハンドラに渡される引数 説明
click   図形がクリックされたときに発生します。

Y.Markerのみ

イベント名 イベントハンドラに渡される引数 説明
mouseover   図形にマウスカーソルが重なったときに発生します。
mouseout   図形からマウスカーソルが離れたときに発生します。

サンプル

以下に、マーカーにマウスカーソルが重なるとマーカーの名称を表示し、マーカーをクリックするとその位置の緯度経度を表示した上でマーカーを削除するサンプルを示します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="map" style="width:400px; height:300px;"></div>
<div id="output"></div>

</div>

<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=【アプリケーションID】"></script>
<script type="text/javascript">
window.onload = function(){
    var ymap = new Y.Map("map"),
        onmouseover = function(){
            $('#output').html(this.__label__);
        },
        onmouseout = function(){
            $('#output').html('');
        },
        onclick = function(){
            $('#output').html(this.getLatLng().toString() + 'にあった' + this.__label__ + 'は削除されました');
            ymap.removeFeature(this);
        };

    ymap.bind('load', function(){
        var contents = [
                {lat:35.66497038132953, lng:139.7285538253784, label:'アトラスタワー六本木'},
                {lat:35.66648704437695, lng:139.73132186508175, label:'ザ・リッツ・カールトン東京'}
            ],
            i = 0, l = contents.length, marker = null;
        for(; i<l; i++){
            marker = new Y.Marker(new Y.LatLng(contents[i].lat, contents[i].lng));
            marker.__label__ = contents[i].label;
            marker.bind('mouseover', onmouseover);
            marker.bind('mouseout', onmouseout);
            marker.bind('click', onclick);
            ymap.addFeature(marker);
        }
    });

    ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL);
}
</script>
</body>
</html>



掲載情報について

掲載情報についてをご確認ください。