Heat Map in compose

[meyja]

I'm searching for functionality to implement heat map over my map in jetpack compose. I have not found any documentation on this, and as I understood from my Discourse request, there may not be any solution for this yet.

[wangela]

If you would like to upvote the priority of this issue, please comment below or react on the original post above with :+1: so we can see what is popular when we triage.

@meyja Thank you for opening this issue. 🙏 Please check out these other resources that might help you get to a resolution in the meantime:

• Check the issue tracker - bugs and feature requests for Google Maps Platform APIs and SDKs
• Open a support case - Get 1:1 support in Cloud Console.
• Discord - chat with other developers
• StackOverflow - use the google-maps tag

This is an automated message, feel free to ignore.

[Slion]

Heatmaps are working just fine as it is. You need to use TileOverlay together with HeatmapTileProvider. See: https://developers.google.com/maps/documentation/android-sdk/utility/heatmap

[dkhawk]

IIUC, you will have to use a MapEffect to add a heat map to a composable map.

If you follow this [example] (https://developers.google.com/maps/documentation/android-sdk/utility/heatmap#simple), you would just need to change this call val overlay = map.addTileOverlay(TileOverlayOptions().tileProvider(provider)) to happen in a MapEffect.

This particular part should be similar to how other layers are added to the composable map. See this example https://developers.google.com/codelabs/maps-platform/maps-platform-101-compose#outline-the-mountain-ranges

[hossain-khan]

By following Dale's guide, I was able to piece together the heatmap. Leaving the snippet here for posterity!

// This code belongs inside the GoogleMap content block
MapEffect(key1 = items) {map ->
    val latLngs: List<LatLng> = items.map { it.itemPosition }

    if(latLngs.isEmpty()) {
        return@MapEffect
    }

    // Create a heat map tile provider, passing it the latlngs of the police stations.
    val provider = HeatmapTileProvider.Builder()
        .data(latLngs)
        .build()

    // Add a tile overlay to the map, using the heat map tile provider.
    map.addTileOverlay(TileOverlayOptions().tileProvider(provider))
}