I am new to Deck.gl and was basically trying to update the layers whenever the data changes with on change event listener call. I have tried the setProps function but it is still not working. Please let me know what i am doing wrong.
Here is the Code
$('product_categories').addEventListener('change', (event) => {
var new_layers = [
new TextLayer({
id: 'text-layer2',
data: GEOJSON_FILE,
dataTransform: d => d.features,
getPosition: f => f.geometry.coordinates,
getText: f => f.properties.name,
sizeScale: 1,
getPixelOffset: [0, 15],
getSize: d => 20,
getColor: [0,0,0]
// backgroundColor: [0,0,0,0]
}),
new GeoJsonLayer({
id: 'locations2',
data: GEOJSON_FILE,
// Styles
filled: true,
pointRadiusMinPixels: 2,
pointRadiusScale: 2000,
getRadius: f => 2,
getFillColor: [200, 0, 80, 180],
// Interactive props
pickable: true,
autoHighlight: true,
controller: true,
getTooltip: info => info.object && `${info.object.properties.name}\n${info.object.properties.description}`,
onClick: info => info.object && alert(`${info.object.properties.description}`)
}),
new ArcLayer({
id: 'arcs2',
data: ARC_FILE,
dataTransform: d => d.features.slice(3,5),
// Styles
getSourcePosition: f => f.from.coordinates, // London
getTargetPosition: f => f.to.coordinates,
pickable: true,
autoHighlight: true,
getSourceColor: info => get_color(info, ''),
getTargetColor: info => get_color(info, 'target'),
getWidth: d => parseInt(((stop - start) * ((d.properties.volume - v_min) / (v_max - v_min))) + start)
})
]
console.log(deck.props.layers[2])
deck.setProps({layers: new_layers});
console.log(deck.props.layers[2]);
});
After i do setProps, the layer lifecycle appears as "Matched. State transferred from previous layer" and nothing happens on screen.
Any kind of help in this regard would be very much appreciated. Thanks.