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.
You will need to wait until mapLoad
s, 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);
}, []);