diff --git a/4dr.css b/4dr.css
new file mode 100644
index 0000000..a8db836
--- /dev/null
+++ b/4dr.css
@@ -0,0 +1,5 @@
+xdiv.mapstage {position: relative;}
+
+p.#info {border: 1px solid #444422;}
+div#leftmap {float: left; width: 44vw; height: 80vh; margin: 0 auto;}
+div#rightmap {width: 44vw; height: 80vh; margin: 0 auto;}
diff --git a/4dr.js b/4dr.js
new file mode 100644
index 0000000..e7d01aa
--- /dev/null
+++ b/4dr.js
@@ -0,0 +1,26 @@
+/* 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:
+ '© 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}`;
+ });
+ 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);});
+})();
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c33a0f5
--- /dev/null
+++ b/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+Map
+
+
+
+
+
diff --git a/virtualmap.jpg b/virtualmap.jpg
new file mode 100644
index 0000000..8059e19
--- /dev/null
+++ b/virtualmap.jpg
Binary files differ