diff --git a/simple_analysis/templates/simple_analysis/simple_analysis.html b/simple_analysis/templates/simple_analysis/simple_analysis.html
index e49cb4d..1db8f58 100644
--- a/simple_analysis/templates/simple_analysis/simple_analysis.html
+++ b/simple_analysis/templates/simple_analysis/simple_analysis.html
@@ -2594,18 +2594,22 @@ function toggleTrafficPanel() {
 
 function _ensureFlowCanvas() {
     if (!SA.map) return null;
+    const mapEl = SA.map.getContainer();
     let c = document.getElementById(_trafficCanvasId);
     if (!c) {
         c = document.createElement('canvas');
         c.id = _trafficCanvasId;
-        c.style.cssText = 'position:absolute;top:0;left:0;pointer-events:none;z-index:10000;';
-        SA.map.getContainer().appendChild(c);
+        c.style.cssText = 'position:absolute;pointer-events:none;z-index:99999;';
+        // Insert as sibling AFTER map container to stay on top
+        mapEl.parentNode.insertBefore(c, mapEl.nextSibling);
     }
     const s = SA.map.getSize();
-    if (c.width !== s.x || c.height !== s.y) {
-        c.width = s.x; c.height = s.y;
-        c.style.width = s.x + 'px'; c.style.height = s.y + 'px';
-    }
+    const mr = mapEl.getBoundingClientRect();
+    const pr = mapEl.parentNode.getBoundingClientRect();
+    c.width = s.x; c.height = s.y;
+    c.style.width = s.x + 'px'; c.style.height = s.y + 'px';
+    c.style.left = (mr.left - pr.left) + 'px';
+    c.style.top = (mr.top - pr.top) + 'px';
     return c;
 }