📝react-map-gl, Mapbox를 활용한 지도🗺 프로젝트 생성

📝react-map-gl, Mapbox를 활용한 지도🗺 프로젝트 생성 - React 프론트 편🚂

2021. 7. 23. 12:51ㆍ💙 React

| 1. React 설치

프론트앤드 폴더로 이동해 현재 폴더 내부(.)에 react를 설치한다.

cd frontend

npx create-react-app .

| 2. 폰트 선택

fonts.google.com

리액트 설치가 진행되는 동안 구글 폰트.com에 접속하여 프로젝트에 사용될 폰트를 골라 해당 코드를 복사한다.

[ 복사한 코드 ]

// link 코드
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;1,900&display=swap" rel="stylesheet">

// css 코드
font-family: 'Playfair Display', serif;

해당 코드를 프론트의 public폴더 > index.html 파일 내부에 붙여주면 프로젝트 속 글꼴 지정이 완료된다.

index.html에 작성할 css 스타일 코드가 2~3줄로 짧기 때문에 별도의 css 파일을 생성하지 않고 html 문서 내부에 style 코드를 작성해 준다. ( 코드가 길어지게 된다면 css 파일 생성을 필수! )

우선 글꼴 지정 전, 설치된 리액트 파일 속 불필요한 파일과 사용하지 않는 코드를 정리하는 작업을 진행한다.

| 3. React 폴더 최적화 작업 - 불필요 파일 및 코드 제거

1 ) public 폴더
> index.html를 제외한 파일을 모두 제거하고, index.html 파일 속 불필요한 코드를 정리한다.

index.html
주석 및 불필요한 코드는 제거하고, 프로젝트에 맞는 <title>을 작성해준다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>Travel Map</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

글꼴 지정을 위해 html 내부에 작성한다.

    <link href="https://fonts.googleapis.com/css2?family=Zen+Loop&display=swap" rel="stylesheet">
    <style>
      *{
        font-family: 'Zen Loop', cursive;
        margin :0;
      }
    </style>

2 ) src 폴더

> App.js 와 index.js 만 남겨두고 파일 제거한다.

App.js - 파일 속 css import와 같은 불필요한 코드를 제거한다.

