Correct attribute is not showing up when I click a polygon

802
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 Esteemed 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 Esteemed 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 Emeritus

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 Esteemed 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?