Animated Image Source

Note

You can find the full source code of this example in AnimatedImageSourceActivity.kt of the MapLibreAndroidTestApp.

In this example we will see how we can animate an image source. This is the MapLibre Native equivalent of this MapLibre GL JS example.

Map data OpenStreetMap. © OpenMapTiles.

We set up an image source in a particular quad. Then we kick of a runnable that periodically updates the image source.

Creating the image source

val quad = LatLngQuad(
    LatLng(46.437, -80.425),
    LatLng(46.437, -71.516),
    LatLng(37.936, -71.516),
    LatLng(37.936, -80.425)
)
val imageSource = ImageSource(ID_IMAGE_SOURCE, quad, R.drawable.southeast_radar_0)
val layer = RasterLayer(ID_IMAGE_LAYER, ID_IMAGE_SOURCE)
map.setStyle(
    Style.Builder()
        .fromUri(TestStyles.AMERICANA)
        .withSource(imageSource)
        .withLayer(layer)
) { style: Style? ->
    runnable = RefreshImageRunnable(imageSource, handler)
    runnable?.let {
        handler.postDelayed(it, 100)
    }
}

Updating the image source

imageSource.setImage(drawables[drawableIndex++]!!)
if (drawableIndex > 3) {
    drawableIndex = 0
}
handler.postDelayed(this, 1000)