Scroll-Driven Map Journey with Camera Flights and Markers

What this builds

A long-form scrollytelling page where a sticky Mapbox GL JS map responds to narrative text steps scrolling alongside it. Each step triggers a camera flight to a new location, reveals markers or data layers, and adjusts the map style (zoom, pitch, bearing, fog, data visibility). The map is the visual medium; the text panels tell the story. This is the format used by NYT, Bloomberg, Reuters, and National Geographic for geographic narratives.

• A sticky full-height Mapbox GL JS map pinned in the viewport
• Camera flights (animated flyTo) triggered by scroll step detection
• Markers (custom HTML markers or GeoJSON points) that appear/disappear per step
• Data layers (choropleth fills, lines, heatmaps) that fade in/out per step
• 3D terrain and sky atmosphere for dramatic landscape sequences
• Act structure: establishing shot, journey through locations, climax location, resolution
• Responsive: map fills viewport on mobile, text overlays as cards
• prefers-reduced-motion: instant camera jumps, no flight animation