require(["esri/views/support/HighlightOptions"], (HighlightOptions) => { /* code goes here */ });
import HighlightOptions from "@arcgis/core/views/support/HighlightOptions.js";
esri/views/support/HighlightOptions
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
// 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
-
Parameterproperties Objectoptional
See the properties for a list of all the properties that may be passed into the constructor.
Property Overview
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
-
fillOpacity
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
-
The color of the halo surrounding the highlight.
-
haloOpacity
haloOpacity Number
-
The opacity of the highlight halo. This will be multiplied with any opacity specified in
color
.- Default Value:1
-
name
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 todefault
.The name of the highlight options does not affect the behavior of the highlightOptions set on the layer view instance.
- See also
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); });
-
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
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
to1
. A value of0
highlights the overlapping shadow areas in the same way (no difference). Setting it to1
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: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
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
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
-
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();
ParametershandleOrHandles WatchHandle|WatchHandle[]Handles marked for removal once the object is destroyed.
groupKey *optionalKey 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
InheritedMethodhasHandles(groupKey){Boolean}
Inherited from Accessor -
Returns true if a named group of handles exist.
ParametergroupKey *optionalA group key.
ReturnsType 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"); }
-
Inherited from Accessor
-
Removes a group of handles owned by the object.
ParametergroupKey *optionalA group key or an array or collection of group keys to remove.
Exampleobj.removeHandles(); // removes handles from default group obj.removeHandles("handle-group"); obj.removeHandles("other-handle-group");