Label

지도의 특정 위치에 이미지와 텍스트로 정보를 표시할 수 있습니다.

1. Label 생성하기

먼저, LabelStyles 을 생성해서 LabelOptions 을 통해 라벨을 만들 수 있습니다.

// 1. LabelStyles 생성하기 - Icon 이미지 하나만 있는 스타일
LabelStyles styles = kakaoMap.getLabelManager()
    .addLabelStyles(LabelStyles.from(LabelStyle.from(R.drawable.chicken)));

// 2. LabelOptions 생성하기
LabelOptions options = LabelOptions.from(LatLng.from(37.394660,127.111182))
    .setStyles(styles);

// 3. LabelLayer 가져오기 (또는 커스텀 Layer 생성)
LabelLayer layer = kakaoMap.getLabelManager().getLayer();

// 4. LabelLayer 에 LabelOptions 을 넣어 Label 생성하기
Label label = layer.addLabel(options);

Label 생성 시 TransformMethod 옵션

라벨의 translation, scale, rotation 의 변환을 주고, 지도가 움직일 때 라벨이 어떤 자세를 유지할 지 설정할 수 있는 옵션입니다. Label 생성 시 LabelOptions 을 통해 TransformMethod 을 설정 할 수 있고, 생성 후 에는 변경 할 수 없습니다.

Type	Description
Default	위치이동, 회전이 가능하고, 지도가 어떤 방향으로 회전하든 라벨은 기기의 위쪽 방향을 유지합니다. 다른 아무런 옵션을 설정하지 않았다면 라벨에 기본적으로 적용되어 있습니다.
AbsoluteRotation	지도가 어떤 방향으로 회전하든 라벨의 갖고 있는 고유의 회전 방향을 유지합니다.
AbsoluteRotation_KeepUpright	기본적으로 AbsoluteRotation 속성을 갖고 있고, 텍스트가 항상 기기의 위쪽 방향을 유지하도록 됩니다.
AbsoluteRotation_Decal	기본적으로 AbsoluteRotation 속성을 갖고 있고, 라벨이 지도의 기울기에 따라 붙어서 움직이도록 합니다.

Default	AbsoluteRotation	AbsoluteRotation_KeepUpright	AbsoluteRotation_Decal

2. LabelStyles 설정하기

LabelStyles 은 Label 의 스타일을 정의하며 1개 이상의 LabelStyle 로 구성되어 있습니다. 스타일에는 이미지를 넣을 수 있는 Icon, 아이콘에 Badge 를 추가 할 수 있는 InStyleBadge, 텍스트를 꾸밀 수 있는 LabelTextStyle 이 있습니다.

스타일의 InStyleBadge 가 라벨의 Badge 와 다른 점은?

InStyleBadge 는 라벨에 Badge 를 여러번 중복해서 넣어야 할 때나, 많은 라벨에 동일한 Badge 를 넣어야 할 때 스타일 생성 시에 Badge 를 빌트인 시켜 이용에 편리하도록 만든 것입니다. 스타일에 빌트인 되어 있기 때문에, InStyleBadge 의 offset 은 스타일 생성 당시의 값으로 고정되어 움직일 수 없습니다.

줌 레벨마다 여러개의 LabelStyle 을 갖고 있는 LabelStyles 의 구조

LabelStyle 은 지도의 확대/축소 줌레벨마다 각각 다른 LabelStyle 을 적용할 수 있습니다.

LabelStyle

아래의 그림과 같이 LabelStyle 을 통해 Icon 이미지, Icon 의 AnchorPoint, InStyleBadge, LabelTextStyle 등 다양한 스타일을 설정 할 수 있습니다.

LabelStyle 의 Property

Property Description

icon Label 의 이미지. res/drawable 또는 Bitmap 으로 설정 할 수 있습니다. applyDpScale 값에 따라 크기가 영향 받습니다.

anchorPoint

Label 의 위치 좌표를 기준으로 Icon 이미지를 어떻게 배치(gravity)할 지 설정 할 수 있습니다.
이미지 크기의 가로, 세로 길이를 1.0 로 기준.

x = 0.5, y = 1.0	x = 0.5, y = 0.5	x = 1.0, y = 1.0

icon/text labelTransition

Label 이 나타나고(enterance) 사라질 때(exit) 적용하는 애니메이션 설정.

Transition None	Transition Alpha	Transition Scale

바로 나타나거나 바로 사라진다.	점점 나타나거나 점점 사라진다.	점점 커지거나 점점 작아진다.

textStyles

Label 의 텍스트 스타일을 설정. 텍스트 라인마다 스타일을 다르게 설정 할 수 있습니다.

텍스트 라인 마다 다른 스타일 적용 코드 예

LabelStyle style = LabelStyle.from(R.drawable.chicken)
              .setTextStyles(LabelTextStyle.from(32, Color.parseColor("#DB5461")),
                              LabelTextStyle.from(30, R.color.brown));
LabelOptions.from(pos).setStyles(style)
              .setTexts("★맛있는 치킨★", "02-123-4567", "(분당구 삼평동 123-1)");

applyDpScale

