document.addEventListener("DOMContentLoaded", () => {
    // 朝日中央地区:
    var bounds = [[38.671707, 139.795534], [38.572461, 139.880335]]
    var center = [38.617121, 139.8417], inizoom = 13;
    var infobox = document.getElementById("info"),
	buttonA = document.getElementById("A"),
	buttonB = document.getElementById("B");
    var printbtn;
    // 左マップ
    var osm = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution:
	'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    });
    var gsiPhoto = L.tileLayer(
	'https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg',
	{attribution: '&copy; <a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>',
	 maxZoom: 20, maxNativeZoom: 18});
    var baseLayer = {
	OpenStreetMap: osm,
	地理院空中写真: gsiPhoto
    };
    var mymapL = L.map("leftmap", baseLayer).setView(center, inizoom);
    L.control.layers(baseLayer).addTo(mymapL);
    osm.addTo(mymapL);
    function showCorners(e) {
	let b=mymapL.getBounds(), b1=b.getNorthWest(), b2=b.getSouthEast();
	infobox.innerText = `${e&&e.latlng||""} bound=${b1}, ${b2}`;
    }
    mymapL.on('contextmenu', showCorners); // 右クリック → デバッグ情報提示
    // 右マップ
    var mymapR = L.map("rightmap").setView(center, inizoom);
    L.imageOverlay("asahi-chuo2.jpg", bounds).addTo(mymapR);
    mymapR.setMaxBounds(bounds);
    function syncmap(srcmap, destmap) { // mapをlatLng中心にする
	var z=srcmap.getZoom(), c=srcmap.getCenter()
	destmap.setZoom(z); destmap.setView(c);
	infobox.innerText = `Center: ${c}, zm=${z}`; // デバッグ情報提示
    }
    mymapL.on('zoomend', (e) => {syncmap(mymapL, mymapR);}); // ズームを同期
    mymapL.on('moveend', (e) => {syncmap(mymapL, mymapR);}); // 移動を同期
    function buttonAaction(e) {
	//Aボタンが押されたときの処理
    }
    function buttonBaction(e) {
	//Bボタンが押されたときの処理
	printbtn =  printbtn || L.control.BigImage({
	    position: 'topright', printControlLabel: "P", maxScale: 1
	}).addTo(mymapL);
	infobox.innerHTML =
	    "画像化したい範囲にピタリ合わせ、" +
	    "Pボタンを押しスケール1のままDOWNLOADボタンを押してください。" +
	    "このとき下に出る bound= の行を正確に記録してください。"
	buttonB.remove();
	document.getElementById("print-container").addEventListener("click", () => {
	    showCorners();
	});
    }
    buttonA.addEventListener("click", buttonAaction, false);
    buttonB.addEventListener("click", buttonBaction, false);
});