Yahoo! JavaScriptマップAPI に OpenStreetMap と地理院地図を表示する

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

動作サンプル https://niwasawa.github.io/openstreetmap-and-chiriinchizu-on-yolp/

ソースコード

OpenStreetMap と地理院地図を表示するレイヤーのコード

// OSMと地理院地図のレイヤー
var OptLayers = {

 // OpenStreetMap の地図を表示するレイヤーを生成する
  createOpenStreetMapLayer() {
    var self = this;
    var layer = new Y.ImageTileLayer();
    layer.getImageSrc = function(x, y, z) {
      // 地図画像タイル座標を計算
      var t = self.calc(x, y, z);
      // 地図画像タイルアクセスをサブドメインに分散させる
      var subdomains = ['a', 'b', 'c'];
      var subdomain = subdomains[x % 3];
      // 地図画像タイル画像URLを組み立てる
      var url = 'http://' + subdomain + '.tile.openstreetmap.org/' + t.z + '/' + t.x + '/' + t.y + '.png';
      return url;
    };
    return layer;
  },

  // 地理院地図の地図を表示するレイヤーを生成する
  createChiriinChizuLayer() {
    var self = this;
    var layer = new Y.ImageTileLayer();
    layer.getImageSrc = function(x, y, z) {
      // 地図画像タイル座標を計算
      var t = self.calc(x, y, z);
      // 地図画像タイル画像URLを組み立てる
      var url = 'http://cyberjapandata.gsi.go.jp/xyz/std/' + t.z + '/' + t.x + '/' + t.y + '.png';
      return url;
    };
    return layer;
  },

  // YOLP地図画像タイル座標を、OSMや地理院地図のタイル座標に変換する
  calc(x, y, z) {
    t = {};
    t.x = x;
    t.z = z - 1;
    t.y = Math.floor((y + 0.5) * -1 + Math.pow(2, t.z) / 2);
    return t;
  }
};

Y.Map オブジェクトにレイヤーを追加することで、OpenStreetMap と地理院地図を表示することができる。

var map = new Y.Map('map');
map.addLayerSet('openstreetmap', new Y.LayerSet('OpenStreetMap', [OptLayers.createOpenStreetMapLayer()]));
map.addLayerSet('chiriinchizu', new Y.LayerSet('地理院地図', [OptLayers.createChiriinChizuLayer()]));

map.addControl(new Y.LayerSetControl());
map.addControl(new Y.SliderZoomControlVertical());
map.drawMap(new Y.LatLng(35.170700, 136.881700), 15); // 名古屋駅

OpenStreetMap と地理院地図のクレジットを表示するコード

今回は Y.Control クラスを継承して地図の左下にクレジットを表示するコントロールをつくる。

var LabelControl = function(labelHtml) {
  this.labelHtml = labelHtml;
};
LabelControl.prototype = new Y.Control();
LabelControl.prototype.getDefaultPosition = function() {
  return new Y.ControlPosition(Y.ControlPosition.BOTTOM_LEFT, new Y.Size(0, 0));
};
LabelControl.prototype.initialize = function(map) {
  var e = document.createElement('div');
  e.innerHTML = this.labelHtml;
  e.style.fontWeight = 'bold';
  e.style.fontSize = '12px';
  e.style.fontFamily = 'Arial';
  e.style.textAlign = 'left';
  e.style.padding = '0px';
  e.style.margin = '0px';
  e.style.color = 'black';
  return e;
};

// クレジット表記
var creditOpenStreetMap = new LabelControl('© <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors');
var creditChiriinChizu = new LabelControl('出典: <a href="http://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>');

レイヤーセット切替時にクレジット表記を変更する。

map.bind('layersetchanged', function(newLayerSet, oldLayerSet) {

  if (oldLayerSet) {
    var oldName = oldLayerSet.getName();
    if (oldName === 'OpenStreetMap') {
      map.removeControl(creditOpenStreetMap);
    } else if (oldName === '地理院地図') {
      map.removeControl(creditChiriinChizu);
    }
  }

  if (newLayerSet) {
    var newName = newLayerSet.getName();
    if (newName === 'OpenStreetMap') {
      map.addControl(creditOpenStreetMap);
    } else if (newName === '地理院地図') {
      map.addControl(creditChiriinChizu);
    }
  }
});

参考資料

WebAPI資料

• YOLP(地図):Yahoo! JavaScriptマップAPI - Yahoo!デベロッパーネットワーク http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/

地図タイル画像仕様

• YOLP(地図):タイル画像仕様 - Yahoo!デベロッパーネットワーク http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/cassette/tile.html

• Slippy map tilenames - OpenStreetMap Wiki https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames

• 地理院地図｜地理院タイル仕様 http://maps.gsi.go.jp/development/siyou.html

• 地理院地図｜地理院タイル一覧 http://maps.gsi.go.jp/development/ichiran.html

利用規約資料

-Yahoo!デベロッパーネットワーク:クレジット表示 - Yahoo!デベロッパーネットワーク http://developer.yahoo.co.jp/attribution/
- OpenStreetMap http://www.openstreetmap.org/copyright
- JA:Legal FAQ - OpenStreetMap Wiki http://wiki.openstreetmap.org/wiki/JA:Legal_FAQ
- Tile Usage Policy https://operations.osmfoundation.org/policies/tiles/
- JA:タイル利用規約 - OpenStreetMap Wiki http://wiki.openstreetmap.org/wiki/JA:%E3%82%BF%E3%82%A4%E3%83%AB%E5%88%A9%E7%94%A8%E8%A6%8F%E7%B4%84
- 地理院地図｜地理院タイルのご利用について http://maps.gsi.go.jp/help/use.html

動作サンプル

• OpenStreetMap & 地理院地図 on Yahoo! JavaScriptマップAPI https://niwasawa.github.io/openstreetmap-and-chiriinchizu-on-yolp/