reactjsmapboxmapbox-gl-jsdeck.gluse-ref

How to find all Mapbox layers in DeckGL?


I'm following this example that puts Mapbox labels on top of a layer. This seems to be written using the plain Mapbox package. I'm hoping to do the same for a map component in DeckGL.

The relevant code from the example:

  const map = new mapboxgl.Map({
      container: document.body,
      style: 'mapbox://styles/mapbox/light-v9',
      center: [-122.4, 37.79],
      zoom: 15,
      pitch: 60
    });

    map.on('load', () => {
      const firstLabelLayerId = map.getStyle().layers.find(layer => layer.type === 'symbol').id;

My code using DeckGL is:

      <DeckGL
        initialViewState={INITIAL_VIEW_STATE}
        layers={layers}
        onClick={expandTooltip}
        onViewStateChange={hideTooltip}
        onWebGLInitialized={onInitialized}
        views={MAP_VIEW}
        controller={{
          touchRotate: true,
          inertia: 600,
        }}
      >
        <StaticMap
          reuseMaps
          mapStyle={MAP_STYLE}
          preventStyleDiffing={true}
          mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
        />
      </DeckGL>

How can I access getStyle().layers in the above components? I tried using useRef, as in this simplified component:

const mapRef = useRef();
<DeckGL
        {...viewport}
        maxZoom={20}
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
        ref={mapRef}
      >

but found that it doesn't contain information about the component.


Solution

  • You will need to wait until mapLoads, something like:

    1 - Define a new ref:

    const mapRef = useRef();
    

    2 - Wait for map loads:

    <StaticMap
      ref={mapRef}
      onLoad={onMapLoad}
      ...otherProps
    />
    

    3 - Use getMap method. Now we are sure that Mapbox instance exists:

    const onMapLoad = useCallback(() => {
      const map = mapRef.current.getMap();
      const mapboxLayers = map.getStyle().layers;
      console.log(mapboxLayers);
    }, []);