0

I have a project using a React, Mapbox, and Deck.gl stack. I'm trying to query the features on a styled map but am having trouble implementing Deck.gl's getRenderedFeatures function, even after looking at the documentation.

My current React component:

<DeckGL
          {...deckGLProps}
          layers={layers}
          onViewportChange={() => console.log(mapRef)}
          ref={mapRef}
          getRenderedFeatures={(e) => console.log(e)}
        >
          <StaticMap
            ref={mapRef}
            visible={!level}
            {...staticMapProps}
            {...viewport}
            mapStyle={mapStyle[0]}
          />
        </DeckGL>

I understand that querying getRenderedFeatures on onViewportLoad is recommended, but I can't find an implementation that works.

Does anyone have a working implementation of getRenderedFeatures or a link to better documentation on the function?

mmz
  • 1,011
  • 1
  • 8
  • 21

1 Answers1

1

Are you using MVTLayer right?

getRenderedFeatures is a method of MVTLayer class, you need to access it from here, not from the deck instance.

The logic could be:

  1. Render the MVTLayer
  2. Listen onViewStateChange from the deck instance with some debounce
  3. Then call getRenderedFeatures

Something like:

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

const YourMVTLayer = new MVTLayer({ ... });

function getViewportFeatures() {
  const viewportFeatures = YourMVTLayer.getRenderedFeatures();
  console.log(viewportFeatures);
}

// render
<DeckGL
 ...
 layers={[YourMVTLayer]}
 onViewportChange={debounce(getViewportFeatures, 500)}
/>

Here another example using the scripting API

AdriSolid
  • 2,570
  • 1
  • 7
  • 17
  • Thanks again! This answered the question I posed, so I accepted the answer. I was wondering, though: is it possible to get features from a Mapbox style? Say I have a heatmap of polygons and want to query the values – mmz Jul 27 '21 at 17:42