From 8cc4a5df9d21f05e065b70c5d57eaa718f9d295b Mon Sep 17 00:00:00 2001 From: HikeMap User Date: Sat, 10 Jan 2026 21:29:10 -0600 Subject: [PATCH] Fix fog of war inversion when zoomed in too far --- index.html | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/index.html b/index.html index 96f6413..d0f9906 100644 --- a/index.html +++ b/index.html @@ -5148,8 +5148,11 @@ fogCtx.fillRect(0, 0, width, height); // Helper function to draw a projected circle (handles rotation AND pitch) + // Returns true if circle was drawn, false if it covers entire canvas function drawProjectedCircle(ctx, centerLngLat, radiusMeters, numPoints = 48) { + const centerPoint = map.project(centerLngLat); const points = []; + for (let i = 0; i < numPoints; i++) { const angle = (i / numPoints) * 360; const edgeLngLat = destinationPoint(centerLngLat, radiusMeters, angle); @@ -5157,6 +5160,24 @@ points.push(edgePoint); } + // Check if the circle is larger than the canvas (zoomed in too far) + // Calculate approximate radius in pixels + const firstPoint = points[0]; + const radiusPixels = Math.hypot(firstPoint.x - centerPoint.x, firstPoint.y - centerPoint.y); + const canvasDiagonal = Math.hypot(width, height); + + // If radius is larger than canvas diagonal and center is on screen, + // the entire visible area is revealed + if (radiusPixels > canvasDiagonal && + centerPoint.x > -radiusPixels && centerPoint.x < width + radiusPixels && + centerPoint.y > -radiusPixels && centerPoint.y < height + radiusPixels) { + // Draw a rectangle covering the entire canvas instead + ctx.beginPath(); + ctx.rect(0, 0, width, height); + ctx.closePath(); + return false; // Indicates full canvas clear + } + // Draw the projected shape ctx.beginPath(); points.forEach((pt, i) => { @@ -5164,6 +5185,7 @@ else ctx.lineTo(pt.x, pt.y); }); ctx.closePath(); + return true; } // Homebase reveal (only if homebase exists)