HighlightOptions

AMD: require(["esri/views/support/HighlightOptions"], (HighlightOptions) => { /* code goes here */ });
ESM: import HighlightOptions from "@arcgis/core/views/support/HighlightOptions.js";
Class: esri/views/support/HighlightOptions
Inheritance: HighlightOptions→Accessor
Since: ArcGIS Maps SDK for JavaScript 4.32

HighlightOptions are used to customize the appearance of highlights applied to features. You can configure various options (such as color or opacity) to define how a feature will be visually emphasized when highlighted using those options.

To be used in an application, highlight options first need to be added to the View's highlights collection. You can then use the highlight() method on the appropriate LayerView to apply the options to one or more features. If the highlight() method is called without passing specific options, the default options will be used. These are the options which have the name property set to "default". A pre-configured set of default options is provided for ease of use, but you can also define your own.

The table below shows the pre-configured highlight options in the View's highlights collection if the collection has not been modified.

Highlight options name Description Default settings
default The default highlight options. Used when layerView.highlight() is called without specifying any particular highlight options. { name: "default", color: "cyan", haloOpacity: 1, fillOpacity: 0.25, shadowColor: "black", shadowOpacity: 0.4, shadowDifference: 0.2}
temporary The temporary highlight options, pre-configured for common use cases such as hovering over a feature in the view. { name: "temporary", color: "yellow", haloOpacity: 1, fillOpacity: 0.25}

In a 2D MapView, a layerView's highlightOptions will take precedence over the MapView's highlights if both properties are set.

In a 3D SceneView, highlighting a feature with the default options also influences the feature's shadow. You can customize the shadow options or use the pre-configured ones, which will display the shadow in a darker shade. Shadow options are only supported on the default highlight options; setting them on other highlights has no effect.

See also
Examples
// Override the default highlights collection
const view = new MapView({
  map: map,
  // Set the highlight options to be used in the view
  highlights: [
    { name: "default", color: "orange" },
    { name: "temporary", color: "magenta" },
    { name: "oaks", color: "forestgreen", haloOpacity: 0.8, fillOpacity: 0.3 }
  ]
});
// Highlight features based on a query result

// A handler can be used to remove any previous highlight when applying a new one
let highlight;

// Query for particualar features in a layer and then highlight them with the specified options
view.whenLayerView(treesLayer).then((layerView) => {
  let query = treesLayer.createQuery();
  query.where = "type = 'Quercus'";

  treesLayer.queryFeatures(query).then((result) => {
    // Remove any previous highlight, if it exists
    highlight?.remove();
    // Apply the user-defined "oaks" highlight options to the corresponding tree features
    highlight = layerView.highlight(result.features, {name: "oaks"});
  });
});

Constructors

HighlightOptions

Constructor
new HighlightOptions(properties)
Parameter
properties Object
optional

See the properties for a list of all the properties that may be passed into the constructor.

Property Overview

Any properties can be set, retrieved or listened to. See the Watch for changes topic.
Show inherited properties Hide inherited properties
Name Type Summary Class

The color of the highlight fill.

HighlightOptions

The name of the class.

Accessor

The opacity of the fill (area within the halo).

HighlightOptions

The color of the halo surrounding the highlight.

HighlightOptions

The opacity of the highlight halo.

HighlightOptions

A name used to uniquely identify the highlight options within the view's highlights collection.

HighlightOptions

The color of the highlighted feature's shadow in a 3D SceneView.

HighlightOptions

Defines the intensity of the shadow area obtained by overlapping the shadow of the highlighted feature and the shadow of other objects in a 3D SceneView.

HighlightOptions

The opacity of the highlighted feature's shadow in a 3D SceneView.

HighlightOptions

Property Details

color

Property
color Colorautocast

The color of the highlight fill.

declaredClass

Inherited
Property
declaredClass Stringreadonly
Inherited from Accessor

The name of the class. The declared class name is formatted as esri.folder.className.

fillOpacity

Property
fillOpacity Number

The opacity of the fill (area within the halo). This will be multiplied with the opacity specified in color.

Default Value:0.25

haloColor

Property
haloColor Color |null |undefinedautocast

The color of the halo surrounding the highlight.

haloOpacity

Property
haloOpacity Number

The opacity of the highlight halo. This will be multiplied with any opacity specified in color.

Default Value:1

name

Property
name String

