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
Well that totally worked!! Working with typescript and react is definitely a learning curve for me. Thank you for your help!
const simpleFillSymbol = new SimpleFillSymbol({
style: "solid",
color: "white",
outline: {
color: "black",
width: 1,
const renderer = new SimpleRenderer({
symbol: simpleFillSymbol,
const myLayer = new GeoJSONLayer({
url: url,
geometryType: "polygon",
outFields: ["*"],
popupTemplate: template,
opacity: 0.7,
renderer: renderer,
