From 18ab969e1c357dbe780f34fbd7ded2fde778ac1b Mon Sep 17 00:00:00 2001 From: gnezim Date: Fri, 17 Apr 2026 22:40:46 +0300 Subject: [PATCH] Keep flights-map arcs visible when zoom tier layers are removed syncPolylines filtered endpoints by map.hasLayer(marker), which drops polylines whose endpoint's zoom-tier layer was just removed by syncVisibility. Result: in spider mode, arcs to small/distant cities vanished when the user zoomed out. Arc coordinates are fixed by the city's lat/lng; render them as long as the markers exist in the index. User-level filtering (domestic / international) already happens upstream in filterRoutes, so the hasLayer gate was both incorrect and redundant. --- .../flights-map/components/MapCanvas.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) 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))); }