GSJMap - 使用法

レイヤー

背景レイヤー

 デフォルトでは地理院地図(標準)が背景レイヤーとして表示されます.背景レイヤーは,複数のレイヤーを登録して切り替えて使うことができます.

背景レイヤーの設定

 背景レイヤーの設定は,Map生成時に行う方法と,生成後にaddBase()メソッドで追加する方法の2つの方法があります.

・basesフィールド

 map()関数のパラメータオブジェクトのbasesフィールドに,Layerオブジェクトの配列として指定します.配列内の最後のものがデフォルト表示となります.なお,GSJMapのデフォルト表示で使われている地理院地図(標準)は,GSJ.DEFAULT_BASEで取得することができます.

・addBase()関数

 Map生成後でも,MapオブジェクトのaddBase()関数で背景レイヤーを追加することができます.

背景レイヤーの切り替え

 背景レイヤーは,MapオブジェクトのsetBase()関数で切り替えることができます.この引数にはLayerオブジェクトのidまたはtitle属性の値を指定します(id属性が優先されます).

背景レイヤーの検索

 MapオブジェクトのfindBase()関数で背景レイヤーを検索することができます.この引数にはLayerオブジェクトのidまたはtitle属性の値を指定します(id属性が優先されます).最初に該当したものが返されます.
 引数を省略すると,全ての背景レイヤーのリストが返されます.

背景レイヤーの削除 2014-07-10時点で未実装

 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日更新