Select to view content in your preferred language

Change color of view graphic on click.

1561
2
08-10-2021 03:37 PM
ScottAndersonGQ
Occasional Contributor

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  esriView.graphics.add(pointGraphic). 

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
CourtneyMenikheim
Frequent Contributor

I've got this working with a polygon:
https://codepen.io/cmenikheim-geojobe/pen/KKmJZPz?editors=1000

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
ScottAndersonGQ
Occasional Contributor

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 = esriView.graphics.items.filter(function (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.
      esriView.graphics.removeMany(graphics);

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

Hope that helps.