<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>B-ハウス</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
function init() {
var map = L.map('mapcontainer', { zoomControl: false });
map.setView([38.908133,139.833984], 20);
map.setMaxZoom(20);
var gsiattr = "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>地理院タイル</a>";
var gsipale = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', { attribution: gsiattr });
var osm = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png',
{ attribution: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors" });
var osmNoLabels = L.tileLayer('http://tiles.wmflabs.org/osm-no-labels/{z}/{x}/{y}.png',
{ attribution: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors" });
var baseMaps = {
"地理院地図（淡色地図）": gsipale,
"オープンストリートマップ": osm,
"OSM no labels": osmNoLabels
};
//GridLayerClassを変数に設定し、オーバーレイのタイルレイヤに設定
var zxyLayer = new GridLayerClass();
L.control.layers(baseMaps, { "XYZ": zxyLayer }).addTo(map);
osm.addTo(map);
zxyLayer.addTo(map);
}
//zxyを表示するタイルレイヤのクラス
var GridLayerClass = L.GridLayer.extend({
createTile: function (coords) {
//div要素でタイルを作成
var tileDiv = L.DomUtil.create('div', '');
tileDiv.setAttribute("style", "border: solid 1px");
//タイル要素の中にzxyを表示するdiv要素を作成
var coordsDiv = L.DomUtil.create('div', '', tileDiv);
coordsDiv.setAttribute("style", "position:absolute;background-color:white;padding:5px;border: solid 1px;left:10px;top:10px;font-size:15px");
coordsDiv.innerHTML = "z / x / y = " + coords.z + " / " + coords.x + " / " + coords.y;
return tileDiv;
},
});
</script>
</head>
<body onload="init()">
<div id="mapcontainer" style="position:absolute;top:0;left:0;right:0;bottom:0;"></div>
</body>
</html>
