Dynamically create layers with DataFilterExtension

Hi,

I’m currently working on a project that requires user to upload new GeoJson files, create GeoJsonLayers and apply filters on the layer based on the number of additional information the user has. I’m having trouble with getting the data filters to work.

The GeoJson datasets are in the following format

{
    type: "...",
    features: [
        {
            type: "feature",
            properties: {"info1": value1, "info2": value2 ...},
            geometry: {type: "polygon", coordinates: {[..., ..., ...], ....}}
        },
        ..
        ..
        ..
    ]
}

Additional informations are stored in the properties object, stored as key-value pairs.

To create/destroy layers dynamically, I am storing the list of DeckGL layers in an array, I am either appending a new layer to the array, or to delete, search for the layer with the same id and pop it from the array. The array would look like this:

const [list_of_layers, set_list_of_layers] = useState(
            new GeoJsonLayer({ .... }),
            new GeoJsonLayer({ .... }),
            ..
            ..
)

When the user adds a new layer, we do the following:

set_list_of_layers([...list_of_layers, new GeoJsonLayer({
                id: "custom_0_xxx",
                data: get_file_values,
                visible: true
                ..
                ..
            })
        ])

At this point, extensions: [new DataFilterExtension({filterSize: N})] is not initialized in the layer as we do not know the filterSize.

On the browser-side, the user will have input options to filter layer points by defining boundaries on the additional information. One example of additional information is year-of-event, the user can choose a boundary min-max value, e.g. [2012, 2017] and the layer should filter out relevant data points using DataFilterExtension, showing only data-points that have occured within 2012-2017.

To edit the previous layer, we copy the props, destroy the previous layer and create a new layer as such (this is adapted loosely from our current code):

const prevProps = layer.props;
set_list_of_layers(list_of_layers.filter(layer => !layer.id === target_id));
set_list_of_layers([...list_of_layers,
            new GeoJsonLayer({
                ...prevProps,
                getFilterValue: d => d.properties["info1"],
                filterRange: [min, max],
                extensions: [new DataFilterExtension({filterSize: 1})]            
            })
        ])

Theoretically, this should create a new layer that shows only data-points within the filter range. However, all the data-points are non-visible.

A snippet of the layer props from console shows that the props are passed as expected, but is not visible. The filtering works if the initial layer is passed the extensions: new DataFilterExtension props, but this seems to be a workaround.

I was hoping to better understand how I can improve the implementation of editing the DataFilterExtension dynamically in my layers.

Cheers

[KhorZL]

Gotcha! This workaround works for me. On another note, is there a way to filter string values? For example, if my dataset has a list of countries and I would like to filter these countries based on the country’s name.

[KhorZL]

Closing this issue as I found a workaround the problem, which is to apply getFillColor conditionally. Thanks for all your help!