fornewid/naver-map-compose

NAVER Map Android SDK for Jetpack Compose 🗺

NAVER Map Compose 🗺

이 라이브러리는 Jetpack Compose에서 사용할 수 있는 네이버 지도 API를 제공합니다.

Sample App

이 저장소에는 샘플 앱이 포함되어 있습니다. 실행하려면 다음을 수행해야 합니다.

1. NAVER Map Android SDK Demo 레포지터리의 How To Run을 참고하여, 클라이언트 ID를 발급받습니다.
2. client_id.xml의 naver_map_sdk_client_id에 발급받은 클라이언트 ID를 입력합니다.
3. 빌드하고 실행합니다.

Download

naver-map-compose:

Compose 1.1 (1.1.x)
Compose 1.2 (1.2.x)
Compose 1.3 (1.3.x)
Compose 1.4 (1.4.x)
Compose 1.5 (1.5.x)
Compose 1.6 (1.6.x)
Compose 1.7 (1.7.x)

naver-map-location:

play-services-location 16.0.0 ~
play-services-location 18.0.0 ~
play-services-location 21.0.1 ~

repositories {
    mavenCentral()
}

dependencies {
    implementation 'io.github.fornewid:naver-map-compose:<version>'

    // (Optional) 위치 추적하기
    // 다른 버전의 play-services-location 과 함께 사용하려면 선언해야 합니다.
    // 선언하지 않았을 때, 기본으로 포함되는 play-services-location 버전은 16.0.0 입니다.
    implementation 'io.github.fornewid:naver-map-location:<version>'
}

⚠️ Warnings

이 라이브러리는 내부적으로 네이버 지도 SDK를 사용하고 있습니다.

이에 따라오는 몇 가지 주의사항이 있습니다. (참고: 네이버 지도 안드로이드 SDK - 시작하기 - 의존성 추가)

1. 네이버 지도 SDK는 https://repository.map.naver.com/archive/maven Maven 저장소에서 배포됩니다. 따라서 루트 프로젝트의 build.gradle에 저장소 설정을 추가해야 합니다.

  allprojects {
      repositories {
          google()
          mavenCentral()
+         maven {
+             url 'https://repository.map.naver.com/archive/maven'
+         }
          // naver-map-compose 1.5.6 버전까지는 다른 Maven 저장소 주소를 사용해야 합니다.
          // maven { url 'https://naver.jfrog.io/artifactory/maven/' }
      }
  }

2. 예전 네이버 지도 SDK는 appcompat-v7 28 버전을 사용합니다. naver-map-compose 1.5.6 버전까지는, gradle.properties에 Jetifier 옵션을 추가해줘야 합니다. naver-map-compose 1.5.7 버전부터는 필요하지 않습니다.

android.useAndroidX=true
android.enableJetifier=true

3. 네이버 지도 SDK는 위치 추적기능을 지원하려고, play-services-location 라이브러리 16.0.0 버전을 사용합니다. 이 버전보다 높은 버전을 사용하고 있으면, 컴파일 혹은 런타임에 오류가 발생할 수 있습니다. 이 때는 play-services-location 라이브러리 버전과 같은 naver-map-location 라이브러리를 추가로 선언해야 합니다.

  dependencies {
      implementation 'io.github.fornewid:naver-map-compose:<version>'
      implementation 'com.google.android.gms:play-services-location:21.0.1'
+     implementation 'io.github.fornewid:naver-map-location:21.0.2'
  }

Usage

지도 추가하기

NaverMap(
    modifier = Modifier.fillMaxSize()
)

지도 구성하기

지도는 MapProperties와 MapUiSettings 객체를 NaverMap composable에 전달하여 구성할 수 있습니다.

var mapProperties by remember {
    mutableStateOf(
        MapProperties(maxZoom = 10.0, minZoom = 5.0)
    )
}
var mapUiSettings by remember {
    mutableStateOf(
        MapUiSettings(isLocationButtonEnabled = false)
    )
}
Box(Modifier.fillMaxSize()) {
    NaverMap(properties = mapProperties, uiSettings = mapUiSettings)
    Column {
        Button(onClick = {
            mapProperties = mapProperties.copy(
                isBuildingLayerGroupEnabled = !mapProperties.isBuildingLayerGroupEnabled
            )
        }) {
            Text(text = "Toggle isBuildingLayerGroupEnabled")
        }
        Button(onClick = {
            mapUiSettings = mapUiSettings.copy(
                isLocationButtonEnabled = !mapUiSettings.isLocationButtonEnabled
            )
        }) {
            Text(text = "Toggle isLocationButtonEnabled")
        }
    }
}

지도의 카메라 제어하기

CameraPositionState를 통해 카메라 변경을 관찰하고 제어할 수 있습니다.