function App() {
  return (
    <div> Travel Map</div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

yarn start 를 통해 글꼴 적용된 프로젝트가 정상 동작하는지 확인한다 💙

| 4. Mapbox에 접속해 지도 사용을 위한 토큰 키를 받아온다.

Maps, geocoding, and navigation APIs & SDKs | Mapbox

Integrate custom live maps, location search, and turn-by-turn navigation into any mobile or web app with Mapbox APIs & SDKs. Get started for free.

www.mapbox.com

위 사이트에 접속해 navbar 상단의 Products > Maps를 텝에 접속하면 퀄리티 좋은 다양한 지도 화면을 확인할 수 있다.

우선 회원가입 후 자신의 Account 페이지로 접속하면 하단에 프로젝트에 사용할 수 있는 token 키가 주어집니다 🐈

해당 token 값을 복사하여 front 속 .env 파일을 생성해 저장해줍니다.

REACT 애플리케이션 속 환경 변수는 변수명 앞에 REACT_APP_ 를 추가해 작성해주면 됩니다.

REACT_APP_MAP_TOKEN = Mapbox 토큰값

| 5. react-map-gl 설치 및 토큰키 연결

이제 받아온 토큰키를 활용해 다양한 지도를 사용할 수 있도록 본격 셋팅하러 출발~ 🛰

4-1) 'react-map-gl' 맵 라이브러리를 설치해줍니다.

yarn add react-map-gl

Vis.gl

Frameworks for WebGL-powered large-scale data visualization - Vis.gl

github.com

설치 진행되는 동안 위 Document 사이트에 접속해 get staeted를 클릭하면 코드 작성에 필요한 다양한 문서들을 확인할 수 있다.

import 를 통해 프로젝트 코드 내부에서 맵 라이브러리를 사용할 수 있으며, userState hook 내부에 너비, 높이 등에 관한 코드가 작성되어있습니다. 위 코드를 토대로 App.js를 아래와 같이 작성한다.

import { useState } from 'react';
import ReactMapGL from 'react-map-gl';

function App() {
  const [viewport, setViewport] = useState({
    width: 400,
    height: 400,
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 8
  });
  
  return (
    <div>
      <ReactMapGL
        {...viewport}
        mapboxApiAccessToken = {process.env.REACT_APP_MAP_TOKEN} // mapboxApiAccessToken 변수에 토큰값을 전달해줍니다.
        onViewportChange={nextViewport => setViewport(nextViewport)}
      />
    </div>
  );
}

export default App;

<ReactMapGL> 태그 사이 mapboxApiAccessToken 변수를 추가해주면 localhost:3000에 다음화면이 정상 작동된다.

실행화면이 뜨지 않는다면 종료 후 yarn start를 통해 리액트를 재실행 시켜준다.

지도를 전체 화면으로 표현하고 싶다면 useState 속 width: "100vw"와 height: "100vh" 로 조절해 주면 된다.

또한 현재 위치 샌프란시스에서 원하는 위도 경도 수정을 통해 장소를 변경이 가능하다.

위도 경도 값을 서울 부근으로 변경하고, 확대된 크기를 줄이고 싶으면 zoom 변수의 숫자를 낮춰주면 된다.

const [viewport, setViewport] = useState({
    width: "100vw", 	 // 지도 너비
    height: "100vh", 	 // 높이
    latitude: 37.562003, // 경도
    longitude: 127, 	 // 위도
    zoom: 4 		 // 확대 수치 💙
  });

| 6. 맵 위에 Marker 표기 코드 작성

API Reference > Marker 문서를 활용해 지도 위에 Marker를 작성한다.

react-map-gl | Marker

React wrapper for Mapbox GL JS

visgl.github.io

'react-map-gl' 라이브러리로 부터 Marker를 import 한 다음 <ReactMapGL> 태그 내부에 Marker 코드를 작성해준다.

롯데타워의 위도 경도 위치에 Marker를 표시해 보까유?

[ 추가된 코드 ]

import { Marker } from 'react-map-gl';

<Marker latitude={37.5125} longitude={127.102778} offsetLeft={-20} offsetTop={-10}>
    <h1> Lotte Towel is here </h1>
</Marker>

[ 전체 index.js 코드 ]

import { useState } from 'react';
import ReactMapGL, { Marker } from 'react-map-gl';

function App() {
  const [viewport, setViewport] = useState({
    width: "100vw",
    height: "100vh",
    latitude: 37.562003,
    longitude: 127,
    zoom: 8
  });
  return (
    <div>
      <ReactMapGL
        {...viewport}
        mapboxApiAccessToken={process.env.REACT_APP_MAP_TOKEN}
        onViewportChange={nextViewport => setViewport(nextViewport)}
      >
        <Marker latitude={37.5125} longitude={127.102778} offsetLeft={-20} offsetTop={-10}>
          <h1>Lotte Towel is here</h1>
        </Marker>
      </ReactMapGL>
    </div>
  );
}

export default App;

이제 css를 활용해 마커를 이쁘게 꾸며주도록 한다.

yarn add @material-ui/core @material-ui/icons

Material Icons - Material-UI

1,100+ React Material icons ready to use from the official website.

material-ui.com

material-icons로부터 위 아이콘을 import해와 <Marker> 태그 사이에 작성해준다.

import { Room } from '@material-ui/icons' ;

;

이때 지도를 확대할경우 위치가 고정된채 원하는 위치로 이동되지 않는데, 아이콘의 fontsize를 viewport.zoom * 5로 지정해주면 지도 사이즈에 맞는 적당한 크기로 잘 변동되는것을 확인 할 수 있다.

<Marker latitude={37.5125} longitude={127.102778} offsetLeft={-20} offsetTop={-10}>
      <Room style={{ fontSize: viewport.zoom * 5, color: "slateblue" }} />
</Marker>

| 7. 지도 디자인 변경

Gallery

Browse our collection of maps to see what's possible with Studio

www.mapbox.com

다시 Mapbox의 account 페이지로 접속해 Mapbox 스튜디오 디자인을 클릭한다

Design in Mapbox Studio 텝에 접속해 New styles를 클릭한다.

취향에 맞게 지도 디자인 커스터마이징을 완료했다면 다시 styles로 돌아와 해당 지도의 Style URL을 복사해 <ReactMapGL> 태그 속의 mapStyle로 작성해준다.

<ReactMapGL
        {...viewport}
        mapboxApiAccessToken={process.env.REACT_APP_MAP_TOKEN}
        onViewportChange={nextViewport => setViewport(nextViewport)}
        // 자신이 커스터마이징한 스타일 url 삽입
        mapStyle = "mapbox://styles/angluvpeng/ckrfpsp1f4o3417mxdnu564cw"
 >

| 8. 지도 핀에 팝업창 설정

Posted by Ang

'💙 React' 카테고리의 다른 글

하위 컴포넌트에 boolean(참/거짓) props 변수 전달 (0)	2021.11.27
함수 전달 렌더 에러 문제 & 리액트 className 작성법 정리 (0)	2021.11.15
[리액트] 마크다운 에디터 'react-md-editor' 설치 및 적용 방법 (feat. front) (0)	2021.09.29

태그

최근글

댓글

공지사항

아카이브