Atlaslog / Field Notes / deck.gl visualization
Field note · deck.gl visualization
Duplicate layer ids make one legend toggle hide both layers
Quick answer
Two layers share the id 'points', so the diff treats the second as an update of the first and only one layer exists. Toggling one legend entry then changes the other, and getLayers() returns a single record.
Symptom
- Turning off the stations legend entry also removes the alarms layer, and both return together.
- layerManager.getLayers() returns one entry while the code constructed two.
- Deleting an item from a loop-generated list shifts indices and layers begin reusing stale state.
Checklist
- Print every layer id with layerName and visible from layerManager.getLayers().
- Compare the printed count with the number of layers constructed.
- Look for generic ids such as 'points', 'layer1' or ids built from array indices.
- Check whether ids contain timestamps or random numbers.
Fix
Give each layer a stable business-prefixed id such as 'station-points', 'alarm-points' or 'district-' + g.code, and toggle visibility through the visible prop instead of rebuilding the layer list.
Code
deck.layerManager.getLayers().forEach(function (l, i) {
console.log(i, l.id, l.constructor.layerName, l.props.visible);
});
// 0 points ScatterplotLayer true
// 只有一条,但代码创建了两个var layers = [
new deck.ScatterplotLayer({
id: 'station-points',
data: stations,
getPosition: function (d) { return [d.lng, d.lat]; },
getRadius: 6,
radiusUnits: 'pixels',
getFillColor: [23, 162, 184]
}),
new deck.ScatterplotLayer({
id: 'alarm-points',
data: alarms,
getPosition: function (d) { return [d.lng, d.lat]; },
getRadius: 9,
radiusUnits: 'pixels',
getFillColor: [220, 53, 69],
pickable: true
})
];
Watch out
- Generating a new id on every render forces deck.gl to destroy and recreate all layers, causing flicker, lost picking state and slow memory growth.
- Leaving the old layer instance in place after filtering the array keeps its state and keeps it rendering.
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
Atlaslog (2026). Duplicate layer ids make one legend toggle hide both layers. https://www.jingweizhi.com/en/cookbook/deckgl-layer-id-duplicate.html (accessed 2026-11-03).