val seoul = LatLng(37.532600, 127.024612)
val cameraPositionState: CameraPositionState = rememberCameraPositionState {
    // 카메라 초기 위치를 설정합니다.
    position = CameraPosition(seoul, 11.0)
}
Box(Modifier.fillMaxSize()) {
    NaverMap(cameraPositionState = cameraPositionState)
    Button(onClick = {
        // 카메라를 새로운 줌 레벨로 이동합니다.
        cameraPositionState.move(CameraUpdate.zoomIn())
    }) {
        Text(text = "Zoom In")
    }
}

지도에 그리기

지도에 Marker처럼 Overlay를 추가하려면, NaverMap의 content에 child composable을 추가하면 됩니다.

NaverMap {
    Marker(
        state = MarkerState(position = LatLng(37.532600, 127.024612)),
        captionText = "Marker in Seoul"
    )
    Marker(
        state = MarkerState(position = LatLng(37.390791, 127.096306)),
        captionText = "Marker in Pangyo"
    )
}

제공되는 Overlay는 다음과 같습니다.

• ArrowheadPathOverlay
• CircleOverlay
• GroundOverlay
• LocationOverlay
• Marker
• MultipartPathOverlay
• PathOverlay
• PolygonOverlay
• PolylineOverlay

raw NaverMap 객체 얻기 (Experimental)

특정 UseCase에서는 NaverMap 객체가 필요합니다. 예를 들어, 이 라이브러리에서 마커 클러스터링은 아직 지원되지 않지만(Issue #14 참조), 외부 라이브러리 를 이용하여 클러스터링을 구현할 수 있습니다. 이렇게 구현하려면 MapEffect 혹은 DisposableMapEffect composable을 사용하여 네이버지도 SDK의 raw NaverMap 객체에 접근해야 합니다.

NaverMap(
    // ...
) {
    val context = LocalContext.current
    var clusterManager by remember { mutableStateOf<TedNaverClustering<MyItem>?>(null) }
    DisposableMapEffect(items) { map ->
        if (clusterManager == null) {
            clusterManager = TedNaverClustering.with<MyItem>(context, map).make()
        }
        clusterManager?.addItems(items)
        onDispose {
            clusterManager?.clearItems()
        }
    }
}

위치 추적하기

⚠️ play-services-location 버전이 16.0.0 보다 높으면, 컴파일 혹은 런타임에 오류가 발생할 수 있습니다. (Warnings 섹션을 참고하세요.)

구글에서 제공하는 FusedLocationProviderClient을 이용하여, 위치를 추적하는 기능을 제공합니다.

MapProperties의 locationTrackingMode를 설정하여 위치 추적 모드를 지정할 수 있습니다.

NaverMap(
    locationSource = rememberFusedLocationSource(),
    properties = MapProperties(
        locationTrackingMode = LocationTrackingMode.Follow,
    ),
    uiSettings = MapUiSettings(
        isLocationButtonEnabled = true,
    )
)

LocationTrackingMode가 Follow 또는 Face일 때, 나침반 기능을 활성화하려면 isCompassEnabled을 true로 설정해야 합니다.

NaverMap(
    locationSource = rememberFusedLocationSource(isCompassEnabled = true),
    properties = MapProperties(
        locationTrackingMode = LocationTrackingMode.Face,
    ),
    uiSettings = MapUiSettings(
        isLocationButtonEnabled = true,
    )
)

Snapshots

현재 개발 중인 버전을 확인하고 싶다면 SNAPSHOT 버전을 사용할 수 있습니다.

Snapshot은 main branch에 커밋이 추가될 때마다 업데이트됩니다.

repositories {
    maven { url 'https://s01.oss.sonatype.org/content/repositories/snapshots' }
}

dependencies {
    // 위 링크에서 최신 SNAPSHOT 버전을 확인하세요.
    classpath 'io.github.fornewid:naver-map-compose:XXX-SNAPSHOT'
}

Contributions

• 오류를 발견하거나 궁금한 점이 있다면 이슈를 등록해주세요.
• 새로운 기능을 추가하고 싶다면 GitHub Issues를 통해 지원 가능 여부를 확인해야 합니다.

License

Copyright 2022 SOUP

Licensed to the Apache Software Foundation (ASF) under one or more contributor
license agreements. See the NOTICE file distributed with this work for
additional information regarding copyright ownership. The ASF licenses this
file to you under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.

naver-map-compose's Issues

LocationTrackingMode.Face...

컴포즈 전반적인 문제가 아닌가 좀 걱정인데요...
LocationTrackingMode.Face 모드시 핸드폰 방향과 일치 하지 않는것 같습니다...컴포즈로 작성된 네이버맵의 공통적인 문제인지...
네이버맵 SDK 와 비교하면 확실히 전혀 업데이트가 안됩니다...아래 화면 보시면 화면이 회전이 되지 않습니다.

naver map compose의 의존성을 추가하면 다른 의존성이 무시됩니다.

naver map compose의 의존성을 추가하면 다른 의존성이 무시됩니다.

예를 들어
implementation("androidx.compose.ui:ui-android:1.6.6")의 의존성을 추가해도

implementation 'io.github.fornewid:naver-map-compose:1.6.0'
implementation 'io.github.fornewid:naver-map-location:21.0.1'

의 의존성이 적용되어있으면

내부적으로 androidx.compose.ui:ui-android:1.7.0-alpha-01를 사용하게 되어있습니다..

제가 놓친게 있을까요?

cameraPositionState.isMoving가 계속 true인 현상

안녕하세요.

Naver Map을 Bottom sheet와 사용하기 위해서 샘플 프로젝트의 첫번째 화면인 MapScreen을 아래와 같이 수정하였습니다.
바텀시트의 높이에 따라서 Map의 높이를 조절하기 위해 아래와 같은 코드를 구현하였는데요,
화면을 띄우고나면 cameraPositionState.isMoving가 false였다가, 곧바로 true로 바뀐 채로 유지됩니다.

테스트 결과 bottomSheetState를 Collapsed 상태로 변경하면 나타나는 현상을 보입니다.
Map의 사이즈가 변경되면서 카메라 위치는 바뀌기 때문에 OnCameraChangeListener는 호출되지만, isMoving을 false로 바꿔주는 OnCameraIdleListener는 호출되지 않아서 생기지 않는 문제가 아닌가 싶네요.

이슈 제보합니다.

@Composable
fun MapScreen(upPress: () -> Unit) {

    val scaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = rememberBottomSheetState(
            initialValue = BottomSheetValue.Collapsed
        ),
    )

    LaunchedEffect(true) {
        delay(1000)
        scaffoldState.bottomSheetState.expand() // 이 함수가 호출된 후 isMoving은 true로 바뀐채 유지된다.
    }

    val cameraPositionState: CameraPositionState = rememberCameraPositionState {
        position = CameraPosition.INVALID
    }

    LaunchedEffect(
        cameraPositionState.isMoving,
    ) {
        println("${cameraPositionState.isMoving}") // false -> true 로 변경되어 true 상태가 유지됨
    }

    BottomSheetScaffold(
        modifier = Modifier.fillMaxSize(),
        topBar = {
            DefaultTopAppBar(
                text = stringResource(R.string.name_map),
                upPress = upPress
            )
        },
        scaffoldState = scaffoldState,
        sheetContent = {
            Box(modifier = Modifier.height(300.dp).fillMaxWidth().background(Color.Gray))
        }
    ) { contentPadding ->
        val offset by scaffoldState.bottomSheetState.offset
        Box(
            modifier = Modifier
                .height(offset.toDp() + 15.dp) // 이 부분을 지우면 cameraPositionState.isMoving은 최초 false로 한번만 뜨지만, 지우지 않으면 false 직후 바로 true로 바뀌고, 다시 false로 바뀌지 않는다.
                .fillMaxWidth()
                .padding(contentPadding),
        ) {
            NaverMap(
                modifier = Modifier.fillMaxSize(),
                cameraPositionState = cameraPositionState,
                contentPadding = contentPadding
            )
        }
    }
}

