Apply class breaks renderer to sublayer | ArcGIS Maps SDK for Kotlin

View on GitHub

Sample viewer app

Apply a renderer to a sublayer.

Image of Apply class breaks renderer to sublayer sample

Use case

A layer showing animal populations contains sublayers for different species. A renderer could be applied which gives each sublayer a different color, so that populations of each species can be compared visually.

How to use the sample

Wait for the map image layer to load. Tap the ‘Change sublayer renderer’ button to apply a unique value renderer to see different population ranges in the counties sub-layer data.

How it works

Create an ArcGISMapImageLayer from a URL.
After it is done loading, get its map image sublayers.
Get the MapImageSublayer.
Create a ClassBreaksRenderer with a collection of ClassBreaks for different population ranges.
Set class breaks renderer as the renderer of the sublayer.

Relevant API

ArcGISMapImageLayer
ArcGISMapImageSublayer
ClassBreak
ClassBreaksRenderer

About the data

This application displays census data from an ArcGIS Server map service. It contains various population statistics, including total population for each county in 2007.

Additional information

The service hosting the layer must support dynamic layers to be able to change the rendering of sublayers.

Sample Code

MainActivity.kt

ApplyClassBreaksRendererToSublayerViewModel.kt

ApplyClassBreaksRendererToSublayerScreen.kt

/* Copyright 2025 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

package com.esri.arcgismaps.sample.applyclassbreaksrenderertosublayer

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import com.arcgismaps.ApiKey
import com.arcgismaps.ArcGISEnvironment
import com.esri.arcgismaps.sample.sampleslib.theme.SampleAppTheme
import com.esri.arcgismaps.sample.applyclassbreaksrenderertosublayer.screens.ApplyClassBreaksRendererToSublayerScreen

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.ACCESS_TOKEN)

        enableEdgeToEdge()
        setContent {
            SampleAppTheme {
                ApplyClassBreaksRendererToSublayerApp()
            }
        }
    }

    @Composable
    private fun ApplyClassBreaksRendererToSublayerApp() {
        Surface(color = MaterialTheme.colorScheme.background) {
            ApplyClassBreaksRendererToSublayerScreen(
                sampleName = getString(R.string.apply_class_breaks_renderer_to_sublayer_app_name)
            )
        }
    }
}

/* Copyright 2025 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

package com.esri.arcgismaps.sample.applyclassbreaksrenderertosublayer.components

import android.app.Application
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.lifecycle.AndroidViewModel
import androidx.lifecycle.viewModelScope
import com.arcgismaps.Color
import com.arcgismaps.geometry.Envelope
import com.arcgismaps.geometry.SpatialReference
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.layers.ArcGISMapImageLayer
import com.arcgismaps.mapping.layers.ArcGISMapImageSublayer
import com.arcgismaps.mapping.symbology.ClassBreak
import com.arcgismaps.mapping.symbology.ClassBreaksRenderer
import com.arcgismaps.mapping.symbology.Renderer
import com.arcgismaps.mapping.symbology.SimpleFillSymbol
import com.arcgismaps.mapping.symbology.SimpleFillSymbolStyle
import com.arcgismaps.mapping.symbology.SimpleLineSymbol
import com.arcgismaps.mapping.symbology.SimpleLineSymbolStyle
import com.esri.arcgismaps.sample.sampleslib.components.MessageDialogViewModel
import kotlinx.coroutines.launch

class ApplyClassBreaksRendererToSublayerViewModel(app: Application) : AndroidViewModel(app) {

    // The map image layer
    private val mapImageLayer =
        ArcGISMapImageLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer")

    var arcGISMap = ArcGISMap(BasemapStyle.ArcGISTopographic).apply {
        initialViewpoint = Viewpoint(
            Envelope(
                xMin = -13934661.666904,
                yMin = 331181.323482,
                xMax = -7355704.998713,
                yMax = 9118038.075882,
                spatialReference = SpatialReference.webMercator()
            )
        )
        // Add the map image layer to the map
        operationalLayers.add(mapImageLayer)
    }

    // The counties sublayer
    private var countiesSublayer: ArcGISMapImageSublayer? = null

    // The original renderer of the counties sublayer
    private var originalRenderer: Renderer? = null

    private var classBreaksRenderer = ClassBreaksRenderer(
        fieldName = "POP2007",
        classBreaks = classBreaks
    )

    // Whether the class breaks renderer is currently applied
    var classBreaksRendererIsApplied by mutableStateOf(false)
        private set

    // Whether the sublayer is loaded and ready
    var isSublayerReady by mutableStateOf(false)
        private set

    // Message dialog view model for error handling
    val messageDialogVM = MessageDialogViewModel()

    init {
        viewModelScope.launch {

            // Load the map image layer
            mapImageLayer.load().onSuccess {
                // Get the sublayers
                val sublayers = mapImageLayer.mapImageSublayers
                if (sublayers.size > 2) {
                    val sublayer = sublayers[2]
                    sublayer.load().onSuccess {
                        countiesSublayer = sublayer
                        originalRenderer = sublayer.renderer
                        isSublayerReady = true
                    }.onFailure { messageDialogVM.showMessageDialog(it) }
                } else {
                    messageDialogVM.showMessageDialog("Counties sublayer not found.")
                }
            }.onFailure { messageDialogVM.showMessageDialog(it) }
        }
    }

    /**
     * Toggle the renderer on the counties sublayer between the original and the class breaks renderer.
     */
    fun toggleClassBreaksRenderer() {
        val sublayer = countiesSublayer ?: return
        classBreaksRendererIsApplied = !classBreaksRendererIsApplied
        sublayer.renderer = if (classBreaksRendererIsApplied) {
            classBreaksRenderer
        } else {
            originalRenderer
        }
    }

    /**
     * Companion object to hold the class breaks and symbols.
     */
    companion object {
        private val outline = SimpleLineSymbol(
            style = SimpleLineSymbolStyle.Solid,
            color = Color.fromRgba(153, 153, 153, 255), // gray
            width = 0.5f
        )

        private val symbol1 = SimpleFillSymbol(
            style = SimpleFillSymbolStyle.Solid,
            color = Color.fromRgba(227, 235, 207, 255), // light green
            outline = outline
        )
        private val symbol2 = SimpleFillSymbol(
            style = SimpleFillSymbolStyle.Solid,
            color = Color.fromRgba(150, 193, 191, 255), // teal
            outline = outline
        )
        private val symbol3 = SimpleFillSymbol(
            style = SimpleFillSymbolStyle.Solid,
            color = Color.fromRgba(98, 167, 182, 255), // blue-green
            outline = outline
        )
        private val symbol4 = SimpleFillSymbol(
            style = SimpleFillSymbolStyle.Solid,
            color = Color.fromRgba(68, 125, 151, 255), // darker blue
            outline = outline
        )
        private val symbol5 = SimpleFillSymbol(
            style = SimpleFillSymbolStyle.Solid,
            color = Color.fromRgba(41, 84, 121, 255), // navy
            outline = outline
        )

        private val classBreaks = listOf(
            ClassBreak(
                description = "-99 to 8,560",
                label = "-99 to 8,560",
                minValue = -99.0,
                maxValue = 8560.0,
                symbol = symbol1
            ),
            ClassBreak(
                description = "> 8,560 to 18,109",
                label = "> 8,560 to 18,109",
                minValue = 8561.0,
                maxValue = 18109.0,
                symbol = symbol2
            ),
            ClassBreak(
                description = "> 18,109 to 35,501",
                label = "> 18,109 to 35,501",
                minValue = 18110.0,
                maxValue = 35501.0,
                symbol = symbol3
            ),
            ClassBreak(
                description = "> 35,501 to 86,100",
                label = "> 35,501 to 86,100",
                minValue = 35502.0,
                maxValue = 86100.0,
                symbol = symbol4
            ),
            ClassBreak(
                description = "> 86,100 to 10,110,975",
                label = "> 86,100 to 10,110,975",
                minValue = 86101.0,
                maxValue = 10110975.0,
                symbol = symbol5
            )
        )
    }
}

