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

Is it possible to access data from a clicked graphic?

JasonCantrell

I've got a map application with dynamically generated map points in several layers (each layer displays a different colored map point). I'm trying to select a map point by clicking on it and then triggering some other functionality using some string data that is unique to the clicked map point.

So far I've added a click handler to my graphics layer, and I'm displaying the contents of event.target as a String in a trace statement when I click on a graphic in that layer. When I do that, the end of the long target string is "mapLayer.Graphic4760.CompositeSymbolComponent4777". I've been able to trigger events based on having a specific map layer clicked before (with one clickHandler function for several different layers) so I know I can grab that from event.target, and it appears I should be able to access the Graphic and/or the CompositeSymbol as well.

In my click handler, I tried:

var clickedGraphic:Graphic = new Graphic(); clickedGraphic = event.target as Graphic; trace("click: " + clickedGraphic.attributes.toString());

but this gives me the following error: "Cannot access a property or method of a null object reference.", which tells me that the graphic is not actually getting passed through event.target, or I'm not referencing it properly in the code.

Is it possible for me to grab some string data (like the attributes or the toolTip) from the graphic that I clicked on (through event.target)? I'm using a CompositeSymbol in my graphics layer, which is composed of a SimpleMarkerSymbol and a TextSymbol. Would it be possible for me to grab data from the TextSymbol through event.target instead? It seems like one of these should be possible, but I just don't know how to properly reference and access that data in my GraphicsLayer clickHandler.

Find more posts tagged with

Accepted answers

kenbuja

What I did is add an event listener to each graphic that I added to my map.

for each (var graphic:Graphic in featureSet.features) {     graphic.toolTip = "Site ID: " + graphic.attributes["Site_ID"];     graphic.addEventListener(MouseEvent.ROLL_OVER, onMouseOver);  //you could also add MouseEvent.CLICK     graphic.id = "Dive"; }

I am able to get the graphic's information in the onMouseOver event

private function onMouseOver(event:MouseEvent):void {     var graphic:Graphic = Graphic(event.target);          var objectid = graphic.attributes["OBJECTID"] //etc

All comments

KomanDiabate

Never mind guys. I figured it out. Thanks.

KomanDiabate

Thanks Ken for the answer.
I was trying to do this for one of my project and saw this post and it's coming to be pretty handy. I am able to read values from my XY mappoint graphic pn mouseClick event.
The challenge I have is that my project is a IPAD app and I don't think tooltip are recommended. I am thinking maybe I need to use some kind of popup. Any advice or suggestions?

JasonCantrell

Using event.currentTarget seemed to solve my problem, and I successfully assigned the clicked graphic to my new graphic variable. Thanks for the help, Ken!

kenbuja

This is what my event target and graphic variables look like in the onMouseOver function.

I am using a UniqueValueRenderer with simple marker symbols, not composite symbols, to symbolize the graphics.

[ATTACH=CONFIG]32524[/ATTACH][ATTACH=CONFIG]32525[/ATTACH]

event.jpg

graphic.jpg

JasonCantrell

Thanks for the reply Ken. I tried the method you suggested (using MouseEvent.CLICK instead), but I'm getting a similar error to before.

Here's my function that gets called on mouse click:

   protected function onGraphicMouseClick(event:MouseEvent):void
   {
    var clickedGraphic:Graphic = Graphic(event.target);
    trace("event.target = " + event.target.toString());
   }

And i'm getting the following error on the first line of that function:

TypeError: Error #1034: Type Coercion failed: cannot convert CompositeSymbolComponent@16e429e1 to com.esri.ags.Graphic.

So it looks like my event.target is still pointing to the CompositeSymbol instead of the Graphic. Are you using a symbol of some sort in the application that your example code came from? If so, how did you get around this?

kenbuja

What I did is add an event listener to each graphic that I added to my map.

for each (var graphic:Graphic in featureSet.features) {     graphic.toolTip = "Site ID: " + graphic.attributes["Site_ID"];     graphic.addEventListener(MouseEvent.ROLL_OVER, onMouseOver);  //you could also add MouseEvent.CLICK     graphic.id = "Dive"; }

I am able to get the graphic's information in the onMouseOver event

private function onMouseOver(event:MouseEvent):void {     var graphic:Graphic = Graphic(event.target);          var objectid = graphic.attributes["OBJECTID"] //etc

Join the Conversation

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

Quick Links

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