I'm trying to style a VectorGrid Layer using a property from the pbf layer. I want to assing the color using a function "getColors" that uses the data on the field "gridcode".

The code runs and draws the layer but uses the default blue color of the server. The layer is served with pg_tileserv and PostgreSQL + PostGIS, the gridcode field is populated with data -1, 0, 1 and 2.

Here is my code:

const vectorLayerTendFull = "public.hum_tendencies_full";
const vectorUrlFull = vectorServer + vectorLayerTendFull + "/{z}/{x}/{y}.pbf";
console.log("Reading tiles from " + vectorUrlFull);
let vectorTileStyling2 = {};
vectorTileStyling[vectorLayerTendFull] = {
    gridcode: function(properties) {
        const val = properties.gridcode;
        return {
            radius: 1,
            weight: 1,
            fillOpacity: 1,
            fill: true,
            fillColor: getColors(val)
        }

        function getColors(val) {
            return val > 1 ? '#89AFD5' :
                val > 0 ? '#267300' :
                val > -1 ? '#FFFF00' :
                val < 0 ? '#A80000' :
                'rgba(0,0,0,0)';
        }
    }
};
let vectorTileOptions2 = {
    "rendererFactory": L.canvas.tile,
    "vectorTileLayerStyles": vectorTileStyling2
};
const vectorLayer2 = L.vectorGrid.protobuf(vectorUrlFull, vectorTileOptions2).addTo(map);

I fixed the function getColors as suggested by nikoshr, but still no styling with gridcode property

VectorGrid Layer drawn but not with the style based on the "gridcode":