[ヅ] OpenStreetMap の地図が Yahoo! Open Local Platform で使えるように (2012-06-13)

OpenStreetMap の地図が Yahoo! Open Local Platform で使えるように (2012-06-13)

OpenStreetMap の地図が Yahoo! Open Local Platform で使えるようになったのでサンプルを作ってみた。
⇒ Three OpenStreetMap(s) on YOLP

サンプルでは以下の3種類を切り替えて表示できるようにしてみた。

Yahoo! OpenStreetMap: Yahoo! が OpenStreetMap のデータを加工した地図
Original OpenStreetMap: OpenStreetMap 純正の地図
Apple OpenStreetMap: Apple iOS版iPhotoで使われている地図

OpenStreetMap（以下、OSM）は、道路地図などの地理情報データを誰でも利用できるよう、フリーの地理情報データを作成することを目的としたプロジェクトです。世界中の地図が作成されており、OSM.orgにアクセスすれば、誰でも地図を編集できます。

冒頭で「最近話題の」と書きましたが、OpenStreetMapは最近メジャーなサービスで利用され始めています。例えば、チェックインサービスとして有名な「Foursquare」や、iOS端末用の写真編集アプリ「iPhoto」などで利用されています。

このOSMのデータをもとに、私達の地図デザインノウハウを活かして見やすく加工した地図を、YOLPで利用できます。

どんな地図かは、本日よりYahoo!ロコ - 地図でもOSMを利用できるようになりましたので、そちらを参照いただければと思います。ちなみに情報量としては、場所によっては標準地図よりOSMのほうが充実しています。

最近話題のOpenStreetMapがYOLPで利用可能に！ (Yahoo! JAPAN Tech Blog)

このサンプルを作ったのは3月だけどいまさらながらスクリーンショットをとっておく。

以下、スクリーンショット29枚。

OpenStreetMap on Yahoo! Open Local Platform

他に OpenStreetMap 関連のスクリーンショットはこのへん↓に置いてある。

参考までに今回のサンプルのソースコード(JavaScript部分)を一部抜粋。


<script>
function init(){
 
  // OpenStreetMap用のタイル画像URL生成器
  // Ref.
  // - 【A-3】次世代ジオロケーション サービスの開発手法 河合太郎 氏
  //   http://www.slideshare.net/devsumi/a3-9187250
  // - Slippy map tilenames - OpenStreetMap Wiki
  //   http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames
  var osmLayer = new Y.ImageTileLayer();
  osmLayer.getImageSrc = function(x, y, z){
    // OSMのzoom値はYOLPより1小さい値
    var osmz = z - 1;
    // 全世界を覆うためのタイルの縦横の枚数を計算
    var g = Math.pow(2, osmz);
    // OSMは原点(0,0)が左上で、YOLPは原点が左中央
    var osmx = x;
    var osmy = Math.floor((y + 0.5) * -1 + g / 2);
    // サブドメイン指定のローテーション
    var subdomains = ['a','b','c'];
    var subdomain = subdomains[x % 3];
    // URLを構築
    // http://[abc].tile.openstreetmap.org/zoom/x/y.png 
    var url = "http://" + subdomain + ".tile.openstreetmap.org/" + osmz + "/" + osmx + "/" + osmy + ".png";
    return url;
  };
 
  // iOS用iPhoto地図用のタイル画像URL生成器
  // Ref. Apple Map Tiles
  //      http://www.refnum.com/tmp/apple.html
  var appleLayer = new Y.ImageTileLayer();
  appleLayer.getImageSrc = function(x, y, z){
    // 地図が存在しないzがきたらnomap的な画像のURLを指定すべき
    // でも面倒だからとりあえずパス
    // iOS用iPhoto地図のzoom値はYOLPより1小さい値
    var applez = z - 1;
    // 全世界を覆うためのタイルの縦横の枚数を計算
    var g = Math.pow(2, applez);
    // iOS用iPhoto地図は原点(0,0)が左上で、YOLPは原点が左中央
    var applex = x;
    var appley = Math.floor((y + 0.5) * -1 + g / 2);
    // URLを構築
    var url = "http://gsp2.apple.com/tile?api=1&style=slideshow&layers=default&lang=de_DE&z=" + applez + "&x=" + applex + "&y=" + appley + "&v=9";
    return url;
  };
 
  var layerSetsValue = {};
  // ソースコード解析したら new Y.LayerSet(Y.OpenStreetMapLayer.LAYERSET_NAME,[new Y.OpenStreetMapLayer()]) ってのがみつかった
  layerSetsValue[Y.LayerSetId.OSM] = new Y.LayerSet("Yahoo! OpenStreetMap", [new Y.OpenStreetMapLayer()]);
  layerSetsValue["orgosm"] = new Y.LayerSet("Original OpenStreetMap", [osmLayer]);
  layerSetsValue["apple"] = new Y.LayerSet("Apple OpenStreetMap", [appleLayer]);
 
  var configureValue = {
    doubleClickZoom : true,
    scrollWheelZoom : true,
    singleClickPan : false,
    dragging : true
  };
 
  var map = new Y.Map("map", {
    configure: configureValue,
    layerSets: layerSetsValue
  });
 
  map.addControl(new Y.LayerSetControl());
  map.addControl(new Y.ScaleControl());
  map.addControl(new Y.SearchControl(), new Y.ControlPosition(Y.ControlPosition.BOTTOM_LEFT, new Y.Size(0, 20)));
  map.addControl(new Y.SliderZoomControlVertical());
  map.drawMap(new Y.LatLng(35.170727, 136.882603), 15, Y.LayerSetId.OSM); // 名古屋駅
}
 
window.onload = init;
</script>

Ref.

tags: openstreetmap yahoo_maps_api

Posted by NI-Lab. (@nilab)

ヅラッシュ！ by NI-Lab.

OpenStreetMap の地図が Yahoo! Open Local Platform で使えるように (2012-06-13)