First of all, we will create an account on the website of Mapbox.

And as soon as we create an account on the Mapbox website, I will post a token to us. which we will use in our program i.e. code

it will look something like this. ⬇️

NOTE : I have removed some words from this, please do not try it, it will not work. 😊😊😊😊😊 I just put for example.

pk.eyJ1IjoibmFaWQMTU1IiwiYSIImNrcWRhdGg1NzAzMsydm1seXBidXY3zEifQ.gHgXk-VTNt30bvKm_eMWyA

and after that, we will install an extension using npm or yarn.

$ npm i mapbox-gl

or

$ yarn add mapbox-gl

After installing we will import this extension. and we will access token so that he is ready to do his job.

We will access the token with something like. ⬇️

mapboxgl.accessToken = pk.eyJ1IjoibmFaWQMTU1IiwiYSIImNrcWRhdGg1NzAzMsydm1seXBidXY3zEifQ.gHgXk-VTNt30bvKm_eMWyA

and we will write code something like this using use state. So that our program is completely ready to run on the browser. and give us the output in the correct proof.

 const mapboxElRef = useRef(null);

    useEffect(() => {
        const map = new mapboxgl.Map({
            container: mapboxElRef.current,
            style: "mapbox://styles/notalemesa/ck8dqwdum09ju1ioj65e3ql3k",
            center: [27, 32],
            zoom: 2
        });

        map.addControl(new mapboxgl.NavigationControl());
    }, []);

and we will return our component. like that ⬇️ .

<div className="App">
       <div className="mapContainer">
           <div className="mapBox" ref={mapboxElRef} />
       </div>
</div>

And after that our complete map will be generated and will output something like this to the browser.

Live Demo and Project Code 👨‍💻

source code : github.com/NavidMansuri5155/World_Map.io

NOTE : This code outputs perfectly but the page is not uploaded after posting. 😔

---

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Instagram , Facebook, Twitter

Happy coding..👨‍💻