How do I add an overlay of base64 images on the map?

[jm1049]

I want to render a base64 image in a boundingBox on the map. The image has data about AQI (marks cleaner areas as green, polluted as amber or red depending on the pollution level).

Here is my component wrapper around maplibre-compose. I have added props for overlay but I can't seem to figure out how I can render on the map. I tried using RasterLayer but didn't work

Original Map Wrapper component:

import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import dev.sargunv.maplibrecompose.compose.MaplibreMap
import dev.sargunv.maplibrecompose.compose.rememberCameraState
import dev.sargunv.maplibrecompose.compose.CameraState
import dev.sargunv.maplibrecompose.compose.layer.RasterLayer
import dev.sargunv.maplibrecompose.core.CameraPosition
import dev.sargunv.maplibrecompose.core.source.RasterSource
import dev.sargunv.maplibrecompose.core.source.TileSetOptions
import io.github.dellisd.spatialk.geojson.BoundingBox
import io.github.dellisd.spatialk.geojson.Position
import kotlinx.coroutines.CoroutineScope
import kotlin.io.encoding.ExperimentalEncodingApi

data class Overlay(
    val bounds: List<Position>,
    val base64Image: String,
)

@OptIn(ExperimentalEncodingApi::class)
@Composable
fun MapComponent(
    modifier: Modifier = Modifier,
    styleUri: String = "https://tiles.openfreemap.org/styles/liberty",
    initialPosition: Position = Position(latitude = 45.521, longitude = -122.675),
    initialZoom: Double = 13.0,
    overlay: Overlay? = null,
    content: @Composable BoxScope.(cameraState: CameraState, coroutineScope: CoroutineScope) -> Unit = { _, _ -> }
) {
    val camera = rememberCameraState(
        firstPosition = CameraPosition(target = initialPosition, zoom = initialZoom)
    )
    val coroutineScope = rememberCoroutineScope()

    Box(modifier = modifier.fillMaxSize()) {
        MaplibreMap(
            styleUri = styleUri,
            cameraState = camera,
            modifier = Modifier.matchParentSize()
        )

            content(camera, coroutineScope)

    }
}

My attempt to render the base64 image

import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import dev.sargunv.maplibrecompose.compose.MaplibreMap
import dev.sargunv.maplibrecompose.compose.rememberCameraState
import dev.sargunv.maplibrecompose.compose.CameraState
import dev.sargunv.maplibrecompose.compose.layer.RasterLayer
import dev.sargunv.maplibrecompose.core.CameraPosition
import dev.sargunv.maplibrecompose.core.source.RasterSource
import dev.sargunv.maplibrecompose.core.source.TileSetOptions
import io.github.dellisd.spatialk.geojson.BoundingBox
import io.github.dellisd.spatialk.geojson.Position
import kotlinx.coroutines.CoroutineScope
import kotlin.io.encoding.ExperimentalEncodingApi

data class Overlay(
    val bounds: List<Position>,
    val base64Image: String,
)

@OptIn(ExperimentalEncodingApi::class)
@Composable
fun MapComponent(
    modifier: Modifier = Modifier,
    styleUri: String = "https://tiles.openfreemap.org/styles/liberty",
    initialPosition: Position = Position(latitude = 45.521, longitude = -122.675),
    initialZoom: Double = 13.0,
    overlay: Overlay? = null,
    content: @Composable BoxScope.(cameraState: CameraState, coroutineScope: CoroutineScope) -> Unit = { _, _ -> }
) {
    val camera = rememberCameraState(
        firstPosition = CameraPosition(target = initialPosition, zoom = initialZoom)
    )
    val coroutineScope = rememberCoroutineScope()

    Box(modifier = modifier.fillMaxSize()) {
        MaplibreMap(
            styleUri = styleUri,
            cameraState = camera,
            modifier = Modifier.matchParentSize()
        )
            // Only add the image overlay if both the image and bounds exist
            if (overlay?.base64Image != null && overlay?.bounds != null && overlay.bounds.size == 4) {

//                 Add the raster layer
                RasterLayer(
                    id = "aqi-overlay-layer",
                    source = RasterSource(
                        id = "aqi-overlay-source",
                        tiles = listOf("data:image/png;base64," + overlay.base64Image),
                        options = TileSetOptions(
                            boundingBox = BoundingBox(
                                west = overlay.bounds[1].longitude,
                                south = overlay.bounds[0].latitude,
                                east = overlay.bounds[3].longitude,
                                north = overlay.bounds[2].latitude
                            ),
                        )
                    )
                )
            }

            content(camera, coroutineScope)

    }
}

[sargunv]

