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; } } }

Correct attribute is not showing up when I click a polygon

CaraMayo2

I am building a map that you can hover over and click on. I need to access a feature's project number (ProjectNum) when I click on it, but my click event on the layer doesn't seem to be firing. When I click the map, I get all of the feature layer's project numbers, not the one that I want. I've tried using map.on, on(layer, "click"...), layer.on("click"... How do I retrieve the specific project number of the polygon that I click on?

<SPAN class="" style="color: #101094; border: 0px; font-weight: inherit; font-size: 13px;">function</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> clickMap</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">(){</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp; layer</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">on</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">(</SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit; font-size: 13px;">"update-end"</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-weight: inherit; font-size: 13px;">function</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">(</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">evt</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">){</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">log</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">(</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">evt</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">);</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">on</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">(</SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit; font-size: 13px;">"click"</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-weight: inherit; font-size: 13px;">function</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">(</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">e</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">){</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">log</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">(e</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">);</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">log</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">(</SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit; font-size: 13px;">"project number: "</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">+</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> layer</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">graphics</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">[</SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit; font-size: 13px;">0</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">].</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">attributes</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">.</SPAN><SPAN class="" style="color: #2b91af; border: 0px; font-weight: inherit; font-size: 13px;">ProjectNum</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">);</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">});</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">})</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">}</SPAN>

filtertool2.js.zip

PWelter_0-1778220862060.png

Encuentra más publicaciones etiquetadas con

Accepted answers

kenbuja

Yes, the hover function interferes with layer click event. What you can do is add a click event to the map's graphics

<SPAN class="keyword token">function</SPAN> <SPAN class="token function">clickMap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>ProjectNum<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">// console.log(evt);</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">// map.on("click", function(e){</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">// console.log(e.graphics);</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">// console.log("project number: " + layer.graphics[0].attributes.ProjectNum);</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">// });</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

You'll also have to add the attributes of the feature to your graphic in your layer mouse-over event

<SPAN class="keyword token">var</SPAN> highlightGraphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">,</SPAN> highlightSymbol<SPAN class="punctuation token">,</SPAN> evt<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

Is there any reason you have two map load event listeners running?

All comments

JackFairfield

Make sure you are setting the "outFields" property when creating your FeatureLayer.

var flayer = new FeatureLayer(url, {
    outFields: ["*"] //make sure field to label is specified here in outFields
  });

kenbuja

If it's a feature layer, then use its click event (along with Jack's suggestion with the outFields

featureLayer.on('click', function(e){
&nbsp; console.log(e);
&nbsp; console.log(e.graphic.attributes.ProjectNum);
});<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

CaraMayo2

Thanks for the advice! I did make sure to include 'ProjectNum' in the outfield. When I updated my code with:

featureLayer.on('click', function(e){
&nbsp; console.log(e);
&nbsp; console.log(e.graphic.attributes.ProjectNum);
});

I get no response. Nothing in the console. I'll attached my js file to my post. Could there be some interference if I also have a hover function? Like maybe I'm clicking the highlighted graphic instead of the polygon?

RobertScheitlin__GISP

Cara,

It is highly likely that your other graphic is blocking the click event. You can use the disablemouseevents on the highlight GL to prevent this.

https://developers.arcgis.com/javascript/3/jsapi/graphicslayer-amd.html#disablemouseevents

kenbuja

Yes, the hover function interferes with layer click event. What you can do is add a click event to the map's graphics

<SPAN class="keyword token">function</SPAN> <SPAN class="token function">clickMap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>ProjectNum<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">// console.log(evt);</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">// map.on("click", function(e){</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">// console.log(e.graphics);</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">// console.log("project number: " + layer.graphics[0].attributes.ProjectNum);</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">// });</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

You'll also have to add the attributes of the feature to your graphic in your layer mouse-over event

<SPAN class="keyword token">var</SPAN> highlightGraphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">,</SPAN> highlightSymbol<SPAN class="punctuation token">,</SPAN> evt<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

Is there any reason you have two map load event listeners running?

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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