The following lists a series of samples that demonstrate how to programmatically style features in a FeatureLayer, GeoJSONLayer, CSVLayer, SceneLayer, or a StreamLayer. The visualization of a GraphicsLayer is determined by the symbol of its individual graphics; GraphicsLayer does not have a renderer.
Overview of visualization samples
Sometimes users only want to know where features are located. The following samples demonstrate different ways to accomplish this.
Visualize all features with the same symbol
This sample shows you how to assign the same symbol to all features in a layer. This is the most basic visualization scenario and is not driven by attribute data. This is useful when adding layers purely for contextual reasons, such as showing political boundaries, roads, points of interest, project areas, etc.
Scale feature sizes based on real world sizes (2D)
Perhaps you want to add a little more information to features besides their simple location. This sample shows how to use visual variables to create point symbols scaled to the real-world size of tree canopies (point features) in a 2D MapView.
Visualize features with realistic 3D symbols
You can take the previous sample a step further and create 3D symbols in a SceneView that resemble the look of features as they exist in the real world. Once again, visual variables are used to reference numeric attribute fields containing various measurements and dimensions of tree features stored as points. The renderer uses visual variables to proportion different parts of each symbol to recreate a simple 3D representation of the tree as it might look in the real world.
Visualize data with rotation
This sample demonstrates how to visualize point data using rotation. Each point in the sample contains an attribute for the aspect (or compass direction the terrain faces) of the terrain and rotates the arrow symbol appropriately.
Another application of rotation would be to visualize city bus features loaded from a StreamLayer with arrow symbols rotated based on the heading of each bus.
Point visualization in 3D
This sample shows how to create a points of interest map (POI) in a 3D scene. This sample takes advantage of the elevationInfo, callout, verticalOffset, decluttering and screenSizePerspectiveEnabled capabilities.
This sample demonstrates how to create a heatmap for large, dense point layers.
This sample shows how to update a layer's visualization based on the view's scale.
The following samples demonstrate visualizations by unique types. Type is usually based on a string attribute field and visualized with color.
Visualize features by type
This sample visualizes features from the same layer differently based on the value of a string field. Visualizing features by type is useful for data that has a well-known classification, such as road type (e.g. residential, arterial, highway, freeway, etc.), or predominant value (e.g. dominant crop, minority, language, etc.).
Extrude building footprints based on real world heights
This sample demonstrates how to visualize polygon features by type in a 3D SceneView while extruding each feature by a numeric field. In this case, we want to see the building locations classified by type (residential, commercial, hotel, condo, etc.). While this could easily be done with simple fill symbols, we added the data to a SceneView and extruded each building by its height to provide more context to the location of each building.
Create a predominance visualization using Arcade
This sample demonstrates how to create a data-driven predominance visualization with an Arcade expression. Arcade is useful for creating visualizations in a FeatureLayer based on a value generated from an expression instead of a field value. Visualizing predominance involves coloring a layer’s features based on which attribute among a set of competing numeric attributes wins or beats the others in total count. Common applications of this include visualizing election results, survey results, and demographic majorities.
Create a dot density visualization
This sample demonstrates how to create a DotDensityRenderer. Dot density visualizations are exclusively used for visualizing density values in polygon layers. The density is visualized by randomly placing one dot per a given value for the desired attribute. Unlike choropleth visualizations, dot density can be mapped using total counts since the size of the polygon plays a significant role in the perceived density of the attribute.
Thematic counts and amounts
The following samples demonstrate how to visualize thematic numeric data such as population counts, wind speeds, percentages, etc.
Visualize data with class breaks
When well-defined class breaks are already known for a variable, then defining separate symbols for each break may be appropriate.
Data-driven continuous color
When data breaks aren't clear or are difficult to determine, continuous color can be a good way to visualize a numeric attribute along a ramp of two or more colors. Applying continuous color ramps can also reveal more detail about the distribution of the data, particularly in polygon features.
Data-driven continuous size
This sample demonstrates how to visualize numeric attribute data with continuous size and 2D symbols. This sample references polygon features (U.S. counties) that contain select demographic data. Polygons may be assigned marker symbols to visualize data with continuous size.
Like the previous example, this sample demonstrates how to visualize numeric data with continuous size. However, this visualization uses extrusion in a 3D SceneView to tell the demographic story. Extrusion only applies to features with polygon geometry; however, this same principle may be applied to features using ObjectSymbol3DLayers
Opacity can be used to diminish or enhance the importance of some features. This sample shows a layer depicting the highest level of educational attainment by census block group. Opacity is added to the renderer and applied to features based on the value of a numeric field - the total population living in the block group. This tones down features with low population and draws attention to features with a higher population.
Thematic multivariate visualization (2D)
Visual variables allow developers to programmatically create bivariate or multivariate visualizations with just a few lines of code. Visualizing multiple variables can reveal spatial trends among two or more variables. This sample demonstrates how to combine size and color to observe the potential relationship between two numeric fields.
Thematic multivariate visualization (3D)
Each renderer (except HeatmapRenderer) has a visualVariables property which allows developers to define simple data-driven visualizations based on numeric attributes with color, size, opacity, rotation, or any combination of two or more variables. Any renderer and visual variable may be applied to layers of any geometry type in both 2D MapViews and 3D SceneViews. Read the documentation for Renderer for more detailed information about how to apply renderers to a FeatureLayer.
Symbols define the visualization of individual features and are used by renderers when determining how a layer is drawn in the view. There are two types of symbols: 2D symbols and 3D symbols. Check out the Symbol Playground to learn about constructing symbols in a hands-on environment.
The 2D symbols listed in the table below may be used to visualize features in either 2D MapViews or 3D SceneViews. It is recommended, however, that they only be used for layers added in MapViews. The symbol contains properties such as color, size, and outline (depending on the symbol type) that defines the visualization of features in a layer. The color and size properties may be altered using visualVariables on the renderer.
|TextSymbol||Point, Polyline, Polygon|
Read the documentation for Symbol and its subclasses for more details.
The 3D symbols listed in the table below may only be used to visualize features in 3D SceneViews. Unlike 2D symbols, 3D symbols are containers for symbol layers. One or more symbol layers determines the visualization of a 3D symbol. A 3D symbol must have at least one symbol layer for features to render in the view. While more than one symbol layer may be used to define a 3D symbol, only one symbol layer is supported when applying visualVariables to the renderer. The table below lists each symbol layer along with the symbol types and geometries to which each may be applied.
|IconSymbol3DLayer||PointSymbol3D, PolygonSymbol3D||Point, Polygon||flat||points/pixels|
|ObjectSymbol3DLayer||PointSymbol3D, PolygonSymbol3D||Point, Polygon||volumetric||meters|
|LineSymbol3DLayer||LineSymbol3D, PolygonSymbol3D||Polyline, Polygon||flat||points/pixels|
|FillSymbol3DLayer||PolygonSymbol3D, MeshSymbol3D||Polygon, Mesh||flat||-|
|TextSymbol3DLayer||LabelSymbol3D||Point, Polyline, Polygon||flat||points/pixels|