How to draw a layer with data fetched from the network?

[irakliy01]

I'm trying to display custom icons on the map using a SymbolLayer sourced from a GeoJsonSource. The GeoJSON data is fetched dynamically from a network based on the map's viewport.

My initial setup used a static GeoJSON file from assets, and it worked correctly. However, when switching to dynamic data fetching and updating the GeoJsonSource with rememberGeoJsonSource(GeoJsonData.Features(...)), the icons do not appear on the map, even though the data is fetched correctly.

What am I doing wrong?

Here's what I've tried:

@Composable
private fun CustomLayer(
    uiState: MapUiState,
    onIconClick: (List<Feature>) -> ClickResult,
) {
    val customIcon = painterResource(id = R.drawable.ic_custom)

    val customSource = rememberGeoJsonSource(
        data = GeoJsonData.Features(
            (uiState as? MapUiState.Success)?.features ?: FeatureCollection(emptyList())
        ),
    )

    SymbolLayer(
        id = "custom_layer",
        source = customSource,
        sourceLayer = "poi",
        iconImage = image(customIcon),
        minZoom = MapLayers.MIN_ZOOM,
        iconAllowOverlap = const(true),
        onClick = onIconClick,
    )
}

    val customSource = rememberGeoJsonSource(
        data = GeoJsonData.JsonString("{ \"type\": \"FeatureCollection\", \"features\": [] }")
    )

    val currentFeaturesJson by rememberUpdatedState(
        (uiState as? MapUiState.Success)?.features
            ?: "{ \"type\": \"FeatureCollection\", \"features\": [] }"
    )

    LaunchedEffect(uiState, customSource) {
        if (uiState is MapUiState.Success) {
            try {
                customSource.setData(GeoJsonData.JsonString(currentFeaturesJson))
            } catch (e: Exception) {
                Timber.e(e, "Error setting GeoJSON data")
            }
        }
    }

    val customSource = key(uiState) {
        rememberGeoJsonSource(
            data = GeoJsonData.Features(
                (uiState as? MapUiState.Success)?.features ?: FeatureCollection(emptyList())
            )
        )
    }

    val customSource = key(uiState) {
        rememberGeoJsonSource(getFeatures = { _, _ ->
            (uiState as? MapUiState.Success)?.features ?: FeatureCollection(emptyList())
        })
    }

I don't use bbox and zoom from getFeatures since I fetch data based on geohashes (I wanted to cache responses) and calculate geohash from cameraState like this:

    LaunchedEffect(cameraState) {
        snapshotFlow { cameraState.position }
            .debounce(500L)
            .collect { position ->
                val currentBounds = cameraState.projection?.queryVisibleBoundingBox()

                if (currentBounds != null) {
                    fetchData(currentBounds, position.zoom.toInt())
                }
            }
    }

[sargunv]

sourceLayer isn't relevant with a geojson source, as geojson doesn't have layers.

Otherwise, your first example looks correct to me.

How are you creating this MapUiState?

[irakliy01]

Nothing unusual

---

MapUiState

data class MapUiState(
    val features: FeatureCollection = FeatureCollection(),
    val isLoading: Boolean = false,
    val error: String? = null
)

---

MapViewModel

@HiltViewModel
class MapViewModel @Inject constructor(
    private val mapRepository: MapRepository,
) : ViewModel() {

    private val _uiState = MutableStateFlow<MapUiState>(MapUiState(isLoading = true))
    val uiState: StateFlow<MapUiState> = _uiState.asStateFlow()

    fun fetchData(bbox: BoundingBox, zoomLevel: Int) {
        viewModelScope.launch {
            _uiState.update {
                it.copy(isLoading = true)
            }
            try {
                val precision = getPrecisionForZoom(zoomLevel)
                val geohashes = with(bbox) {
                    GeoHash.coverBoundingBox(
                        northeast.latitude,
                        southwest.longitude,
                        southwest.latitude,
                        northeast.longitude,
                        precision
                    ).hashes.toList()
                }
                val result = mapRepository.fetchDataByGeohash(geohashes)
                _uiState.update {
                    it.copy(isLoading = false, features = result)
                }
            } catch (e: Exception) {
                Timber.e(e)
                _uiState.update {
                    it.copy(isLoading = false, error = "Failed to fetch data")
                }
            }
        }
    }

    private fun getPrecisionForZoom(zoomLevel: Int): Int {
        return when {
            zoomLevel >= 8 -> 5
            else -> 4
        }
    }
}

---

MapScreen

@Composable
private fun CustomLayer(
    uiState: MapUiState,
    onIconClick: (List<Feature>) -> ClickResult,
) {
    val customIcon = painterResource(id = R.drawable.ic_custom)

    val customSource = rememberGeoJsonSource(
        data = GeoJsonData.Features(uiState.features),
    )

    SymbolLayer(
        id = "custom_layer",
        source = customSource,
        iconImage = image(customIcon),
        minZoom = MapLayers.MIN_ZOOM,
        iconAllowOverlap = const(true),
        onClick = onIconClick,
    )
}