Newer
Older
2022-yuuji-TwinMapWithImage / 4dr.js
/* domon.js - 北緯38.891度, 東経139.824度, ズームレベル16 で地図表示 */
(() => {
    var infobox = document.getElementById("info");
    var mymapL = L.map("leftmap").setView([38.891, 139.824], 16);
    L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution:
	'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> 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}`;
    });
    var bounds = [[38.903357, 139.813385], [38.878639, 139.834585]];
    var mymapR = L.map("rightmap").setView([38.891, 139.824], 16);
    // LatLng(38.903357, 139.813385), LatLng(38.878639, 139.834585)
    L.imageOverlay("virtualmap.jpg", bounds).addTo(mymapR);
    mymapR.setMaxBounds(bounds);
    function syncmap(srcmap, destmap) { // mapをlatLng中心にする
	destmap.setZoom(srcmap.getZoom());
	destmap.setView(srcmap.getCenter());
    }
    mymapL.on('zoomend', (e) => {syncmap(mymapL, mymapR);});
    mymapL.on('moveend', (e) => {syncmap(mymapL, mymapR);});
})();