RasterSource is for when you have a URL serving image tiles, like https://a.tile.openstreetmap.org/{z}/{x}/{y}.png.

For just an arbitrary image not necessarily pre-formatted as tiles, you'll want ImageSource, coming in the next release. You can try it out today by using the snapshot builds.

I don't think we've tested ImageSource with base64 images, but if it works with MapLibre Native, it should work. If MapLibre Native doesn't support base64 images, you can also provide a Bitmap.

If/when you try it out, do report back on whether a base64 url works.

[jm1049]

going to try it today, and report how it goes.

Thank you!

[jm1049]

It is working perfectly for bitmap images. I think I need to write platform specific functions to convert base64 to bitmap and then render via imagesource. I will try this on Monday and report how it goes.

[jm1049]

Code for reference

import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Canvas
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.ImageBitmapConfig
import dev.sargunv.maplibrecompose.compose.MaplibreMap
import dev.sargunv.maplibrecompose.compose.rememberCameraState
import dev.sargunv.maplibrecompose.compose.CameraState
import dev.sargunv.maplibrecompose.compose.layer.RasterLayer
import dev.sargunv.maplibrecompose.core.BaseStyle
import dev.sargunv.maplibrecompose.core.CameraPosition
import dev.sargunv.maplibrecompose.core.source.ImageSource
import dev.sargunv.maplibrecompose.core.util.PositionQuad
import io.github.dellisd.spatialk.geojson.Position
import kotlinx.coroutines.CoroutineScope
import kotlin.io.encoding.ExperimentalEncodingApi

data class Overlay(
    val bounds: List<Position>,
    val base64Image: String,
)

fun createRedBitmap(width: Int = 256, height: Int = 256, alpha: Float = 0.5f): ImageBitmap {
    val bitmap = ImageBitmap(width, height, ImageBitmapConfig.Argb8888)
    val canvas = Canvas(bitmap)
    canvas.drawRect(
        0f, 0f, width.toFloat(), height.toFloat(),
        androidx.compose.ui.graphics.Paint().apply {
            color = androidx.compose.ui.graphics.Color.Red.copy(alpha = alpha)
        }
    )
    return bitmap
}

@OptIn(ExperimentalEncodingApi::class)
@Composable
fun MapComponent(
    modifier: Modifier = Modifier,
    styleUri: String = "https://tiles.openfreemap.org/styles/liberty",
    initialPosition: Position = Position(latitude = 51.5056, longitude = -0.1226), // London coordinates to match the overlay
    initialZoom: Double = 13.0,
    overlay: Overlay? = null,
    content: @Composable BoxScope.(cameraState: CameraState, coroutineScope: CoroutineScope) -> Unit = { _, _ -> }
) {

    val camera = rememberCameraState(
        firstPosition = CameraPosition(target = initialPosition, zoom = initialZoom)
    )
    val coroutineScope = rememberCoroutineScope()

    Box(modifier = modifier.fillMaxSize()) {
        MaplibreMap(
            baseStyle = BaseStyle.Uri(styleUri),
            cameraState = camera,
            modifier = Modifier.matchParentSize()
        )
        {
            overlay?.let { overlay ->
                RasterLayer(
                    id = "overlay-layer",
                    source = ImageSource(
                        id = "overlay-image",
                        position = PositionQuad(
                            topLeft = overlay.bounds[0], // NW corner
                            topRight = overlay.bounds[1],      // NE corner
                            bottomRight = overlay.bounds[2],   // SE corner
                            bottomLeft = overlay.bounds[3]    // SW corner
                        ),
                        image = createRedBitmap(512, 512) // TODO: add base64 image in overlay object after converting it to bitmap
                    )
                )
            }

        }

        content(camera, coroutineScope)
    }
}

[sargunv]

I'd recommend using rememberImageSource instead of instantiating ImageSource directly in the composition.

Instantiating directly will likely cause a crash when that function recomposes, recreating the source with the same id

[jm1049]

This approach works if you want to render base64images as overlay on map.

import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import com.pstep.app.libs.Utility.withOpacity
import dev.sargunv.maplibrecompose.compose.MaplibreMap
import dev.sargunv.maplibrecompose.compose.rememberCameraState
import dev.sargunv.maplibrecompose.compose.CameraState
import dev.sargunv.maplibrecompose.compose.layer.RasterLayer
import dev.sargunv.maplibrecompose.compose.source.rememberImageSource
import dev.sargunv.maplibrecompose.core.BaseStyle
import dev.sargunv.maplibrecompose.core.CameraPosition
import dev.sargunv.maplibrecompose.core.util.PositionQuad
import io.github.dellisd.spatialk.geojson.Position
import kotlinx.coroutines.CoroutineScope
import kotlin.io.encoding.ExperimentalEncodingApi
import com.pstep.app.platform.base64ToImageBitmap

