Skip To ContentArcGIS for DevelopersSign In Dashboard

symbolUtils

require(["esri/symbols/support/symbolUtils"], function(symbolUtils) { /* code goes here */ });
Object: esri/symbols/support/symbolUtils
Since: ArcGIS API for JavaScript 4.11

Generates small preview images of symbols. This utility can be useful when creating custom widgets that require displaying small previews of symbols used to represent features in a layer.

Method Overview

NameReturn TypeSummaryObject
Promise<Symbol>

Returns a symbol representing the input Graphic.

more details
more detailssymbolUtils
Promise<HTMLElement>

Generates a preview image of a given symbol that can be displayed in a custom widget or other DOM element.

more details
more detailssymbolUtils

Method Details

getDisplayedSymbol(graphic, options){Promise<Symbol>}

Returns a symbol representing the input Graphic. This method is useful when you need to know the exact visual properties of a Graphic's symbol, particularly when the graphic comes from the result of a hitTest() and its symbol properties may be empty. A symbol's properties won't be populated when a Renderer defines the visualization of a layer rather than symbols set individually on each graphic of a layer. This is the case for FeatureLayer, and any other layer that has a renderer property.

Parameters:
Specification:
graphic Graphic

The graphic from which to retrieve the displayed symbol. This commonly comes from a hitTest() operation.

options Object
optional

Options for generating the display symbol of the input graphic. These must be specified if the input graphic comes from a layer with a renderer that has visual variables applied. See the object specification below.

Specification:
scale Number
optional

The view scale at which the symbol is displayed.

viewingMode String
optional

The viewingMode of the view, if the symbol is displayed in a SceneView.

spatialReference SpatialReference
optional

The spatial reference of the view in which the symbol is displayed.

resolution Number
optional

The resolution of the view at which the symbol is displayed.

Returns:
TypeDescription
Promise<Symbol>Returns the symbol representing the input graphic.
Example:
view.on("click", function (event) {
 view.hitTest(event).then(function (response) {
   if (response.results.length) {
     var graphic = response.results.filter(function (result) {
       // check if the graphic belongs to the layer of interest
       return result.graphic.layer === layer;
     })[0].graphic;

      // do something with the result graphic
     symbolUtils.getDisplayedSymbol(graphic, {
       scale: view.scale,
       spatialReference: view.spatialReference,
       resolution: view.resolution
     }).then(function(symbol){
       // resolves to the symbol of the graphic
     });
    }
  });
});
renderPreviewHTML(symbol, options){Promise<HTMLElement>}

Generates a preview image of a given symbol that can be displayed in a custom widget or other DOM element.

Parameters:
Specification:
symbol Symbol

The symbol for which to generate a preview image.

options Object
optional

Formatting options for the symbol preview image.

Specification:
optional

The parent node to append to the symbol.

size Number
optional

The size of the symbol preview in points.

maxSize Number
optional

The maximum size of the symbol preview in points.

opacity Number
optional

The opacity of the layer represented by the symbol.

scale Boolean
optional

Indicates whether to scale the symbol preview.

disableUpsampling Boolean
optional

Indicates whether to disable upsampling for raster images.

symbolConfig String
optional

For "tall" symbols in portrait view, then the tall value should be used here.

rotation String
optional

The rotation of the symbol.

Returns:
TypeDescription
Promise<HTMLElement>Returns a preview of the given symbol to display to the DOM.
Example:
// symbol from SimpleRenderer;
const symbol = layer.renderer.symbol.clone();

symbolUtils.renderPreviewHTML(symbol, {
  node: document.getElementById("preview"),
  size: 8
});

API Reference search results

NameTypeModule
Loading...