nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

highlight options within MapView

City_of_Greenville__SCGIS

I'm trying to turn on the highlight settings for layers that are clicked on and came across the highlightOptions setting within the MapView but I can't get it to work.

I added the following but nothing happens:

<SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map<SPAN class="punctuation token">:</SPAN> webmap<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">340</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;highlightOptions<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;haloOpacity<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.9</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fillOpacity<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.2</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

What am I missing?

Scott

Find more posts tagged with

Accepted answers

kenbuja

Here's some code to start with. I took this sample and added code to highlight the symbols as you mouse over them

JS Bin - Collaborative JavaScript Debugging

All comments

kenbuja

According to the documentation, highlight was added in 4.4 and highlightOptions was added in 4.5. However, changing the sample from my answer to earlier versions on the API makes the highlighting fail. I'm not seeing anything in the Bug Fixes and Enhancements about this getting fixed

City_of_Greenville__SCGIS

Ken,

Thanks so much, this did it. Unfortunately it produces another issue (detailed below) but I'm going to mark this correct.

Is highlight option new in 4.9? It doesn't run in 4.8. Which brings me to the issue. This map has a fairly complex symbology setup which stems from the AGO's inability to maintain a reference scale. Since it's also an event map I've rotated the map so that it reads in a more user friendly up/down orientation. However something about 4.9 doesn't like the way I've symbolized things and rotated. You can see the two versions below. There might not be anything to be down here given my time constraints but if you notice anything I can do I'd love to hear it.

JS BIN 4.8 Version

JS Bin 4.9 Version

Scott

kenbuja

Here's some code to start with. I took this sample and added code to highlight the symbols as you mouse over them

JS Bin - Collaborative JavaScript Debugging

City_of_Greenville__SCGIS

I think so but that example loses me.

Here's what I have so far (I'm not sure what the syntax tool ins't working accurately here):

var featureLayerhighlight = new FeatureLayer({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url: "https://services.arcgis.com/s8BzdTejnTIG3ix6/ArcGIS/rest/services/FFG2018POI_z/FeatureServer/0"
});

webmap.add(featureLayerhighlight);

view.on("pointer-move", function(event){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; view.hitTest(event).then(function(response){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (response.results.length) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var graphic = response.results.filter(function (result) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return result.graphic.layer === featureLayerhighlight;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; })[0].graphic;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; view.whenLayerView(graphic.layer).then(function(layerView){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layerView.highlight(graphic);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

kenbuja

Are you also adding the highlight method on the FeatureLayerView? Take a look at this sample: ArcGIS API for JavaScript Sandbox

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

All Communities
Recent Posts
Followed Content
Community Help

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.