Icon 이미지와 텍스트의 크기에 영향을 줍니다.

	drawable-nodpi	drawable-hdpi	drawable-xhdpi	drawable-xxhdpi
applyDpScale = true (default)
applyDpScale = false

zoomLevel LabelStyle 에 지도에 나타나기 시작하는 zoomLevel 값.

확대/축소 줌레벨 마다 다른 스타일 설정 예제

확대/축소 줌레벨의 값이 낮은것부터 순차적으로 넣어야 정상적으로 동작합니다.

// 1. 모든 레벨에서 스타일 표시할 때 
// 줌레벨 0 ~ 4         : R.drawable.chicken 아이콘 표시
// 줌레벨 5 ~ 9         : R.drawable.green_marker 아이콘 표시와 텍스트 크기 15px, 색깔 검은색 스타일 표시 
// 줌레벨 10 ~ 21(Max)  : R.drawable.blue_marker 아이콘 표시  
LabelStyles styles = LabelStyles.from(LabelStyle.from(R.drawable.chicken).setZoomLevel(0),
    LabelStyle.from(R.drawable.green_marker).setTextStyles(15, Color.BLACK).setZoomLevel(5),
    LabelStyle.from(R.drawable.blue_marker).setZoomLevel(10));

// 2. 특정 레벨은 스타일 표시 안할 때
// 줌레벨 0 ~ 4         : 표시안함
// 줌레벨 5 ~ 9         : R.drawable.green_marker 아이콘 표시
// 줌레벨 10 ~ 21(Max)  : R.drawable.blue_marker 아이콘 표시 
LabelStyles styles = LabelStyles.from(LabelStyle.from(R.drawable.green_marker).setZoomLevel(5),
    LabelStyle.from(R.drawable.blue_marker).setZoomLevel(10));

텍스트 스타일 설정

여러 텍스트 스타일을 아래와 같이 설정 할 수 있습니다.

// 1. 텍스트만 있는 스타일 - 글자크기 20px, 글자색깔 검정색
LabelStyles.from(LabelStyle.from().setTextStyles(20, Color.BLACK));

// 2. 아이콘과 텍스트가 같이 있는 스타일 
LabelStyles.from(LabelStyle.from(R.drawable.chicken).setTextStyles(20, Color.BLACK));

// 3. 아이콘 있고, 텍스트의 첫번째 라인 스타일은 - 글자크기 20px, 글자색깔 검정색
//                     두번째 라인 스타일은 - 글자크기 30px, 글자색깔 회색, 테두리 1px, 테두리 색깔 하얀색
LabelStyles.from(LabelStyle.from(R.drawable.chicken)
    .setTextStyles(LabelTextStyle.from(20, Color.BLACK),
            LabelTextStyle.from(30, Color.GREEN, 1, Color.WHITE)));

스타일 및 텍스트 변경

Label 생성 후, 스타일과 텍스트를 변경 할 수 있습니다.

// 라벨의 스타일만 변경하는 경우
label.changeStyles(LabelStyles.from(R.drawable.dinner));

// 라벨의 텍스트만 변경하는 경우
label.changeText("안녕하세요!");

// 라벨의 스타일과 텍스트를 동시에 변경하는 경우
label.changeStylesAndText(LabelStyles.from(R.drawable.dinner), "안녕하세요!");

3. Label 에 Badge 추가하기

라벨에 Badge 는 여러개 추가 할 수 있습니다.

// 1. 라벨 생성
LatLng pos = LatLng.from(37.394265, 127.108332);
Label label = layer.addLabel(LabelOptions.from(pos).setStyles(R.drawable.chicken));

// 2. 라벨에 Badge 2개 추가
Badge[] badges = label.addBadge(BadgeOptions.from(R.drawable.crown).setOffset(0.5f, -0.3f),
                            BadgeOptions.from(R.drawable.sale).setOffset(0.15f, 0.7f));

라벨의 위치와 회전 및 Transform 을 다른 라벨이나 Polygon 이 공유하여 똑같이 따라 움직이도 만들어 줍니다.

// 1. 라벨 2개를 생성 
Label currentLabel = labelLayer.addLabel(LabelOptions.from(pos).setStyles(R.drawable.map_ico_marker));
Label directionLabel = labelLayer.addLabel(LabelOptions.from(pos).setStyles(R.drawable.map_ico_direction_area));

// 2. currentLabe 에 directionLabel 을 연결
currentLabel.addShareTransform(directionLabel);

라벨의 위치를 다른 라벨도 공유하여 똑같이 따라 움직이도 만들어 줍니다. Sharing Transform 과 다르게 위치만 공유되기 때문에, 라벨이 회전되거나 기울어져도 위치 공유받은 라벨은 항상 일징한 자세를 유지합니다.

// 1. 라벨 2개를 생성 
Label currentLabel = labelLayer.addLabel(LabelOptions.from(pos).setStyles(R.drawable.map_ico_marker));
Label directionLabel = labelLayer.addLabel(LabelOptions.from(pos).setStyles(R.drawable.map_ico_direction_area));

// 2. currentLabe 에 directionLabel 을 연결
currentLabel.addSharePosition(directionLabel);