How to change pickable state of each feature?

[fifzteen]

Hi.
I would like to know how to change pickable state of each features in one Layer.
For example, In 'sampleLayer', datum id:1 and id:3 are pickable, id:2 is not pickable.

const data = [
  { id: 1, coordinates, someProp: true },
  { id: 2, coordinates, someProp: false },
  { id: 3, coordinates, someProp: true },
]
const filterCondition = (d) => d.someProp

new SomeLayer({
  id: 'sampleLayer',
  data,
  getColor: (d) => filterCondition(d) ?  [255, 255, 255, 255] : [0, 0, 0, 0]
  ...
})

Can I achive this by setting layer.nullPickingColor on target features of off-screen buffer? (Is it possible?)

---

yes. I understand that filtering data is a simply way to achive this.

const filteredData = data.filter((d) => condition(d))

new SomeLayer({
  data: filteredData,
  pickable: true,
  ...
})

But in my application,

• The original data is contained in MVT (uses in renderSubLayers of MVTLayer)
• Max data length per tile is about 0.1M
• The filterCondition dynamically changes by user interaction.

So the way above is poor performance due to changing data on every time condition changes.

I hope I can get some help.

[Pessimistress]

DataFilterExtension

[fifzteen]

Thanks for your reply.

Yes, I have already read the document of DataFilterExtension.
DataFilterExtension filters data by ranges, but my condition can be also discrete values.
For example,

const data = [
  { id: 1, coordinates, someName: 'foo-1' },
  { id: 2, coordinates, someName: 'bar-1' },
  { id: 3, coordinates, someName: 'bar-2' },
  { id: 4, coordinates, someName: 'foo-2' },
  { id: 5, coordinates, someName: 'bar-3' },
]

const filterCondition = (d) => [1,3,4].includes(d.id)
// or
const filterCondition = (d) => {
  const regex = new Regex('foo')
  return regex.test(d.someName)
}

It looks DataFilterExtension cannot handle filtering by discrete value, isn't it?

---

I think I may have found a solution.
set a out of globe position to the features not matched the condition in accessors like getPositon, getPath, getPolygon, ... and so on.

const OUT_POSITION = [0, -100]
const data = [
  { id: 1, coordinates, someName: 'foo-1' },
  { id: 2, coordinates, someName: 'bar-1' },
  { id: 3, coordinates, someName: 'bar-2' },
  { id: 4, coordinates, someName: 'foo-2' },
  { id: 5, coordinates, someName: 'bar-3' },
]

const filterCondition = (d) => [1,3,4].includes(d.id)

new ScatterplotLayer({
  data,
  getPosition: (d) => filterCondition(d) ? d.coordinates : OUT_POSITION,
  ...
})

https://codepen.io/fifzteen/pen/xxdQgLW

Are there likely to be functional problems with this solution?

[Pessimistress]

You can find an example here: #5217

[fifzteen]

I hadn't thought that way. That's great!
Thanks!