1

I'm trying to replicate this example from the Mapbox documentation in React and Deck.gl. I've discovered the getRenderedFeatures function in Deck.gl, helped by the answer to this question.

My confusion stems from creating an MVTLayer with the style I want to query. My current code:

export default function Map() {
  const PopulationLayer = new MVTLayer({
    data: "mapbox://styles/mapbox/streets-v11",
    getFillColor: [192, 192, 192],
    pointRadiusMinPixels: 3,
    uniqueIdProperty: "cartodb_id",
    pickable: true,
  });

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

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

  const view = {
    latitude: 41.4,
    longitude: 2.18,
    zoom: 5,
  };

  return (
    <>
      <DeckGL
        container={"map"}
        mapStyle={"mapbox://styles/mapbox/streets-v11"}
        initialViewState={view}
        controller={true}
        layers={[PopulationLayer]}
        onViewStateChange={debounce(getViewportFeatures, 500)}
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
      >
        <StaticMap mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN} />
      </DeckGL>
    </>
  );
}

This line - data: "mapbox://styles/mapbox/streets-v11" - is giving me an error: Unhandled Rejection (Error): An error occurred fetching TileJSON: TypeError: Failed to fetch. I assume this implies that MVTLayer was unable to parse the Mapbox style.

Is it possible to use MVTLayer with Mapbox styles? Is there an alternative way of achieving this? I ultimately want to use a custom style that contains a heatmap that shows the heatmaps values on hover. Something along these lines. I figured that getting this to work on a standard style was a good first step.

mmz
  • 1,011
  • 1
  • 8
  • 21

0 Answers0