Apply a renderer to a sublayer.
      
  
    
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 
ArcGISMapImageLayerfrom a URL. - After it is done loading, get its map image sublayers.
 - Get the 
MapImageSublayer. - Create a 
ClassBreaksRendererwith a collection ofClassBreaks 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.
Tags
class breaks, dynamic layer, dynamic rendering, renderer, sublayer, symbology, visualization
Sample Code
/* 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
            )
        )
    }
}