data class Overlay(
    val bounds: List<Position>,
    val base64Image: String,
    val opacity: Float = 0.7f,
)

@OptIn(ExperimentalEncodingApi::class)
@Composable
fun MapComponent(
    modifier: Modifier = Modifier,
    styleUri: String = "https://tiles.openfreemap.org/styles/liberty",
    initialPosition: Position = Position(latitude = 51.5056, longitude = -0.1226), // London coordinates to match the overlay
    initialZoom: Double = 13.0,
    overlay: Overlay? = null,
    content: @Composable BoxScope.(cameraState: CameraState, coroutineScope: CoroutineScope) -> Unit = { _, _ -> }
) {

    val camera = rememberCameraState(
        firstPosition = CameraPosition(target = initialPosition, zoom = initialZoom)
    )
    val coroutineScope = rememberCoroutineScope()

    Box(modifier = modifier.fillMaxSize()) {
        MaplibreMap(
            baseStyle = BaseStyle.Uri(styleUri),
            cameraState = camera,
            modifier = Modifier.matchParentSize()
        )
        {
            overlay?.let { overlay ->
                val baseImageBitmap = base64ToImageBitmap(overlay.base64Image)
                val imageBitmap = baseImageBitmap?.withOpacity(overlay.opacity)

                imageBitmap?.let {
                    val imageSource = rememberImageSource(
                        position = PositionQuad(
                            topLeft = overlay.bounds[0],     // NW corner
                            topRight = overlay.bounds[1],    // NE corner
                            bottomRight = overlay.bounds[2], // SE corner
                            bottomLeft = overlay.bounds[3]   // SW corner
                        ),
                        bitmap = imageBitmap
                    )

                    RasterLayer(
                        id = "overlay-layer",
                        source = imageSource
                    )
                }

            }
        }

        content(camera, coroutineScope)
    }
}

import android.graphics.BitmapFactory
import android.util.Base64
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.asImageBitmap

actual fun base64ToImageBitmap(base64String: String): ImageBitmap? {
    return try {
        val pureBase64 = if (base64String.contains(",")) {
            base64String.substring(base64String.indexOf(",") + 1)
        } else {
            base64String
        }

        val decodedBytes = Base64.decode(pureBase64, Base64.DEFAULT)

        val bitmap = BitmapFactory.decodeByteArray(decodedBytes, 0, decodedBytes.size)

        bitmap?.asImageBitmap()
    } catch (e: Exception) {
        e.printStackTrace()
        null
    }
}

import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.toComposeImageBitmap
import kotlinx.cinterop.ExperimentalForeignApi
import kotlinx.cinterop.BetaInteropApi
import kotlinx.cinterop.addressOf
import kotlinx.cinterop.usePinned
import kotlinx.cinterop.memScoped
import platform.Foundation.NSData
import platform.Foundation.NSString
import platform.Foundation.create
import platform.UIKit.UIImage
import platform.UIKit.UIImagePNGRepresentation
import platform.posix.memcpy
import org.jetbrains.skia.Image

@OptIn(ExperimentalForeignApi::class, BetaInteropApi::class)
actual fun base64ToImageBitmap(base64String: String): ImageBitmap? {
    return try {
        val pureBase64 = if (base64String.contains(",")) {
            base64String.substring(base64String.indexOf(",") + 1)
        } else {
            base64String
        }

        // Create NSString from base64 string
        val nsString = NSString.create(string = pureBase64)

        // Use the correct iOS API for base64 decoding
        val data = NSData.create(base64Encoding = nsString as String) ?: return null

        // Create UIImage from NSData
        val uiImage = UIImage.imageWithData(data) ?: return null

        // For Compose Multiplatform, we need to convert UIImage to ImageBitmap
        // First get PNG representation
        val pngData = UIImagePNGRepresentation(uiImage) ?: return null

        // Convert to byte array properly
        val bytes = ByteArray(pngData.length.toInt())
        memScoped {
            bytes.usePinned { pinnedBytes ->
                memcpy(pinnedBytes.addressOf(0), pngData.bytes, pngData.length)
            }
        }

        // Convert to Skia Image and then to Compose ImageBitmap
        val skiaImage = Image.makeFromEncoded(bytes)
        skiaImage.toComposeImageBitmap()
    } catch (e: Exception) {
        println("Error converting base64 to ImageBitmap: ${e.message}")
        null
    }
}