Method Overview

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:

Type	Description
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
     });
    }
  });
});

renderColorRampPreviewHTML(colors, options){HTMLElement}

Since: ArcGIS API for JavaScript 4.13

Generates a preview image of a color ramp to display in a custom widget or other DOM element.

Parameters:

Specification:

colors Color[] An array of colors from which to construct the color ramp.

options Object optional Formatting options for the color ramp. Specification: align String optional Default Value: vertical Specifies the alignment of the color ramp. Possible Values:"horizontal"|"vertical" gradient Boolean optional Default Value: true Indicates whether to render the color ramp with a continuous gradient. When false, distinct colors will appear in the ramp without a gradient. width Number optional The width of the ramp in pixels. height Number optional The height of the ramp in pixels.

Returns:

Type	Description
HTMLElement	Returns a preview of the color ramp for display in the DOM.

Examples:

const colors = [
  "#d6ffe1",
  "#8ceda6",
  "#2ee860",
  "#00e33d"
];

const colorRamp = symbolUtils.renderColorRampPreviewHTML(colors, {
  align: "vertical"
});

body.appendChild(colorRamp);

// Primary color scheme from colorSchemes.getSchemes()
const schemes = colorSchemes.getSchemes({
  basemap: "gray",
  geometryType: "polygon",
  theme: "above-and-below"
});

const colorRamp = symbolUtils.renderColorRampPreviewHTML(schemes.primaryScheme.colors, {
  align: "horizontal"
});

body.appendChild(colorRamp);

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: node HTMLElement 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:

Type	Description
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
});