📍MapBox로 3D GeoJSON 표현하기GeoJSON 데이터를 MapBox에서 3D로 표현하고 싶다면, Height 속성을 이용해 3D 효과를 적용할 수 있다.1️⃣ MapBox 기본 세팅이전 글에서 MapBox 기본 세팅 방법을 다루었다. 기본 설정이 이미 되어있다면, 이 단계는 건너뛰어도 된다!React+Mapbox 초기 세팅 🌍2️⃣ GeoJSON 레이어 추가하기GeoJSON에 있는 height 속성을 기반으로 3D 효과를 주기 위해서, paint 속성을 설정해야 한다.여기서 중요한 점은 리터럴 함수를 사용하여 GeoJSON의 특정 필드를 참조할 수 있다는 점이다! 필요한 paint 속성:'fill-extrusion-color': 폴리곤의 색상. GeoJSON에 color 속성이 없으면, 직..

Mapbox를 통해 GeoJSON 데이터를 테스트하기 위하여 React와 Mapbox를 연동하는 세팅을 진행하였다. 1️⃣ Create a React App with Vite1.  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 element1. Mapbox GL JS는 특정 HTML요소(div)에 맵을 추가하는 방식으로 동작한다. 이를 맵 컨테이너라고 하며, 크기와 위치를 C..