Cara Mengintegrasikan Mapbox ke React

Hallo teman-teman! 😀 . Akhirnya saya kembali lagi menulis blog namun platform yang saya gunakan saat ini adalah Dev To. Ada beberapa alasan kenapa saya akhirnya memilih platform ini untuk blog saya. Mungkin saya akan tulis alasannya pada beberapa blog kedepan.
Mari kembali ke Mapbox.

Mapbox adalah sebuah package penyedia peta online yang berbasis di Amerika Serikat. Mapbox disini berperan sebagai pengganti google map dan saat ini banyak perusahaan atau individu beralih ke mapbox.

Untuk menggunakan mapbox pada React, teman-teman harus menginstal terlebih dahulu module mapbox. Berikut link instalasi doc

npm i mapbox-gl

Kemudian teman-teman perlu hook seperti useRef dan useEffect. Berikut snippet code untuk menampilkan mapbox pada React.

import "./styles.css";
import Mapboxgl from "mapbox-gl";
import { useEffect, useRef } from "react";

export default function App() {
  const map = useRef(null);

  useEffect(() => {
    Mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_ACCESS_TOKEN || "";
    map.current = new Mapboxgl.Map({
      container: "map",
      style: "mapbox://styles/mapbox/streets-v11",
      center: [101.52045303099948, 25.069771049083982]
    });

    map.current.zoomTo(19.5);
  },[]);
  return (
    <div>
      <div id="map" ref={map}/>
    </div>
  );
}