From 299184712ad4ffca71780829c81210b50fe0e122 Mon Sep 17 00:00:00 2001
From: rouggy <legreg002@hotmail.com>
Date: Sun, 28 Jun 2026 20:38:59 +0200
Subject: [PATCH] fix: beam heading full color

---
 frontend/src/components/MainMap.tsx | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/MainMap.tsx b/frontend/src/components/MainMap.tsx
index bc8beff..c1125a0 100644
--- a/frontend/src/components/MainMap.tsx
+++ b/frontend/src/components/MainMap.tsx
@@ -164,21 +164,19 @@ export function WorldMap({ fromGrid, toGrid, fromLabel, toLabel, beamAzimuths, b
           return out;
         };
         for (const az of beamAzimuths) {
-          // Draw the lobe as a FAN of translucent great-circle radials, not a
-          // filled polygon: a polygon breaks badly near the poles on Mercator
-          // (its edges run off toward ±90° and the fill smears across the map),
-          // while each radial LINE stays clean. The overlapping lines read as a
-          // lobe — solid near the antenna, fanning out toward the front. Works
-          // for any azimuth, north/south included.
-          for (let b = az - half; b <= az + half + 0.001; b += 1.5) {
-            const line = unwrapLon([[from.lat, from.lon], ...radial(b)]);
-            L.polyline(line as L.LatLngExpression[], { color: '#ff2d2d', weight: 6, opacity: 0.12, smoothFactor: 0 }).addTo(wo);
-          }
+          // Draw the lobe as a single FILLED shape that HUGS the great-circle
+          // curve: bound it by the two edge radials (az ± half-beamwidth), each a
+          // great-circle line, joined by a short far cap. Filling between the two
+          // curved edges follows the arc instead of making a straight triangle.
+          const edgeL = radial(az - half);
+          const edgeR = radial(az + half);
+          const lobe = [[from.lat, from.lon], ...edgeL, ...edgeR.slice().reverse()] as [number, number][];
+          L.polygon(unwrapLon(lobe) as L.LatLngExpression[],
+            { stroke: false, fillColor: '#ff2d2d', fillOpacity: 0.18, smoothFactor: 0 }).addTo(wo);
+
           const cl = unwrapLon([[from.lat, from.lon], ...radial(az)]);
           // Dark casing under the boresight so the bright dashed line stays
-          // readable on any basemap (esp. dark satellite imagery). Same dashArray
-          // as the red line so the casing tracks each dash — otherwise the wide
-          // casing peeks through the gaps and the line looks bumpy.
+          // readable on any basemap. Same dashArray so the casing tracks each dash.
           L.polyline(cl as L.LatLngExpression[], { color: '#000', weight: 4, opacity: 0.4, dashArray: '5 4', smoothFactor: 0 }).addTo(wo);
           L.polyline(cl as L.LatLngExpression[], { color: '#ff2d2d', weight: 2, opacity: 0.95, dashArray: '5 4', smoothFactor: 0 })
             .bindTooltip(`Beam ${Math.round(az)}°`, { permanent: false, direction: 'top' }).addTo(wo);