topic Re: Jetpack compose Add WMS layer on map in Kotlin Maps SDK Questions

Jetpack compose Add WMS layer when WMS layer names are not known.

NishanKhadka — Tue, 01 Oct 2024 04:40:11 GMT

I migrated from Android View to Jetpack Compose for the esri map. But cannot seem to find a way to add WMS layer properly.
Would appreciate it if I could be pointed towards the right direction.Is there some way to add WMS similar to graphic overlays, or grids or locations??

Data class:
data class ArcGisMapData(
    var map: ArcGISMap,
    var graphicOverlays: List<GraphicsOverlay>,
    var locationDisplay: LocationDisplay)

Composable function:
@Composable
fun EsriMap(map:ArcGISMap,locationDisplay:LocationDisplay,graphicsOverlays:List<GraphicOverlay>){
val mapState by mapViewModel.mapStateFlow.collectAsStateWithLifeCycle()
MapView(
    modifier = Modifier
        .fillMaxSize(),
    arcGISMap = mapState.map,
    graphicsOverlays = mapState.graphicOverlays,
    locationDisplay = mapState.locationDisplay)

ViewModel Class
class MapViewModel : ViewModel() {
private val _mapStateDataFlow = MutableStateFlow(
ArcGisMapData(
map = ArcGISMap(Basemap(WebTiledLayer.create("https://tile.openstreetmap.org/{level}/{col}/{row}.png"))),
 graphicOverlays = listOf(GraphicsOverlay()),locationDisplay = LocationDisplay())
val mapStateFlow = _mapStateDataFlow.asStateFlow()

init{
viewmodelScope.launch{
val wmsService =
WmsService(url = "http://geodata.nationaalgeoregister.nl/cbsprovincies/ows?SERVICE=WMS&request=Getcapabilities")
wmsService.load().onSuccess {
 val wmsLayer = WmsLayer(wmsService.serviceInfo!!.layerInfos)
wmsLayer.load().onSuccess {
 Timber.d("load success")
// TODO("Load new instance of ArcGIS Map with wms added to operational layer")
 }.onFailure { exception ->
 Timber.e(
exception, "Failed to load WMS layer"
 )
// Handle error, e.g., show a message to the user
 }
}.onFailure { e ->
 Timber.e(
e, "Failed to load WMS Service: ${entry.path}"
 )
}
}
}

Re: Jetpack compose Add WMS layer on map

Shubham_Sharma — Mon, 30 Sep 2024 17:32:21 GMT

While reading the code I noticed that you are using a LocationDisplay with the Composable MapView. To be able to set a LocationDisplay, you would need to define an ApplicationContext:

ArcGISEnvironment.applicationContext = this // Alternatively, you can set the application context using the // LocationDisplay helper function from a Composable scope: // Checks that ArcGISEnvironment.applicationContext is set and if not, sets one. val myLocationDisplay = rememberLocationDisplay()

I can load a WMS layer by modifying your code using the above changes:

import android.os.Bundle import android.util.Log import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.ui.Modifier import androidx.lifecycle.ViewModel import androidx.lifecycle.compose.collectAsStateWithLifecycle import androidx.lifecycle.viewModelScope import androidx.lifecycle.viewmodel.compose.viewModel import com.arcgismaps.ApiKey import com.arcgismaps.ArcGISEnvironment import com.arcgismaps.mapping.ArcGISMap import com.arcgismaps.mapping.Basemap import com.arcgismaps.mapping.layers.WebTiledLayer import com.arcgismaps.mapping.layers.WmsLayer import com.arcgismaps.mapping.layers.WmsService import com.arcgismaps.mapping.view.GraphicsOverlay import com.arcgismaps.mapping.view.LocationDisplay import com.arcgismaps.toolkit.geoviewcompose.MapView import com.esri.arcgismaps.sample.sampleslib.theme.SampleAppTheme import kotlinx.coroutines.flow.MutableStateFlow import kotlinx.coroutines.flow.asStateFlow import kotlinx.coroutines.launch class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // authentication with an API key or named user is // required to access basemaps and other location services ArcGISEnvironment.apiKey = ApiKey.create(BuildConfig.API_KEY) // application context is required for LocationDisplay ArcGISEnvironment.applicationContext = this setContent { SampleAppTheme { EsriMap() } } } @Composable fun EsriMap() { val mapViewModel: MapViewModel = viewModel() val mapState by mapViewModel.mapStateFlow.collectAsStateWithLifecycle() MapView( modifier = Modifier .fillMaxSize(), arcGISMap = mapState.map, graphicsOverlays = mapState.graphicOverlays, locationDisplay = mapState.locationDisplay ) } } class MapViewModel : ViewModel() { private val _mapStateDataFlow = MutableStateFlow( ArcGisMapData( map = ArcGISMap(Basemap(WebTiledLayer.create("https://tile.openstreetmap.org/{level}/{col}/{row}.png"))), graphicOverlays = listOf(GraphicsOverlay()), locationDisplay = LocationDisplay() ) ) val mapStateFlow = _mapStateDataFlow.asStateFlow() init { viewModelScope.launch { val wmsService = WmsService(url = "http://geodata.nationaalgeoregister.nl/cbsprovincies/ows?SERVICE=WMS&request=Getcapabilities") wmsService.load().onSuccess { val wmsLayer = WmsLayer(wmsService.serviceInfo!!.layerInfos) wmsLayer.load().onSuccess { Log.e("TAG", "load success") }.onFailure { exception -> Log.e("TAG", "${exception.message}: Failed to load WMS layer") } }.onFailure { exception -> Log.e("TAG", "${exception.message}: Failed to load WMS layer") } } } } data class ArcGisMapData( var map: ArcGISMap, var graphicOverlays: List<GraphicsOverlay>, var locationDisplay: LocationDisplay )

Re: Jetpack compose Add WMS layer on map

NishanKhadka — Tue, 01 Oct 2024 04:38:36 GMT

Thank you for the quick response @Shubham_Sharma, I have the context and apikey for ArcGIS environement provided from the app's application class.
What I am struggling with is displaying the WMS overlay on the map.
For instance, if I follow the sample example provided and add the WMS layer the following way:

val map =
    ArcGISMap(Basemap(WebTiledLayer.create("https://tile.openstreetmap.org/{level}/{col}/{row}.png")))
val wmsLayer = WmsLayer(url = "https://nowcoast.noaa.gov/geoserver/observations/weather_radar/wms",layerNames = listOf("conus_base_reflectivity_mosaic"))
map.operationalLayers.add(wmsLayer)
_mapStateDataFlow.update { dataState ->
 dataState.copy(map = map)
}
wmsLayer.load().onSuccess {
 Timber.d("load successful")

}.onFailure {
 Timber.d("Failed to load")
}

It loads and displays the WMS layer on the map.

But, if I do not know the layerNames, then
I will need to use

https://nowcoast.noaa.gov/geoserver/observations/weather_radar/wms?service=WMS&request=GetCapabilities

as specified in WmsLayer (ArcGIS Runtime SDK for Android 100.15.6)

But when I do the following:

val map =
    ArcGISMap(Basemap(WebTiledLayer.create("https://tile.openstreetmap.org/{level}/{col}/{row}.png")))
val wmsService =
    WmsService(url = "https://nowcoast.noaa.gov/geoserver/observations/weather_radar/wms?service=WMS&request=GetCapabilities")
wmsService.load().onSuccess {
    if (wmsService.serviceInfo != null) {
        val wmsLayer = WmsLayer(wmsService.serviceInfo!!.layerInfos)
        wmsLayer.isVisible = true
        map.operationalLayers.add(wmsLayer)
        _mapStateDataFlow.update { dataState ->
            dataState.copy(map = map)
        }
        wmsLayer.load().onSuccess {
            Timber.d("load successful")

        }.onFailure {
            Timber.d("Failed to load")
        }
    }
}

The log comes as load successful, but I don't see any overlay on the map. I have attached screenshots below of when I do it as in the Kotlin Sample with known layerName (WMS overlay is displayed) and another where I do not know the layerNames (WMS overlay not displayed). Please do let me know if I am missing something.

One thing I noticed is : when I do it as in the sample - and log the url from the WmsLayer instance,


val wmsLayer = WmsLayer(url = "https://nowcoast.noaa.gov/geoserver/observations/weather_radar/wms",layerNames = listOf("conus_base_reflectivity_mosaic"))

Timber.d("url is ${wmsLayer.url}") //prints above url

I get the provided url "https://nowcoast.noaa.gov/geoserver/observations/weather_radar/wms" from it.

But when I do the same thing after creating the WmsLayer from WmsLayer(wmsService.serviceInfo!!.layerInfos),

val wmsService =
    WmsService(url = "https://nowcoast.noaa.gov/geoserver/observations/weather_radar/wms?service=WMS&request=GetCapabilities")
wmsService.load().onSuccess {
    if (wmsService.serviceInfo != null) {
        val wmsLayer = WmsLayer(wmsService.serviceInfo!!.layerInfos)
        Timber.d("url is ${wmsLayer.url}") // prints empty string
}

I get empty url. I wonder if that's why I do not get the overlays displayed as there is no url to fetch from.

Re: Jetpack compose Add WMS layer on map

Shubham_Sharma — Tue, 01 Oct 2024 23:33:34 GMT

@NishanKhadka Thanks for clarifying! I believe you would need to retrieve the sublayerInfos which should help load all the WMS layers from the service without providing the layerName:

val layerInfos = wmsService.serviceInfo!!.layerInfos[0].sublayerInfos val wmsLayer = WmsLayer(layerInfos) wmsLayer.load().onSuccess { // Add to map's operational layers... }

Just to note, each layerInfo may contain subLayers, and the subLayers may contain additional subLayers. I would inspect the service you are using to configure which layers to/not to display on the MapView.

Re: Jetpack compose Add WMS layer when WMS layer names are not known.

NishanKhadka — Wed, 02 Oct 2024 00:47:55 GMT

@Shubham_Sharma Thank you for your guidance! It now make sense to use the WmsService class to load the layers available and configure which layers/sublayers to load on the map. Then load it using the WmsLayer class. Accepting this as solution! Thanks again!

topic Re: Jetpack compose Add WMS layer on map in Kotlin Maps SDK Questions

Jetpack compose Add WMS layer when WMS layer names are not known.

I migrated from Android View to Jetpack Compose for the esri map. But cannot seem to find a way to add WMS layer properly.Would appreciate it if I could be pointed towards the right direction.Is there some way to add WMS similar to graphic overlays, or grids or locations??

Re: Jetpack compose Add WMS layer on map

Re: Jetpack compose Add WMS layer on map

Re: Jetpack compose Add WMS layer on map

Re: Jetpack compose Add WMS layer when WMS layer names are not known.

I migrated from Android View to Jetpack Compose for the esri map. But cannot seem to find a way to add WMS layer properly.
Would appreciate it if I could be pointed towards the right direction.Is there some way to add WMS similar to graphic overlays, or grids or locations??