Correct attribute is not showing up when I click a polygon

166
5
Jump to solution
07-25-2018 01:07 PM
CaraMayo2
New Contributor III

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? 

function clickMap(){     layer.on("update-end", function(evt){        console.log(evt);        map.on("click", function(e){        console.log(e);        console.log("project number: " + layer.graphics[0].attributes.ProjectNum);        });    })}
0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Honored Contributor

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

function clickMap() {
  map.graphics.on("click", function (e) {
    console.log(e);
    console.log(e.graphic.attributes.ProjectNum);
    // console.log(evt);
    // map.on("click", function(e){
    // console.log(e.graphics);
    // console.log("project number: " + layer.graphics[0].attributes.ProjectNum);
    // });
  });
}

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

var highlightGraphic = new Graphic(evt.graphic.geometry, highlightSymbol, evt.graphic.attributes);

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

View solution in original post

5 Replies
JackFairfield
Occasional Contributor II

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
 
});
0 Kudos
KenBuja
MVP Honored Contributor

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

featureLayer.on('click', function(e){
  console.log(e);
  console.log(e.graphic.attributes.ProjectNum);
});
0 Kudos
CaraMayo2
New Contributor III

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){
  console.log(e);
  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?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
MVP Honored Contributor

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

function clickMap() {
  map.graphics.on("click", function (e) {
    console.log(e);
    console.log(e.graphic.attributes.ProjectNum);
    // console.log(evt);
    // map.on("click", function(e){
    // console.log(e.graphics);
    // console.log("project number: " + layer.graphics[0].attributes.ProjectNum);
    // });
  });
}

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

var highlightGraphic = new Graphic(evt.graphic.geometry, highlightSymbol, evt.graphic.attributes);

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

View solution in original post