diff --git a/src/features/flights-map/components/MapCanvas.tsx b/src/features/flights-map/components/MapCanvas.tsx index 2bc9662b..a8fc3c85 100644 --- a/src/features/flights-map/components/MapCanvas.tsx +++ b/src/features/flights-map/components/MapCanvas.tsx @@ -258,20 +258,26 @@ export const MapCanvas: FC = ({ layer.clearLayers(); + // Arcs draw against the city's fixed coordinates, so we only need the + // marker to exist in the index. Gating on `map.hasLayer(m)` conflates two + // separate concerns: the zoom-tier LOD layers (which get added/removed as + // the user zooms) and the user's domestic/international filter. Checking + // `hasLayer` here made spider-mode destination arcs vanish when zooming + // out — the endpoint marker's tier layer had just been removed. for (const pl of polylines) { const styleOpts = POLYLINE_STYLES[pl.style]; - const visible: L.Marker[] = []; + const resolved: L.Marker[] = []; for (const cityId of pl.cityIds) { const m = markerIndexRef.current.get(cityId); - if (m && map.hasLayer(m)) visible.push(m); + if (m) resolved.push(m); } - if (visible.length < 2) continue; + if (resolved.length < 2) continue; const segments: L.LatLng[] = []; - for (let i = 0; i < visible.length - 1; i++) { - const from = visible[i]!.getLatLng(); - const to = visible[i + 1]!.getLatLng(); + for (let i = 0; i < resolved.length - 1; i++) { + const from = resolved[i]!.getLatLng(); + const to = resolved[i + 1]!.getLatLng(); const arc = buildGreatCircleArc(from, to); segments.push(...(i === 0 ? arc : arc.slice(1))); }