React 맵 라이브러리 개요 + react-leaflet 전체 설치 디버깅 가이드

React를 위한 좋은 맵 라이브러리를 찾던 중 react-leaflet이 눈에 들어왔습니다.
react-leaflet은 모바일 친화적인 대화형 지도를 위한 오픈 소스 JavaScript 라이브러리인 leaflet을 완전히 재작성한 반응 라이브러리입니다.

React 맵 라이브러리

react-leaflet 외에도 몇 가지 다른 옵션이 있습니다. 이 라이브러리를 사용하지 않은 이유는 무엇입니까?

React Simple Maps
일반적으로 훌륭한 도서관. 사용하기 매우 쉽고 몇 가지 예제와 함께 괜찮은 문서도 있습니다. 또한 이름 그대로 매우 가볍습니다. 그러나 마커로 정확한 위치를 표시해야 한다는 제 목적에는 맞지 않았습니다. 예, React Simple Maps를 사용하여 그렇게 할 수 있지만 훌륭한 기본 템플릿이 있는 맵이 있는 기존 라이브러리가 있는 동안 내 노력과 시간을 투자할 가치가 없는 전체 맵 템플릿을 다시 디자인해야 합니다.

React Mapbox GL
괜찮은 라이브러리이지만 권장하지는 않습니다. Mapbox의 원래 라이브러리는 훌륭한 예제로 잘 만들어졌지만 React에 대한 재작성은 잘 유지되지 않습니다. 예제가 거의 없고 온라인 리소스도 많지 않습니다. 문서도 충분하지 않습니다. 숙련된 고급 개발자가 아닌 이상 최선의 선택은 아닙니다.

React Google Maps
대단한 것 같았습니다. 하지만 API 키를 활성화하려면 구독이 필요하기 때문에 실감할 기회가 없었습니다. 구독을 감당할 수 있다면 확실히 가십시오!

왜 react-leaflet인가?

react-leaflet이 경쟁사(즉, react google maps)에 비해 가장 강력한 라이브러리라고는 말할 수 없습니다. 그러나 그것은 모든 것이 거의 없으며 그것은 내 목적을 달성하기에 충분했습니다.

좋은 지도 템플릿입니다. 템플릿이란 실제 맵 디자인을 의미합니다. 좋은 색 구성표와 정확한 거리 주석이 있는 지도가 필요했습니다. 실제 디자인과 관련하여 Google Maps API 또는 Mapbox GL에 뒤지지 않는다고 말하고 싶지만 작업을 수행했습니다.

좋은 예가 포함된 좋은 설명서입니다. 솔직히 말해서 문서가 최고는 아니지만 도망칠 수 있을 만큼 괜찮았습니다. 기존 예제는 설명이 부족했지만 코드 자체는 얼핏 보기에도 꽤 이해하기 쉬웠습니다. 문서와 예제의 품질이 가장 중요한 것은 아니었지만 두 번째로 매력적인 옵션인 react mapbox gl이 예제와 관련하여 훨씬 뒤처졌기 때문에 react-leaflet을 선택해야 했습니다.

설치

불행하게도, react-leaflet은 전문가가 있더라도 초보자를 위한 최고의 문서를 가지고 있지 않습니다. 설치부터 맵 설정까지 문서에 언급되지 않은 부분이 많습니다. 그래서 잠재적인 문제/결함을 위한 설치 디버깅 가이드를 제공해야겠다고 생각했습니다.

설치
시간이 있으면 installation page을 읽어보고 그렇지 않은 경우 터미널에서 이 명령을 실행하십시오. 반응 앱이 없다면 먼저 반응 앱을 시작하십시오.

npm install leaflet
******install react-leaflet after installing leaflet******
npm install react-leaflet

이러한 모듈을 설치한 후 기본 구성 요소를 가져옵니다.

import { MapContainer, TileLayer, useMap } from 'react-leaflet'

설정
마커가 있는 간단한 지도를 렌더링하려면 다음 코드를 반응 앱에 복사하여 붙여넣으세요.

<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
  <TileLayer
    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  <Marker position={[51.505, -0.09]}>
    <Popup>
      A pretty CSS3 popup. <br /> Easily customizable.
    </Popup>
  </Marker>
</MapContainer>

그것이 당신에게 잘 작동했다면 좋습니다!
하지만 이러한 문제가 발생하면 아래의 디버깅 가이드를 읽어보세요.

디버깅 가이드

모듈 오류
아래와 같은 오류가 발생하더라도 걱정하지 마세요!

 ./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   useEffect(function updatePathOptions() {
|     if (props.pathOptions !== optionsRef.current) {
>       const options = props.pathOptions ?? {};
|       element.instance.setStyle(options);
|       optionsRef.current = options;

여기에 해결책이 있습니다.package.json를 열고 변경

 "browserslist": {
   "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
},

에게

"browserslist": [
   ">0.2%",
  "not dead",
  "not op_mini all"
],

지도가 제대로 렌더링되지 않음

솔루션 1

코드에 다음 줄을 추가합니다.

import 'leaflet/dist/leaflet.css';

작동 안함? 솔루션 2가 작동합니다!

솔루션 2

index.html 로 이동합니다.<header> 에 다음 코드를 추가합니다.

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>

App.css 에 다음 코드를 추가합니다.

.leaflet-container {
  width: 100wh; 
  height: 100vh;
}

설치 단계에서 다른 문제가 발생하면 기꺼이 도와드리겠습니다. 의견 섹션에 문제를 드롭하십시오. 행복한 디버깅!