Style a feature layer

Learn how to apply renderers and label definitions to a feature layer based on attribute values.

style a feature layer

Applications can display feature layer data with different styles to enhance the visualization. The type of Renderer you choose depends on your application. A SimpleRenderer applies the same symbol to all features, a UniqueValueRenderer applies a different symbol to each unique attribute value, and a ClassBreaksRenderer applies a symbol to a range of numeric values. Renderers are responsible for accessing the data and applying the appropriate symbol to each feature when the layer draws. You can also use a LabelDefinition to show attribute information for features. Visit the Styles and data visualization documentation to learn more about styling layers.

You can also author, style and save web maps, web scenes, and layers as portal items and then add them to the map in your application. Visit the following tutorials to learn more about adding portal items.

In this tutorial, you will apply different renderers to enhance the visualization of three feature layers with data for the Santa Monica Mountains: Trailheads with a single symbol, Trails based on elevation change and bike use, and Parks and Open Spaces based on the type of park.

Prerequisites

The following are required for this tutorial:

An ArcGIS account to access your API keys. If you don't have an account, sign up for free.
Confirm that your system meets the minimum system requirements.
An IDE for Java.

Steps

Open a Java project with Gradle

To start this tutorial, complete the Display a map tutorial, or download and unzip the Display a map solution into a new folder.
Open the build.gradle file as a project in IntelliJ IDEA.

If you downloaded the solution project, set your API key.

An API Key enables access to services, web maps, and web scenes hosted in ArcGIS Online.

Go to your developer dashboard to get your API key. For these tutorials, use your default API key. It is scoped to include all of the services demonstrated in the tutorials.
In the IntelliJ IDEA > Project tool window, open src/main/java/com.example.app and click App.

In the start() method, set the API key property on the ArcGISRuntimeEnvironment with your API key. Replace YOUR_API_KEY with your actual API Key. Be sure to surround your API Key with quotes, because the parameter passed to setApiKey is a string.

