Hello, I recently tried upgrading from v4.10 to v4.12 and encountered some breaking changes where my choropleth lost its fill. v4.11 is not affected, and from my understanding, v4.12 implemented a paradigm shift for performance improvements - renderers not working correctly appears to be a common complaint, maybe from the following in the release notes: As part of performance optimizations, incorrect polygon geometries that don't follow the expected clockwise order, no longer display. Polygon rings should be clockwise, with counterclockwise rings considered holes. I am fetching a geojson from ArcGIS Server; a copy of those data has been attached (geom.geojson). Here's a screenshot from the debugger: ...and the code I'm using to create the graphics: data = jsonData ; const graphicsPromise = promiseUtils . create ( function ( resolve , reject ) { const graphics = data . features . map ( function ( feature , i ) { // create a polygon instance from the GeoJSON data const polygon = new Polygon ( { //spatialReference: SpatialReference.WGS84 spatialReference : new SpatialReference ( 6343 ) } ) ; // read the GeoJSON's geometry and add to the polygon rings feature . geometry . coordinates . forEach ( function ( coord ) { const coordinates = feature . geometry . type === "MultiPolygon" ? coord [ 0 ] : coord ; polygon . addRing ( coordinates ) ; } ) ; const graphic = { geometry : polygon , attributes : feature . properties } ; return graphic ; } ) ; Here's what's rendering: ...and the renderer in the FeatureLayer: renderer : { type : "class-breaks" , defaultLabel : "No data" , defaultSymbol : defaultSym , visualVariables : [ { type : "color" , field : "val" , stops : [ { value : minMax . min , color : "#cce3ff" } , { value : minMax . max , color : "#0034b7" } ] } ] } In 4.13 and version < 4.12, it works fine: I noticed there were some breaking changes to a module I wasn't using, so I removed it... but, this does have me concerned since we'd be using a version that isn't supposed to be live yet. When will it deploy officially? Do we know yet what the issue is? I see some talk about loading rings clockwise... shouldn't everything be OK if I'm pulling geojson from a query against an ArcGIS Server (v10.6) REST node on a layer that checks-out topologically? geom.geojson.zip help.PNG MichaelBouvet_0-1624400482430.png

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Polygon renderer issue fixed in v4.13 - when's the release date?

ChrisSmith7

Hello,

I recently tried upgrading from v4.10 to v4.12 and encountered some breaking changes where my choropleth lost its fill. v4.11 is not affected, and from my understanding, v4.12 implemented a paradigm shift for performance improvements - renderers not working correctly appears to be a common complaint, maybe from the following in the release notes:

As part of performance optimizations, incorrect polygon geometries that don't follow the expected clockwise order, no longer display. Polygon rings should be clockwise, with counterclockwise rings considered holes.

I am fetching a geojson from ArcGIS Server; a copy of those data has been attached (geom.geojson). Here's a screenshot from the debugger:

...and the code I'm using to create the graphics:

        data <SPAN class="operator token">=</SPAN> jsonData<SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">const</SPAN> graphicsPromise <SPAN class="operator token">=</SPAN> promiseUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">create</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>resolve<SPAN class="punctuation token">,</SPAN>
                    reject<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

            <SPAN class="keyword token">const</SPAN> graphics <SPAN class="operator token">=</SPAN> data<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">,</SPAN> i<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="comment token">// create a polygon instance from the GeoJSON data</SPAN>
                <SPAN class="keyword token">const</SPAN> polygon <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Polygon</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                    <SPAN class="comment token">//spatialReference: SpatialReference.WGS84</SPAN>
                    spatialReference<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SpatialReference</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">6343</SPAN><SPAN class="punctuation token">)</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                <SPAN class="comment token">// read the GeoJSON's geometry and add to the polygon rings</SPAN>
                feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN>coordinates<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>coord<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">const</SPAN> coordinates <SPAN class="operator token">=</SPAN> feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN>type <SPAN class="operator token">===</SPAN>
                        <SPAN class="string token">"MultiPolygon"</SPAN> <SPAN class="operator token">?</SPAN> coord<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">:</SPAN> coord<SPAN class="punctuation token">;</SPAN>
                    polygon<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addRing</SPAN><SPAN class="punctuation token">(</SPAN>coordinates<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                <SPAN class="keyword token">const</SPAN> graphic <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
                    geometry<SPAN class="punctuation token">:</SPAN> polygon<SPAN class="punctuation token">,</SPAN>
                    attributes<SPAN class="punctuation token">:</SPAN> feature<SPAN class="punctuation token">.</SPAN>properties
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>

                <SPAN class="keyword token">return</SPAN> graphic<SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Here's what's rendering:

...and the renderer in the FeatureLayer:

            renderer<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"class-breaks"</SPAN><SPAN class="punctuation token">,</SPAN>
                defaultLabel<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"No data"</SPAN><SPAN class="punctuation token">,</SPAN>
                defaultSymbol<SPAN class="punctuation token">:</SPAN> defaultSym<SPAN class="punctuation token">,</SPAN>
                visualVariables<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
                    type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"color"</SPAN><SPAN class="punctuation token">,</SPAN>
                    field<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"val"</SPAN><SPAN class="punctuation token">,</SPAN>
                    stops<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
                        value<SPAN class="punctuation token">:</SPAN> minMax<SPAN class="punctuation token">.</SPAN>min<SPAN class="punctuation token">,</SPAN>
                        color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"#cce3ff"</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
                        value<SPAN class="punctuation token">:</SPAN> minMax<SPAN class="punctuation token">.</SPAN>max<SPAN class="punctuation token">,</SPAN>
                        color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"#0034b7"</SPAN>
                    <SPAN class="punctuation token">}</SPAN>
                    <SPAN class="punctuation token">]</SPAN>
                <SPAN class="punctuation token">}</SPAN>
                <SPAN class="punctuation token">]</SPAN>
            <SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

In 4.13 and version < 4.12, it works fine:

I noticed there were some breaking changes to a module I wasn't using, so I removed it... but, this does have me concerned since we'd be using a version that isn't supposed to be live yet. When will it deploy officially? Do we know yet what the issue is? I see some talk about loading rings clockwise... shouldn't everything be OK if I'm pulling geojson from a query against an ArcGIS Server (v10.6) REST node on a layer that checks-out topologically?