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)
}
Solved! Go to Solution.
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.
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;
}
}
});
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.
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.