Vibe coding with Mapbox GL JS

Watch a live coding session with Mapbox engineer Andrew Sepic as he builds an interactive web map. Using GitHub Copilot and Claude Sonnet 4 as coding collaborators, Andrew builds a project from scratch that incorporates custom data, user interactions, and dynamic map features. See how AI-assisted development accelerates the process of creating powerful, engaging web maps with Mapbox. Highlights include: - Live troubleshooting when the initial attempt to scaffold the app runs into issues, highlighting the importance of clear prompts and quick error correction. - After troubleshooting, a full-screen map centered on Mount Mansfield with 3D terrain and satellite imagery is successfully loaded. - GeoJSON data of hiking trails on Mount Mansfield is added to the map, with each trail styled with a different color. - A UI element is rendered on top of the map, listing trails with their names, colors, elevations, and distances, and featuring a scrollable card layout. - Click handlers are added to allow users to click on a trail card or map feature to highlight the trail and fly the map to a fit bounds around it, or to a predefined camera view if available. - The demonstration concludes with the addition of a configurable rain effect to the map and a title bar for the UI. Session links: Example of querying elevations from the DEM at runtime: https://docs.mapbox.com/data/tilesets/guides/access-elevation-data/