Globe.gl, single polygon turns entire scene the cap color

[BenPav]

I'm trying to produce a single polygon on a map that is slightly raised up with a transparent globe image. I'm getting a large pillar of orange with the entire canvas with the cap color.
This is my code:

const world = Globe()
        (document.getElementById('globe'))
        .backgroundImageUrl('<?php echo get_template_directory_uri(); ?>/images/background-globe.png')
        .globeImageUrl('<?php echo get_template_directory_uri(); ?>/images/globeskin.png')
        .showAtmosphere(false)
        .polygonCapColor(feat => '#C3330C')
        .polygonSideColor(() => '#EF4E23')
        .hexTopColor('#C3330C')
        .hexSideColor('#EF4E23')
        .polygonAltitude(3)
        world.controls().enableZoom = false;
        world.controls().autoRotate = true;
        world.controls().autoRotateSpeed = 2;
        world.width([$(window).width()])
        world.height([$(window).width() * 1.25]);

        fetch('<?php echo get_template_directory_uri(); ?>/js/location.geojson').then(res => res.json()).then(countries => {
          world.polygonsData(countries.features.filter(d => d.properties.ISO_A2 !== 'AQ'));
        });

And here is my geojson

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {
            "shape": "Rectangle",
            "name": "Unnamed Layer",
            "category": "default"
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [-98.557021, 31.675237],
                    [-96.127868, 31.675237],
                    [-96.127868, 33.737238],
                    [-98.557021, 33.737238],
                    [-98.557021, 31.675237]
                ]
            ]
        },
        "id": "35f8ebbf-47ab-427b-8479-f674048b62be"
    }]
}

[vasturiano]

@BenPav I think the issue may be that your polygon is reverse wound, so essentially you're filling the entire world with a small square hole where you expect the polygon to be.
Geojson expects polygon coordinates to go clockwise iirc. So can you try reversing your coordinates array and see if it fixes it?

[BenPav]

That fixed one problem, but I still have a giant spire going from the core of the earth out into the heavens.

[vasturiano]

@BenPav can you make a simple example on codepen so that it's easier to debug?

[BenPav]

https://codepen.io/benpavlov/pen/abBrWKG

[vasturiano]

@BenPav that is expected. The polygons translate into cone like shapes, rooted at the globe center that are contoured according to the polygon geojson.

If you don't wish to show the cone radial walls, you can switch it off via .polygonSideColor(() => 'rgba(0,0,0,0)).

[alexzborovskii]

@vasturiano thank you so much for your advice about reversing the coordinates order!