Vibe coding with Mapbox GL JS
summary
Live coding builds a React + Vite app with Mapbox GL JS using GitHub Copilot and Claude Sonnet 4 as coding partners; initial scaffolding errors are fixed interactively, then a full‑screen map loads with 3D terrain and up‑to‑date satellite imagery. GeoJSON of Mount Mansfield hiking trails is added as per‑feature colored line layers, a scrollable card UI lists name, color, elevation, distance and grade, click handlers highlight or fly to fit bounds or a stored camera view, and a configurable rain effect is applied — all functioning after troubleshooting.
AI-written summary · about
chapters (12)
- 0:00Introduction to vibe coding
- 1:04Setting up the project
- 9:02Initial map configuration
- 17:30Rebuilding the app from scratch
- 25:39Adding 3D terrain and camera controls
- 29:01Loading and rendering trail data
- 32:20Building the trail listing UI
- 35:58Adding interactivity and trail selection
- 38:33Customizing trail views
- 40:02Adding weather effects
- 41:08Finalizing the UI
- 41:56Q&A and closing remarks
related talks
01h 34mBuild a Web Map with Open Source Tools
20mBuilding maps with Impact on React and the Jamstack
40mStronger App Architecture Using Maps
32m"A Developer's Guide to Open Source Web Mapping Libraries"
17mBoosting Map Performance with Mapbox and Flutter
30mA front-end dev epic journey into geography
49mSaving the world with JavaScript: A Data Visualization story
02h 02mInteractive 3D Web Mapping