Yahoo 地図の復習

Yahoo!デベロッパーネットワーク – YOLP(地図)
Yahoo地図のjavascript API を使って地図を表示できます
java script マップの場合
ページ遷移せずに ドラッグ&ドロップで
地図の場所を動かしたり尺度変更などが可能
ちなみに、スマートフォンでこれを使うと
タッチ操作による自動スクロール
一部端末によっては
ピンチ操作で地図尺度の変更ができます
ただし
ピンチズーム機能
Y.Polyline、Y.Polygon、Y.Circleオブジェクトからのクリックイベント通知
がAndroid だとできません
地図を表示するには
Yahoo!アプリケーションIDが必要
これに関しては
Yahoo Maps API
に以前かきましたので、それを見ながら復習しました
https://e.developer.yahoo.co.jp/dashboard/

取得したYAHOO!アプリケーションIDを見れます
そして、IDを含んだリクエストURLに対して外部java script を読み込み
どんな地図を表示したいか設定
地図APIにアクセスするには
<script type=”text/javascript” charset=”utf-8″ src=”http://
js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=
YahooアプリケーションID
“></script>
となります
地図を表示するには
<!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>
というようになります
ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL);
は初期かした地図の表示で
35.66572, 139.73100 が中心の緯度経度
17 がズームレベル
Y.LayerSetId.NORMAL が
レイヤーセットIDになります
今回の Y.LayerSetId.NORMAL
は標準写真で、
これを
Y.LayerSetId.PHOTO にすれば航空写真に
Y.LayerSetId.B1 なら地下街
Y.LayerSetId.OSM なら 最近話題の OpenStreetMap
というようになります
ymap.addControl()
でコントロールの追加ができます
Y.SliderZoomControlHorizontal

地図の縮尺を変更するための横長スライダーをつけます
Y.SearchControl()

地図検索のユーザーインターフェースを表示
つまり、検索枠を追加します
Y.CenterMarkControl
で地図の中心位置を表示します
ymap.bind
はイベントに対する動作を設定します
このイベントとは
地図の移動やクリックなど
のことをいいます
簡単サンプルとして、地図をマウスクリックしたときの動作なら
ymap.bind(‘click’, function(latlng){
alert(latlng.toString());
});
となります
click を moveend にすると
マウスによるドラッグやY.Map.panTo()メソッドなどによって地図の中心位置が変化した
ときの動作になります
この時点で中心位置の値は更新されていますので
Y.Map.getCenter()
でで新しい中心位置の緯度経度が取得できます

Yahoo 地図の リファレンス

Yahoo 地図を使ったものを作るときに参考になる
リファレンスのリンクです
JavaScriptマップ
一番使いそうなのが
コントロールの追加になる
ymap.addControl(control);
の関連
例えば
地図の縮尺を変更する横長スライダー形式のユーザーインターフェースを表示
する
var control = new Y.SliderZoomControlHorizontal();
ymap.addControl(control);
とか
地図検索を追加する
var control = new Y.SearchControl();
ymap.addControl(control);
などなど

Yahoo!地図 SDK for Android を調べてます

Yahoo!地図 SDK for Android について情報収集しています
まだ、実験するために必要な情報を得ていないので
まずは必要な情報、そして参考になるサイトをみています
書籍をみると、ほとんどが Google Maps API になっているため
ネットで探すことにしました
Android Map SDK
Yahoo!地図 SDK for Android を使ってみました
などなど、検索すればいろいろとでてきそうです

Yahoo Map API の情報収集開始

Google Maps API が来年から有料となるため、
Yahoo 地図に乗り換えるべく、情報収集しています
検索だけでは効率が悪いため、Google アラートに登録し
情報収集することにしました
現在、参考になりそうなサイトとして
Yahoo!地図WEB APIでマップ表示
Yahoo!地図APIに挑戦
Yahoo!地図 JavaScriptマップAPI入門
ゼロからはじめるYahoo! Maps API
MIT Media Lab新所長、伊藤穰一とPivotalのCTO,Ian McFarlandが語る会に行った
です