React+Mapbox 초기 세팅 🌍

Mapbox를 통해 GeoJSON 데이터를 테스트하기 위하여 React와 Mapbox를 연동하는 세팅을 진행하였다.

 

1️⃣ Create a React App with Vite

1.  Vite를 사용하여 React 프로젝트를 생성한다.

$ npm create vite@latest 'mapbox-react'

 

 

2. npm 모듈을 설치하고 실행한다.

$ cd mapbox-react
$ npm install
$ npm run dev

 

3. http://localhost:5173/ 에 접속하면 다음과 같은 화면이 나타난다. 🎉

2️⃣ Create a map container element

1. Mapbox GL JS는 특정 HTML요소(div)에 맵을 추가하는 방식으로 동작한다. 이를 맵 컨테이너라고 하며, 크기와 위치를 CSS로 지정해야 한다.

 

📌 src/App.tsx 수정:

import './App.css'

function App() {
  return (
    <>
      <div id='map-container' />
    </>
  )
}

export default App

 

📌 src/App.css 수정:

#root {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#map-container {
  height: 100%;
  width: 100%;
  /* temporarily set the background color so we can tell where the map container is positioned */
  background-color: lightgrey;
}

.sidebar {
  background-color: rgb(35 55 75 / 90%);
  color: #fff;
  padding: 6px 12px;
  font-family: monospace;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  margin: 12px;
  border-radius: 4px;
}

.reset-button {
  position: absolute;
  top: 50px;
  z-index: 1;
  left: 12px;
  padding: 4px 10px;
  border-radius: 10px;
  cursor: pointer;
}

 

📌 src/index.css 내용 삭제: (맵 컨테이너의 스타일을 방해하지 않도록)

/* index.css should be empty */

 

3️⃣ Add a Mapbox GL JS Map

📌 Mapbox GL 패키지 설치:

$ npm install mapbox-gl

 

📌 src/App.tsx 수정

• useRef hook 2가지
  • mapRef: 맵 인스턴스 유지, 이 컴포넌트의 lifecycle동안 맵 제어
  • mapContainerRef: 컨테이너의 HTML 요소를 노출하여 맵을 생성할 위치를 Mapbox GL JS에 알려줌
• 여기서 Access Token은 mapbox 홈페이지에서 할당받아 작성해준다.

import { useRef, useEffect } from 'react';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import './App.css';

function App() {
  const mapRef = useRef<mapboxgl.Map | null>(null); // 맵 인스턴스 참조
  const mapContainerRef = useRef<HTMLDivElement | null>(null); // 맵 컨테이너 참조

  useEffect(() => {
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; // 🔑 Mapbox Access Token 입력
    mapRef.current = new mapboxgl.Map({
      container: mapContainerRef.current as HTMLDivElement,
      center: [0, 0], // 🌎 초기 지도 위치 (경도, 위도)
      zoom: 2, // 🔍 초기 줌 레벨
    });

    return () => {
      mapRef.current?.remove(); // 컴포넌트 언마운트 시 맵 제거
    };
  }, []);

  return (
    <>
      <div id='map-container' ref={mapContainerRef} />
    </>
  );
}

export default App;

 

그럼 아래와 같은 화면이 뜬다! 🎉

 

참고

Use Mapbox GL JS in a React app