Atlaslog
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.

Last verified 2026-11-03 · Multiple versions · Cite this page
Applies to: deck.gl
Symptom
Checklist
  1. Print every layer id with layerName and visible from layerManager.getLayers().
  2. Compare the printed count with the number of layers constructed.
  3. Look for generic ids such as 'points', 'layer1' or ids built from array indices.
  4. 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
All 120 field notesChinese originalRunnable examples
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
Cite this page

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).