topic modify symbol used for a graphic? in ArcGIS JavaScript Maps SDK Questions

modify symbol used for a graphic?

john_cartwright_noaa — Fri, 30 Sep 2022 23:24:47 GMT

Hello All,

is there a way to modify part of a symbol used for a graphic, e.g. outline color, w/o re-creating the whole symbol?

something like this:

function mapClickHandler(hitTestResult) { const graphic = hitTestResult.results[0].graphic // does not work graphic.symbol.outline.color = new Color("red") // nor does the setColor method graphic.symbol.outline.color.setColor("red") // nor does re-creating just the SLS: graphic.symbol.outline = { type: "simple-line", width: 2, color: [213, 23, 23, 1] } // this works but seems like a hack const symbol_copy = graphic.symbol.toJSON() symbol_copy.outline.color = new Color("red") graphic.symbol = fromJSON(symbol_copy) }

Re: modify symbol used for a graphic?

ReneRubalcava — Fri, 30 Sep 2022 23:36:06 GMT

I thought that would have worked, but doesn't look like it. You can clone the symbol though, modify the outline and replace it.

https://codepen.io/odoe/pen/zYjjOPm?editors=0010

// something like this view.on("click", async (e) => { const { results } = await view.hitTest(e); for (let result of results) { if (result.type === "graphic") { const sym = result.graphic.symbol.clone(); const idx = Math.floor(Math.random() * 10); sym.outline && (sym.outline.color = colors[ Math.floor(Math.random() * 10) ]); sym.color = colors[ Math.floor(Math.random() * 10) ]; result.graphic.symbol = sym; } } });

Re: modify symbol used for a graphic?

john_cartwright_noaa — Fri, 07 Oct 2022 23:01:51 GMT

Thanks @ReneRubalcava! This is cleaner than the toJSON/fromJSON approach I was using. Where is the clone method assigned for the Symbol class? TypeScript doesn't recognize it.

Re: modify symbol used for a graphic?

ReneRubalcava — Sat, 08 Oct 2022 00:14:44 GMT

For TS, you'd need to help TS a bit doing something like if (symbol.type === "simple-fill"). It's not on the base Symbol, but main classes. You'll see it sprinkled around in the doc like here.

https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html#clone