topic Re: Help with SimpleRenderer using React, TypeScript, and ESM in ArcGIS JavaScript Maps SDK Questions

Help with SimpleRenderer using React, TypeScript, and ESM

dogWater — Fri, 26 Feb 2021 22:14:24 GMT

So I am using React, and Typescript and just trying to use the SimpleRenderer to give a geoJSONlayer a different color then the default. I have found that this works using esri-loader but not ESM this should be a simple thing but I really could use some help. and it is saying that 'type'. I have put a snip of my code below. Thoughts on why it would choke on type in the renderer? from the API I think this should be right but maybe not in ESM and TS.

No overload matches this call.
Overload 1 of 2, '(properties?: SimpleRendererProperties | undefined): SimpleRenderer', gave the following error.
Type '{ type: string; color: string; outline: { color: string; width: number; }; }' is not assignable to type 'SymbolProperties'.
Object literal may only specify known properties, and 'type' does not exist in type 'SymbolProperties'.
Overload 2 of 2, '(properties?: SimpleRendererProperties | undefined): SimpleRenderer', gave the following error.
Type '{ type: string; color: string; outline: { color: string; width: number; }; }' is not assignable to type 'SymbolProperties'.
Object literal may only specify known properties, and 'type' does not exist in

const renderer = new SimpleRenderer({ symbol:{ type: "simple-fill", color: "white", outline:{ color: "black", width: 1 } } }) const myLayer = new GeoJSONLayer({ url: url, geometryType: "polygon", outFields: ["*"], popupTemplate: template, opacity: 0.7, renderer: renderer });

Re: Help with SimpleRenderer using React, TypeScript, and ESM

ReneRubalcava — Fri, 26 Feb 2021 22:34:08 GMT

TypeScript doesn't like autocasting. So you would need to new up a new SimpleFillSymbol().

It's not ESM, it has to do with TypeScript not allowing different types for getter/setters.

Re: Help with SimpleRenderer using React, TypeScript, and ESM

dogWater — Mon, 01 Mar 2021 13:46:58 GMT

Well that totally worked!! Working with typescript and react is definitely a learning curve for me. Thank you for your help!