▶d3.js 튜토리얼 :: leaflet map 라이브러리 활용하기 ② leaflet map with GeoJSON

▶d3.js 튜토리얼 ::  leaflet map 라이브러리 활용하기 ② leaflet map with GeoJSON

---

지난 글에서 [▶d3.js 튜토리얼 :: Leaflet map 라이브러리 활용하기 ① 기본설정] 을 통해 기본적으로 html안에서 leaflet map을 어떻게 셋팅하는지에 대해서 살펴보았다. 이글에서는 이 leaflet map레이어위에 다른 데이터(여기서는 GeoJSON)를 엮는 과정을 살펴보려고한다.

leaflet with GeoJSON

---

이번에는 leaflet map에 GeoJSON을 활용하여 매핑하는 과정에 대해서 살펴보려고한다. GeoJSON은 d3에서도 많이 활용되는 지오데이터 형식이다. 이 형식은 매우 유연해서,  leaflet 맵을 처리하는데 있어서도 유연하게 작동하고있다.

GeoJSON이란?

GeoJSON은 다양한 지리적 데이터 구조를 표현하기 위한 인코딩 형식이다. GeoJSON객체는 점, 선, 다각형, MultiLineString, multiPolygon등을 표현해낸다.

***
GeoJSON의 Features는 기하학적 객체와 해당 객체에 대한 속성값을 포함하고,

feature collection은 features의 리스트를 뜻한다.

leaflet은 Features와 feature collection 두 타입 모두 지원하지만, features에 properties값을 설정해 활용하는 형태로 사용하는데 최적화 되어있다고 한다.

코드 실행 환경

---

기본적인 html의 구성은 지난 글[▶d3.js 튜토리얼 :: Leaflet map 라이브러리 활용하기 ① 기본설정]에서와 동일하다. 편의를 위해 html코드를 함께 첨부한다.

<leafletmap 예제코드 작성을 위한 기본 html코드>

leafletmap with d3 sample02.html

다운로드받아 메모장 또는 사용중인 편집기에서 연 후, <script>부분에서 이어서 작성한다.

1. map에 GeoJSON추가하기

---

+ 또한 빈 GeoJSON 레이어를 먼저 생성한뒤, 뒤에서 다양한 기능을 적용할 수 있게끔 '변수'에 할당할 수 있다.

2. geojson 데이터 생성하기.

---

geojson데이터가 있다면 불러와서 사용해도 좋지만, 우선은 전체적인 내용을 이애하기위하여 지금 작성하고 있는 위치에서 GeoJSON 타입의 데이터를 만들어서 사용하자.

이번에도 서울시청의 위도(lat), 경도(lon)값을 이용했다. GeoJSON형태가 익숙하지 않더라도 우선은 위의 형태의 코드를 작성해보자. (추후 실제 맵핑시에는, 이렇게 일일이 입력하지않아도 된다.) 여기서의 특징이라면

코드를 살펴보면 우리가 나타내고 싶어하는 위치에 대한 속성 또는 정보는 'properties'라는 객체 안에 담겨있으며, 이에 대한 위치정보(여기서는 위/경도값)와 타입은 'geometry'라는 객체안에 담겨있다.

3. GeoJSON 데이터를 그리기위한 레이어를 생성

---

위에서 GeoJSON데이터를 마련했으니, 이젠 이것을 그릴 '레이어'를 생성한다. 이것은 포토샵이나 일러스트레이터에서 사용하는 레이어개념과 동일하다.

위 코드는 다음과 같이 나누어 이해해 볼 수 있다.

var myLayer = L.geoJSON().addTo(map); // geojson 레이어를 'map'위에 추가한다.

myLayer.addData(geojsonFeature); // 생성한 geojson레이어에 앞서 마련해둔 geojsonFeature데이터를 추가한다.

4. 클릭시 동작하는 팝업 이벤트 생성

---

geojson레이어를 생성하고, 그위에 데이터를 씌워놓았다. 이제는 해당 위치를 클릭했을 때 반응하는 팝업이벤트를 생성할 차례다.

위 코드에서 if구문은 이전에 마련해두었던 'geojsonFeature'데이터 에서 'properties'값이 있는지와, 그 안에 팝업콘텐츠가 있는지 여부를 체크한다.

5. 결과 확인하기

---