Leaflet地図：「国土地理院」と「Esri World Topo Map」に切り替え。サンプルソース。

先ほど、「Leaflet」と「OpenStreetMap」を使って、地図にマーカー表示を試した。

この地図を、「OpenStreetMap」から「国土地理院地図」と「Esri World Topo Map」に切り替えできるようにしてみた。以下のサイトを参考にした。

「Leaflet」では、これ以外にも多くの種類の地図を表示できる。表示できる地図のサンプル一覧がある。

JavaScriptに以下のコードを追加。

var Basic_Map = new Array();
Basic_Map[ 0 ] = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	continuousWorld: false
});
Basic_Map[ 1 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
	attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
});
Basic_Map[ 2 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {
	attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
});
Basic_Map[ 3 ] = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
	attribution: 'Tiles © <a href="http://www.esrij.com/"> Esri Japan </a>'
});
var baseMap = {
	"OpenStreetMap": Basic_Map[ 0 ],
	"国土地理院 標準地図": Basic_Map[ 1 ],
	"国土地理院 写真": Basic_Map[ 2 ],
	"Esri World Topo Map": Basic_Map[ 3 ]
};
L.control.layers(baseMap).addTo(map);