[esri.core.Accessor] Accessor#set Assigning an instance of 'esri.geometry.SpatialReference' which is not a subclass of 'esri.geometry.SpatialReference

YogeshSwami

I am trying to implement a drag and drop functionality for a polygon sketch and getting this error while doing so:

 [esri.core.Accessor] Accessor#set Assigning an instance of 'esri.geometry.SpatialReference' which is not a subclass of 'esri.geometry.SpatialReference'

I am able to achieve the functionality but my console gets flooded with this error.

Here is what i wrote about spatial reference:

         const footMap2 = new Map({

            basemap: "satellite", // Basemap layer service

            layers: [graphicsLayer]

        });

        const view2 = new MapView({

            map: footMap2,

            center: [long,lat]

            zoom: 20,

            container: footMap2container, // Div element

        });

 

       

        view2.when(() => {

            addGraphics();

            const obj: any = {

                view: view2,

                layer: graphicsLayer,

                updateOnGraphicClick: false,

                snappingOptions: { 

                    enabled: true,

                    featureSources: [{ layer: graphicsLayer, enabled: true }]

                }

            }

            const sketch: any = new Sketch(obj)

 

            sketch.on("update", (event: any) => {

                if (event.state === "complete") {

                    const updatedLatLng: any = [];

                    const xyPoints = event.graphics[0].geometry.rings[0];

                    xyPoints.forEach((point: any) => {

                        const result = webMercatorUtils.xyToLngLat(point[0], point[1]);

                        updatedLatLng.push(result);

                    });

                }

            });

        });

        // Add new development polygon graphic and boundary polygon graphics

        const addGraphics = () => {

            const vertices: any = [];

            const latlngvertices = this.updateLatLong(this.footPrintData.footprint_data);

            latlngvertices.forEach((point: any) => {

                const result = webMercatorUtils.lngLatToXY(point[0], point[1]);

                vertices.push(result);

            });

            const polygon: any = {

                type: "polygon",

                rings: vertices,

                spatialReference: view2.spatialReference

            };

            const validSymbol: any = {

                type: "simple-fill",

                style: "solid",

                color: "#4472c4",

                outline: {

                    color: "white",

                    width: 2

                }

            };=

            const newDevelopmentGraphic = new Graphic({

                geometry: polygon,

                symbol: validSymbol

            });

            graphicsLayer.addMany([newDevelopmentGraphic]);

        }

    }

 

and after running this, i am getting this error when I hover over map outside the polygon:

 

 

Can someone please help?

 

ReneRubalcava

Sample application please.