Trim hero map viewBox to land-bearing latitudes

The full equirectangular viewBox (-90..+90 lat) leaves a tall empty
ocean band at the bottom of the hero on wide viewports. Antarctica's
coastline only reaches ~lat -75 around its perimeter, so the bottom
~5° of the viewBox is always empty. Trim to -85..+85 so 'slice' fills
the hero with land texture instead of empty space. No distortion —
preserveAspectRatio still scales uniformly.
This commit is contained in:
Chad Curtis
2026-05-24 20:57:17 -05:00
parent ceb1995b6a
commit d2ec2a0f91
+11 -4
View File
@@ -28,11 +28,18 @@ function HeroLightningMapImpl({ className }: { className?: string }) {
const uid = useId();
const arcId = (key: string) => `${uid}-${key}`;
// viewBox is the equirectangular world: 360 wide × 180 tall, recentered
// so (0,0) is the geographic origin. We project [lng, lat] -> [lng, -lat]
// (SVG y grows downward).
// viewBox: equirectangular world projected as [lng, -lat] (SVG y grows
// downward). We keep the full 360° of longitude but trim the polar
// bands slightly. The full lat range (-90..+90) leaves a noticeable
// empty gutter at the bottom of the hero on wide viewports — Antarctica's
// coastline only reaches ~lat -75 around its perimeter and below that
// the projection is just empty ocean. Pulling the viewBox in to roughly
// the populated band (lat -LAT_RANGE..+LAT_RANGE) lets `slice` fill the
// hero with land texture instead of empty space, without distorting any
// geography — `preserveAspectRatio` still scales uniformly.
const W = 360;
const H = 180;
const LAT_RANGE = 85; // viewBox covers latitudes -85..+85
const H = LAT_RANGE * 2;
const landPaths = useMemo(() => {
return LAND_RINGS.map((ring, idx) => {