Создание карты Mapbox с помощью Jetpack Compose — отличный способ интегрировать интерактивные карты в ваши приложения Android. В этой статье мы рассмотрим несколько способов достижения этой цели, а также приведем примеры кода.

Метод 1. Использование Mapbox SDK

Mapbox SDK предоставляет полный набор API и инструментов для работы с картами. Для начала убедитесь, что в ваш проект добавлен Mapbox SDK. Вы можете сделать это, добавив в файл build.gradle следующую зависимость:

implementation 'com.mapbox.mapboxsdk:mapbox-android-sdk:10.1.0'

После добавления SDK вы можете создать MapView в макете Compose, используя составной элемент AndroidView. Вот пример:

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.ComposeView
import com.mapbox.mapboxsdk.maps.MapboxMapOptions
import com.mapbox.mapboxsdk.maps.Style
@Composable
fun MapboxMap() {
    val mapOptions = MapboxMapOptions.createFromAttributes(context, null)
        .apply {
            accessToken = "YOUR_MAPBOX_ACCESS_TOKEN"
            styleUrl = Style.MAPBOX_STREETS
        }

    AndroidView(
        modifier = Modifier.fillMaxSize(),
        factory = { context ->
            ComposeView(context).apply {
                id = R.id.mapView
                MapboxMap(this, mapOptions)
            }
        }
    )
}

Не забудьте заменить "YOUR_MAPBOX_ACCESS_TOKEN"своим собственным токеном доступа к Mapbox.

Метод 2. Использование Mapbox Navigation SDK

Если вы хотите интегрировать пошаговую навигацию в свое приложение, вы можете использовать Mapbox Navigation SDK. Добавьте следующую зависимость в файл build.gradle:

implementation 'com.mapbox.mapboxsdk:mapbox-android-navigation-ui:1.2.0'

Чтобы создать MapView с функциями навигации, вы можете использовать следующий код:

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.ComposeView
import com.mapbox.mapboxsdk.Mapbox
import com.mapbox.mapboxsdk.maps.MapView
import com.mapbox.mapboxsdk.maps.Style
import com.mapbox.services.android.navigation.ui.v5.NavigationView
import com.mapbox.services.android.navigation.ui.v5.OnNavigationReadyCallback
@Composable
fun MapboxNavigationMap() {
    AndroidView(
        modifier = Modifier.fillMaxSize(),
        factory = { context ->
            ComposeView(context).apply {
                id = R.id.navigationMapView
                NavigationView(
                    context,
                    Mapbox.getInstance(context, "YOUR_MAPBOX_ACCESS_TOKEN"),
                    MapView(context).apply {
                        id = R.id.mapView
                        onCreate(null)
                    },
                    object : OnNavigationReadyCallback {
                        override fun onNavigationReady(isRunning: Boolean) {
                            // Handle navigation ready callback
                        }
                    }
                )
            }
        }
    )
}

И еще раз не забудьте заменить "YOUR_MAPBOX_ACCESS_TOKEN"своим собственным токеном доступа к Mapbox.

Метод 3. Использование API статических изображений Mapbox

Если вы хотите отображать статические карты без необходимости интерактивности, вы можете использовать API статических изображений Mapbox. Вы можете сделать HTTP-запрос к API, чтобы получить статическое изображение нужного места. Вот пример того, как это сделать с помощью Jetpack Compose:

import androidx.compose.foundation.Image
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.painter.BitmapPainter
import androidx.compose.ui.graphics.painter.Painter
import com.bumptech.glide.Glide
import com.bumptech.glide.load.engine.DiskCacheStrategy
import com.bumptech.glide.request.RequestOptions
@Composable
fun MapboxStaticMap() {
    val imageUrl = "https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/-122.4194,37.7749,13,0,0/600x400?access_token=YOUR_MAPBOX_ACCESS_TOKEN"
    val requestOptions = RequestOptions()
        .diskCacheStrategy(DiskCacheStrategy.ALL)

    val painter: Painter = BitmapPainter(
        imageBitmap = Glide.with(LocalContext.current)
            .asBitmap()
            .load(imageUrl)
            .apply(requestOptions)
            .submit()
            .get()
    )

    Image(painter = painter, contentDescription = "Map")
}

В переменной imageUrlзамените "YOUR_MAPBOX_ACCESS_TOKEN"на свой собственный токен доступа к Mapbox.