In a deck.gl GeojsonLayer, how can I hide individual polygons?

Question

I have a polygon GeoJSON layer in my deck.gl map. To avoid having to reload many polygons in many user interactions, I would like to pre-load all polygons and then change their visibility. I tried to achieve this by setting the fill color (and also line color and line width, but there it's hidden in the functions) to null depending on the polygon properties.

        new deck.GeoJsonLayer({
            id: 'polygon-layer',
            data: family,
            pickable: true,
            getPosition: d => d.geometry.coordinates,
            filled: true,
            getFillColor: d => show(d) ? hexToIntColor(d.properties.color) : null,
            lineWidthUnits: "pixels",
            getLineWidth: highlighted,
            getLineColor: highlighedColor,
            lineWidthMinPixels: 1,
            visible: true,
            onClick: displayProperties,
            updateTriggers: {
                getLineWidth: [highlightedMap, highlightedCode],
                getLineColor: [highlightedMap, highlightedCode],
                getFillColor: [highlightedMap, highlightedCode]
            }
        })

The result is very much not what I expected

How do I set individual polgons to not be displayed? (And where do these strange black gradients come from which I see instead of just seeing the pink and coastline from the background map?)

Answer 1

Try using DataFilterExtension, setting filterRange to [1, 1] means that only entities that meet the condition (1) will be rendered, and not (0):

new deck.GeoJsonLayer({
  ...
  getFilterValue: (d) => Number(show(d)),
  filterRange: [1, 1],
  extensions: [new DataFilterExtension({ filterSize: 1 })],
  updateTriggers: {
    getFilterValue: [yourTrigger]
  }
});