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)