> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/android/ja/maps/llms.txt)

# Use an image source

![Use an image source to easily display images on the map.](https://docs.mapbox.com/android/ja/assets/ideal-img/maps-compose-examples-image-source.7d3b819.480.png)

This example demonstrates the usage of an [`ImageSource`](https://docs.mapbox.com/android/maps/api/latest/mapbox-maps-android/com.mapbox.maps.extension.style.sources.generated/-image-source/) in the **Mapbox Maps SDK for Android**.

The example demonstrates how to load an image source with a bitmap in a compose UI. The example sets up a Mapbox map with the Mapbox Standard style with a `night` [LightPreset](https://docs.mapbox.com/map-styles/standard/guides/#light-presets/) and centers it on specific geographic coordinates. It then loads an image bitmap from a drawable and updates the [`ImageSource`](https://docs.mapbox.com/android/maps/api/latest/mapbox-maps-android/com.mapbox.maps.extension.style.sources.generated/-image-source/) within a `MapEffect` block using the [`updateImage`](https://docs.mapbox.com/android/maps/api/11.10.2/mapbox-maps-android/com.mapbox.maps.extension.style.sources/update-image.html) method. Additionally, a [`RasterLayer`](https://docs.mapbox.com/android/maps/api/latest/mapbox-maps-android/com.mapbox.maps.extension.style.layers.generated/-raster-layer/) is added to display the image over specified geographic points defined by `PointListValue` coordinates.

> **Note: Android Examples App Available**
> 
> This example code is part of the **Maps SDK for Android Examples App**, a working Android project [available on GitHub](https://github.com/mapbox/mapbox-maps-android/tree/v11.28.0/). Android developers are encouraged to run the examples app locally to interact with this example in an emulator and explore other features of the Maps SDK.
> 
> See our [Run the Maps SDK for Android Examples App](https://docs.mapbox.com/help/tutorials/maps-sdk-android-examples-app/) tutorial for step-by-step instructions.

**Kotlin**

Title: `ImageSourceActivity.kt`

[View on GitHub](https://github.com/mapbox/mapbox-maps-android/blob/v11.28.0/compose-app/src/main/java/com/mapbox/maps/compose/testapp/examples/style/ImageSourceActivity.kt)

```kt
package com.mapbox.maps.compose.testapp.examples.style

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.asAndroidBitmap
import androidx.compose.ui.res.imageResource
import com.mapbox.geojson.Point
import com.mapbox.maps.MapboxDelicateApi
import com.mapbox.maps.compose.testapp.ExampleScaffold
import com.mapbox.maps.compose.testapp.R
import com.mapbox.maps.compose.testapp.ui.theme.MapboxMapComposeTheme
import com.mapbox.maps.extension.compose.MapEffect
import com.mapbox.maps.extension.compose.MapboxMap
import com.mapbox.maps.extension.compose.animation.viewport.rememberMapViewportState
import com.mapbox.maps.extension.compose.style.DoubleValue
import com.mapbox.maps.extension.compose.style.PointListValue
import com.mapbox.maps.extension.compose.style.layers.generated.RasterLayer
import com.mapbox.maps.extension.compose.style.sources.generated.rememberImageSourceState
import com.mapbox.maps.extension.compose.style.standard.LightPresetValue
import com.mapbox.maps.extension.compose.style.standard.MapboxStandardStyle
import com.mapbox.maps.extension.compose.style.standard.ThemeValue
import com.mapbox.maps.extension.compose.style.standard.rememberStandardStyleState
import com.mapbox.maps.extension.style.sources.generated.ImageSource
import com.mapbox.maps.extension.style.sources.getSourceAs
import com.mapbox.maps.extension.style.sources.updateImage
import com.mapbox.maps.toMapboxImage

/**
 * Example to showcase usage of ImageSource.
 */
public class ImageSourceActivity : ComponentActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    setContent {
      MapboxMapComposeTheme {
        ExampleScaffold {
          MapboxMap(
            Modifier.fillMaxSize(),
            mapViewportState = rememberMapViewportState {
              setCameraOptions {
                center(Point.fromLngLat(-80.1263, 25.7845))
                zoom(12.0)
              }
            },
            style = {
              MapboxStandardStyle(
                standardStyleState = rememberStandardStyleState {
                  configurationsState.apply {
                    theme = ThemeValue.MONOCHROME
                    lightPreset = LightPresetValue.NIGHT
                  }
                }
              )
            }
          ) {
            @OptIn(MapboxDelicateApi::class)
            val bitmap = ImageBitmap.imageResource(R.drawable.miami_beach).asAndroidBitmap().toMapboxImage()
            MapEffect(Unit) {
              val imageSource: ImageSource = it.mapboxMap.getSourceAs(ID_IMAGE_SOURCE)!!
              imageSource.updateImage(bitmap)
            }
            RasterLayer(
              sourceState = rememberImageSourceState(sourceId = ID_IMAGE_SOURCE) {
                coordinates = PointListValue(
                  Point.fromLngLat(-80.11725, 25.7836),
                  Point.fromLngLat(-80.1397431334, 25.783548),
                  Point.fromLngLat(-80.13964, 25.7680),
                  Point.fromLngLat(-80.11725, 25.76795)
                )
              }
            ) {
              rasterEmissiveStrength = DoubleValue(1.0)
            }
          }
        }
      }
    }
  }

  private companion object {
    private const val ID_IMAGE_SOURCE = "image_source-id"
  }
}
```