デフォルトでは地理院地図(標準)が背景レイヤーとして表示されます.背景レイヤーは,複数のレイヤーを登録して切り替えて使うことができます.
背景レイヤーの設定は,Map生成時に行う方法と,生成後にaddBase()メソッドで追加する方法の2つの方法があります.
map()関数のパラメータオブジェクトのbasesフィールドに,Layerオブジェクトの配列として指定します.配列内の最後のものがデフォルト表示となります.なお,GSJMapのデフォルト表示で使われている地理院地図(標準)は,GSJ.DEFAULT_BASEで取得することができます.
Map生成後でも,MapオブジェクトのaddBase()関数で背景レイヤーを追加することができます.
背景レイヤーは,MapオブジェクトのsetBase()関数で切り替えることができます.この引数にはLayerオブジェクトのidまたはtitle属性の値を指定します(id属性が優先されます).
MapオブジェクトのfindBase()関数で背景レイヤーを検索することができます.この引数にはLayerオブジェクトのidまたはtitle属性の値を指定します(id属性が優先されます).最初に該当したものが返されます.
引数を省略すると,全ての背景レイヤーのリストが返されます.
MapオブジェクトのdelBase()関数で背景レイヤーを検索することができます.引数にはLayerオブジェクトを与えます.
サンプル( leaflet5_base.html ) 背景レイヤー
var map; map = GSJ.map( { owner: 'map', bases: [ GSJ.DEFAULT_BASE, { id: 'OpenAerialTiles', url: 'http://ttiles01.mqcdn.com/tiles/1.0.0/vy/sat/{z}/{x}/{y}.png', title: 'MapQuest Open Aerial Tiles', attribution: 'MapQuest', attribution_url: 'http://developer.mapquest.com/web/products/open/map', minZoom: 0, maxZoom: 13, } ], center: { lat: 34.637, lng: 137.409 }, zoom: 8, } ); map.addBase( { id: 'OpenStreetMap', url: 'http://tile.openstreetmap.org/{z}/{x}/{y}.png', title: 'Open Street Map', attribution: 'Open Street Map', attribution_url: 'http://osm.jp/', minZoom: 0, maxZoom: 13, } ); map.setBase( 'OpenAerialTiles' ); // 背景レイヤーをidで検索 showInfo( '#out1', map.findBase( '地理院地図(標準)' ) ); // 背景レイヤーをtitleで検索 showInfo( '#out2', map.findBase( 'Open Street Map' ) ); // 背景レイヤーを全て取得 // console.log( map.findBase() ); // map.delBase( 'OpenAerialTiles' ); // 未実装 function showInfo( selector, aLayer ){ var _s = '[' + aLayer.title + '] '; _s += 'id: ' + aLayer.id + ', url: ' + aLayer.url; document.querySelector( selector ).innerHTML = _s; }
地図上にポップアップウィンドウを表示させるには,Map.addPopup()メソッドを利用します.このメソッドの第1引数には位置を表すLatLngオブジェクトを,第2引数には表示させる文字列を指定します.
map.addPopup( { lat: 35.3606, lng: 138.7273 }, '富士山' );
ポップアップを削除するには,Map.delPopup()メソッドを使用します.
map.addPopup();
2014年7月10日更新