This sample shows how to add highlightOptions to a FeatureLayerView. Starting at version 4.26, you can assign highlightOptions to layer views so that each layer view can have its own separate highlight configuration.
This map shows particulate matter in the air sized 2.5 micrometers of smaller (PM 2.5) by country boundaries, administrative 1 boundaries, and 50 km hex bins. The unit of measurement is micrograms per cubic meter. Refer to this webmap for more information.
How it works
When the application starts, the app adds three feature layers from portal items. It then assigns different highlightOptions to each layer view once the layers are loaded. The features from each layer will have different highlight colors when user clicks features on the map to display popupTemplate.
// assign different highlightColors to all features layers
// highlightOptions will be used by the layers' popupTemplates
const hexBinLayerView = await view.whenLayerView(hexBinLayer);
hexBinLayerView.highlightOptions = {
color: "#ffe700",
haloOpacity: 0.9,
fillOpacity: 0.2
};
const adminLayerView = await view.whenLayerView(adminLayer);
adminLayerView.highlightOptions = {
haloOpacity: 0.9,
fillOpacity: 0
};
const countryLayerView = await view.whenLayerView(countryLayer);
countryLayerView.highlightOptions = {
color: "#39ff14",
haloOpacity: 0.9,
fillOpacity: 0
};