App.java
Use dark colors for code blocks
Change lineChange lineChange lineChange line
  @Override
  public void start(Stage stage) {
    // set the title and size of the stage and show it
    stage.setTitle("Display a map tutorial");
    stage.setWidth(800);
    stage.setHeight(700);
    stage.show();

    // create a JavaFX scene with a stack pane as the root node, and add it to the scene
    StackPane stackPane = new StackPane();
    Scene scene = new Scene(stackPane);
    stage.setScene(scene);

    // Note: it is not best practice to store API keys in source code.
    // The API key is referenced here for the convenience of this tutorial.
    String yourApiKey = "YOUR_API_KEY";
    ArcGISRuntimeEnvironment.setApiKey(yourApiKey);

Preconfigure app

Modify the files from the Display a map tutorial so they can be used in this tutorial: you will change the app title, modify the viewpoint, and move the declaration of the map variable.

In the start() lifecycle method, change the title that will appear on the application window to Style a feature layer.

App.java
Expand
Use dark colors for code blocks
Change lineChange line
  @Override
  public void start(Stage stage) {

    // set the title and size of the stage and show it
    stage.setTitle("Style a feature layer");

    stage.setWidth(800);
    stage.setHeight(700);
    stage.show();
Expand

Modify the Viewpoint constructor call so it passes a scale parameter of 72.000.0, which is more appropriate to this tutorial.

App.java
Use dark colors for code blocks
Change line
    // create a map view to display the map and add it to the stack pane
    mapView = new MapView();
    stackPane.getChildren().add(mapView);

    map = new ArcGISMap(BasemapStyle.ARCGIS_TOPOGRAPHIC);

    // set the map on the map view
    mapView.setMap(map);

    mapView.setViewpoint(new Viewpoint(34.02700, -118.80543, 72000.0));

  }

Move the declaration of the map variable to the top level of the App class. Since map will be accessed from a new method later, it must be a field of the class, rather than a local variable in start().

App.java
Expand
Use dark colors for code blocks
Remove line
    ArcGISMap map = new ArcGISMap(BasemapStyle.ARCGIS_TOPOGRAPHIC);

    // set the map on the map view
    mapView.setMap(map);

    mapView.setViewpoint(new Viewpoint(34.02700, -118.80543, 144447.638572));
Expand

App.java
Expand
Use dark colors for code blocks
Add line.
public class App extends Application {

  private MapView mapView;

  private ArcGISMap map =new ArcGISMap(BasemapStyle.ARCGIS_TOPOGRAPHIC);


  public static void main(String[] args) {
    Application.launch(args);
  }
Expand

Import headers and define constants

You will add imports and define colors used in this tutorial.

In the IntelliJ IDEA > Project tool window, open src/main/java/com.example.app and click App. Add the following imports, replacing those from the Display a map tutorial.

App.java
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
package com.example.app;

import com.esri.arcgisruntime.ArcGISRuntimeEnvironment;
import com.esri.arcgisruntime.arcgisservices.LabelDefinition;
import com.esri.arcgisruntime.data.ServiceFeatureTable;
import com.esri.arcgisruntime.layers.FeatureLayer;
import com.esri.arcgisruntime.mapping.ArcGISMap;
import com.esri.arcgisruntime.mapping.BasemapStyle;
import com.esri.arcgisruntime.mapping.Viewpoint;
import com.esri.arcgisruntime.mapping.labeling.ArcadeLabelExpression;
import com.esri.arcgisruntime.mapping.view.MapView;
import com.esri.arcgisruntime.symbology.ClassBreaksRenderer;
import com.esri.arcgisruntime.symbology.ClassBreaksRenderer.ClassBreak;
import com.esri.arcgisruntime.symbology.PictureMarkerSymbol;
import com.esri.arcgisruntime.symbology.SimpleFillSymbol;
import com.esri.arcgisruntime.symbology.SimpleLineSymbol;
import com.esri.arcgisruntime.symbology.SimpleRenderer;
import com.esri.arcgisruntime.symbology.TextSymbol;
import com.esri.arcgisruntime.symbology.UniqueValueRenderer;
import com.esri.arcgisruntime.symbology.UniqueValueRenderer.UniqueValue;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

import java.util.ArrayList;
import java.util.List;

public class App extends Application {

Add static fields to hold the RGB hex value of certain colors. These are the colors you will be assigning to symbols.

App.java
Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.
  // colors for symbols
  private static final int RED = 0xFFFF0000;
  private static final int GREEN = 0xFF00FF00;
  private static final int BLUE = 0xFF0000FF;
  private static final int PURPLE = 0xFF800080;
  private static final int WHITE = 0xFFFFFFFF;
Expand

Create a method to add a feature layer

You can add a feature layer from a feature service hosted in ArcGIS. Each feature layer contains features with a single geometry type (point, line, or polygon), and a set of attributes. Once added to the map, feature layers can be symbolized, styled, and labeled in a variety of ways.

Define variables that store feature service URLs used by the app's layers and then create a helper method to add a layer to the map's collection of operational layers. You will use this code throughout the tutorial as you add and symbolize various layers.

Create four static fields of type String: three for accessing feature layers, and a fourth for accessing a static image for use in a picture marker symbol. You will use these resources in future steps.

App.java
Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
  // Application constants used to connect to data and resources.
  private final String parksAndOpenSpaces =
      "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0";
  private final String trails =
      "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0";
  private final String trailheads =
      "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0";
  private final String trailheadImage = "https://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png";
Expand

Add a new method named addFeatureLayer() that takes a feature service URI as an argument, creates a feature layer from the URI, and adds it to the list of the map's operational layers.

App.java
Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
  private FeatureLayer addFeatureLayer(String featureServiceUri){
    // Create a service feature table from a Uri.
    ServiceFeatureTable serviceFeatureTable = new ServiceFeatureTable(featureServiceUri);
    // Create a feature layer from the service feature table.
    FeatureLayer featureLayer = new FeatureLayer(serviceFeatureTable);
    // Add the feature layer to the map's list of operational layers.
    map.getOperationalLayers().add(featureLayer);
    // return the feature layer
    return featureLayer;
  }
Expand

Add a layer with a unique value renderer

Create a method to apply a different symbol for each type of park area to the Parks and Open Spaces feature layer.

Add a new method named addOpenSpaceLayer() just after the newly added addFeatureLayer() method.

UniqueValue assigns a symbol to a value or values. A unique value renderer uses a collection of unique values to assign the appropriate symbol for each feature it renderers.

For this example, the renderer uses a feature's TYPE attribute value to apply the correct symbol.

App.java
Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
  private void addOpenSpaceLayer() {
    // Create a parks and open spaces feature layer and add it to the map view.
    FeatureLayer featureLayer = addFeatureLayer(parksAndOpenSpaces);

    // Create fill symbols.
    SimpleFillSymbol purpleFillSymbol =
        new SimpleFillSymbol(SimpleFillSymbol.Style.SOLID, PURPLE, null);
    SimpleFillSymbol greenFillSymbol =
        new SimpleFillSymbol(SimpleFillSymbol.Style.SOLID, GREEN, null);
    SimpleFillSymbol blueFillSymbol =
        new SimpleFillSymbol(SimpleFillSymbol.Style.SOLID, BLUE, null);
    SimpleFillSymbol redFillSymbol =
        new SimpleFillSymbol(SimpleFillSymbol.Style.SOLID, RED, null);

    // Create a unique value for natural areas, regional open spaces, local parks, and regional recreation parks.
    List<Object> naturalAreasValue = new ArrayList<>();
    naturalAreasValue.add("Natural Areas");
    UniqueValue naturalAreas =
        new UniqueValue("Natural Areas", "Natural Areas", purpleFillSymbol, naturalAreasValue);

    List<Object> regionalOpenSpaceValue = new ArrayList<>();
    naturalAreasValue.add("Regional Open Space");
    UniqueValue regionalOpenSpace =
        new UniqueValue("Regional Open Space", "Regional Open Space", greenFillSymbol, regionalOpenSpaceValue);

    List<Object> localParkValue = new ArrayList<>();
    localParkValue.add("Local Park");
    UniqueValue localPark =
        new UniqueValue("Local Park", "Local Park", blueFillSymbol, localParkValue);

    List<Object> regionalRecreationParkValue = new ArrayList<>();
    regionalRecreationParkValue.add("Regional Recreation Park");
    UniqueValue regionalRecreationPark =
        new UniqueValue("Regional Recreation Park", "Regional Recreation Park", redFillSymbol, regionalRecreationParkValue);

    List<UniqueValue> uniqueValuesList = new ArrayList<>();
    uniqueValuesList.add(naturalAreas);
    uniqueValuesList.add(regionalOpenSpace);
    uniqueValuesList.add(localPark);
    uniqueValuesList.add(regionalRecreationPark);

    // Create a unique value renderer and set it on the parks and open spaces feature layer.
    // fieldNames is a List, but in this tutorial there is only one item in the list
    List<String> fieldNames = new ArrayList<>();
    fieldNames.add("TYPE");
    UniqueValueRenderer openSpacesUniqueValueRenderer =
        new UniqueValueRenderer(fieldNames, uniqueValuesList, "Open Spaces", null);
    featureLayer.setRenderer(openSpacesUniqueValueRenderer);

    // Set the layer opacity to semi-transparent.
    featureLayer.setOpacity(0.2f);
  }
Expand

Update start() to call the new addOpenSpaceLayer() method.

App.java
Expand
Use dark colors for code blocks
Add line.
    // create a map view to display the map and add it to the stack pane
    mapView = new MapView();
    stackPane.getChildren().add(mapView);

    map = new ArcGISMap(BasemapStyle.ARCGIS_TOPOGRAPHIC);

    // set the map on the map view
    mapView.setMap(map);

    mapView.setViewpoint(new Viewpoint(34.02700, -118.80543, 72000.0));

    addOpenSpaceLayer();

  }
Expand

Run the app.
Ensure to run the app as a Gradle task and not as an application in your IDE. In the Gradle tool window, under Tasks > application, click run.

When the app opens, Parks and Open Spaces feature layer is added to the map. The map displays the different types of parks and open spaces with four unique symbols.

Add a layer with a class breaks renderer

Create a method to apply a different symbol for each of the five ranges of elevation gain to the Trails feature layer.

Add a new method named addTrailsLayer() just after the addOpenSpaceLayer() method you created above.
A ClassBreak assigns a symbol to a range of values.
For this example, the renderer uses each feature's ELEV_GAIN attribute value to classify it into a defined range (class break) and apply the corresponding symbol.
App.java
Expand
Use dark colors for code blocks
186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186 186