最初に簡単な地図を作成してみましたが，これだけではWebGISとしては何もできないので，順を追って必要なものを追加していきます。
レイヤコントロール
標準的な地図や衛星写真など，ベースレイヤの地図タイルを切り替えたくなる場面があります。特に地理院地図の場合，重ね合わせ情報を見やすくするには淡色地図が有効ですし，付近の雰囲気をつかむにはオルソ画像（空中写真）が見たくなります。
まずは切り替えて表示させたいタイルレイヤすべてのオブジェクトを生成します。
地理院地図のタイルURLや，ズーム範囲はこちら（http://maps.gsi.go.jp/development/ichiran.html）で調べます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
//切り替え可能とするタイルレイヤを生成（タイルURL，ズーム範囲，著作権表示などをオプションで設定） var std = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { minZoom: 5, maxZoom: 18, attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" }) var pal = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', { minZoom: 5, maxZoom: 18, attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" }) var blk = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png', { minZoom: 5, maxZoom: 14, attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" }) var ort = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', { minZoom: 5, maxZoom: 18, attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" }) |
次に，最初の表示条件を設定した上で地図を生成します。最初は標準地図を表示させるため，ここでは上のオブジェクトのうち，stdのみを指定します。
|
1 2 |
//地図を生成（初期表示の中心座標，ズームレベル，レイヤなどをオプションで設定） var map = L.map('map', {center: [35.6846,139.7527], zoom: 12,layers: [std]}); |
最後に，パネルへの表示名，オブジェクト名を指定して，レイヤコントロールを追加します。
|
1 2 3 4 5 6 7 |
//レイヤコントロールに切り替え可能とするレイヤを追加 L.control.layers({ '地理院タイル（標準地図）': std, '地理院タイル（淡色地図）': pal, '地理院タイル（白地図）': blk, '地理院タイル（写真）': ort }).addTo(map); |
上のようにして追加すると，右上にレイヤアイコンが出て，マウスオーバーするとパネルが表示されます。
パネルを開きっぱなしにしておきたい場合は，最後の行を以下のように変更し，collapsedオプションをflaseにします。
|
1 |
}, null, {collapsed: false}).addTo(map); |
L.control.layers は，baselayer, overlay, option の順に指定します。今回は overlay（重ね合わせ情報）は使っていませんので，nullと指定しています。オプションではレイヤコントロールの位置を4隅の違う場所に変更できますが，デフォルトのまま（右上）でいいでしょう。
スケール
スケールコントロールを同様に追加します。これは以下のように1行で済みます。日本人にはフィート単位表示はなじまないので非表示にしておきます。
|
1 2 |
//スケールコントロールを追加（オプションはフィート単位を非表示） L.control.scale({imperial: false}).addTo(map); |
こちらもコントロールの位置を変更できますが，デフォルトのまま（左下）でいいでしょう。
以上，全体のコードは以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html><html> <head><title>Leaflet レイヤ・スケールコントロールサンプル</title> <meta charset="UTF-8"> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> <style> body {padding: 0; margin: 0} html, body, #map {height: 100%; width: 100%;} </style> </head> <body> <div id="map"></div> <script> //切り替え可能とするタイルレイヤを生成（タイルURL，ズーム範囲，著作権表示などをオプションで設定） var std = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { minZoom: 5, maxZoom: 18, attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" }) var pal = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', { minZoom: 5, maxZoom: 18, attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" }) var blk = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png', { minZoom: 5, maxZoom: 14, attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" }) var ort = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', { minZoom: 5, maxZoom: 18, attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" }) //地図を生成（初期表示の中心座標，ズームレベル，レイヤなどをオプションで設定） var map = L.map('map', {center: [35.6846,139.7527], zoom: 12,layers: [std]}); //レイヤコントロールに切り替え可能とするレイヤを追加 L.control.layers({ '地理院タイル（標準地図）': std, '地理院タイル（淡色地図）': pal, '地理院タイル（白地図）': blk, '地理院タイル（写真）': ort }, null, {collapsed: false}).addTo(map); //スケールコントロールを追加（オプションはフィート単位を非表示） L.control.scale({imperial: false}).addTo(map); </script> </body> </html> |