▶d3.js 튜토리얼 :: Leaflet map 라이브러리 활용하기 ① 기본설정

▶d3.js 튜토리얼 :: 오픈소스 자바스크립트 라이브러리 leaflet map 제작 ① 기본설정

---

이번 글에서는 오픈소스 자바스크립트 라이브러리인 'leaflet map'을 정리해보고자한다. leaflet 라이브러리를 활용하면 간단한 코드로 네이버지도나, 구글 지도와같이 식상해진(?)지도레이어가 아닌, 독특한 콘셉을 갖고있는 레이어테마를 활용하거나 직접템플릿을 만들어 적용해볼 수 있다.

d3카테고리에서 'leaflet map'을 다루는 이유.

---

D3글을 읽으러 들어온사람이라면, '갑자기 d3 이야기하다가 왠 leaflet map?'싶을 수도 있다. 이 글을 굳이 정리하려고하는 것은 단지 leaflet map이 '오픈소스 자바스크립트 라이브러리'이기 때문만은 아니다. 실제로 bostock역시 leafletmap을 활용하여 예제를 작성해두었고, 스콧머레이는 자신의 저서에서 참고사이트로 leaflet사이트를 적어두기도했다.

mike bostock의 d3+leaflet 코드 결과모습 : http://bost.ocks.org/mike/leaflet/

이러한 leaflet map을 이용하면 꽤나 다양한 형태의 템플릿을 활용할 수 있으며, 직접 제작할 수도 있다.

d3에서 leafletmap의 활용

우리가 d3를 활용하여 매핑을 하고자할 때, 기본적으로는 가장 익숙하고, 친근한 네이버지도나 구글맵을 활용하고, 추가적으로 데이터에 맞는 지도의 레이어를 구성하고싶을때는 이 leaflet를 활용하면 좋다.

leaflatmap 예제를 시작하기위한 html구조

---

leaflet map의 예제는 다음과같은 간단한 html 구조위에서 진행했다.

1. head부분에 leaflet의 css파일과 javascript파일을 삽입한다.

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3./leaflet.css"/>

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

2. style부분에 leaflet map이 그려질 공간을 세팅한다.

<style>

#map { height: 180px; }

</style>

3. body부분으로 와서, 맵이 그려질 부분인 div코드를 적어준다.

<div id="map"><div>

leaflet 기본설정하기

---

기본적인 html세팅을 마쳤다면, 본격적으로 leaflet을 그려볼 수 있다. 여기에서 다룰 내용은 아래와 같다.

1. map 생성하기

2. 타일레이어 추가하기

3. 마커 추가하기

4. 도형추가하기 - 원

5. 도형추가하기 - 다각형

1. map 생성하기

---

가장 먼저 해줄 것은 'map'을 생성해주는 것이다.

위 코드에서는 'map'과 함께 체인메서드 형식으로 'setView'세팅을 해주었다. setView()메서드는 지도의 기준점을 잡고, 초기 줌레벨을 어느정도로 설정할지를 결정하는 부분이다.

코드에서 setView()에 설정되어있는 값은  서울시청의 위도(lat), 경도(lon)좌표와,  zoom level 값을 의미한다.

2. 타일레이어 추가하기

---

leaflet map의 타일레이어 형식은 일반적으로 URL템플릿의 세팅을 포함하고 있다.

이 URL템플릿 세팅이란 우리도 'Mapbox'에서 얻을 수 있다. 이 글에서는 예제에서 사용된 URL템플릿을 그대로 적용하기로하자. 이 URL템플릿에는 속성값이 부여된 텍스트, 최대 줌 레벨 등과 같은 옵션들이 포함되어 있다.

생성한 'map'에 타일레이어를 추가해주는 부분이다. 편의를 위해서 leaflet 공식홈페이지의 코드와는 조금다르게 작성했다.

왜 타일레이어를 불러오는데 복잡복잡하게 'a href' 태그 들이 붙어 있는 것일까? 가장 첫 줄에 삽입되어있는 부분은 정말 '타일레이어URL 템플릿 값'을 불러오는 부분이다. 그 나머지부분은 하단에 함께 표시할 '출처'부분이다. 각각의 텍스트와 이름은 아래의 사진형태로 화면에 출력된다.

예제 코들을 실행해보면, 이렇게 우측하단에, Leaflet, URL템플릿을 제작한 사람, 그리고 OSM(OpenStreetMap)과 CC정보등의 정보가 표시되는 것을 볼 수 있다.

3. 마커 추가하기

---

지도를 표시하는 부분까지 완료했다면, 그다음부터는 아주 간단하다. 마커(Marker)역시, 앞서 보았던 코드와 동일한 원리로 작성되고, 표현된다.

서울시청좌표를 기준으로 타일레이어를 표시하고, 그 위에 동일한 서울시청 좌표값으로 마커를 추가했다.

4. 도형 추가하기 - 원

---

앞서 서울시청좌표를 기준으로 마커를 표시했다면, 이번에는 동일한 지점을 기준으로 '원'을 그려본다. 앞서 마커보다 작성해야할 부분이 더 많아졌다. 언뜻 까다롭게 여겨질 수도 있지만, 그만큼 마커보다 더욱 다양하고 디테일한 표현이 가능해진다고 이해면 된다.

위에서 마커를 추가했다면, 이번에는 서울시청의 좌표값을 기준으로 원을 그린다.

4. 도형 추가하기 - 다각형

---

이번에 추가할 것은 다각형(Polygon)중에서도, 지도위에 세 개의 좌표를 기준점으로하는 삼각형을 그려보려고한다.

다각형을 그리는 코드는 위 사진과 같으며, 이에 대한 설명은 아래 결과사진고 함께 정리하는게 좋을 것 같다.

마찬가지로 서울시청을 기준으로 그려보았다. 위 사진에서도 볼 수 있듯이 삼각형을 그릴때는 표시하고자하는 부분의 상, 좌, 우 순서로 해당지점의 좌표를 입력해준다.