From bb4c4d253418d5bc6e2dfaed71ad33bedd51061a Mon Sep 17 00:00:00 2001
From: Smittix <jamessmith1@outlook.com>
Date: Sat, 7 Feb 2026 14:32:16 +0000
Subject: [PATCH] Fix WebSDR map black space with dynamic minZoom and
 background color

Static minZoom: 2 wasn't enough for tall containers. Now calculate
minZoom from actual container height so tiles always cover the visible
area. Also set map background to match CartoDB dark tile ocean color
so any remaining edge at extreme latitudes blends seamlessly.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 static/js/modes/websdr.js | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/static/js/modes/websdr.js b/static/js/modes/websdr.js
index 6a0a48c..da18cfd 100644
--- a/static/js/modes/websdr.js
+++ b/static/js/modes/websdr.js
@@ -38,12 +38,16 @@ function initWebSDR() {
     const mapEl = document.getElementById('websdrMap');
     if (!mapEl || typeof L === 'undefined') return;
 
+    // Calculate minimum zoom so tiles fill the container vertically
+    const mapHeight = mapEl.clientHeight || 500;
+    const minZoom = Math.ceil(Math.log2(mapHeight / 256));
+
     websdrMap = L.map('websdrMap', {
-        center: [30, 0],
-        zoom: 2,
-        minZoom: 2,
+        center: [20, 0],
+        zoom: Math.max(minZoom, 2),
+        minZoom: Math.max(minZoom, 2),
         zoomControl: true,
-        maxBounds: [[-85, -Infinity], [85, Infinity]],
+        maxBounds: [[-85, -360], [85, 360]],
         maxBoundsViscosity: 1.0,
     });
 
@@ -51,9 +55,11 @@ function initWebSDR() {
         attribution: '&copy; OpenStreetMap contributors &copy; CARTO',
         subdomains: 'abcd',
         maxZoom: 19,
-        noWrap: false,
     }).addTo(websdrMap);
 
+    // Match background to tile ocean color so any remaining edge is seamless
+    mapEl.style.background = '#1a1d29';
+
     websdrInitialized = true;
 
     if (!websdrSpyStationsLoaded) {