[안드로이드] 네이버 지도 API - 지도 모양 설정

✍ 네이버 지도 API

https://navermaps.github.io/android-map-sdk/guide-ko/1.html

시작하기 · 네이버 지도 안드로이드 SDK

 

✍ 지도 UI 설정 - 지도를 표시하는 방법

NaverMap 객체를 이용하여 여러가지 지도 유형을 설정할 수 있다.

 

→ 지도 유형(NaverMap.mapType)

지도 유형	설명
Basic	일반 지도
Navi	차량용 네비게이션에 특화된 지도
Satellite	위성 지도
Hybrid	위성 지도 + 심볼 + 도로
Terrain	지형도로 산악 지형을 실제 지형과 유사하게 표시한 지도
None	지도를 나타내지 않는다. 오버레이만 남는다.

naverMap.mapType = NaverMap.MapType.Basic

 

→ 레이어 그룹(NaverMap.setLayerGroupEnabled())

레이어 그룹	설명	불가능한 지도 유형(mapType)
LAYOUT_GROUP_BUILDING	건물 형상, 주소 심벌 등 건물과 관련된 요소 노출 (default - true)	Statellite, Hybrid(심벌만 노출), Terrain(심벌만 노출)
LAYOUT_GROUP_TRAFFIC	실시간 교통정보 노출	없음
LAYOUT_GROUP_TRANSIT	지하철 노선, 버스정류장 등 대중교통 정보 노출	Navi
LAYOUT_GROUP_BICYCLE	자전거 도로, 주차대 등 자전거와 관련된 정보 노출	Navi
LAYOUT_GROUP_MOUNTAIN	등산로에 관련된 정보 노출	Navi
LAYOUT_GROUP_CADASTRAL	지적편집도 노출	Navi

// 비활성
naverMap.setLayerGroupEnabled(NaverMap.LAYER_GROUP_BUILDING, false)
// 활성
naverMap.setLayerGroupEnabled(NaverMap.LAYER_GROUP_TRANSIT, true)

 

→ 실내 지도 (NaverMap.isInddoorEnable)

 실내 지도를 활성화할 수 있고 Basic 과 Navi 지도 유형일 때만 가능하다.

naverMap.isIndoorEnabled = true
naverMap.isIndoorEnabled = false

 

✍ 지도 사용자 인터페이스 설정

→ 컨트롤

지도에 표시되는 컨트롤을 설정할 수 있다. 단, 네이버 로고는 필수로 들어가야 한다.

val uiSetting = naverMap.uiSettings
 
 uiSetting.apply {
	isCompassEnabled = true
	isScaleBarEnabled = true
	isZoomControlEnabled = true
	isLocationButtonEnabled = true
}

 

→ 네이버 로고

네이버 로고는 필수로 있어야 하며 가려져서는 안된다. 로고 클릭을 비활성화한 앱은 반드시 앱 내에 네이버 지도 SDK의 법적 공지 액티비티(LegalNoticeActivity) 및 오픈소스 라이선스 액티비티(OpenSourceLicenseActivity)로 연결되는 메뉴를 만들어야 한다.

 

네이버 로고의 위치는 logoGravity 와 logoMargin 속성으로 바꿀 수 있다.

val uiSetting = naverMap.uiSettings

// 로고 위치 설정
uiSetting.logoGravity = (Gravity.TOP or Gravity.LEFT)
uiSetting.logoGravity = (Gravity.TOP or Gravity.RIGHT)
uiSetting.logoGravity = (Gravity.BOTTOM or Gravity.LEFT)
uiSetting.logoGravity = (Gravity.BOTTOM or Gravity.RIGHT)

// 로고 버튼 활성화
uiSetting.isLogoClickEnabled = true

// 로고 마진 설정
// setLogoMargin(@Px int left, @Px int top, @Px int right, @Px int bottom)
uiSetting.setLogoMargin(20,20,0,0)

 

→ 컨트롤 위치 옮기기

uiSettings로 활성화 여부를 제어하는 기본 컨트롤의 위치는 변경할 수 없지만 각 컨트롤은 뷰의 형태로 제공되므로 uiSettings에서 기본 컨트롤을 비활성화하고 별도의 컨트롤 뷰를 원하는 위치에 배치할 수 있다.

 

※ 컨트롤 위치 바꾸기

- 네이버 로고는 왼쪽 상단

- 현재 위치 버튼은 오른쪽 상단

- 축적바 왼쪽 하단

 

# xml 파일

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- 현재 위치 버튼 -->
    <com.naver.maps.map.widget.LocationButtonView
        android:id="@+id/zoomButton"
        android:layout_gravity="top|right"
        android:layout_margin="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
   
    <!-- 축적 바 -->
    <com.naver.maps.map.widget.ScaleBarView
        android:id="@+id/scaleBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_gravity="bottom|left"/>
</FrameLayout>

 

# fragment

class MapsFragment : Fragment(){

    private lateinit var naverMapFragment: MapFragment
    private var naverMap : NaverMap? = null

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_map, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        naverMapFragment = requireActivity().supportFragmentManager
            .findFragmentById(R.id.map) as MapFragment?
            ?: MapFragment.newInstance().also {
                requireActivity().supportFragmentManager.beginTransaction().add(
                    R.id.map,
                    it
                ).commit()
            }

        naverMapFragment.getMapAsync { map ->
            view.findViewById<LocationButtonView>(R.id.zoomButton).map = map
            view.findViewById<ScaleBarView>(R.id.scaleBar).map = map
            naverMap = map

            // Map type
            naverMap?.mapType = NaverMap.MapType.Basic

            // Map layout
            naverMap?.setLayerGroupEnabled(NaverMap.LAYER_GROUP_TRANSIT, true)

            // 실내 지도
            naverMap?.isIndoorEnabled = true

            val uiSetting = naverMap?.uiSettings

            // Control setting
            uiSetting?.apply {
                isCompassEnabled = true
                isScaleBarEnabled = false
                isIndoorLevelPickerEnabled = true
                isZoomControlEnabled = true
                isLocationButtonEnabled = false
            }

            // logo location
            uiSetting?.logoGravity = (Gravity.TOP or Gravity.LEFT)
            uiSetting?.isLogoClickEnabled = true
            uiSetting?.setLogoMargin(20,20,0,0)
        }
    }

}

한가지 조심해야 할 것은 컨트롤 배치를 임의로 정해서 설정해줬기 때문에 uiSettings에서 현재 버튼과 축적바를 활성화하게 되면 밑의 오른쪽 그림처럼 각각 2개가 보여진다. 따라서 현재 버튼(isLocationButtonEnabled)과 축적바(isScaleBarEnabled)는 비활성화(false)해야 한다.