How to Add an Interactive Map to Your React.js Project— Mapbox “react-map-gl”(Hooks)

Create an account from https://account.mapbox.com/

Take your token -you may use the first public token that it shows you on the dashboard- or create a new one

Chose map style from the “styles” section or you can design one.

İmport

import ReactMapGL, { Marker, Popup } from "react-map-gl";
import { useEffect, useState } from "react";

First, import the ReactMapGL property from “react-map-gl”;

Hook

const [viewport, setViewport] = useState({
latitude: 29.01182,
longitude: 13.12723,
zoom: 8,
width: "500px",
height: "500px"
});

Create a state named viewport including latitude, longitude, and zoom values.

React Map GL

//inside return
<ReactMapGL
{...viewport}
mapboxApiAccessToken=""
width="100px"
height="100px"
transitionDuration="200"
mapStyle=""
onViewportChange={(viewport) => setViewport(viewport)}
/>

Call viewport inside <ReactMapGL/>

Paste the API token inside mapboxApiAccessToken=`` and paste the style link inside mapStyle=`` but using a .env file would be more secure than pasting the token directly to the App.js file.

Marker Example

<Marker
latitude={p.lat}
longitude={p.long}
offsetLeft={-3.5 * viewport.zoom}
offsetTop={-7 * viewport.zoom}
>

You can create Markers and make your map more interactive.

Example Map

The resulting project might seem like this!

That's! All thank you for reading!