Change color of view graphic on click.

08-10-2021 03:37 PM
New Contributor III

I have an esri javascript map. I have an array of {lat, lng, id}. I create a point with the lat, lng, and a symbol, then create a Graphic. I add these items to the map using 

When I click the graphic, (which is a small blue circle), I'd like to change the blue to red. However all that happens is I click the circle and my popupTemplate comes up.

How do I change the color of the selected graphic? I feel like this should be easy, but I can't find the answer anywhere. 

0 Kudos
2 Replies
Occasional Contributor

I've got this working with a polygon:

A point should function fairly similarly. You may want to put a small buffer around your point for listening to the map click - otherwise, the user would have to click the EXACT center of the graphic for this to work.

Courtney Menikheim | Application Developer | @thecmenikheim
0 Kudos
New Contributor III

Thanks Courtney, that was helpful. I ended up designing a method that adds a new graphic on top of the old graphic on click.
Graphic is made with a popupTemplate that includes the "content" property. I set that to a function. See below.

 popupTemplate: {


    content: myFunction

On the graphic click it runs the function which cycles through all graphics and removes any with a specific style. myFunction(){

 var graphics = (graphic) {
       //my regular graphics have a color.b of  254. I don't want those ones. I want the selected ones which are different.
        return graphic.symbol.color.b != 254;
     //should only be one in the array, but just in case another selected graphic got in there.;

      //add a new graphic to map with different color
      myFunction2(newgraphicWithTheSameLocationAndAttributes, ThisTimeWithANewColor)

Hope that helps.