Help with SimpleRenderer using React, TypeScript, and ESM

2517
2
Jump to solution
02-26-2021 02:14 PM
dogWater
New Contributor

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
                    
            });

 

 

 

 

 

 

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor

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.

View solution in original post

2 Replies
ReneRubalcava
Frequent Contributor

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.

dogWater
New Contributor

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,
				
			});