[ReactJS] Mapbox js lib 활용 (1)

현업에서 하고 있는 업무를 진행하다 보니

전 세계 각 법인별 관리하고 있는 Place들에 대한 Management가 필요하여

이것저것 알아보던 중 Mapbox lib을 사용하여 Admin dashboard를 구성하게 되었습니다

사실 Mapbox 말고도 Google map이 있는데

어떻게 보면 Google Map은 Major이다만 최초 시작 당시 Mapbox에서 지원하는 API가 좀 더 우리의 방향성이 맞다고 생각하여 Mapbox로 시작하게 되었습니다

(몇 개월이 지난 지금, 사실 Google Map API를 다 보지는 못했지만 지원하는 부분이 서로 비슷비슷해 보임)

또 시작하기에 앞서 가격에 대한 얘기를 하고 싶은데

Load Map만을 기준으로 Mapbox는 50,000 call까지 공짜, 그 뒤로는 아래와 같이 가격표가 책정되어 있습니다

Google Map의 경우 $200/월로 Credit을 제공하고 하기와 같은 Service fee를 부과합니다

최초에는 서비스 규모가 어느 정도 가늠하기가 어렵고 DEV 단계에서 PoC를 확인하는 일이 많다 보니 어찌 보면 Mapbox에 더 끌려 시작된 게 아닌가 싶습니다

API Reference | Mapbox GL JS

The Mapbox GL JS API documentation to render interactive maps from vector tiles and Mapbox styles.

docs.mapbox.com

시작은 엄청 간단합니다

필자의 경우 React functional component를 사용했는데

useEffect에서 Mapbox JS API의 가이드대로 하기와 같이 추가하고 return div 영역에서 그려주기만 하면 됩니다

그리고 npm start를 해주게 되면 아래와 같이 빈 Map이 Load 됩니다

근데 유의할 사항이 Map을 Load 하는 시점입니다.

위의 코드에서 보듯이 render를 하는 시점과 useEffect를 호출하는 시점에 useRef를 사용하는데 ref가 참조 전에(null인 경우) map을 생성하게 되면 특정 DOM 선택 이전에 map을 생성하려기에 map이 나오질 않습니다

보통은 서비스가 static 하게 한번 뜨면 건드리는 경우가 많이 없어서 크게 그럴 일은 없다만

필자의 경우 별 이상한 요구사항이 많다 보니.....

다음 시간에는 GeoJSON 형식을 사용하여 지도에 원하는 것을 그리는 것을 해보도록 하겠습니다

[ReactJS] Mapbox js lib 활용 (2) - GeoJSON and Point (0)	2021.07.14

But seek first his kingdom and his right