Declarative Naver map integration offering composable map, camera state control, configurable properties/UI, markers and snapshot-based MarkerComposable, rich overlays (polylines, polygons, paths) and event callbacks.
이 라이브러리는 Compose Multiplatform에서 사용할 수 있는 NAVER Map API를 제공합니다.
이 저장소에는 Android와 iOS에서 지도 API의 동작을 확인할 수 있는 샘플 앱이 포함되어 있습니다.
repositories {
google()
mavenCentral()
maven("https://repository.map.naver.com/archive/maven")
}
dependencies {
implementation("io.github.hyungju.navermap:naver-map-compose:0.2.0")
}NaverMapAuthProvider를 사용해 clientId를 주입할 수 있습니다.
private const val NAVER_CLIENT_ID = "YOUR_NCP_KEY_ID_HERE"
NaverMapAuthProvider(
ncpKeyId = NAVER_CLIENT_ID,
) {
NaverMap(
modifier = Modifier.fillMaxSize(),
)
}private const val NAVER_CLIENT_ID = "YOUR_NCP_KEY_ID_HERE"
NaverMapAuthProvider(
ncpKeyId = NAVER_CLIENT_ID,
) {
NaverMap(
modifier = Modifier.fillMaxSize(),
)
}MapProperties와 MapUiSettings를 사용해 지도 타입, 레이어, 제스처, 컨트롤을 공통 코드에서 설정할 수 있습니다. 아래 예제들은 상위에서 NaverMapAuthProvider로 감쌌다고 가정합니다.
var mapProperties by remember {
mutableStateOf(
MapProperties(
mapType = MapType.Basic,
isTrafficLayerGroupEnabled = true,
isIndoorEnabled = false,
)
)
}
var mapUiSettings by remember {
mutableStateOf(
MapUiSettings(
isCompassEnabled = true,
isScaleBarEnabled = true,
isZoomControlEnabled = true,
)
)
}
NaverMap(
modifier = Modifier.fillMaxSize(),
properties = mapProperties,
uiSettings = mapUiSettings,
)CameraPositionState를 통해 카메라 위치를 관찰하고 변경할 수 있습니다.
val cameraPositionState = rememberCameraPositionState {
position = CameraPosition(
target = LatLng(37.5666102, 126.9783881),
zoom = 14.0,
)
}
Box(Modifier.fillMaxSize()) {
NaverMap(
modifier = Modifier.fillMaxSize(),
cameraPositionState = cameraPositionState,
)
Button(
onClick = {
cameraPositionState.position = cameraPositionState.position.copy(
zoom = cameraPositionState.position.zoom + 1,
)
}
) {
Text("Zoom In")
}
}기본 Marker뿐 아니라 Compose UI를 그대로 캡처해 지도 아이콘으로 사용하는 MarkerComposable과 경로/도형/위치 오버레이를 함께 사용할 수 있습니다.
val cityHall = LatLng(37.5666102, 126.9783881)
NaverMap(
modifier = Modifier.fillMaxSize(),
) {
Marker(
state = rememberUpdatedMarkerState(position = cityHall),
captionText = "대표 마커",
icon = OverlayImage.GreenMarker,
)
MarkerComposable(
state = rememberUpdatedMarkerState(
position = LatLng(37.5673, 126.9792),
),
renderKey = "city-hall-compose-marker",
) {
Surface(
color = Color(0xFF111827),
contentColor = Color.White,
shape = RoundedCornerShape(16.dp),
) {
Text(
text = "Compose 마커",
modifier = Modifier.padding(horizontal = 14.dp, vertical = 10.dp),
)
}
}
CircleOverlay(
center = cityHall,
radiusMeters = 450.0,
fillColor = Color(0x332A6CF0),
outlineWidth = 2.dp,
outlineColor = Color(0xFF2A6CF0),
)
}MarkerComposable은 스냅샷 기반으로 이미지를 다시 캡처하므로, 콘텐츠 값이 바뀌는 경우 renderKey에 해당 값을 포함해 주면 안전하게 재렌더링할 수 있습니다.
클릭, 롱클릭, 지도 로드 완료, 옵션 변경, 실내지도 선택, 위치 변경 등의 이벤트를 콜백으로 받을 수 있습니다.
var lastEvent by remember { mutableStateOf("대기 중") }
NaverMap(
modifier = Modifier.fillMaxSize(),
onMapLoaded = {
lastEvent = "지도 로드 완료"
},
onMapClick = { _, latLng ->
lastEvent = "클릭: ${latLng.latitude}, ${latLng.longitude}"
},
onMapLongClick = { _, latLng ->
lastEvent = "롱클릭: ${latLng.latitude}, ${latLng.longitude}"
},
onOptionChange = {
lastEvent = "지도 옵션 변경"
},
)다음 기능을 지원합니다.
NaverMapCameraPositionStaterememberCameraPositionStatecurrentCameraPositionStateMarkerStaterememberMarkerStaterememberUpdatedMarkerStateMapPropertiesMapUiSettingsOverlayStyleMapEffectDisposableMapEffectMarkerMarkerComposableCircleOverlayPolygonOverlayPolylineOverlayGroundOverlayPathOverlayMultipartPathOverlayArrowheadPathOverlayLocationOverlay
이 라이브러리는 Compose Multiplatform에서 사용할 수 있는 NAVER Map API를 제공합니다.
이 저장소에는 Android와 iOS에서 지도 API의 동작을 확인할 수 있는 샘플 앱이 포함되어 있습니다.
repositories {
google()
mavenCentral()
maven("https://repository.map.naver.com/archive/maven")
}
dependencies {
implementation("io.github.hyungju.navermap:naver-map-compose:0.2.0")
}NaverMapAuthProvider를 사용해 clientId를 주입할 수 있습니다.
private const val NAVER_CLIENT_ID = "YOUR_NCP_KEY_ID_HERE"
NaverMapAuthProvider(
ncpKeyId = NAVER_CLIENT_ID,
) {
NaverMap(
modifier = Modifier.fillMaxSize(),
)
}private const val NAVER_CLIENT_ID = "YOUR_NCP_KEY_ID_HERE"
NaverMapAuthProvider(
ncpKeyId = NAVER_CLIENT_ID,
) {
NaverMap(
modifier = Modifier.fillMaxSize(),
)
}MapProperties와 MapUiSettings를 사용해 지도 타입, 레이어, 제스처, 컨트롤을 공통 코드에서 설정할 수 있습니다. 아래 예제들은 상위에서 NaverMapAuthProvider로 감쌌다고 가정합니다.
var mapProperties by remember {
mutableStateOf(
MapProperties(
mapType = MapType.Basic,
isTrafficLayerGroupEnabled = true,
isIndoorEnabled = false,
)
)
}
var mapUiSettings by remember {
mutableStateOf(
MapUiSettings(
isCompassEnabled = true,
isScaleBarEnabled = true,
isZoomControlEnabled = true,
)
)
}
NaverMap(
modifier = Modifier.fillMaxSize(),
properties = mapProperties,
uiSettings = mapUiSettings,
)CameraPositionState를 통해 카메라 위치를 관찰하고 변경할 수 있습니다.
val cameraPositionState = rememberCameraPositionState {
position = CameraPosition(
target = LatLng(37.5666102, 126.9783881),
zoom = 14.0,
)
}
Box(Modifier.fillMaxSize()) {
NaverMap(
modifier = Modifier.fillMaxSize(),
cameraPositionState = cameraPositionState,
)
Button(
onClick = {
cameraPositionState.position = cameraPositionState.position.copy(
zoom = cameraPositionState.position.zoom + 1,
)
}
) {
Text("Zoom In")
}
}기본 Marker뿐 아니라 Compose UI를 그대로 캡처해 지도 아이콘으로 사용하는 MarkerComposable과 경로/도형/위치 오버레이를 함께 사용할 수 있습니다.
val cityHall = LatLng(37.5666102, 126.9783881)
NaverMap(
modifier = Modifier.fillMaxSize(),
) {
Marker(
state = rememberUpdatedMarkerState(position = cityHall),
captionText = "대표 마커",
icon = OverlayImage.GreenMarker,
)
MarkerComposable(
state = rememberUpdatedMarkerState(
position = LatLng(37.5673, 126.9792),
),
renderKey = "city-hall-compose-marker",
) {
Surface(
color = Color(0xFF111827),
contentColor = Color.White,
shape = RoundedCornerShape(16.dp),
) {
Text(
text = "Compose 마커",
modifier = Modifier.padding(horizontal = 14.dp, vertical = 10.dp),
)
}
}
CircleOverlay(
center = cityHall,
radiusMeters = 450.0,
fillColor = Color(0x332A6CF0),
outlineWidth = 2.dp,
outlineColor = Color(0xFF2A6CF0),
)
}MarkerComposable은 스냅샷 기반으로 이미지를 다시 캡처하므로, 콘텐츠 값이 바뀌는 경우 renderKey에 해당 값을 포함해 주면 안전하게 재렌더링할 수 있습니다.
클릭, 롱클릭, 지도 로드 완료, 옵션 변경, 실내지도 선택, 위치 변경 등의 이벤트를 콜백으로 받을 수 있습니다.
var lastEvent by remember { mutableStateOf("대기 중") }
NaverMap(
modifier = Modifier.fillMaxSize(),
onMapLoaded = {
lastEvent = "지도 로드 완료"
},
onMapClick = { _, latLng ->
lastEvent = "클릭: ${latLng.latitude}, ${latLng.longitude}"
},
onMapLongClick = { _, latLng ->
lastEvent = "롱클릭: ${latLng.latitude}, ${latLng.longitude}"
},
onOptionChange = {
lastEvent = "지도 옵션 변경"
},
)다음 기능을 지원합니다.
NaverMapCameraPositionStaterememberCameraPositionStatecurrentCameraPositionStateMarkerStaterememberMarkerStaterememberUpdatedMarkerStateMapPropertiesMapUiSettingsOverlayStyleMapEffectDisposableMapEffectMarkerMarkerComposableCircleOverlayPolygonOverlayPolylineOverlayGroundOverlayPathOverlayMultipartPathOverlayArrowheadPathOverlayLocationOverlay