Create symbol styles from web styles | ArcGIS Maps SDK for Kotlin

View on GitHub

Sample viewer app

Create symbol styles from a style file hosted on a portal.

Image of create symbol styles from web styles

Use case

Style files hosted on an ArcGIS Online or Enterprise portal are known as web styles. They can be used to style symbols on a feature layer or graphic overlay. Since styles are published from ArcGIS Pro, you can author and design your own beautiful multilayer vector symbols. These vector symbols look good at any resolution and scale well. Runtime users can now access these styles from their native application, and make use of the vector symbols within them to enhance features and graphics in the map.

How to use the sample

The sample displays a map with a set of symbols that represent the categories of the features within the dataset. Pan and zoom on the map and view the legend to explore the appearance and names of the different symbols from the selected symbol style.

How it works

Create a FeatureLayer and add it to the map.
Create a UniqueValueRenderer and set it to the feature layer.
Create a SymbolStyle from a portal by passing in the web style name and portal URL.
- Note: passing null as the portal will default to arcgis.com.
Search for symbols in the symbol style by name using symbolStyle.getSymbol(symbolName).
Create a Symbol from the search result.
Create UniqueValue objects for each symbol with defined values to map the symbol to features on the feature layer.
Add each UniqueValue to the UniqueValueRenderer.

Relevant API

FeatureLayer
Symbol
SymbolStyle
UniqueValue
UniqueValueRenderer

About the data

The sample uses the ‘Esri2DPointSymbolsStyle’ Web Style.

The map shows features from the LA County Points of Interest service hosted on ArcGIS Online.

Additional information

2D web styles, dictionary web styles, and 3D web styles can all be hosted on an ArcGIS Online or Enterprise portal.

Sample Code

MainActivity.kt

CreateSymbolStylesFromWebStylesViewModel.kt

