Skip to content
View on GitHubSample 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

  1. Create a FeatureLayer and add it to the map.
  2. Create a UniqueValueRenderer and set it to the feature layer.
  3. 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.
  4. Search for symbols in the symbol style by name using symbolStyle.getSymbol(symbolName).
  5. Create a Symbol from the search result.
  6. Create UniqueValue objects for each symbol with defined values to map the symbol to features on the feature layer.
  7. 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.

Tags

renderer, symbol, symbology, web style

Sample Code

CreateSymbolStylesFromWebStylesViewModel.ktCreateSymbolStylesFromWebStylesViewModel.ktMainActivity.ktCreateSymbolStylesFromWebStylesScreen.kt
Use dark colors for code blocksCopy
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 /* 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() }

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.