How to integrate Mapbox GL in react using hooks

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 !