Leafletのレイヤー

　Leafletでレイヤーのコントロール。

　Leafletのサイト参照　　　→

<div id = "map"></div>
<script>

の下

var map = L.map('map').setView([35.30, 138.30] , 5);
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png',{attribution: "<a href = 'https://maps.gsi.go.jp/' target = '_blank'>国土地理院</a>"})
.addTo(map);
L.control.scale()
.addTo(map);

を

var gsib = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png',{attribution: "国土地理院"});
var osm = L.tileLayer('https://tile.openstreetmap.jp/{z}/{x}/{y}.png',{attribution: 'Map data © OpenStreetMap'});

var map = L.map('map',{
center:[35.30, 138.30],
zoom:5,
layers:[gsib]
});

var baseMaps = {
"国土地理院　白地図":gsib,
"OpenStreetMap":osm
};

L.control.layers(baseMaps,null)
.addTo(map);
L.control.scale()
.addTo(map);

といった具合に改変。

　複数のタイルレイヤーをbaseMapsにまとめる。
　タイルレイヤー　L.tileLayerは３つでも４つでも……。

　baseMapsはベースマップの切り替え。国土地理院の地図にしたり、OpenStreetMapにしたり、GoogleMapにしたり、……。

　L.control.layersのnullの部分は、オーバーレイマップ　overlayMaps。今回は使っていないのでnull。

プロットいっぱいいっぱい　－最高気温－　　　→

　地図の右上にレイヤーのアイコンが表示されるので、クリック（タップ）してベースマップを切り替える。

　スマートフォンだとなかなか収まり良く表示できないが、CSSで

map{
height: 100%;
}

としておくのが割と無難。

　半径の小さい円は、スマートフォンのタップだと相当拡大しないとポップアップしない。
　　追）小縮尺の地図はL.circleよりL.circleMarkerのほうが良さそう

オーバーレイマップ

　オーバーレイマップについて追記。2020年７月の豪雨の記事の浸水推定図が一例。

　L.control.layers(baseMaps,overlayMaps)

のbaseMaps（ベースマップ）をnull。

　overlayMaps（オーバーレイマップ）は、（同一の）ベースマップの上にレイヤーを次々重ね合わせていく。
　チェックボタンで（同一）地図上のプロットや線の表示を切り替えることができる。
　opacityで透明度（透過率）設定。

<div id = "map"></div>
<script>

var gsib = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',{
attribution: "<a href = 'https://maps.gsi.go.jp/development/ichiran.html'>国土地理院　地理院タイル一覧</a>"});

var gsib2020 = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/20200703oame_kumagawa_0704dansaizu/{z}/{x}/{y}.png',{
opacity:0.8,
attribution: "<a href = 'https://maps.gsi.go.jp/development/ichiran.html'>国土地理院　地理院タイル一覧</a>"});

var map = L.map('map',{
center:[32.21 , 130.75],
zoom:12,
layers:[gsib]
});

var overlayMaps = {
"国土地理院地形図":gsib,
"2020年７月":gsib2020,
};

L.control.layers(null,overlayMaps)
.addTo(map);
L.control.scale()
.addTo(map);

</script>

目　次

オーバーレイマップ

タイルレイヤー

タイルレイヤー

　タイルレイヤーが使えるオンライン地図は、

　国土地理院
　地形図、空中写真、色別標高図（レリーフ）、
　オープンストリートマップ　OpenStreetMap
　余程ヘビーな使い方をしない限りフリー。
　領土問題のある地域の扱いが難点。
　OpenTopoMap
　日本のみならず世界中の地形図を見れる。
　Thunderforest
　同じく世界中の地形図が見れるが、APIキーが必要。

　GoogleMapをタイルレイヤーとして使う場合、

L.tileLayer(
'https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
{maxzoom:20,
subdomains:['mt0','mt1','mt2','mt3'],
attribution: 'Map data © GoogleMap'})

　衛星画像は

'https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',

か

'https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',

　後者は地名入り。
　地形（レリーフ）は

'https://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',

　結構面白いので、緯度　±○○.○○、経度　±○○○.○○の値を渡して（はみ出た値の処理はしていない）

　www.mitsumatado.com/memoma/map.html?ido=+51.51&kdo=-000.09

　www.mitsumatado.com/memoma/map2.html?ido=+35.30&kdo=+138.30

　といった具合に色々表示を試せるようにした。

　~~map.htmlをmapG.htmlにするとGoogleMapへ緯度、経度の値が渡る。~~
　追）途中から使えなくなった。