Marker Map

마커-맵은 MarkerMap를 이용해 제작한다. 해당 모듈은 MarkerMap 타입을 그대로 노출하는 대신에 MarkerMap 인스턴스를 생성하는 함수를 반환한다. 클라이언트 단에서 전체 모듈을 번들링한 형태로 사용할 때는 daisy.makerMap()을 실행하여 MarkerMap 인스턴스를 생성한다. 모듈별로 사용할 때에는 아래와 같이 MarkerMap 모듈만을 불러와서 사용해도 좋다.

import markerMap from 'daisy-chart/src/layouts/markerMap'
markerMap().container('#chart-container')
  .data(dataset)
  .dimensions(['key'])
  .measures(['addr', 'value'])
  .axis('x').axis('y')
  .render();

MarkerMap의 경우 다음 지도 API에 기반하므로 사용시 API KEY를 발급 받은 후에 HTML 문서에 스크립트를 MarkerMap 사용전에 아래와 같이 삽입해야 정상 작동한다.

<script type="text/javascript" src="//apis.daum.net/maps/maps3.js?apikey=[API_KEY]&libraries=services"></script>

마커-맵의 유형은 범주(dimension), 수치(measure)의 조합과 형태 변형을 위한 옵션에 의해 형태가 결정된다. 그 예시는 아래와 같다.

• 수치 1개

  • 주소 수치 : 주소 값을 수치 필드로 전달하였을 경우, 내부에서 좌표를 계산하여 스캐터플롯 형태로 표시한다. markerMap.addr을 true로 설정해야 한다.

• 수치 2개

  • 위도 수치, 경도 수치: 위도와 경도 값이 포함된 필드를 수치로 전달한 경우 해당 위치의 지도 상 좌표를 계산하여 표시한다.
  • 주소 수치, 크기 수치 : 주소 값과 해당 좌표의 원의 반지름 크기를 결정할 수치를 함께 전달한 경우이다. markerMap.addr을 true로 설정해야 한다.

• 수치 3개

  • 위도 수치, 경도 수치, 크기 수치 : 좌표와 함께 해당 좌표의 원의 반지름 크기를 결정할 수치를 함께 전달한 경우이다.

• 범주 : 1개의 범주를 추가 가능한데, 이는 좌표에 툴팁이 표시될 경우 해당 좌표의 이름을 서정하는데 사용된다.

API Reference

# markerMap.addr([addr]) <>

첫번째 수치 값에 주소를 전달할 경우 addr을 true로 설정한다. 기본 설정값은 false이다.

# markerMap.mapBaseType([type]) <>

지도의 배경 타입을 type 값을 ROADMAP|SKYVIEW|HYBRID 에서 선택하여 결정한다. 기본 설정값은 ROADMAP 이다.

# markerMap.overlayMapType([type]) <>

지도의 배경 오버레이 타입을 type 값을 null|OVERLAY|TERRAIN|TRAFFIC|BICYCLE|BICYCLE_HYBRID|USE_DISTRIC 에서 선택하여 결정한다. 기본 설정값은 null 이다.

# markerMap.on([type, listener]) <>

마커맵의 렌더링 상태를 이벤트로 전달한다. type 값으로, 주소 변환 등의 렌더링 과정 중에는 loading, 렌더링이 완료된 경우에는 end가 발생한다. _listener 를 통해 해당 이벤트는상태에 동작할 함수를 전달한다. markerMap.addr이 true인 경우 loading 타입에서는 첫번째 인자로 현재 변환 완료된 주소의 순번이 출력된다.

markerMap.on('loading', function(i) {
  console.log(i);
})

# markerMap.size([size]) <>

마커 원 반지름의 범위를 결정한다. [min, max] 형태를 px 단위로 전달한다. 기본 설정값은 [0.5, 4] 이다. 줌 확대-축소 상태에 따라 실제보다 확대 축소 될 수 있다.