Building with Mapbox GL JS in React
summary
Live demo builds a React wrapper that instantiates Mapbox GL JS via a ref, mirrors props with useEffect hooks, and sets mapboxgl.accessToken; buttons change camera by updating state which triggers map.flyTo, clicks append timestamped marker objects to state and a React Marker class component mounts/unmounts DOM markers cleanly, a Marker list UI deletes them, and a GeoJSON subway-stops source plus a filtered highlight layer shows selection — the demo runs end-to-end in the session.
AI-written summary · about
chapters (10)
- 0:00Introduction and logistics
- 2:16Using Mapbox GL JS in React
- 3:44Mental model and wrappers
- 7:10Live coding: setting up the map
- 15:05Controlling the map with state
- 20:41Implementing markers with state
- 29:28Using a marker component
- 31:43Syncing markers with a list
- 35:42Adding GeoJSON data and interactions
- 42:35Q&A and closing remarks
related talks
19mFrom Imperative to Declarative: Simplifying JavaScript APIs with React.js
18mBuilding Maps with Impact on React and the JAMstack
22mIntegrating React.js and Shiny
20mBuilding maps with Impact on React and the Jamstack
15mGetting Started with React
36mBlasting React into Space: Building fluid interface swith React and WebGL
27mMixed Mode React
44mModern React Applications