Skip to content

Create symbol styles from web styles

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. ArcGIS Maps SDKs for Native Apps 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.getSymbolAsync(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

CreateSymbolStylesFromWebStylesSample.java
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 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 /*  * Copyright 2021 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.samples.create_symbol_styles_from_web_styles;  import java.util.ArrayList; import java.util.Arrays; import java.util.Collections; import java.util.List; import java.util.concurrent.ExecutionException;  import javafx.application.Application; import javafx.geometry.Insets; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Alert; import javafx.scene.control.Label; import javafx.scene.control.ScrollPane; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.layout.Background; import javafx.scene.layout.BackgroundFill; import javafx.scene.layout.ColumnConstraints; import javafx.scene.layout.CornerRadii; import javafx.scene.layout.GridPane; import javafx.scene.layout.StackPane; import javafx.scene.layout.VBox; import javafx.scene.paint.Color; import javafx.scene.paint.Paint; import javafx.stage.Stage;  import com.esri.arcgisruntime.ArcGISRuntimeEnvironment; import com.esri.arcgisruntime.concurrent.ListenableFuture; import com.esri.arcgisruntime.data.ServiceFeatureTable; import com.esri.arcgisruntime.layers.FeatureLayer; import com.esri.arcgisruntime.loadable.LoadStatus; import com.esri.arcgisruntime.mapping.ArcGISMap; import com.esri.arcgisruntime.mapping.BasemapStyle; import com.esri.arcgisruntime.mapping.Viewpoint; import com.esri.arcgisruntime.mapping.view.MapView; import com.esri.arcgisruntime.symbology.Symbol; import com.esri.arcgisruntime.symbology.SymbolStyle; import com.esri.arcgisruntime.symbology.UniqueValueRenderer;  public class CreateSymbolStylesFromWebStylesSample extends Application {   private MapView mapView;  private GridPane legendGridPane;  private SymbolStyle symbolStyle;  private VBox vBox;   @Override  public void start(Stage stage) {   try {  // create stack pane and application scene  StackPane stackPane = new StackPane();  Scene scene = new Scene(stackPane);   // set title, size, and add scene to stage  stage.setTitle("Create Symbol Styles From Web Styles Sample");  stage.setWidth(800);  stage.setHeight(700);  stage.setScene(scene);  stage.show();   // authentication with an API key or named user is required to access basemaps and other location services  String yourAPIKey = System.getProperty("apiKey");  ArcGISRuntimeEnvironment.setApiKey(yourAPIKey);   // create a map with the light gray basemap style  ArcGISMap map = new ArcGISMap(BasemapStyle.ARCGIS_LIGHT_GRAY);   // set an initial reference scale on the map for controlling symbol size  map.setReferenceScale(100000);   // create a map view and set the map to it  mapView = new MapView();  mapView.setMap(map);   // set a viewpoint on the map view  mapView.setViewpoint(new Viewpoint(34.28301, -118.44186, 7000));   // create a feature layer from a service  FeatureLayer featureLayer = new FeatureLayer(new ServiceFeatureTable(  "http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/LA_County_Points_of_Interest/FeatureServer/0"));   // add the feature layer to the map's operational layers  map.getOperationalLayers().add(featureLayer);   // display an error if the feature layer fails to load  featureLayer.addDoneLoadingListener(() -> {  if (featureLayer.getLoadStatus() == LoadStatus.FAILED_TO_LOAD) {  new Alert(Alert.AlertType.ERROR, "Feature layer failed to load. Details: \n"  + featureLayer.getLoadError().getCause().getMessage()).show();  }  });   // create a unique value renderer  UniqueValueRenderer uniqueValueRenderer = new UniqueValueRenderer();   // add the name of a field from the feature layer data that symbols will be mapped to  uniqueValueRenderer.getFieldNames().add("cat2");   // set the unique value renderer on the feature layer  featureLayer.setRenderer(uniqueValueRenderer);   // create a symbol style from a web style  // note: ArcGIS Online is used as the default portal when null is passed as the portal parameter  symbolStyle = new SymbolStyle("Esri2DPointSymbolsStyle", null);   // display an error if the symbol style fails to load  symbolStyle.addDoneLoadingListener(() -> {  if (symbolStyle.getLoadStatus() == LoadStatus.FAILED_TO_LOAD) {  new Alert(Alert.AlertType.ERROR, "Error: could not load symbol style. Details: \n"  + symbolStyle.getLoadError().getMessage()).show();  }  });   // setup the UI for the legend  setupLegend();   // create a list of the required symbol names from the web style  ArrayList<String> symbolNames = new ArrayList<>(Arrays.asList("atm", "beach", "campground", "city-hall", "hospital",  "library", "park", "place-of-worship", "police-station", "post-office", "school", "trail"));   // create unique values for the renderer and construct a symbol for each feature  for (String symbolName : symbolNames) {   // search for each symbol in the symbol style  ListenableFuture<Symbol> searchResult = symbolStyle.getSymbolAsync(Collections.singletonList(symbolName));  searchResult.addDoneListener(() -> {  try {  // get the symbol from the search result  Symbol symbol = searchResult.get();   // get a list of all categories to be mapped to the symbol  List<String> categories = mapSymbolNameToField(symbolName);   for (String category : categories) {   // create a unique value for each category  UniqueValueRenderer.UniqueValue uniqueValue = new UniqueValueRenderer.UniqueValue(  "", symbolName, symbol, Collections.singletonList(category));   // add each unique value to the unique value renderer  uniqueValueRenderer.getUniqueValues().add(uniqueValue);  }   // create and add an image view and a label for the symbol to the legend on the UI  ImageView imageView = createImageView(symbol);  Label gridPaneLabel = new Label(symbolName);  legendGridPane.add(imageView, 0, symbolNames.indexOf(symbolName));  legendGridPane.add(gridPaneLabel, 1, symbolNames.indexOf(symbolName));   } catch (Exception e) {  // on any error, display the stack trace.  e.printStackTrace();  }  });  }   // add a map scale listener on the map view to control the symbol sizes at different scales  mapView.mapScaleProperty().addListener((observable, oldValue, newValue) -> {  featureLayer.setScaleSymbols((double) newValue >= 80000);  });   // add the map view and vbox to the stack pane  stackPane.getChildren().addAll(mapView, vBox);  StackPane.setAlignment(vBox, Pos.TOP_LEFT);  StackPane.setMargin(vBox, new Insets(10, 0, 0, 10));   } catch (Exception e) {  // on any error, display the stack trace.  e.printStackTrace();  }   }   /**  * Creates a legend on the UI for the symbol styles.  */  private void setupLegend() {   // create a box to show the legend  vBox = new VBox();  vBox.setMaxSize(250, 300);  vBox.setBackground(new Background(new BackgroundFill(Paint.valueOf("rgba(255, 255, 255 , 0.7)"), CornerRadii.EMPTY,  Insets.EMPTY)));  vBox.setPadding(new Insets(10.0));  vBox.setAlignment(Pos.TOP_CENTER);  vBox.setSpacing(10);   // create a grid pane  legendGridPane = new GridPane();  legendGridPane.getColumnConstraints().add(new ColumnConstraints(50));  legendGridPane.setPadding(new Insets(10));  legendGridPane.setMaxWidth(175);  legendGridPane.setVgap(12);   // create a label to display the symbol style name as the title of the legend and add to the grid pane  Label legendHeader = new Label("Style: " + symbolStyle.getStyleName());  legendHeader.setStyle("-fx-font-size: 12; -fx-font-weight: bold;");   // create a scroll pane to contain the legend  ScrollPane scrollPane = new ScrollPane();  scrollPane.setContent(legendGridPane);  vBox.getChildren().addAll(legendHeader, scrollPane);  }   /**  * Returns a list of categories to be matched to a symbol name.  *  * @param symbolName the name of a symbol from a symbol style  * @return categories a list of categories matched to the provided symbol name  */  private List<String> mapSymbolNameToField(String symbolName) {   List<String> categories = new ArrayList<>();   switch (symbolName) {  case "atm":  categories.add("Banking and Finance");  break;  case "beach":  categories.add("Beaches and Marinas");  break;  case "campground":  categories.add("Campgrounds");  break;  case "city-hall":  categories.addAll(Arrays.asList("City Halls", "Government Offices"));  break;  case "hospital":  categories.addAll(Arrays.asList("Hospitals and Medical Centers", "Health Screening and Testing", "Health Centers",  "Mental Health Centers"));  break;  case "library":  categories.add("Libraries");  break;  case "park":  categories.add("Parks and Gardens");  break;  case "place-of-worship":  categories.add("Churches");  break;  case "police-station":  categories.add("Sheriff and Police Stations");  break;  case "post-office":  categories.addAll(Arrays.asList("DHL Locations", "Federal Express Locations"));  break;  case "school":  categories.addAll(Arrays.asList("Public High Schools", "Public Elementary Schools", "Private and Charter Schools"));  break;  case "trail":  categories.add("Trails");  break;  }  return categories;  }   /**  * Returns an image view populated with a symbol.  *  * @param symbol the symbol to display in the image view  * @return imageView the image view populated with the symbol  */  private ImageView createImageView(Symbol symbol) {   // create an image view for displaying the symbol in the legend  ImageView imageView = new ImageView();  ListenableFuture<Image> imageOfSymbol = symbol.createSwatchAsync(Color.TRANSPARENT, 1f);  imageOfSymbol.addDoneListener(() -> {  try {  // add the symbol image to the image view  imageView.setImage(imageOfSymbol.get());  } catch (InterruptedException | ExecutionException e) {  new Alert(Alert.AlertType.ERROR, "Error creating preview ImageView from provided symbol").show();  }  });  return imageView;  }   /**  * Stops and releases all resources used in application.  */  @Override  public void stop() {   if (mapView != null) {  mapView.dispose();  }  }   /**  * Opens and runs application.  *  * @param args arguments passed to this application  */  public static void main(String[] args) {   Application.launch(args);  }  }

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