qsl designer

frontend/src/components/MainMap.tsx

@@ -121,12 +121,13 @@ export function MainMap({ fromGrid, toGrid, fromLabel, toLabel, beamAzimuths, be
     // ── Antenna beam lobe(s) (drawn first, under the arc/markers) ──
     if (from && beamAzimuths && beamAzimuths.length) {
       const half = (beamWidth ?? 30) / 2;
-      const D = 9000; // lobe length (km)
+      const D = 5500; // lobe length (km) — short enough to rarely reach a pole
       const radial = (b: number): [number, number][] =>
         Array.from({ length: 14 }, (_, i) => {
           const d = destinationPoint(from.lat, from.lon, b, (D * (i + 1)) / 14);
           return [d.lat, d.lon] as [number, number];
         });
+      const edge = { color: '#dc2626', weight: 1.5, opacity: 0.6 };
       for (const az of beamAzimuths) {
         const arc: [number, number][] = [];
         for (let b = az - half; b <= az + half + 0.001; b += 2) {
@@ -139,10 +140,18 @@ export function MainMap({ fromGrid, toGrid, fromLabel, toLabel, beamAzimuths, be
           ...arc,
           ...radial(az + half).reverse(),
         ]);
-        L.polygon(ring as L.LatLngExpression[], {
-          color: '#dc2626', weight: 1, opacity: 0.5, fillColor: '#dc2626', fillOpacity: 0.14,
-        }).addTo(wo);
-        // Boresight (dashed centre line).
+        // A geodesic lobe that reaches near a pole can't be filled on a
+        // Mercator map without the polygon snapping across the whole world —
+        // draw just the two edges in that case; otherwise the translucent lobe.
+        if (ring.some(([la]) => Math.abs(la) > 82)) {
+          L.polyline(unwrapLon([[from.lat, from.lon], ...radial(az - half)]) as L.LatLngExpression[], edge).addTo(wo);
+          L.polyline(unwrapLon([[from.lat, from.lon], ...radial(az + half)]) as L.LatLngExpression[], edge).addTo(wo);
+        } else {
+          L.polygon(ring as L.LatLngExpression[], {
+            color: '#dc2626', weight: 1, opacity: 0.5, fillColor: '#dc2626', fillOpacity: 0.14,
+          }).addTo(wo);
+        }
+        // Boresight (dashed centre line) — always; great-circle polyline is safe.
         const cl = unwrapLon([[from.lat, from.lon], ...radial(az)]);
         L.polyline(cl as L.LatLngExpression[], { color: '#dc2626', weight: 1.5, opacity: 0.7, dashArray: '5 4' })
           .bindTooltip(`Beam ${Math.round(az)}°`, { permanent: false, direction: 'top' }).addTo(wo);