Yahoo! JavaScriptマップAPIの使い方

Google Maps APIじゃなくてあえてYahoo! JavaScriptマップAPIを勉強してみました。

理由としてはGoogleはゼンリンじゃなくなって、Yahooはゼンリンだからが理由です。私はゼンリン地図で育っております。ちなみに、ズームレベル20～11の詳細な地図については、株式会社ゼンリンから提供された情報をもとに作成されいてるようです。ズームレベルを11から10に変えるとコピーライトが変わります！

Yahoo! JavaScriptマップAPIですが、yahoo idがあればだれでも無料で使えます。まずはappidを発行してもらいます。（割愛）

一番簡単な地図の表示方法です。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://map.yahooapis.jp/js/V1/jsapi?appid="発行してもらって～""></script>
<script>
$(function(){
  var ymap = new Y.Map("google");
  ymap.drawMap(new Y.LatLng(34.6733039, 135.4969214), 17, Y.LayerSetId.NORMAL);
});
</script>
</head>
<body>
  <div id="google" style="width:400px; height:300px;margin:0 auto;"></div>
</body>
</html>

サンプル

Y.Mapをnewする

まずここから始まります。Y.Mapは地図です。drawMapメソッドは地図を表示するメソッドです。このメソッドを実行して初めてコンテナに地図が表示されます。

Y.Mapの引数は地図を表示するコンテナのid属性を指定します。ここではidはgoogleにしてます。

drawMapの引数は３つ必要

1つ目…new Y.Lating(緯度,経度)

2つ目…ズームレベル

3つ目…レイヤーセットID

1つ目で表示したい緯度経度を与えます。2つ目で地図のズームレベルを与えます。3つ目でレイヤーセットIDという標準地図だったり航空写真だったりを指定します。

ズームレベルはY.LayerSetId.NORMALの場合は１～２０までですが、レイヤーセットIDによって指定できる範囲は異なります。

ズームレベルをスライダーで表示する

できます。地図を表示した後に以下1行追加するだけです。

ymap.addControl(new Y.SliderZoomControlVertical());

サンプル

レイヤーを表示する

できます。地図を表示した後に以下1行追加するだけです。

地図、航空写真、地下街が表示されるようになります。変更することによりズームレベルの選択範囲も動的に変わります。

ymap.addControl(new Y.LayerSetControl());

サンプル

レイヤー表示したけど航空写真だけ非表示にしたい

できます。一旦addControlでレイヤー表示した後にremoveLayerSetメソッドを実行し、引数にレイヤーセットIDを指定して削除します。

ymap.addControl(new Y.LayerSetControl());
ymap.removeLayerSet(Y.LayerSetId.PHOTO); // 航空写真のみ削除

指定できるレイヤーセットIDは以下の通りです。

レイヤーセットID
Y.LayerSetId.NORMAL	標準地図
Y.LayerSetId.PHOTO	航空写真
Y.LayerSetId.B1	地下街
Y.LayerSetId.OSM	OpenStreetMap

サンプル

コントロール位置を指定する

ズームレベルはデフォルトはTOP_LEFTのようです。試しにTOP_RIGHTにしてみました。

ControlPositionクラスを使用します。ここではズームレベルを右上、レイヤーを右下に表示しました。

var position1 = new Y.ControlPosition(Y.ControlPosition.TOP_RIGHT);
var position2 = new Y.ControlPosition(Y.ControlPosition.BOTTOM_RIGHT);
ymap.addControl(new Y.SliderZoomControlVertical(), position1);
ymap.addControl(new Y.LayerSetControl(), position2);

サンプル

ズームレベルが地図から見切れてしまっていますね、、。どうしよう。。

コントロール位置をオフセット位置調整する

Sizeクラスを使えばオフセット位置を調整できるようです。ズームレベルに対してだけ位置調整しました。

ControlPositionクラスの第二引数にSizeクラスを指定します。

var offset = new Y.Size(40, 0); // Sizeクラス生成
var position1 = new Y.ControlPosition(Y.ControlPosition.TOP_RIGHT, offset); // 第二引数に指定しておく
var position2 = new Y.ControlPosition(Y.ControlPosition.BOTTOM_RIGHT);
ymap.addControl(new Y.SliderZoomControlVertical(), position1);
ymap.addControl(new Y.LayerSetControl(), position2);

これでズームレベルの位置を微妙に調整することが出来ました。

サンプル

雨雲レーダーをオーバーレイして表示する

地図に雨雲レーダーを重ねて表示することができます。

Mapクラスの第二引数にはオプションが指定できます。このオプションでweatherOverlay: trueとすることで雨雲レーダーが表示されるようになります。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://map.yahooapis.jp/js/V1/jsapi?appid=発行してもらって～"></script>
<script>
$(function(){
  var ymap = new Y.Map("google", {configure : {weatherOverlay: true}}); // この設定が必要
  ymap.drawMap(new Y.LatLng(34.6733039, 135.4969214), 14, Y.LayerSetId.NORMAL); // ズームレベルは15以下じゃないとだめ
  var offset = new Y.Size(40, 0);
  var position1 = new Y.ControlPosition(Y.ControlPosition.TOP_RIGHT, offset);
  var position2 = new Y.ControlPosition(Y.ControlPosition.BOTTOM_RIGHT);
  ymap.addControl(new Y.SliderZoomControlVertical(), position1);
  ymap.addControl(new Y.LayerSetControl(), position2);
});
</script>
</head>
<body>
  <div id="google" style="width:400px; height:300px;margin:0 auto;"></div>
</body>
</html>

雨雲レーダーを表示する際にズームレベルが15以下でないと表示されないようです。ここでは14としています。

サンプル

住所から検索して地図を移動する

住所を入力するコントロールがあります。Y.SearchControlというコントロールを使用すれば検索することが可能です。次の1行を追加します。