diff --git a/asahi.html b/asahi.html index d94dd6a..162a424 100644 --- a/asahi.html +++ b/asahi.html @@ -4,16 +4,24 @@ + + -

あさひたんけんマップ

+

あさひたんけんマップ +

+ + +
+ +
diff --git a/asahi.js b/asahi.js index 4b991a0..21f8838 100644 --- a/asahi.js +++ b/asahi.js @@ -1,31 +1,50 @@ -/* 朝日中央地区: LatLng(38.671707, 139.795534), LatLng(38.572461, 139.880335) */ document.addEventListener("DOMContentLoaded", () => { + // 朝日中央地区: var bounds = [[38.671707, 139.795534], [38.572461, 139.880335]] - var center = [38.617121, 139.8417]; - var inizoom = 13; - var infobox = document.getElementById("info"); + var center = [38.617121, 139.8417], inizoom = 13; + var infobox = document.getElementById("info"), + buttonA = document.getElementById("A"), + buttonB = document.getElementById("B"); + var printbtn; + // 左マップ var mymapL = L.map("leftmap").setView(center, inizoom); L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(mymapL); - mymapL.on('contextmenu', (e) => { - // alert(e.latlng); - let b=mymapL.getBounds(), - b1=b.getNorthWest(), b2=b.getSouthEast(); - infobox.innerText = `${e.latlng}, bound=${b1}, ${b2}`; - }); + 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); - // LatLng(38.903357, 139.813385), LatLng(38.878639, 139.834585) - var leftBounds = mymapL.getBounds(); L.imageOverlay("asahi-chuo2.jpg", bounds).addTo(mymapR); - // L.imageOverlay("asahi-chuo2.jpg", leftBounds).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}`; + infobox.innerText = `Center: ${c}, zm=${z}`; // デバッグ情報提示 } - mymapL.on('zoomend', (e) => {syncmap(mymapL, mymapR);}); - mymapL.on('moveend', (e) => {syncmap(mymapL, mymapR);}); + 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); });