How to trigger a function on zoom in DeckGL

Question

Currently my setViewState function is triggered on drag end using deckGL's built in events. I also want to trigger this when you zoom in or out. It doesnt look like there is any built in onZoomEnd event I can use. Are there any ways to achieve this?

I have tried onZoom which doesnt seem to exist and monitoring the state change of viewstate which triggers too often as I want to send a request to a DB as either the latitude or longitude or zoom state changes.

Current config for DeckGL object:

  return (
    <DeckGL
      layers={layers}
      initialViewState={viewState}
      effects={[lightingEffect]}
      controller={true}
      onDragEnd={(info,evt) => setViewState(info.viewport)}
      onClick={ (e) => {
            if (e.object){
              setSelected(e.object.properties.id)
            }
    }}>
...

score 1 · Answer 1 · answered Nov 02 '22 at 10:09

Try using onViewStateChange method with a debounce function, something like:

function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      fn.apply(this, args);
    }, ms);
  };
}

const handleRequest = debounce((viewState) => {
  const { latitude, longitude, zoom } = viewState;
  // Make request
})

<DeckGL
  onViewStateChange={({ viewState }) => handleRequest(viewState, 500)}
  ...
/>

How to trigger a function on zoom in DeckGL

1 Answers1