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

지난 시간에 이어 ReactJS와 Mapbox를 활용하여 지도에 Point를 표시하는 것을 해보겠습니다.

 

Mapbox를 사용하기에 앞서 GeoJSON이라는 것을 먼저 알아야 하는데

 

간단히 말하면 "위치 정보를 기반으로 다양한 지형을 표시하기 위한 표준"입니다.

https://datatracker.ietf.org/doc/html/rfc7946

 

이것을 왜 알아야 하나? 이유는 앞서 간단히 말했듯이 지도에서 어떠한 위치를 그리기 위해서는

 

GeoJSON 형식의 Data 포맷이 필요하기 때문입니다.(아래에서 코드로 자세히 표현하겠습니다)

 

GeoJSON은 다음과 같은 기본 포맷을 가집니다.

 

{"type": "Point", "coordinates": [lon, lat]}

(type은 예시로 Point만 적었는데 MultiPoint, LineString, Polygon 등 다양한 Type을 지원합니다. 위 링크 참조)

 

그리고 이 포맷들이 모여 다음과 같이 FeatureCollection을 이룹니다

 

{
  "type": "FeatureCollection",
  "features": [{}, {}, {},.....]
}

 

그래서 FeatureCollection 안에 있는 Feature들로 지도에서 위치 정보들을 표시합니다.

 

오늘은 그 Feature type 중 point를 이용하여 Mapbox로 표시해보겠습니다.

(이것 또한 API를 지원하기 때문에 매우 간단합니다.)

 

먼저 개념적으로 Mapbox의 API인 addSource와 addLayer를 알아야 하겠습니다.

 

함수명에서도 나타내듯이 addSource는 지도에서 그리기 위한 source를 추가하는 API이며

 

addLayer는 위의 source를 이용하여 그릴 layer입니다.

 

source : https://docs.mapbox.com/mapbox-gl-js/api/sources/

Sources | Mapbox GL JS

layer : https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addlayer

Map | Mapbox GL JS

이제 code로 표현해보겠습니다.

 

Mapbox addSource API

 

addSource API를 호출 후 첫 번째 인자로 source의 id를 적어줘야 합니다

 

필자의 경우 예시로 "source-id"라 하드코딩을 했는데 별도로 변수 선언을 하는 것을 추천합니다.

 

아래의 code에서도 나오겠지만 표시할 layer에서 어떠한 source의 id를 쓸 것인가에 저 값이 항상 같이 따라다닙니다

 

그리고 두 번째 인자로, 어떠한 type의 data를 표시할 것인지를 적습니다.

 

이번 예시에서는 GeoJSON을 활용할 것이기에 type을 geojson이라 선언했는데

 

API guide에 보시면 canvas, image, vector 등 다양한 type들을 지원합니다.

 

그리고 data에는 위에서 소개한 GeoJSON의 FeatureCollection을 넣어주면 끝입니다.

 

다음으로 addLayer입니다.

 

이것도 상당히 간단합니다.

Mapbox addLayer API

해당 Layer의 id를 적어주고(이것도 변수 선언을 추천합니다. 나중에 event 처리 시 layer의 id를 사용하게 됩니다)

 

어떠한 type으로 그릴 것인지(지원 type : background, fill, line, symbol, raster, circle, fill-extrusion, heatmap, hillshade, sky

)

 

그리고 addSource 시 사용했던 source의 id

 

마지막으로 circle type을 꾸미기 위한 옵션을 추가해주었습니다. (이건 예시를 위해 간단히 적었고 layer api를 확인하시면 어마한 옵션들을 확인하실 수 있습니다)

 

그리고 npm start로 시작해주면 다음과 같이 지도상에 빨간 point가 표시되는 것을 확인하실 수 있습니다

 

Red point

이렇게 API 사용 방법만 알면 상당히 간편하고 빠르게 지도 상에 정보를 표시할 수가 있습니다.

 

사실 이렇게만 표현하면 엄청 밋밋하기에

 

다음 시간에는 Point에 대해 interaction 할 수 있는 몇 가지 event들을 알아보겠습니다.

 

https://github.com/twoeuns/fe-react-mapbox/tree/geojson