A name used to uniquely identify the highlight options within the view's highlights collection. To apply a specific set of highlight options, include this name in the second parameter of a LayerView's highlight() method. If no name is specified, it will default to default.

The name of the highlight options does not affect the behavior of the highlightOptions set on the layer view instance.

Example
// Use the default highlights collection to apply a highlight to features when you hover over them

// A handler can be used to remove any previous highlight when applying a new one
let hoverHighlight;

view.on("pointer-move", (event) => {
  // Search for features in the featureLayer at the hovered location
  view.hitTest(event, { include: featureLayer }).then((response) => {
    if (response.results.length) {
      const features = response.results.map(result => result.graphic);
      // Remove any previous highlight, if it exists
      hoverHighlight?.remove();
      // Highlight the hit features with the temporary highlight options, which are pre-configured for this use case
      hoverHighlight = layerView.highlight(features, {name: "temporary"});
    }
  }).catch((error) => {
    console.error("Error during hitTest:", error);
  });

shadowColor

Property
shadowColor Colorautocast

The color of the highlighted feature's shadow in a 3D SceneView.

Known Limitation

Shadow options are only supported on the default highlight options. Setting them on other highlights has no effect.

Default Value:#000000

shadowDifference

Property
shadowDifference Number

Defines the intensity of the shadow area obtained by overlapping the shadow of the highlighted feature and the shadow of other objects in a 3D SceneView. The value ranges from 0 to 1. A value of 0 highlights the overlapping shadow areas in the same way (no difference). Setting it to 1 highlights only the difference between the shadow areas, so the overlapping shadow areas aren't highlighted at all. Here is an example of what the shadow highlight looks like with different values:

shadow-highlight

Known Limitation

Shadow options are only supported on the default highlight options. Setting them on other highlights has no effect.

Default Value:0.2
Examples
// SceneView highlights with shadow settings configured
const view = new SceneView({
  map: map,
  highlights: [
    {
      name: "oaks"
      color: "forestgreen",
      haloColor: "green",
      haloOpacity: 0.9,
      fillOpacity: 0.2,
      shadowColor: "goldenrod",
      shadowOpacity: 0.5
    }
  ]
});
// A handler can be used to remove any previous highlight when applying a new one
let highlight;

// Query for particualar features in a layer and then highlight them with the specified options
view.whenLayerView(treesLayer).then((layerView) => {
  let query = treesLayer.createQuery();
  query.where = "type = 'Quercus'";
  treesLayer.queryFeatures(query).then((result) => {
    // Remove any previous highlight, if it exists
    highlight?.remove();
    // Apply the user-defined "oaks" highlight options to the corresponding tree features
    highlight = layerView.highlight(result.features, {name: "oaks"});
  });
});

shadowOpacity

Property
shadowOpacity Number

The opacity of the highlighted feature's shadow in a 3D SceneView. This will be multiplied with the opacity specified in shadowColor.

Known Limitation

Shadow options are only supported on the default highlight options. Setting them on other highlights has no effect.

Default Value:0.4

Method Overview

Show inherited methods Hide inherited methods
Name Return Type Summary Class

Adds one or more handles which are to be tied to the lifecycle of the object.

Accessor

Returns true if a named group of handles exist.

Accessor

Removes a group of handles owned by the object.

Accessor

Method Details

addHandles

Inherited
Method
addHandles(handleOrHandles, groupKey)
Inherited from Accessor

Adds one or more handles which are to be tied to the lifecycle of the object. The handles will be removed when the object is destroyed.

// Manually manage handles
const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  },
  { once: true }
);

this.addHandles(handle);

// Destroy the object
this.destroy();
Parameters
handleOrHandles WatchHandle|WatchHandle[]

Handles marked for removal once the object is destroyed.

groupKey *
optional

Key identifying the group to which the handles should be added. All the handles in the group can later be removed with Accessor.removeHandles(). If no key is provided the handles are added to a default group.

hasHandles

Inherited
Method
hasHandles(groupKey){Boolean}
Inherited from Accessor

Returns true if a named group of handles exist.

Parameter
groupKey *
optional

A group key.

Returns
Type Description
Boolean Returns true if a named group of handles exist.
Example
// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
  obj.removeHandles("watch-view-updates");
}

removeHandles

Inherited
Method
removeHandles(groupKey)
Inherited from Accessor

Removes a group of handles owned by the object.

Parameter
groupKey *
optional

A group key or an array or collection of group keys to remove.

Example
obj.removeHandles(); // removes handles from default group

obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.