Visualize all features with the same symbol

This sample demonstrates how to symbolize all features in the same layer with the same symbol. In some cases users only want to know where features are located, such as cities, project areas, roads, boundaries, etc. The data may be stored in a single layer where all features must have the same symbol. In this case, we'll use a SimpleRenderer to render all features with the same symbol.

Prior to completing the following steps, you should be familiar with views, Map, and FeatureLayer. If necessary, complete the following tutorials first:

• Intro to MapView
• Intro to SceneView
• Intro to Layers
• Review the basic FeatureLayer sample

The basic components of this app, such as creating instances of the Map and MapView classes and understanding HTML and CSS structure will not be reviewed. See the tutorials listed above if you need to familiarize yourself with those components in this application. As a general rule the introductory principles discussed in the tutorials above apply to most samples in the documentation.

1. Create a symbol for each layer

Three layers are added to this app; one for state boundaries, another for major highways, and another for major cities. In each layer, we want to render all features with the same symbol. Since cities are represented with points, we'll use a SimpleMarkerSymbol.

1
2
3
4
5
6
const citiesSym = {
  type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
  size: 5,
  color: [0, 255, 255],
  outline: null
};

For the highways and states we'll use a SimpleLineSymbol and SimpleFillSymbol respectively.

2. Set the symbol in a SimpleRenderer

Next, set the symbol object in the symbol property of the SimpleRenderer.

1
2
3
4
const citiesRenderer = {
  type: "simple", // autocasts as new SimpleRenderer()
  symbol: citiesSym
};

You can also define the symbol directly in the renderer without having to do it beforehand.

1
2
3
4
5
6
7
8
9
const citiesRenderer = {
  type: "simple", // autocasts as new SimpleRenderer()
  symbol: {
    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
    size: 5,
    color: [0, 255, 255],
    outline: null
  }
};

3. Set other properties on the renderer (optional)

You can optionally set additional properties in the renderer, such as label, which sets the label of the symbol in the legend.

1
2
3
4
5
6
7
8
9
10
const citiesRenderer = {
  type: "simple", // autocasts as new SimpleRenderer()
  symbol: {
    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
    size: 5,
    color: [0, 255, 255],
    outline: null
  },
  label: "Major cities" // this will appear next to the symbol in the legend
};

4. Summary

Assigning all features in a single layer with a single symbol is the simplest scenario for visualizing data. Adding a legend to the app helps the user understand what the graphic represents in the real world. See the Legend widget sample for more information about adding a legend to a view.

Click the sandbox button below to see the full code of the app.

5. Additional visualization tutorials and samples

• Scale feature sizes based on real world sizes (2D)
• Visualize features with realistic 3D symbols
• Visualize data with rotation
• Visualize features by type