@Composable
fun Float.toDp(): Dp {
    return (this / LocalDensity.current.density).dp
}

Add support for clustering

배경

Thanks to @Pluu.

지금은 지도에 많은 수의 마커를 표시하려고 하면 몇 초 동안 렌더링이 정지된다.

markers.forEach {
    Marker(...)
}

LazyColumn처럼 지도 상에 보여지지 않는 Marker는 그리지 않도록 클러스터링 지원이 필요해보인다.

References

• Google Map:
  • https://developers.google.com/maps/documentation/android-sdk/utility/marker-clustering
  • googlemaps/android-maps-compose#44
• NAVER Map:
  • https://github.com/ParkSangGwon/TedNaverMapClustering

R8: Expected stack map table for method with non-linear control flow. In later version of R8, the method may be assumed not reachable

빌드 시,

WARNING: /Users/xxx/.gradle/caches/transforms-3/38e599631f0590dd9a5622cf263ba565/transformed/map-sdk-3.18.0-runtime.jar: R8: Expected stack map table for method with non-linear control flow. In later version of R8, the method may be assumed not reachable.

와 같이 워닝이 발생하고 있습니다.
실제 사용에는 큰 문제는 발생하지 않지만 원인을 알 수 있을까요?

bearing 을 고정해도 경로에 따라 location overlay가 돌아가는 현상

bearing 을 특정값으로 고정했는데도 오버레이 아이콘이 경로 방향으로 돌아갑니다

혹시 해결방법이 있을까요?

터치한 지점으로 Marker 이동

터치할 떄마다 해당 위치로 Marker 를 이동하려는데 잘 안됩니다.

marker.setPosition 같은 기능을 수행하려면 어떻게 해야 할까요?

아래처럼 position 에 매번 새로운 LatLng 객체를 넣어주고 있습니다.

