From d05144bdb325d8cca2b6f88d6e33084cbedc5426 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) {