Mapbox 및 ReactJs로 위치 앱 빌드(1부)

소개

안녕하세요 !
반응 앱 시리즈의 Mapbox 통합 중 하나인 이 튜토리얼에 오신 것을 환영합니다. 이 시리즈에서는 Mapbox를 사용하여 위치 애플리케이션을 빌드하고 프레임워크로 반응할 것입니다. 그러나이 튜토리얼에서는 먼저 mapbox를 사용하여 현재 위치를 얻을 것입니다.

전제 조건

이 튜토리얼을 따라하려면 react에 대한 기본적인 이해가 있어야 합니다. mapbox는 걱정하지 마세요. 설치부터 통합까지 단계별로 설명하겠습니다. 이 시리즈에서 맞춤형 맵 디자인을 만들고자 하는 경우 대규모 애플리케이션용 맵박스를 사용하여 위치 앱을 개발하고 통합할 수 있습니다.

튜토리얼 지도

반응 애플리케이션 생성

종속성 설치

Mapbox 액세스 토큰 가져오기

Mapbox를 구현하고 현재 위치 가져오기

반응 앱 만들기

반응 애플리케이션을 생성하려면 터미널을 열고 다음 코드npx create-react-app locationapp를 실행합니다.
그런 다음 cd locationApp locationapp 폴더로 이동합니다.
실행할 마지막 코드는 code . 이며, 이 명령은 코드 편집기에서 생성된 앱을 여는 데 사용됩니다.

종속성 설치

npm install mapbox-gl 또는 yarn add mapbox-gl 를 실행하여 애플리케이션에 Mapbox를 설치합니다.
이제 첫 번째 및 주요 종속 항목이 설치되었으므로 액세스 토큰을 얻습니다.

mapbox 액세스 토큰 가져오기

Mapbox의 도구를 사용하려면 Mapbox 액세스 토큰이 필요합니다. Mapbox는 액세스 토큰을 사용하여 API 요청을 계정과 연결합니다.
액세스 토큰을 생성하려면 mapbox 공식website으로 이동하여 계정을 생성한 다음 프로필 dashbord로 이동하여 액세스 토큰을 생성합니다.

메모

이 액세스 토큰은 기밀이어야 하므로 항상 환경 변수로 사용하라고 조언할 수 있습니다.

맵박스 구현

튜토리얼의 이 부분에서는 연습에 뛰어들어 맵을 준비할 것입니다.
코드 편집기에서 파일Mapbox.js을 만들고 다음 코드를 작성합니다.

    import { useState, useEffect, useRef } from 'react';
    import mapboxgl from '!mapbox-gl';

    mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_TOKEN;

    const Mapbox = ( ) => {

    const mapContainer = useRef(null);
    const map = useRef(null);
    const [lng, setLng] = useState(29.235600);
    const [lat, setLat] = useState(-1.683500);
    const  zoom = 13 ;

    useEffect(() => {
        if (map.current) return;

        //////////////// STORE THE MAP IN THE REF ////////////
        map.current = new mapboxgl.Map({
            container: mapContainer.current,
            style: "mapbox://styles/mapbox/streets-v11",
            center: [lng, lat],
            zoom: zoom
        });

       ///////////// CREATE GEOLOCATION CONTROL TO GET THE CURRENT LOCATION ///////
        const userLocation = new mapboxgl.GeolocateControl({
            positionOptions: {
                enableHighAccuracy: true
            },
            trackUserLocation: true,
            showUserHeading: true
        });

       /////////////////////// GET CURRENT LOCATION COORDINATES //////////////////////////////////
            userLocation.on('geolocate', (e) => {
            const lng = e.coords.longitude;
            const lat = e.coords.latitude
            const position = [lng, lat];
            setLat(lat);
            setLng(lng);
        });

     ///////////////////////// ADD THE USER LOCATION CONTROL ON THE MAP ///////////////////
      map.current.addControl(userLocation,"top-right");
    }, [lat,lng, zoom]);

    return  <div 
               ref={mapContainer} 
               style={{
                               position: "absolute",
                               top: 0,
                               left: 0,
                               bottom: 0,
                               height: "100vh",
                               width: "100%"
                           }} 
                  />
     }

    export deafult Mapbox;

가져온 후 Mapbox.js 파일을 App.js에 이와 같이

  import Mapbox from './Mapbox';

     function App() {
        return (
             <div className="App">
               <Mapbox />
             </div>
         );
     }
    export default App;

이제 애플리케이션을 실행할 준비가 되었습니다. 터미널npm start에서 runnig를 실행해 보겠습니다.

결론

시리즈의 첫 번째 부분을 읽어 주셔서 감사합니다. 이 내용을 즐기고 여기에서 무언가를 배웠기를 바랍니다.
피드백과 질문이 있으시면 언제든지 저에게 연락해 주세요.
내 portfolio도 확인할 수 있습니다.