DEV Community

Surya Tech
Surya Tech

Posted on • Updated on

Cara Mengintegrasikan Mapbox ke React

image

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
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

Demikian blog untuk kali ini. Teman-teman bisa follow akun media soaial Surya Tech.

Selamat mencoba. 👏

Instagram.

Top comments (0)