diff --git a/node_modules/pan-zoom/src/modules/pan.js b/node_modules/pan-zoom/src/modules/pan.js
index 844524d..596d41a 100644
--- a/node_modules/pan-zoom/src/modules/pan.js
+++ b/node_modules/pan-zoom/src/modules/pan.js
@@ -76,11 +76,7 @@ export default function (svg, el, e) {
 
   svg.addEventListener(
     'pointerup',
-    () => {
-      svg.removeEventListener('pointermove', pointerMove);
-      const t1Rect = t1.getBoundingClientRect();
-      console.log('trooper1 DOM x,y', t1Rect.x, t1Rect.y);
-    },
+    () => svg.removeEventListener('pointermove', pointerMove),
     { once: true }
   );
 }
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 3f6cd88..a708375 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -1,3 +1,12 @@
+.horz, .vert {
+  border: 1px solid black;
+  position: absolute;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
 body {
   margin: 0;
   display: flex;
diff --git a/public/index.html b/public/index.html
index 33d7085..4aeaaa0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -344,6 +344,11 @@
 
   <input type="file" accept="image/svg+xml" />
 
+  <div class="horz"></div>
+  <div class="horz"></div>
+  <div class="vert"></div>
+  <div class="vert"></div>
+
   <script src="index.js"></script>
   <script src="soldier_record_block.js"></script>
 </body>
diff --git a/src/index.js b/src/index.js
index 88cfced..a8e0c4b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -84,6 +84,23 @@ async function buildScenario(req) {
   // recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits());
   recordSheet.start(null, scenarioUnits);
 
+  const mapRect = mapResourceEl.getBoundingClientRect();
+
+  console.log('map viewport center', mapRect.width / 2, mapRect.height / 2, mapRect);
+
+  const [horz1, horz2] = document.querySelectorAll('.horz');
+  const [vert1, vert2] = document.querySelectorAll('.vert');
+
+  const hw = mapRect.width / 2 - 0.5;
+  const hh = mapRect.height - 1;
+  horz1.setAttributeNS(null, 'style', `top: ${0}px; left: ${mapRect.left}px; width: ${hw}px; height: ${hh}px;`);
+  horz2.setAttributeNS(null, 'style', `bottom: ${1}px; right: ${window.innerWidth - mapRect.right}px; width: ${hw}px; height: ${hh}px`);
+
+  const vw = mapRect.width;
+  const vh = mapRect.height / 2 - 1;
+  vert1.setAttributeNS(null, 'style', `top: ${0}px; left: ${0}px; width: ${vw}px; height: ${vh}px`);
+  vert2.setAttributeNS(null, 'style', `bottom: ${1}px; right: ${window.innerWidth - mapRect.right}px; width: ${vw}px; height: ${vh}px`);
+
   //const [_, trooper] = gameboard.getUnits();
   //Observable.notify('select', trooper);
   //gameboard.setCounter('prone');