DataFilterExtension filter data randomly depending on the zoom

[am2222]

Hi,

So I noticed some of the layers like IconLayer in deckgl renders the entire dataset in lower zoom levels. Which can be unnecessary.
I was wondering if there is any ways to limit features that are being rendered by zoom level? Like in zoom level 1 render 20% and in zoom level lets say 10 render 100% of points in the view?

Thanks!

[Pessimistress]

If your data is distributed uniformly you could try assign each point a random number:

getFilterValue: d => Math.random(),
filterRange: [0, 1 - 2 ** (-zoom)]

Otherwise CollisionFilterExtension will work in a more controlled fashion.

[Pessimistress]

You should not call setProps in React. Pass new layers value to your DeckGL component.

[am2222]

Thanks @Pessimistress . So I changed it to load layers on zoom change. But it is still glitchy. Do you think passing entire layer cause the deckgl try reload entire data again? If I disable zoom dependent filter its glitches goes away

const MainMap = () => {

  const [layers, setLayers] = useState([])
  const [data, setData] = useState<arrow.Table<any>>()
  const deckInstance = createRef<DeckGL>();
  const [zoom, setZoom] = useState(0)

  const handleRequest = debounce((viewState) => {
    const { zoom } = viewState;
    setZoom(zoom)
  })

  useEffect(() => {
    const load = async () => {
      const data = await fetch(GEOARROW_POINT_DATA);
      const buffer = await data.arrayBuffer();
      const table = arrow.tableFromIPC(buffer);
      setData(table)
    }
    load()
  }, [])

  useEffect(() => {
    const changeFilter = async (zoom:number) => {
      if(!data){
        return
      } 
      const layers_ = [
        new GeoArrowIconLayer({
          id: "geoarrow-points",
          data: data,
          billboard: false,
          // Pre-computed colors in the original table
          getFillColor: data.getChild("colors")!,
          opacity: 0.1,
          getIcon:d=>'motor-boat',
          getSize: 40,
          extensions: [new DataFilterExtension({ filterSize: 1 })],
          getFilterValue: d => Math.random(),
          filterRange: [0, 1-2  ** (-zoom)],
          updateTriggers: {
            filterRange: zoom
          },
          iconAtlasUrlConfig: '/motor-boat-32.png',
          iconMapping: {
            "motor-boat": {
              "x": 0,
              "y": 0,
              "width": 32,
              "height": 32,
              "anchorY": 32,
              "mask": true
            }
          },
          autoHighlight: true,
          highlightColor: [0, 255, 0],
          radiusMinPixels: 0.1,
          pickable: true,
          onClick:onClick
        }),
      ];
      setLayers(layers_)
      console.log('setLayers')
    }
    changeFilter(zoom)
  }, [zoom,  data])


  return (
    <div>
      <InfoPanel
        title="Tileset Metadata"
        categoryName="pmtiles"
      >
      </InfoPanel>
      <DeckGL
        getCursor={() => "auto"}
        ref={deckInstance}
        layers={layers}
        views={new MapView({ repeat: true })}
        initialViewState={INITIAL_VIEW_STATE}
        controller
        onViewStateChange={({ viewState, interactionState }) => {
          if (!interactionState.inTransition && interactionState.isZooming) {
            handleRequest(viewState, 1)
          }
          console.log(viewState)
        }}

      >
        <Map
          initialViewState={{
            longitude: 0.45,
            latitude: 51.47,
            zoom: 11
          }}
          mapStyle="mapbox://styles/mapbox/light-v9"
          mapboxAccessToken={MAPBOX_TOKEN}
        >
        </Map>
      </DeckGL>
    </div>

  );
}

[Pessimistress]

The layers value should not be a state. If you really want to cache it (which you don't need to) use useMemo. You can find a basic example in https://deck.gl/docs/developer-guide/using-layers#updating-layers

updateTriggers is only for accessors (get* props).

You need to use a constant for iconMapping. Layers do not perform deep comparison on these deeply nested objects so it is considered a "new value" on shallow change.

Also your debounce is likely not working because you are creating a new function on every render. Check out useCallback. I don't think it's necessary anyways if you fix the above issues.

[am2222]

Thanks @Pessimistress I am refactoring my code and will let you know about its results.

I thought adding layers each time will result in adding them to the map. It seems deckgl manages this by itself to avoid remove/adding them every time.

[am2222]

@Pessimistress thanks for your help on this. so this is what I am trying

const layers = data?  [
new GeoArrowIconLayer({
      id: "geoarrow-points",
      data: data,
      billboard: false,
      // Pre-computed colors in the original table
      getFillColor: data?.getChild("colors")!,
      opacity: 0.1,
      getIcon:d=>'motor-boat',
      getSize: 40,
      extensions: [new DataFilterExtension({ filterSize: 1 })],
      getFilterValue: d => Math.random(),
      filterRange: [0, 1-2 ** (-zoom)],
      iconAtlasUrlConfig: 'http://localhost:5173/motor-boat-32.png',
      iconMappingConfig: 'http://localhost:5173/icon_config.json',
      autoHighlight: true,
      highlightColor: [0, 255, 0],
      pickable: true,
      onClick:onClick
    })
    
  ] : [];

and later set the layers in deckgl

 <DeckGL
        getCursor={() => "auto"}
        ref={deckInstance}
        layers={layers}
        views={new MapView({ repeat: true })}
        initialViewState={INITIAL_VIEW_STATE}
        controller
        onViewStateChange={({ viewState, interactionState }) => {
          if (!interactionState.inTransition && interactionState.isZooming) {
            setZoom(viewState.zoom)
          }
          
        }}

      />

However I still notice a lot of lags and I feel it is mainly due to the setZoom(viewState.zoom) calls. it updates the state and causes a full rerender. I need to find a way to avoid using setZoom state setter