[[:programming_start]] ====== Leaflet 地図タイル切り替え ====== 複数の地図タイルを切り替えるコントロール追加します。（ズームごとタイルを切り替えたい場合は [[layers2]] をご覧ください）注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 ---- ===== デモ ===== 地図右上の菱形アイコンから地図を切り替える事ができます。ここではOpenStreetMapと国土地理院のタイルを選択できます。

---- ===== ソースコード ===== コメント行のある部分が[[map]]から追加された部分です（削除された部分は書いてありません） html部分

JavaScript部分

---- ===== 説明 ===== マップの基本的な部分は[[map]]をご覧ください L.control.layersにタイルサーバーの情報と著作権表示を列挙します。最初に表示するタイルには最後に.addTo(mymap)を追加します。


L.control.layers({

  "【表示名】":L.tileLayer('【タイルサーバー指定のアドレス】', {
    maxZoom: 18,
    attribution: '【著作権表示】'
  }).addTo(mymap), //←ページを開いた時に最初に表示されるタイルのみ最後に.addTo()を付けます

  "【表示名】":L.tileLayer('【タイルサーバー指定のアドレス】', {
    maxZoom: 18,
    attribution: '【著作権表示】'
  }),

  "【表示名】":L.tileLayer('【タイルサーバー指定のアドレス】', {
    minZoom: 2,  // ズーム制限がある場合 下限と上限をセット
    maxZoom: 18,
    attribution: '【著作権表示】'

  })
}).addTo(mymap);

常時アイコンを開いた状態にしたい場合は最後の部分を下記のように書き換えます。


}).addTo(mymap);
↓
}, null, {collapsed:false} ).addTo(mymap);

表示位置は通常は右上ですが''topright'', ''bottomleft'', ''bottomright''に変更できます


}).addTo(mymap);
↓右下に移動
},null, {position:'bottomright'} ).addTo(mymap);
※他のオプションと併用する場合は
},null,{ collapsed:false , position:'bottomright' }).addTo(mymap);

タイルサーバーにはそれぞれ使用条件が定められていますので確認してからご利用下さい。 * OpenStreetMap ： [[https://www.openstreetmap.org/copyright]] * 国土地理： [[https://maps.gsi.go.jp/development/ichiran.html]]