[Mapbox] 회원가입 부터 예시 코드로 적용까지 해보자

반응형

https://www.mapbox.com/

Mapbox | Maps, Navigation, Search, and Data

맵박스 공식 사이트이다. 

 

1.Mapbox 회원가입 `Sign up` 클릭

 

2. 정보 입력 후, Create Account 클릭.
   - 이름
   - 조직명
   - 이메일
   - 사용자 명
   - 비밀번호

예시입니다.

 

3. 이후 결제에 필요한 카드 정보를 입력해야합니다.

   - 카드 번호

   - 유효기간, CVC

   - 국가

 

4.이번에는 로그인을 합니다 .

 

 

5.방금 회원가입한 아이디와 비밀번호를 입력 후 로그인 버튼을 클릭 합니다.

6. 로그인을 하고 Mapbox API Key를 발급 받아야 하니 그림과 같은 화면으로 이동합니다

 

7. `Default public token`의 token 값을 복사하여 개발에 사용합니다.

 

8. 먼저 맵박스 라이브러리를 설치합니다 .
terminal -> npm install mapbox-gl 

 

terminal -> npm install mapbox-gl

 

 

9. MapComponent 컴포넌트를 하나 만듭니다.

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

mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; // 여기에 발급받은 Access Token을 넣으세요

const MapComponent = () => {
  const mapContainer = useRef(null);

  useEffect(() => {
    const map = new mapboxgl.Map({
      container: mapContainer.current,
      style: 'mapbox://styles/mapbox/streets-v11', // 스타일 URL
      center: [131.52104, 37.14268], // 초기 위치
      zoom: 9 // 초기 줌 레벨
    });

    // 줌 및 회전 컨트롤 추가
    map.addControl(new mapboxgl.NavigationControl());

    return () => map.remove();
  }, []);

  return <div ref={mapContainer} style={{ width: '100%', height: '100vh' }} />;
};

export default MapComponent;

 

10.src/App.js 파일을 수정하여 MapComponent 컴포넌트를 사용합니다

import React from 'react';
import './App.css';
import MapComponent from './components/MapComponent';

function App() {
  return (
    <div className="App">
      <Map />
    </div>
  );
}

export default App;

 

11.src/App.css 파일에 스타일을 추가해봅시다.

.App {
  text-align: center;
}

#map {
  width: 100%;
  height: 100%;
}

 

이후 브라우저에서 http://localhost:3000을 열면 Mapbox 지도가 표시될 것이며. Mapbox Document에서 지도의 스타일, 초기 위치, 줌 레벨 등을 조절 하면 된다.

 

https://docs.mapbox.com/api/maps/styles/

Styles API | API Docs