커스텀 스타일링

스타일 에디터를 이용하면 지도 스타일을 커스터마이징할 수 있습니다.

커스텀 스타일 만들기

커스텀 스타일을 사용하려면 스타일 에디터에서 스타일을 생성하고 스타일 ID를 발급해야 합니다.

1. 클라이언트 ID를 발급받습니다.
2. 스타일 에디터에서 지도 스타일을 생성하고 발행합니다. 자세한 내용은 스타일 에디터 가이드를 참고하세요.
3. 스타일 에디터의 My Style > 메뉴(⋮) > My Style ID 확인 화면에서 My Style ID를 확인합니다.

커스텀 스타일 적용

NaverMap 객체의 customStyleId 속성에 My Style ID를 지정하면 커스텀 스타일이 적용됩니다. 만약 존재하지 않은 스타일 ID를 지정하면 기본 스타일이 적용됩니다.

다음은 스타일 ID가 MY_STYLE_ID인 스타일을 지도에 지정하는 예제입니다.

naverMap.setCustomStyleId("MY_STYLE_ID");

naverMap.setCustomStyleId("MY_STYLE_ID");

naverMap.customStyleId = "MY_STYLE_ID"

setCustomStyleId() 메서드를 호출할 때 NaverMap.OnCustomStyleLoadCallback을 지정하면 커스텀 스타일 로딩에 성공했을 때 onCustomStyleLoaded() 콜백 메서드가, 실패했을 때 onCustomStyleLoadFailed() 콜백 메서드가 호출됩니다.

다음은 스타일 ID가 MY_STYLE_ID인 스타일을 지도에 지정하고 스타일 로딩 성공 및 실패시 각각 토스트를 표시하는 예제입니다.

naverMap.setCustomStyleId("MY_STYLE_ID",
    new NaverMap.OnCustomStyleLoadCallback() {
        @Override
        public void onCustomStyleLoaded() {
            Toast.makeText(context, "스타일 로드 성공", Toast.LENGTH_SHORT)
                .show();
        }

        @Override
        public void onCustomStyleLoadFailed(@NonNull Exception exception) {
            Toast.makeText(context, "스타일 로드 실패", Toast.LENGTH_SHORT)
                .show();
        }
    });

naverMap.setCustomStyleId("MY_STYLE_ID",
    new NaverMap.OnCustomStyleLoadCallback() {
        @Override
        public void onCustomStyleLoaded() {
            Toast.makeText(context, "스타일 로드 성공", Toast.LENGTH_SHORT)
                .show();
        }

        @Override
        public void onCustomStyleLoadFailed(@NonNull Exception exception) {
            Toast.makeText(context, "스타일 로드 실패", Toast.LENGTH_SHORT)
                .show();
        }
    });

naverMap.setCustomStyleId(
    "MY_STYLE_ID",
    object : NaverMap.OnCustomStyleLoadCallback {
        override fun onCustomStyleLoaded() {
            Toast.makeText(
                context, 
                "스타일 로드 성공", 
                Toast.LENGTH_SHORT
            ).show()
        }

        override fun onCustomStyleLoadFailed(exception: Exception) {
            Toast.makeText(
                context, 
                "스타일 로드 실패",
                Toast.LENGTH_SHORT
            ).show()
        }
    }
)

NaverMapOptions 객체의 customStyleId() 메서드를 호출해 초깃값을 지정할 수도 있습니다.

다음은 스타일 ID가 MY_STYLE_ID인 스타일을 초깃값으로 지정하는 예제입니다.

NaverMapOptions options = new NaverMapOptions().customStyleId("MY_STYLE_ID");

NaverMapOptions options = new NaverMapOptions().customStyleId("MY_STYLE_ID");

val options = NaverMapOptions().customStyleId("MY_STYLE_ID")

제약

커스텀 스타일을 적용하면 지도 유형과 부가 정보가 스타일 에디터에서 편집한 대로 고정되며, 이와 관련된 옵션을 변경해도 영향이 없습니다. 해당되는 옵션은 다음과 같습니다.

• 지도 유형
• 레이어 그룹
• 실내지도
• 야간 모드
• 라이트 모드