Hi everybody this is my first post of hopefully many (knocks on wood). In this post i'll show how you can get mapbox gl to work in your react app. So lets get started.
This is what we will build
Below is a live working copy of the app we just built in code sandbox. You need to replace the access token with your own
Note: If you want to just use class components then mapbox has you covered. They have their own tutorial for that at https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/
The web app in the cover image is live at https://covid-19-dashboard-react.now.sh/
Here is what i assumed youve already have done by now
- Setup your react app using creat-react-app or using any other method.
Ok first thing you need to add is the mapbox-gl dependency
npm i mapbox-gl
next in your html file inside the public folder (assuming cra was used) add the following link
<link
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css"
rel="stylesheet"
/>
Next we set the access token (here youll need to use your own tokens)
mapboxgl.accessToken =
"pk.eyJ1Ijoia2hhdHRha2FobWVkIiwiYSI6ImNrZG95em15bDBwb3MyeHR2YWVvdGkwbnEifQ.Ac_1yEJqfx1X8aw1y1yiag";
Next in your App.js or anywhere really create the component which will contain mapbox
export default function App() {
return (
<div className="App">
</div>
);
}
Then use useState to store the lat,long and zoom level of the map. And useRefs to store references to the map object and the map html element in one place.
export default function App() {
const [state, setState] = useState({
lng: 5,
lat: 34,
zoom: 2
});
const mapContainer = useRef("");
const map = useRef(null);
return (
<div className="App">
</div>
);
}
Now we setup useEffect to run the map initialization code on component mount
export default function App() {
const [state, setState] = useState({
lng: 5,
lat: 34,
zoom: 2
});
const mapContainer = useRef("");
const map = useRef(null);
useEffect(() => {
// note how i set the map ref over here
map.current = new mapboxgl.Map({
// i also use the mapContainer ref to set the mapbox container option
container: mapContainer.current,
style: "mapbox://styles/mapbox/streets-v11",
center: [state.lng, state.lat],
zoom: state.zoom
});
}, []);
return (
<div className="App">
</div>
);
}
Next we setup the mapContainer ref
export default function App() {
const [state, setState] = useState({
lng: 5,
lat: 34,
zoom: 2
});
const mapContainer = useRef("");
const map = useRef(null);
useEffect(() => {
map.current = new mapboxgl.Map({
container: mapContainer.current,
style: "mapbox://styles/mapbox/streets-v11",
center: [state.lng, state.lat],
zoom: state.zoom
});
}, []);
return (
<div className="App">
<div style={style} ref={(el) => (mapContainer.current = el)} />
</div>
);
}
As of now the code should work but it does not show because we havent added styling to map yet
const style = {
position: "absolute",
top: 0,
right: 0,
left: 0,
bottom: 0
};
And voila you should have your map running
Thanks for reading !
Top comments (0)