가이드
시리즈(Series)
Map Series
툴팁과 라벨

툴팁과 라벨

tooltipText

{
    tooltipText: '${name}   ${value}',
}
  • 마우스가 올라간 지역의 툴팁 내용을 지정한다.
  • ${속성명} 자리에 해당 데이터포인트의 속성값이 치환된다.

지도 소스의 속성 치환

데이터에 없는 속성은 지역(feature)의 "properties"에서 찾는다. 데이터에 넣지 않은 지역 이름(${name})이나 지도 소스가 제공하는 속성(${sido}, ${rm-id}, ${en-name} 등)을 그대로 툴팁에 쓸 수 있다.

{
    tooltipText: '<t style="font-weight: bold;">${name}(${rm-id})</t>',
}

마크업으로 꾸미기

<t style="..."> 태그로 부분별 스타일을 지정하고, <br />로 줄을 바꾼다.

{
    tooltipText: [
        '<t style="font-size: 18px; font-weight: 700;">${sido} ${name}</t>',
        '인구 밀도: <t style="font-weight: 700;">${value}</t>',
    ].join('<br />'),
}

툴팁 끄기

{
    tooltipText: false,
}
  • false로 지정하면 이 시리즈의 툴팁이 표시되지 않는다.
  • 맵 시리즈를 배경으로 깔고 그 위의 다른 시리즈에서만 툴팁을 보여줄 때 사용한다.

pointLabel — 지역에 라벨 표시

{
    pointLabel: {
        visible: true,
        text: '${name}',
        style: {
            fontSize: 16
        }
    },
}
  • 각 지역 위에 표시되는 라벨을 설정한다. 기본적으로 표시되지 않으므로(visible 기본값 false) visible: true로 지정해야 한다.
  • text에는 툴팁과 같은 ${속성명} 치환을 쓸 수 있다.
  • 라벨이 지도색에 묻히면 effect: 'outline'으로 글자에 외곽선을 넣어 가독성을 높일 수 있다.

See Also

스타일과 Hover클릭과 선택