複数の地図タイルを切り替えるコントロール追加します。

（ズームごとタイルを切り替えたい場合は 🌏Leaflet 地図タイル切り替え(改) をご覧ください）

注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」

地図右上の菱形アイコンから地図を切り替える事ができます。ここではOpenStreetMapと国土地理院のタイルを選択できます。

コメント行のある部分がLeaflet - OpenStreetMap表示から追加された部分です（削除された部分は書いてありません）

html部分

<div id="mapid" style="width: 100%; height: 400px;"></div>

JavaScript部分

<script src="https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.js"></script>
<script>
  function cssLoad(cssFile){
    if(document.all){
      document.createStyleSheet(cssFile);
    }else{
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = cssFile;
      link.type = "text/css"
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  }
  cssLoad("https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.css");
  function addOnload(evtFunc){
    if(window.addEventListener) {
      window.addEventListener('load', evtFunc, false);
    } else if(window.attachEvent){ //IE用
      window.attachEvent('onload', evtFunc);
    } else {
      //alert('window.onload エラー');
    }
  }  
  var mymap;
  addOnload(function(){
    mymap = L.map('mapid');
 
 
    //タイルサーバーを登録します。
    //（注意：タイルサーバーはそれぞれ利用制限があります確認して利用して下さい）
    L.control.layers({
      "OpenStreetMap":L.tileLayer('https://c.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors, '
      }).addTo(mymap),
      "地理院 標準地図":L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>'
      }),
      "地理院 淡色地図(Zoom2～)":L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
        minZoom: 2,
        maxZoom: 18,
        attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>'
      }),
      "地理院 English(Zoom2～)":L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/english/{z}/{x}/{y}.png', {
        minZoom: 2,
        maxZoom: 18,
        attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>'
      }),
      "地理院 陰影起伏(Zoom2～)":L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/hillshademap/{z}/{x}/{y}.png', {
        minZoom: 2,
        maxZoom: 18,
        attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>'
      }),
      "地理院 写真(Zoom9～)":L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {
        minZoom: 9,
        maxZoom: 18,
        attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>( Zoom9～13:Landsat8画像（GSI,TSIC,GEO Grid/AIST）, Landsat8画像（courtesy of the U.S. Geological Survey）, 海底地形（GEBCO）)'
      })
    }).addTo(mymap);
 
 
    mymap.setView([35.6896, 139.6918], 8);
  });
</script>

マップの基本的な部分はLeaflet - OpenStreetMap表示をご覧ください

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