Marker(
state = rememberMarkerState(
key = latLng.toString(),
position = LatLng(mapClickedLatLng.value!!.latitude, mapClickedLatLng.value!!.longitude)
),

PathOverlay의 coords 값을 변경해도 path 라인이 업데이트 되지 않음

coords 에 매번 새로 생성한 배열을 넣어주면 잘 동작하나 기존 배열에 add시 업데이트가 되지 않습니다

Clustering Marker 에 대한 Icon Custom Design 지원

우선 저번에 만들어주셨던 MarkerComposable 를 잘 사용하고 있습니다 감사합니다ㅎ

혹시 Clustering Marker 도 Composable 함수를 통해 커스텀이 가능한지, 지원이 가능한지 문의드립니다.

일반적은 마커의 경우 컴포저블 함수인 MarkerComposable 사용하여 원하는 형태의 마커를 구현할 수 있었으나,
클러스터링 마커의 경우 .cluserMarkerUpdate(), .leafMarkerUpdater 내에 updateClusterMarker 함수 혹은 updateLeafMarker 함수 내에서 marker 에 대한 설정을 할 수 있으므로, 컴포저블 함수인 MarkerComposable 함수를 사용할 수 없었습니다.

@OptIn(ExperimentalNaverMapApi::class)
@Composable
fun MapContent(
    uiState: MapUiState,
    cameraPositionState: CameraPositionState,
    rotationState: Float,
    pagerState: PagerState,
    onMapUiAction: (MapUiAction) -> Unit,
    onFestivalUiAction: (FestivalUiAction) -> Unit,
) {
    // val context = LocalContext.current
    Box {
        // TODO 같은 속성(주점, 이벤트)의 Marker 들만 클러스터링 되도록 구현
        // TODO 클러스터링 마커 커스텀
        NaverMap(
            cameraPositionState = cameraPositionState,
            locationSource = rememberFusedLocationSource(),
            uiSettings = MapUiSettings(
                isZoomControlEnabled = false,
                isScaleBarEnabled = false,
                isLogoClickEnabled = false,
            ),
            properties = MapProperties(
                locationTrackingMode = LocationTrackingMode.NoFollow,
            ),
        ) {
            PolygonOverlay(
                coords = uiState.outerCords,
                color = Color.Gray.copy(alpha = 0.3f),
                outlineColor = Color.Gray,
                outlineWidth = 1.dp,
                holes = persistentListOf(uiState.innerHole),
            )
            uiState.filteredBoothsList.forEach { booth ->
                Marker(
                    state = MarkerState(position = booth.position),
                    icon = MarkerCategory.fromString(booth.category).getMarkerIcon(booth.isSelected),
                    onClick = {
                        // onMapUiAction(MapUiAction.OnBoothMarkerClick(booth))
                        true
                    },
                )
                MarkerComposable {}
            }

            var clusterManager by remember { mutableStateOf<Clusterer<BoothMapModel>?>(null) }
            DisposableMapEffect(uiState.boothList) { map ->
                if (clusterManager == null) {
                    clusterManager = Clusterer.Builder<BoothMapModel>()
                        .clusterMarkerUpdater(
                            object : DefaultClusterMarkerUpdater() {
                                override fun updateClusterMarker(info: ClusterMarkerInfo, marker: Marker) {
                                    super.updateClusterMarker(info, marker)
                                    MarkerComposable {} // <- error - @Composable invocations can only happen from the context of a @Composable functio
                                }
                            },
                            MarkerComposable {} // <- error - @Composable invocations can only happen from the context of a @Composable functio
                        )
                      .leafMarkerUpdater(
                            object : DefaultLeafMarkerUpdater() {
                                override fun updateLeafMarker(info: LeafMarkerInfo, marker: Marker) {
                                    super.updateLeafMarker(info, marker)
                                    marker.apply {
                                        icon = MarkerCategory.fromString((info.key as BoothMapModel).category)
                                            .getMarkerIcon((info.key as BoothMapModel).isSelected)
                                        onClickListener = Overlay.OnClickListener {
                                            onMapUiAction(MapUiAction.OnBoothMarkerClick(listOf(info.key as BoothMapModel)))
                                            true
                                        }
                                    }
                                    MarkerComposable {} // error - @Composable invocations can only happen from the context of a @Composable function
                                }
                            },
                            MarkerComposable {} // error - @Composable invocations can only happen from the context of a @Composable function
                        )
                        .build()
                        .apply { this.map = map }
                }
                val boothListMap = buildMap(uiState.boothList.size) {
                    uiState.boothList.forEachIndexed { index, booth ->
                        put(booth, index)
                    }
                }
                clusterManager?.addAll(boothListMap)
                onDispose {
                    clusterManager?.clear()
                }
            }

//            var clusterManager by remember { mutableStateOf<TedNaverClustering<BoothMapModel>?>(null) }
//            DisposableMapEffect(uiState.filteredBoothsList) { map ->
//                if (clusterManager == null) {
//                    clusterManager = TedNaverClustering.with<BoothMapModel>(context, map)
//                        .customMarker {
//                            Marker().apply {
//                                icon = MarkerCategory.fromString(it.category).getMarkerIcon(it.isSelected)
//                            }
//                        }
//                        .markerClickListener { booth ->
//                            onMapUiAction(MapUiAction.OnBoothMarkerClick(listOf(booth)))
//                        }
//                        .clusterClickListener { booths ->
//                            onMapUiAction(MapUiAction.OnBoothMarkerClick(booths.items.toList()))
//                        }
//                        // 마커를 클릭 했을 경우 마커의 위치로 카메라 이동 비활성화
//                        .clickToCenter(false)
//                        .make()
//                }
//                clusterManager?.addItems(uiState.filteredBoothsList)
//                onDispose {
//                    clusterManager?.clearItems()
//                }
//            }
        }

목적은 아래의 사진과 같이 Clustering Marker 를 목적에 맞게 커스텀해서 구현하기 위함입니다.

(captionText 가 marker의 Design 내에 포함되는 경우, clustering marker 의 info.size 파라미터를 Marker View 의 파라미터로 추가해줘야하는 케이스)

읽어주셔서 감사합니다!

Kotlin Multiplatform 지원

• Compose Multiplatform에 iOS도 지원한다. (아직은 Alpha지만...)
• 네이버 지도는 iOS SDK가 있다.
  가능할지 모르겠지만... Flutter처럼 지원하는 것은 어떨까? 🤔

References

• 네이버 지도 SDK 문서
  • Android: https://navermaps.github.io/android-map-sdk/guide-ko/
  • iOS: https://navermaps.github.io/ios-map-sdk/guide-ko/
  • Web: https://navermaps.github.io/maps.js.ncp/

안녕하세요.

LocationOverlay기능은 현재 사용이 불가능할까요?

현재 이슈로 등록되어있는건 확인했습니다.
그래서 NaverMap에서 MapView를 직접 받아와서 접근해보려 했지만
https://fornewid.github.io/naver-map-compose/api/index.html 해당 문서에는 Compose에서 MapView를 받아오는 방법이 없는 것 같습니다.
혹시 방법이 있을까요??

OverlayImage 에 리모트에 있는 이미지를 넣을수 있는 방법 문의 드립니다

compose 의 Image 나 Coil 의 AsyncImage 를 바로 사용할수 있는 방법이 있을지 문의드립니다.

감사합니다

위치 오버레이 관련 질문

#53
해당 이슈를 읽어보았으나,

혹시 현 시점에서 다음과 같은 사용자 위치 오버레이는 naver-map-compose에서 구현이 불가능한 것인가요?

(android view system 의 naver-map 을 사용한 앱 입니다.)

LocationTrackingMode 를 None 이 아닌 값으로 설정해보아도 사용자의 위치를 표시하는 오버레이가 보이지 않아 질문드립니다.

ClursterMarker 에 대한 Click Event 지원

기존에 Clustering 을 지원하기 위해 사용되었던 Ted Clustering 의 경우
다음과 같은 방법으로 클러스터링 된 마커에 대해 클릭 리스너를 구현할 수 있었습니다.

var clusterManager by remember { mutableStateOf<TedNaverClustering<BoothDetailMapModel>?>(null) }
DisposableMapEffect(uiState.boothList) { map ->
    if (clusterManager == null) {
        clusterManager = TedNaverClustering.with<BoothDetailMapModel>(context, map)   
            .markerClickListener { booth -> // 각 마커에 대한 클릭 이벤트
                onMapUiAction(MapUiAction.OnBoothMarkerClick(listOf(booth)))
            }
            .clusterClickListener { booths -> // 클러스터링된 마커에 대한 클릭 이벤트
                onMapUiAction(MapUiAction.OnBoothMarkerClick(booths.items.toList()))
            }
            .make()
    }
    clusterManager?.addItems(uiState.boothList)
    onDispose {
        clusterManager?.clearItems()
    }
}

그런데 현재 naver-map-compose 에서의 경우
지원을 하지 않은 것으로 추측되는데요

var clusterManager by remember { mutableStateOf<Clusterer<BoothDetailMapModel>?>(null) }
DisposableMapEffect(uiState.boothList) { map ->
    if (clusterManager == null) {
        clusterManager = Clusterer.Builder<BoothDetailMapModel>()
            .clusterMarkerUpdater(object : DefaultClusterMarkerUpdater() {
                override fun updateClusterMarker(info: ClusterMarkerInfo, marker: Marker) {
                    super.updateClusterMarker(info, marker)
                    // TODO: 클러스터링된 마커에 대한 클릭 이벤트 지정
                }
            })
            .leafMarkerUpdater(object : DefaultLeafMarkerUpdater() {
                override fun updateLeafMarker(info: LeafMarkerInfo, marker: Marker) {
                    super.updateLeafMarker(info, marker)
                    marker.onClickListener = Overlay.OnClickListener {
                        // 각 마커에 대한 클릭 이벤트
                        onMapUiAction(MapUiAction.OnBoothMarkerClick(listOf(info.key as BoothDetailMapModel)))
                        true
                    }
                }
            })
            .build()
            .apply { this.map = map }
    }
    val boothListMap = buildMap(uiState.boothList.size) {
        uiState.boothList.forEachIndexed { index, booth ->
            put(booth, index)
        }
    }
    clusterManager?.addAll(boothListMap)
    onDispose {
        clusterManager?.clear()
    }
}

updateLeafMarker 함수 내에서는 info.key 를 통해 클릭된 각 마커에 대한 정보를 info.key as DataClass를 통해 가져올 수 있는데, updateClusterMarker 함수 내에서는 key 와 같은 값을 ClusterMarkInfo 클래스에서 얻을 수 없어, 클릭된 클러스터링 마커에 대한 정보 목록을 가져올 수 없었습니다.

Default 클릭 이벤트로, 클러스터링된 마커를 클릭할 경우, 지도가 확대되면서 클러스터링된 마커가 여러개의 마커로 분리되는 이벤트가 지정되어있는 것 같은데, 혹시 클러스터링된 마커를 클릭할 경우 해당 마커 내에 포함된 정보 목록을 가져올 수 있는 방법이 있는지 궁금합니다.

목적은 해당 클러스터링된 마커를 클릭할 경우 포함된 List<DataClass>를 리스트 형태로 화면에 출력하기 위함 입니다.

Marker 에 대한 Icon Custom Design 지원

혹시 Marker 의 Design 을 Composable 함수를 사용해서 Custom Design 할 수 있도록 지원이 가능할까요?

네이버 맵에는 LeafMarker, ClusterMarker 에 대한 아이콘을 OverlayImage 타입으로 설정해야하는 특성이 있습니다.

    @Keep
    @b
    @UiThread
    public void setIcon(@NonNull OverlayImage icon) {
        this.e();
        if (!ObjectsCompat.equals(this.a, icon)) {
            this.a = icon;
            if (this.isAdded()) {
                this.nativeSetIcon(icon);
            }

        }
    }

출처)
https://navermaps.github.io/android-map-sdk/guide-ko/5-2.html

OverlayImage 로 타입을 맞춰줘야 하기 때문에, 보통은 Drawable Resource를 사용해 Custom Marker 를 만들 수 있겠으나, 다음과 같은 UI 를 구현하기 위해선 Drawable Resource 를 사용해서 만들기엔 한계가 존재합니다.

(captionText 가 marker의 Design 내에 포함되는 경우, clustering marker 의 info.size 파라미터를 Marker View 의 파라미터로 추가해줘야하는 케이스)

Marker 를 커스텀 해보려구 구글링을 해봤을 때, 다음과 같은 글을 찾을 수 있었습니다.

Layout View로 Bitmap 만들기

CustomView 를 만들어서 이를 OverlayImage.fromView(customView) 함수를 이용해 OverlayImage 로 변환하여 icon 에 넣는 방식으로 추측이 되는데,

혹시 CustomView 가 아닌 Composable 함수를 OverlayImage 로 변환하게 하는 것을 지원하는게 가능한 것인지 궁금합니다.
이것이 가능하다면, Marker 를 커스텀하는데 있어서 제약이 많이 해결될 것으로 보입니다.

아니면, 혹시 CustomView 형태로도 위와 같은 요구사항(captionText 가 Marker 의 디자인에 포함되는 경우)을 만족시킬 수 있는지 궁금합니다.

읽어주셔서 감사합니다!

지도가 로딩되지 않는 문제

NaverMap을 호출했을 때 지도가 로딩되지 않고 아무 콘텐츠도 보이지 않는 현상이 발생합니다.
오래 기다리거나 터치를 해도 로딩이 되지 않습니다.
코드는 아래와 같습니다.

@OptIn(ExperimentalNaverMapApi::class)
@Composable
fun UserMapScreen(
    moveToDetailScheduleScreen: () -> Unit,
    viewModel: DetailScheduleViewModel = hiltViewModel()
) {
    BackHandler {
        moveToDetailScheduleScreen()
    }
//    Text(text = "")
    NaverMap(
        modifier = Modifier
            .fillMaxSize(),
    ) {
    }
}

위 코드에서 주석 처리 되어있는 Text Composable의 주석을 해제하면 제대로 로딩이 되는 것을 확인했습니다.
다른 실험을 해보았을 때 Text 대신 Box(modifier = Modifier) {} , 빈 Row, 빈 Column는 아무 효과가 없습니다.

로딩이 되지 않는 상태에서 홈 화면으로 나갔다가 들어오거나 상단바를 내렸다가 올리면 지도가 로딩되는 현상을 확인했습니다. 영상 첨부합니다.

Screen_Recording_20231117_000353_WhereAreYou.mp4

Add support for `InfoWindow`

배경

• Marker를 클릭했을 때, InfoWindow가 보여질 수 있도록 기능을 추가해야 한다.

References

• https://navermaps.github.io/android-map-sdk/guide-ko/5-3.html
• MarkerInfoWindow, MarkerInfoWindowContent: https://github.com/googlemaps/android-maps-compose/blob/main/maps-compose/src/main/java/com/google/maps/android/compose/Marker.kt

maven 저장소 추가 관련 질문

네이버 맵 공식 문서의 언급된 저장소 이름과

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

readme 에 적힌 저장소의 이름이 다른데

2. https://naver.jfrog.io/artifactory/maven/

readme 에 적힌 maven 저장소만 추가해도 가능한 게 맞을까요? 아니면 둘다 추가해야하는 것인지 궁금합니다.

현재 1번만 추가하여서 작업 중이었는데, 이를 제거하고 2번을 추가하고 앱을 빌드 할 경우,
Could not find com.naver.maps:map-sdk:3.18.0.Searched in the following locations: 에러가 발생하여, 문서 이해에 혼동이 있어 질문 드립니다.
1번과 2번을 모두 추가할 경우엔 정상적으로 빌드됩니다.

관련한 에러 캡쳐본입니다.

naver-map-compose 1.7.2 사용 시 compile error가 발생합니다.

안녕하세요! 라이브러리를 잘 사용하고 있습니다.

최근에 naver-map-compose 를 1.5.7 -> 1.7.2 로 변경하려고 했는데 아래와 같은 에러가 발생합니다.
compose-bom 2024.06.00 을 사용하고 있고, 혹시나 2024.05.00 에서는 문제가 발생하지 않는지 확인해봤는데 동일하게 빌드 에러가 발생합니다.
한번 확인 부탁드립니다.

감사합니다.

> Task :feature-home:kaptGenerateStubsDebugKotlin
[Fatal Error] map-sdk-3.18.0.pom:2:10: doctype이 이미 표시되었습니다.
[Fatal Error] map-sdk-3.18.0.pom:2:10: doctype이 이미 표시되었습니다.

> Task :feature-home:kaptGenerateStubsDebugKotlin FAILED
e: Could not load module <Error module>

Marker redraw failed with new latlng, and remained

안녕하세요 만들어주신 naver map sdk 잘 사용하고 있습니다

location item들을 param으로 받는 composable function 내부에
NaverMap compose 호출을 통해 처음 marker가 있는 화면을 그린 뒤(marker는 location 을 position 및 key로 사용)
app을 pause 후 resume 하고 나서

location param을 변경하여 navermap을 감싸는 composable function 이 다시 호출되었을때
이전 marker들은 이전 위치에 그대로 남아있고 새로운 position에 맞는 marker들이 생성되진 않습니다
새로운 position에 맞게 그려져야 할 것 같습니다

PathOverlay는 정상적으로 새롭게 그려집니다(rememberSaveable이 아니기도 해서 그렇겠지요)

ex)
@OptIn(ExperimentalNaverMapApi::class)
@Composable
fun DrawMap(
    cameraPositionState: CameraPositionState,
    remainItems: List<LocationItem>
) {
    NaverMap(cameraPositionState = cameraPositionState) {
        val width = dimensionResource(R.dimen.path_overlay_width)
        if (remainItems.size >= 2) {
            PathOverlay(
                coords = remainItems.reversed().map { locationToLatLng(it) },
                width = width,
                outlineWidth = 0.dp,
                color = Color(0xFF7777FF),
                patternImage = OverlayImage.fromResource(R.drawable.small_wide_footprints),
                patternInterval = dimensionResource(R.dimen.overlay_pattern_interval),
            )
        }
        DrawMarkers(remainItems)
    }
}


@OptIn(ExperimentalNaverMapApi::class)
@Composable
fun DrawMarkers(items: List<LocationItem>) {
    items.forEachIndexed { index, locationItem ->
        Marker(
            state = rememberMarkerState(
                key = "$index $locationItem", // key가 있든 없든 문제는 재현됩니다
                position = LatLng(
                    locationItem.latitude.toDouble(),
                    locationItem.longitude.toDouble()
                )
            ),
            captionText = locationItem.convertTime(),
            globalZIndex = MARKER_OVERLAY_Z_INDEX_FROM - index,
            captionTextSize = 10.sp,
            isHideCollidedMarkers = true,
        )
    }
}

이슈인 것 같아 리포팅 해드립니다

혹시 제가 잘못 사용하고 있는 부분에 의해 발생하고 있는 이슈라면
수정할 부분이 있다면 알려주시면 매우 감사하겠습니다

마커 클러스터링 관련 질문

demo app과 네이버 공식문서를 통해 naver-map 에서 이제 자체적으로 클러스터링을 지원하는 것을 확인했습니다.

혹시 naver-map-compose 에서는 몇버전에서부터 해당 기능을 이용할 수 있는지 알 수 있을까요?
기존 naver-map-compose 1.5.5 버전, location 21.0.1 버전에선 clustering 관련 import 가 이뤄지지 않는 것 같아. 버전을 올려보았는데, 정상적으로 import 가 되지 않는것 같아서 이슈 남깁니다.

Add support for `LocationOverlay`

배경

• 내 위치를 표시하는 LocationOverlay의 UI를 커스터마이징 할 수 있는 기능을 추가해야 한다.

References

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

오버레이 클릭 구현

오버레이 클릭 구현이 안되어있는 줄 알았는데,
Mark에서 onClick 에 return 값을 true 으로 설정 onMapClick 이벤트를 호출하지 않을 수 있었네요

Failed to resolve: io.github.fornewid:naver-map-compose:1.2.3

repositories {
mavenCentral()
}
설정을 했음에도 의존성을 다운하지 못하는 것 같은데요, 버전을 바꿔도 동일합니다.
혹시 지금 다운로드가 안되는 상태인가요?

추가로 https://androidexample365.com/naver-map-android-sdk-for-jetpack-compose/ 이 문서에는

// NAVER Map Android SDK 최신 버전도 포함해야 합니다.
    implementation 'com.naver.maps:map-sdk:3.15.0'

이런 설명도 있던데, github README 에는 보이질 않아서요. naver map sdk도 추가를 해야하는걸까요?

rememberFusedLocationSource() 사용 시 exception 발생.

NaverMap(
    ...
    locationSource = rememberFusedLocationSource()
)

rememberFusedLocationSource() 사용 시 IncompatibleClassChangeError exception이 발생합니다.

FATAL EXCEPTION: main
                                                                                                    Process: co.kr.onnuri.hnc.phr.dev.debug, PID: 9366
                                                                                                    java.lang.IncompatibleClassChangeError: The method 'com.google.android.gms.tasks.Task com.google.android.gms.location.FusedLocationProviderClient.requestLocationUpdates(com.google.android.gms.location.LocationRequest, com.google.android.gms.location.LocationCallback, android.os.Looper)' was expected to be of type virtual but instead was found to be of type interface (declaration of 'com.naver.maps.map.compose.FusedLocationSource$FusedLocationCallback$startListening$1' appears in /data/app/co.kr.onnuri.hnc.phr.dev.debug-g5iwgxtCxF6Mgm_Mq2DmiQ==/base.apk:classes22.dex)
                                                                                                    	at com.naver.maps.map.compose.FusedLocationSource$FusedLocationCallback$startListening$1.onConnected(FusedLocationSource.kt:139)
                                                                                                    	at com.google.android.gms.common.internal.zak.zad(com.google.android.gms:play-services-base@@18.1.0:11)
                                                                                                    	at com.google.android.gms.common.api.internal.zabe.zab(com.google.android.gms:play-services-base@@18.1.0:3)
                                                                                                    	at com.google.android.gms.common.api.internal.zaaw.zaC(com.google.android.gms:play-services-base@@18.1.0:11)
                                                                                                    	at com.google.android.gms.common.api.internal.zaaw.zag(com.google.android.gms:play-services-base@@18.1.0:4)
                                                                                                    	at com.google.android.gms.common.api.internal.zabi.onConnected(com.google.android.gms:play-services-base@@18.1.0:2)
                                                                                                    	at com.google.android.gms.common.api.internal.zat.onConnected(com.google.android.gms:play-services-base@@18.1.0:1)
                                                                                                    	at com.google.android.gms.common.internal.zah.onConnected(com.google.android.gms:play-services-base@@18.1.0:1)
                                                                                                    	at com.google.android.gms.common.internal.zzf.zzd(com.google.android.gms:play-services-basement@@18.1.0:10)
                                                                                                    	at com.google.android.gms.common.internal.zza.zza(com.google.android.gms:play-services-basement@@18.1.0:4)
                                                                                                    	at com.google.android.gms.common.internal.zzc.zze(com.google.android.gms:play-services-basement@@18.1.0:3)
                                                                                                    	at com.google.android.gms.common.internal.zzb.handleMessage(com.google.android.gms:play-services-basement@@18.1.0:31)
                                                                                                    	at android.os.Handler.dispatchMessage(Handler.java:105)
                                                                                                    	at android.os.Looper.loop(Looper.java:164)
                                                                                                    	at android.app.ActivityThread.main(ActivityThread.java:6944)
                                                                                                    	at java.lang.reflect.Method.invoke(Native Method)
                                                                                                    	at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:327)
                                                                                                    	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1374)

play-services-location의 버전 차이로 인한 문제인 것 같습니다.
프로젝트 내에서 rememberFusedLocationSource를 카피하여 최신 버전에 맞게 수정하니 정상적으로 동작되었습니다.

Add library to support Kakao Map API

• https://apis.map.kakao.com/android/