/* Copyright 2025 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

package com.esri.arcgismaps.sample.applyclassbreaksrenderertosublayer.screens

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.esri.arcgismaps.sample.applyclassbreaksrenderertosublayer.components.ApplyClassBreaksRendererToSublayerViewModel
import com.esri.arcgismaps.sample.sampleslib.components.MessageDialog
import com.esri.arcgismaps.sample.sampleslib.components.SampleTopAppBar

/**
 * Main screen layout for the sample app
 */
@Composable
fun ApplyClassBreaksRendererToSublayerScreen(sampleName: String) {

    val mapViewModel: ApplyClassBreaksRendererToSublayerViewModel = viewModel()

    val isSublayerReady = mapViewModel.isSublayerReady
    val classBreaksRendererIsApplied = mapViewModel.classBreaksRendererIsApplied

    Scaffold(
        topBar = { SampleTopAppBar(title = sampleName) },
        content = {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(it),
            ) {
                MapView(
                    modifier = Modifier
                        .fillMaxSize()
                        .weight(1f),
                    arcGISMap = mapViewModel.arcGISMap
                )
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp),
                    horizontalArrangement = Arrangement.Center
                ) {
                    Button(
                        onClick = { mapViewModel.toggleClassBreaksRenderer() },
                        enabled = isSublayerReady
                    ) {
                        Text(
                            if (classBreaksRendererIsApplied) {
                                "Reset sublayer renderer"
                            } else {
                                "Change sublayer renderer"
                            }
                        )
                    }
                }
            }

            mapViewModel.messageDialogVM.apply {
                if (dialogStatus) {
                    MessageDialog(
                        title = messageTitle,
                        description = messageDescription,
                        onDismissRequest = ::dismissDialog
                    )
                }
            }
        }
    )
}