CreateSymbolStylesFromWebStylesScreen.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.createsymbolstylesfromwebstyles

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.createsymbolstylesfromwebstyles.screens.CreateSymbolStylesFromWebStylesScreen

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 {
                CreateSymbolStylesFromWebStylesApp()
            }
        }
    }

    @Composable
    private fun CreateSymbolStylesFromWebStylesApp() {
        Surface(color = MaterialTheme.colorScheme.background) {
            CreateSymbolStylesFromWebStylesScreen(
                sampleName = getString(R.string.create_symbol_styles_from_web_styles_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.createsymbolstylesfromwebstyles.components

import android.app.Application
import android.graphics.drawable.BitmapDrawable
import androidx.lifecycle.AndroidViewModel
import androidx.lifecycle.viewModelScope
import com.arcgismaps.data.ServiceFeatureTable
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.layers.FeatureLayer
import com.arcgismaps.mapping.symbology.SymbolStyle
import com.arcgismaps.mapping.symbology.UniqueValue
import com.arcgismaps.mapping.symbology.UniqueValueRenderer
import com.esri.arcgismaps.sample.sampleslib.components.MessageDialogViewModel
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.asStateFlow
import kotlinx.coroutines.launch

class CreateSymbolStylesFromWebStylesViewModel(application: Application) : AndroidViewModel(application) {

    // Create a unique value renderer
    private val uniqueValueRenderer = UniqueValueRenderer().apply {
        // Add the name of a field from the feature layer data that symbols will be mapped to
        fieldNames.add("cat2")
    }

    // Create a feature layer from a service
    private val featureLayer =
        FeatureLayer.createWithFeatureTable(ServiceFeatureTable("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/LA_County_Points_of_Interest/FeatureServer/0"))
            .apply {
                // Set the unique value renderer on the feature layer
                renderer = uniqueValueRenderer
            }

    // Create a map with the light gray basemap style
    val arcGISMap = ArcGISMap(BasemapStyle.ArcGISLightGray).apply {
        // Set a viewpoint
        initialViewpoint = Viewpoint(34.28301, -118.44186, 7000.0)
        // Set a reference scale on the map for controlling symbol size
        referenceScale = 100000.0
        // Add the feature layer to the map's operational layers
        operationalLayers.add(featureLayer)
    }

    // Create a symbol style from a web style. ArcGIS Online is used as the default portal when null is passed as the
    // portal parameter
    private val symbolStyle =
        SymbolStyle.createWithStyleNameAndPortal(styleName = "Esri2DPointSymbolsStyle", portal = null)

    // Create a list of the required symbol names in the web style
    private val symbolNames = listOf(
        "atm",
        "beach",
        "campground",
        "city-hall",
        "hospital",
        "library",
        "park",
        "place-of-worship",
        "police-station",
        "post-office",
        "school",
        "trail"
    )

    // Create a flow to hold the symbol names and icons
    private val _symbolNamesAndIconsFlow = MutableStateFlow<List<Pair<String, BitmapDrawable>>>(emptyList())
    val symbolNamesAndIconsFlow = _symbolNamesAndIconsFlow.asStateFlow()

    // Create a message dialog view model for handling error messages
    val messageDialogVM = MessageDialogViewModel()

    init {
        // Load the symbols into a list
        viewModelScope.launch {
            arcGISMap.load().onFailure { error ->
                messageDialogVM.showMessageDialog(
                    "Failed to load map", error.message.toString()
                )
            }

            // Once map is loaded, create unique value symbols
            _symbolNamesAndIconsFlow.value = createUniqueValueSymbols()
        }
    }

    /**
     * Only scale symbols if map scale greater than or equal to 80,000
     */
    fun onMapScaleChanged(scale: Double) {
        featureLayer.scaleSymbols = scale >= 80000
    }

    /**
     * Create a series of unique values and add them to the unique value renderer. Also create a list of the symbol
     * names and icons and return them as a list of pairs.
     */
    private suspend fun createUniqueValueSymbols(): MutableList<Pair<String, BitmapDrawable>> {
        // Create a list to hold the symbol names and icons
        val symbolNamesAndIconsList = mutableListOf<Pair<String, BitmapDrawable>>()
        symbolNames.forEach { symbolName ->
            // Search for each symbol in the symbol style
            symbolStyle.getSymbol(listOf(symbolName)).onSuccess { symbol ->
                // Get a list of all categories to be mapped to the symbol
                val categories = mapSymbolNameToField(symbolName)
                categories.forEach { category ->
                    // Add each unique value category to the unique value renderer
                    uniqueValueRenderer.uniqueValues.add(
                        UniqueValue(
                            label = symbolName, symbol = symbol, values = listOf(category)
                        )
                    )
                }
                // Create a swatch from the symbol
                symbol.createSwatch(
                    screenScale = 2.0f, width = 30.0f, height = 30.0f
                ).onSuccess { symbolBitmap ->
                    // Add the symbol name and symbol to the list
                    symbolNamesAndIconsList.add(Pair(symbolName, symbolBitmap))
                }.onFailure {
                    messageDialogVM.showMessageDialog(
                        "Failed to create swatch for: $symbolName", it.message.toString()
                    )
                }
            }
        }
        // Sort the symbol name alphabetically
        symbolNamesAndIconsList.sortBy { it.first }
        // Update the flow with the new list
        return symbolNamesAndIconsList
    }
}

/**
 * Returns a list of categories to be matched to a symbol name.
 */
private fun mapSymbolNameToField(symbolName: String): List<String> {
    return mutableListOf<String>().apply {
        when (symbolName) {
            "atm" -> add("Banking and Finance")
            "beach" -> add("Beaches and Marinas")
            "campground" -> add("Campgrounds")
            "city-hall" -> addAll(listOf("City Halls", "Government Offices"))
            "hospital" -> addAll(
                listOf(
                    "Hospitals and Medical Centers",
                    "Health Screening and Testing",
                    "Health Centers",
                    "Mental Health Centers"
                )
            )

            "library" -> add("Libraries")
            "park" -> add("Parks and Gardens")
            "place-of-worship" -> add("Churches")
            "police-station" -> add("Sheriff and Police Stations")
            "post-office" -> addAll(listOf("DHL Locations", "Federal Express Locations"))
            "school" -> addAll(
                listOf(
                    "Public High Schools", "Public Elementary Schools", "Private and Charter Schools"
                )
            )

            "trail" -> add("Trails")
        }
    }.toList()
}

/* 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.createsymbolstylesfromwebstyles.screens

import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Info
import androidx.compose.material3.Card
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.esri.arcgismaps.sample.createsymbolstylesfromwebstyles.components.CreateSymbolStylesFromWebStylesViewModel
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 CreateSymbolStylesFromWebStylesScreen(sampleName: String) {

    // Get a reference to the view model
    val mapViewModel: CreateSymbolStylesFromWebStylesViewModel = viewModel()

    // Keep track of legend visibility state
    var showLegend by remember { mutableStateOf(false) }

    // Keep track of the state flow containing symbol names and symbol bitmaps
    val symbolsAndIcons by mapViewModel.symbolNamesAndIconsFlow.collectAsState()

    Scaffold(topBar = { SampleTopAppBar(title = sampleName) }, content = {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(it),
        ) {
            MapView(
                modifier = Modifier.fillMaxSize(), arcGISMap = mapViewModel.arcGISMap,
                // Hide the legend on any tap of the map view
                onDown = { showLegend = false },
                // Update the map scale in the view model
                onMapScaleChanged = mapViewModel::onMapScaleChanged
            )
            if (!showLegend) {
                // Show the FAB
                FloatingActionButton(modifier = Modifier
                    .align(Alignment.BottomEnd)
                    .padding(bottom = 36.dp, end = 24.dp),
                    // On click, show the legend
                    onClick = { showLegend = true }) {
                    Icon(Icons.Filled.Info, contentDescription = "Show legend button")
                    Spacer(Modifier.padding(8.dp))
                }
            } else {
                // Show the legend
                Card(
                    modifier = Modifier
                        .wrapContentSize()
                        .align(Alignment.BottomEnd)
                        .padding(bottom = 36.dp, end = 12.dp)
                        .border(width = 1.dp, color = Color.DarkGray, shape = RoundedCornerShape(8.dp))
                ) {
                    // For each pair of symbol name and icon
                    for ((symbolName, symbolIcon) in symbolsAndIcons) {
                        Row(Modifier.padding(8.dp)) {
                            // Show the symbol
                            Image(
                                bitmap = symbolIcon.bitmap.asImageBitmap(), contentDescription = "Symbol image"
                            )
                            // Show the symbol name
                            Text(modifier = Modifier.padding(start = 8.dp), text = symbolName)
                        }
                    }
                }
            }
        }

        // Show any errors in a message dialog
        mapViewModel.messageDialogVM.apply {
            if (dialogStatus) {
                MessageDialog(
                    title = messageTitle, description = messageDescription, onDismissRequest = ::dismissDialog
                )
            }
        }
    })
}