Add animated weather data | Maps SDK | Android Docs

Load a raster image to a style using ImageSource and display it on a map as animated weather data using RasterLayer.

Kotlin

AnimatedImageSourceActivity.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.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.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.style.sources.generated.ImageSource
import com.mapbox.maps.extension.style.sources.getSourceAs
import com.mapbox.maps.extension.style.sources.updateImage
import kotlinx.coroutines.delay

/**
 * Load a raster image to a style using ImageSource and display it on a map as
 * animated weather data using RasterLayer.
 */
public class AnimatedImageSourceActivity : ComponentActivity() {

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

    setContent {
      MapboxMapComposeTheme {
        ExampleScaffold {
          MapboxMap(
            Modifier.fillMaxSize(),
            mapViewportState = rememberMapViewportState {
              setCameraOptions {
                center(Point.fromLngLat(-76.1255491524373, 43.043493218594804))
                zoom(6.0)
              }
            }
          ) {
            val bitmaps = listOf(
              ImageBitmap.imageResource(R.drawable.southeast_radar_0).asAndroidBitmap(),
              ImageBitmap.imageResource(R.drawable.southeast_radar_1).asAndroidBitmap(),
              ImageBitmap.imageResource(R.drawable.southeast_radar_2).asAndroidBitmap(),
              ImageBitmap.imageResource(R.drawable.southeast_radar_3).asAndroidBitmap(),
            )
            MapEffect(Unit) {
              val imageSource: ImageSource = it.mapboxMap.getSourceAs(ID_IMAGE_SOURCE)!!
              var index = 0
              while (true) {
                imageSource.updateImage(bitmaps[index])
                delay(1000)
                index = (index + 1) % 4
              }
            }
            RasterLayer(
              sourceState = rememberImageSourceState(sourceId = ID_IMAGE_SOURCE) {
                coordinates = PointListValue(
                  Point.fromLngLat(-80.425, 46.437),
                  Point.fromLngLat(-71.516, 46.437),
                  Point.fromLngLat(-71.516, 37.936),
                  Point.fromLngLat(-80.425, 37.936)
                )
              }
            )
          }
        }
      }
    }
  }

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

追加の開発者リソース

この{Type}は役に立ちましたか？