topic Change color of view graphic on click. in ArcGIS JavaScript Maps SDK Questions

Change color of view graphic on click.

ScottAndersonGQ — Tue, 10 Aug 2021 22:37:26 GMT

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.

Re: Change color of view graphic on click.

CourtneyMenikheim — Wed, 11 Aug 2021 15:49:24 GMT

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.

Re: Change color of view graphic on click.

ScottAndersonGQ — Wed, 11 Aug 2021 21:01:42 GMT

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.