Highlight options for layer views

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.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
          // 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
          };

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